@extends('layout.master')
@section('content')

<style>
.select2-container {
  z-index: 1050 !important;
}
</style>

<div class="main-content app-content">
  <div class="container-fluid">
    <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb">
      <div>
        <h2 class="main-content-title fs-24 mb-1">Tasks</h2>
        <ol class="breadcrumb mb-0">
          <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
          <li class="breadcrumb-item active" aria-current="page">Task List</li>
        </ol>
      </div>
      <div class="d-flex">
        <div class="justify-content-center">
          @can('task show')
          <a type="button" href="{{ route('task.create') }}"
            class="btn btn-primary my-2 btn-icon-text d-inline-flex align-items-center">
            New Task
          </a>
          @endcan()
        </div>
      </div>
    </div>
    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
      {{ session('success') }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif
    <div class="col-lg-12">
      <div class="card custom-card mg-b-20 tasks">
        <div class="card-body">

          <div class="table-responsive tasks">
            <table id="delete-datatable_wrapper" class="table card-table mt-3 text-nowrap border">
              <thead>
                <tr>
                  <th class="wd-lg-10p">Project Id</th>
                  <th class="wd-lg-10p">Task</th>
                  <th class="wd-lg-20p">Team</th>
                  <th class="wd-lg-20p">Priority</th>
                  <th class="wd-lg-20p">Status</th>
                  <th class="wd-lg-20p">Action</th>
                </tr>
              </thead>
              <tbody>
                @foreach ($tasks as $task)
                <tr>
                  <td class="fw-medium">
                    <div class="form-check">
                      <input checked="" type="checkbox" class="form-check-input me-4 rounded">
                      <label class="form-check-label"><a
                          href="{{ route('project.show',$task->project_id) }}">{{ $task->project_id }}</a></label>
                    </div>
                  </td>
                  <td class="fw-medium">
                    <div class="form-check">
                      <input checked="" type="checkbox" class="form-check-input me-4 rounded">
                      <label class="form-check-label">{{ $task->name }}</label>
                    </div>
                  </td>
                  <td class="d-flex">
                    <button type="button" data-taskid="{{$task->id}}"
                      class="newbutton btn text-primary ms-2 d-flex align-items-center justify-content-center">
                      <i class="fa-solid fa-plus ms-1"></i>
                    </button>
                    <!-- Select Field -->
                    <div class="show_{{ $task->id }}" style="display: none">
                      <select class="select2 selectnat" multiple data-selectTask="{{ $task->id }}">
                        @foreach ($task->projectteam->projectteam as $emp)
                        <option data-selectTask="{{ $task->id }}" class="members" value="{{ $emp->id }}"
                          @foreach ($task->taskteam  as $team)
                            {{ $team->user_id == $emp->user_id ? 'selected' : '' }}
                          @endforeach>
                          {{ $emp->user->name ?? 'no name' }}
                        </option>
                        @endforeach
                      </select>

                    </div>
                    <div class="avatar-list-stacked my-auto float-end" id="imageshow">
                      @foreach ($task->taskteam as $team)
                      <div class="avatar avatar-rounded avatar-sm">
                        <img alt="avatar" class="rounded-circle" title="{{ $team->user->name ?? 'no name' }}"
                          src="{{ $team->user->profile ?? 'no image' }}">
                      </div>
                      @endforeach

                      <input type="hidden" class="taskid inputField my-input" data-id="{{ $task->id }}">

                      
                  </td>
                  <!-- <td>
                    <div class="btn-group dropend">
                      <button type="button" class="btn btn-primary-ghost dropdown-toggle p-0 border-0"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        {{ $task->periority }} Team
                      </button>
                      <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="javascript:void(0);">saeed</a></li>
                        <li><a class="dropdown-item" href="javascript:void(0);">hashir</a></li>
                        <li><a class="dropdown-item" href="javascript:void(0);">shahzaib</a></li>
                      </ul>
                    </div>
                  </td> -->
                  <!-- <td class="text-nowrap">
                    <div class="avatar-list-stacked my-auto float-end">
                      @foreach ($task->taskteam as $team )
                      <div class="avatar avatar-rounded avatar-sm">
                        <img alt="avatar" class="rounded-circle" title="{{ $team->user->name ?? "no name" }}"
                          src="{{ $team->user->profile ?? "no image" }}">
                      </div>
                      @endforeach

                    </div>
                  </td> -->
                  <td>
                    <div class="btn-group dropend">
                      <button type="button"
                        class="periority_show_{{ $task->id }} btn btn-primary-ghost dropdown-toggle p-0 border-0"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        {{ $task->periority }}
                      </button>
                      <ul class="dropdown-menu">
                        <li><a class="dropdown-item periority" data-id="High" data-taskid="{{ $task->id }}"
                            href="javascript:void(0);">High</a></li>
                        <li><a class="dropdown-item periority" data-id="Medium" data-taskid="{{ $task->id }}"
                            href="javascript:void(0);">Medium</a></li>
                        <li><a class="dropdown-item periority" data-id="Low" data-taskid="{{ $task->id }}"
                            href="javascript:void(0);">Low</a></li>
                      </ul>
                    </div>
                  </td>
                  <!-- <td
                    class="{{ $task->periority == 'High' ? 'text-danger' : ($task->periority == 'Medium' ? 'text-warning' : 'text-primary') }}">
                    {{ $task->periority }}</td> -->
                  <td>
                    <div class="btn-group dropend">
                      <button type="button"
                        class="status_show_{{ $task->id }} btn btn-primary-ghost dropdown-toggle p-0 border-0"
                        data-bs-toggle="dropdown" aria-expanded="false">{{ $task->status }}
                      </button>
                      <ul class="dropdown-menu p-1">
                        <!-- <li><a class="dropdown-item" href="javascript:void(0);">In Progress</a></li> -->
                        <li><a class="dropdown-item status" data-id="{{ $task->id }}" data-status="Rejected"
                            href="javascript:void(0);">Rejected</a></li>
                        <li><a class="dropdown-item status mt-2" data-id="{{ $task->id }}" data-status="Open"
                            href="javascript:void(0);">Open</a></li>
                        <li><a class="dropdown-item status mt-2" data-id="{{ $task->id }}" data-status="Completed"
                            href="javascript:void(0);">Completed</a></li>
                      </ul>
                    </div>
                    <!-- <span class="badge rounded-pill 
                                                {{ $task->status == 'In Progress' ? 'bg-warning' : 
                                                ($task->status == 'rejected' ? 'bg-danger' : 
                                                ($task->status == 'Open' ? 'bg-success' : 
                                                ($task->status == 'Completed' ? 'bg-success' : 'bg-primary'))) }}">
                                                {{ $task->status }}
                                            </span>  -->
                  </td>
                  <td>
                    @can( 'task show')
                    <a href="{{ route('task.show',$task->id) }}" class="btn btn-sm btn-success btn-wave">
                      <i class="ri-eye-line align-middle "></i>
                    </a>
                    @endcan()
                    @can( 'task edit')

                    <a href="{{ route('task.edit',$task->id) }}" class="btn btn-sm btn-warning btn-wave">
                      <i class="ri-edit-line align-middle"></i>
                    </a>
                    @endcan()
                    @can( 'task delete')

                    <a onclick="confirmDelete('{{ route('task.delete', $task->id) }}')"
                      class="btn btn-sm btn-danger">Delete</a>

                    @endcan()

                  </td>

                </tr>
                @endforeach

              </tbody>
            </table>
            {{ $tasks->links() }}
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
@endsection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
function confirmDelete(url) {
  Swal.fire({
    title: "Are you sure?",
    text: "This action cannot be undone!",
    icon: "warning",
    showCancelButton: true,
    confirmButtonColor: "#d33",
    cancelButtonColor: "#3085d6",
    confirmButtonText: "Yes, delete it!",
    cancelButtonText: "Cancel",
  }).then((result) => {
    if (result.isConfirmed) {
      window.location.href = url; // Redirect to the delete route
    }
  });
}
</script>
<script>




$(document).ready(function() {
  $('#choices-multiple-remove-button').select2({
    dropdownParent: $('#example22') // Ensures Select2 works inside the modal
  });
});
</script>
<!-- 
<script>
$(document).ready(function() {
  $('#choices-multiple-remove-button').select2({
    dropdownParent: $('#example22') // Ensures dropdown stays inside modal
  });
});
</script> -->