@extends('backend.plugins.consultancy_crm.layouts.master')
@section('content')
    <div class="content" id="bg_content">
        <div class="pt-6 pb-4">
            <div class="container d-flex justify-content-between flex-stack">
                <div class="d-flex align-items-center me-3">
                    <span class="h-20px border-gray-200 border-start mx-2"></span>
                    <ul class="breadcrumb breadcrumb-separatorless  fs-7 my-1">
                        <li class="breadcrumb-item">
                            <a href="{{route('cmst.dashboard')}}" class="text-dark">Dashboard</a>
                        </li>
                        <li class="breadcrumb-item text-dark">{{ $heading }}</li>
                    </ul>
                </div>
                <div class="">
                    <a href="{{route('cmst.dashboard')}}" class="btn btn-dark rounded-0">Back</a>
                </div>
            </div>
        </div>
        <div class="container pt-3">
            <div class="card card-action mb-4">
                <div class="card-header py-3 d-flex justify-content-between">
                    <div class="d-flex align-items-center">
                        <select class="form-select rounded-0 me-2 w-50">
                            <option selected>Tasks Type</option>
                            <option value="1">All Tasks</option>
                            <option value="2">My Task</option>
                            <option value="3">Task Created me</option>
                            <option value="3">Reminder</option>
                        </select>
                        <form class="d-flex" role="search">
                            <input class="form-control me-0 rounded-0" type="search" placeholder="Search Task"
                                aria-label="Search">
                            <button class="btn btn-primary rounded-0" type="submit"><i class="bi bi-search"></i></button>
                        </form>
                    </div>
                    <div>
                        <button type="button" class="btn btn-primary btn-md shadow-none rounded-0" data-bs-toggle="modal"
                            data-bs-target="#createTask">Crate Task
                        </button>
                    </div>
                </div>
                <div class="card-body px-0">
                    <div class="table">
                        <table class="table border ">
                            <thead class="table-dark">
                                <tr>
                                    <th class="text-white">SN</th>
                                    <th class="text-white">Title</th>
                                    <th class="text-white">Status</th>
                                    <th class="text-white">Assigned to</th>
                                    <th class="text-white">Created At </th>
                                    <th class="text-white">Last Update </th>
                                    <th class="text-white">Added By </th>
                                    <th class="text-white">Action</th>
                                </tr>
                            </thead>
                            <tbody class="table-group-divider">
                                <tr>
                                    <td>1</td>
                                    <td class="fw-normal">
                                        <p class="mb-0">Sample Documents for Australia apply</p>
                                        <small>Issue#2 · created 6 months ago by Prayash Kumar Shrestha</small>
                                    </td>
                                    <td>
                                        <span class="d-block"><small
                                                class="badge rounded-pill bg-success">Pending</small></span>
                                    </td>
                                    <td>
                                        <small class="badge rounded-pill bg-danger">Phuldev</small>
                                    </td>
                                    <td>Dec 14, 2022</td>
                                    <td>6 day ago</td>
                                    <td>Admin</td>
                                    <td class="py-0">
                                        <div class="dropdown">
                                            <button class="btn btn-light btn-sm" type="button" data-bs-toggle="dropdown"
                                                aria-expanded="false">
                                                <i class="bi bi-three-dots-vertical"></i>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li><a class="dropdown-item" href="#">Tags Applicant</a></li>
                                                <li><a class="dropdown-item" href="#">Comments</a></li>
                                                <li><a class="dropdown-item" href="#">Edit</a></li>
                                                <li><a class="dropdown-item" href="#">Delete</a></li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                            <tfoot>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- add Applicant -->
        <div class="modal fade" id="createTask" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
            aria-labelledby="createTaskLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header py-3">
                        <h1 class="modal-title fs-5" id="createTaskLabel">
                            Create New Task
                        </h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">

                        </button>
                    </div>
                    <div class="modal-body pt-0">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-floating mb-3">
                                    <input type="text" class="form-control form-control-md" id="floatingInput"
                                        placeholder="Task Title">
                                    <label for="floatingInput">Title (required)</label>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-floating mb-3">
                                    <select class="form-select" id="floatingSelect"
                                        aria-label="Floating label select example">
                                        <option selected>Type</option>
                                        <option value="1">USA</option>
                                        <option value="2">Australia</option>
                                        <option value="3">UK</option>
                                    </select>
                                    <label for="floatingSelect">Task Type</label>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-floating mb-3">
                                    <select class="form-select" id="floatingSelect"
                                        aria-label="Floating label select example">
                                        <option selected>Phuldev</option>
                                        <option value="1">USA</option>
                                        <option value="2">Australia</option>
                                        <option value="3">UK</option>
                                    </select>
                                    <label for="floatingSelect">Assignee</label>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-floating mb-3">
                                    <textarea class="form-control" placeholder="Leave a description here" id="floatingTextarea"></textarea>
                                    <label for="floatingTextarea">Description</label>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-floating mb-3">
                                    <input type="date" class="form-control form-control-md" id="floatingInput"
                                        placeholder="Tags">
                                    <label for="floatingInput">Deadline Date *
                                    </label>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-floating mb-3">
                                    <input type="time" class="form-control form-control-md" id="floatingInput"
                                        placeholder="1998-04-04">
                                    <label for="floatingInput">Deadline Time</label>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-floating mb-3">
                                    <input type="datetime-local" class="form-control form-control-md" id="floatingInput"
                                        placeholder="1998-04-04">
                                    <label for="floatingInput">Due Date</label>
                                </div>
                            </div>

                            <div class="col-lg-3">
                                <div class="form-check pt-3">
                                    <input class="form-check-input" type="checkbox" value=""
                                        id="flexCheckChecked" checked>
                                    <label class="form-check-label" for="flexCheckChecked">
                                        Quick appointment
                                    </label>
                                </div>
                            </div>
                            <div class="col-lg-1">
                                <div class="form-check pt-3">
                                    <input class="form-check-input" type="checkbox" value=""
                                        id="flexCheckChecked" checked>
                                    <label class="form-check-label" for="flexCheckChecked">
                                        Email
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save Task</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection