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

<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">
                    <i class="fe fe-download-cloud me-2 fs-14"></i> 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="card-header border-bottom-0 pt-0 ps-0 pe-0 pb-2 d-flex">
                        <div>
                            <div class="card-title">Tasks</div> 
                        </div>
                         <div class="ms-auto d-flex flex-wrap gap-2">
                            <div class="contact-search3 me-3 ">
                                <button type="button" class="btn border-0"><i class="fe fe-search fw-semibold text-muted" aria-hidden="true"></i></button>
                                <input type="text" class="form-control h-6" id="typehead1" placeholder="Search here..." autocomplete="off">
                            </div>
                        </div> 
                    </div>
                    <div class="table-responsive tasks">
                        <table class="table card-table table-vcenter text-nowrap mb-0 border">
                            <thead>
                                <tr>
                                    <th class="wd-lg-10p">Task</th>
                                    <th class="wd-lg-20p text-center">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">{{ $task->name }}</label>
                                            </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 class="{{ $task->periority == 'High' ? 'text-danger' : ($task->periority == 'Medium' ? 'text-warning' : 'text-primary') }}">{{ $task->periority }}</td>
                                        <td>
                                            <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>