@extends('Admin.layout')

<link rel="stylesheet" href="https://cdn.datatables.net/2.3.4/css/dataTables.bootstrap5.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">



@section('content')

<meta name="csrf-token" content="{{ csrf_token() }}">

<div class="d-flex justify-content-between align-items-center mb-1">

    <!-- Left side -->

    <div class="d-flex align-items-center">

        <h5 class="mb-0">

            <button type="button" class="btn btn-icon bg-white waves-effect me-2"

                style="box-shadow: 0px 9px 12px -2px #66328E1F;">

                <a href="{{ route('admin.dashboard') }}">

                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"

                        stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"

                        class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left">

                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />

                        <path d="M15 6l-6 6l6 6" />

                    </svg>

                </a>

            </button>

            View Task

        </h5>

    </div>

</div>

<h6>Tasks</h6>

<div class="card p-2 mt-5">

    <div class="col-12 col-md-6 col-lg-4 ms-auto">

        <div class="d-flex justify-content-end align-items-center gap-2">



            <select id="statusFilter" class="form-select w-auto ">

                <option value="">All Status</option>

                <option value="Not Started">Not Started</option>

                <option value="In Progress">In Progress</option>

                <option value="Completed">Completed</option>

                <option value="Hold">Hold</option>

            </select>



            <button id="exp" class="btn buttons-collection btn-label-secondary dropdown-toggle me-4" tabindex="0"

                aria-controls="DataTables_Table_0" type="button" aria-haspopup="dialog" aria-expanded="false"><span><span

                        class="d-flex align-items-center gap-2"><i class="icon-base ti tabler-upload icon-xs me-sm-1"></i>

                        <span class="d-sm-inline-block">Export</span></span></span></button>





        </div>

    </div>



    <div class="card-datatable table-responsive pt-0">

        <div class="row card-header flex-column flex-md-row border-bottom mx-0 px-3">

            <div class="justify-content-between dt-layout-table">

                <div class=" justify-content-between align-items-center dt-layout-full table-responsive">

                    <table id="dept" class="table table-bordered">

                        <thead>

                            <tr>

                                <th>SNO</th>

                                <th class="text-nowrap">Start Date</th>

                                <th class="text-nowrap">Due Date</th>

                                <th>PROJECT</th>

                                <th>MODULE</th>

                                <th>TASK</th>

                                <th>ASSIGNED SATFF</th>

                                <th>STATUS</th>

                                <th>ACTION</th>



                            </tr>

                        </thead>

                        <tbody>



                        </tbody>

                    </table>

                </div>

            </div>

        </div>

    </div>

</div>

</div>



<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>

<script src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap5.js"></script>

<script src="https://cdn.ckeditor.com/ckeditor5/40.2.0/classic/ckeditor.js"></script>

<script>

    var jq = jQuery.noConflict();

    jq(document).ready(function() {

        var table = jq('#dept').DataTable({

            processing: true,

            serverSide: true,

            ajax: {

                url: "{{ route('today_tasks_data') }}",

                data: function(d) {

                    d.status = jq('#statusFilter').val();

                }

            },

            columns: [{

                    data: 'DT_RowIndex',

                    name: 'DT_RowIndex',

                    orderable: false,

                    searchable: false

                },

                {

                    data: 'start_date'

                },

                {

                    data: 'due_date'

                },

                {

                    data: 'project'

                },

                {

                    data: 'module',

                    name: 'module'

                },

                {

                    data: 'task',

                    name: 'task'

                },

                {

                    data: 'assigned_staff',

                    name: 'assigned_staff'

                },



                {

                    data: 'status',

                    name: 'status',

                    orderable: false,

                    searchable: false

                },

                {

                    data: 'action',

                    name: 'action',

                    orderable: false,

                    searchable: false

                },

            ],

            order: [

                [1, 'asc']

            ],

            lengthMenu: [

                [10, 25, 50, 100, -1],

                ["10", "25", "50", "100", "All"]

            ],

            language: {

                search: "",

                searchPlaceholder: "Search",

                lengthMenu: "_MENU_"

            }

        });

        jq('#statusFilter').on('change', function() {

            table.ajax.reload();

        });

    });

</script>



@endsection