@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">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/3.2.5/css/buttons.bootstrap5.min.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    .link {
        text-decoration: underline;
    }

    .select2-container .select2-selection--single {
        height: 38px !important;
        border: 1px solid #d9dee3;
        border-radius: 0.375rem;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 36px;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px;
    }
</style>

@section('content')



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

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

            <h5 class="fw-bold mb-1"><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>

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

                        </svg>

                    </a>

                </button>Pending Tasks</h5>

            <div>

            </div>

        </div>

    </div>

    <!-- Filters -->
    <div class="card mb-3 mt-3">
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <label class="form-label">Staff Name</label>
                    <select id="filter_name" class="form-select">
                        <option value="">All Staff</option>
                        @foreach($staffs as $staff)
                            <option value="{{ $staff->id }}">{{ $staff->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-4">
                    <label class="form-label">Project</label>
                    <select id="filter_project" class="form-select">
                        <option value="">All Projects</option>
                        @foreach($projects as $project)
                            <option value="{{ $project->project_name }}">{{ $project->project_name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-4 d-flex align-items-end">
                    <button class="btn btn-secondary" id="resetFilter">Reset</button>
                </div>
            </div>
        </div>
    </div>


    <div class="card border-0 shadow-sm rounded-4">





        <div class="card-header bg-white border-bottom rounded-top-4 py-3">

            <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">



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

                    <span class="text-muted small">Show</span>

                    <select id="customLength" class="form-select" style="width:80px;">

                        <option value="10">10</option>

                        <option value="25">25</option>

                        <option value="50">50</option>

                        <option value="100">100</option>

                    </select>

                    <span class="text-muted small">entries</span>

                </div>



                <div>

                    <input type="text" id="customSearch" class="form-control" placeholder="Search tasks..."
                        style="width:220px;">

                </div>



            </div>

        </div>



        <div class="table-responsive" style="max-height:500px; overflow-y:auto;">

            <table class="table table-hover align-middle mb-0" id="pointsHistoryTable">

                <thead class="table-light sticky-top">

                    <tr>

                        <th width="60">SNO</th>

                        <th>Project</th>

                        <th>Module</th>

                        <th>Task</th>

                        <th>Assigned Employee</th>

                        <th>Status</th>

                        <th width="120">Action</th>

                    </tr>

                </thead>

                <tbody></tbody>

            </table>

        </div>



    </div>




    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

    <script>
        $(document).ready(function () {

            const taskUrlTemplate = "{{ route('task_description', '') }}/";

            // Select2 on the filter dropdowns
            $('#filter_name, #filter_project').select2({width: '100%'});

            const table = $('#pointsHistoryTable').DataTable({
                processing: true,
                ajax: {
                    url: "{{ route('admin_hold_tasks_data') }}",
                    dataSrc: '',
                    data: function (d) {
                        d.staff_id = $('#filter_name').val();
                        d.project = $('#filter_project').val();
                    }
                },
                pageLength: 10,
                lengthChange: false,
                searching: true,
                ordering: false,
                dom: 't<"d-flex justify-content-between align-items-center px-3 py-3"ip>',
                columns: [
                    {
                        data: null,
                        render: function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    {data: 'project'},
                    {data: 'module'},
                    {data: 'task'},
                    {
                        data: 'employee',
                        render: function (data) {
                            return `<span class="fw-semibold">${data}</span>`;
                        }
                    },
                    {
                        data: 'status',
                        render: function (data) {
                            return `<span class="badge rounded-pill px-3 py-2"
                            style="background:#fff3cd;color:#856404;">
                            <i class="ti tabler-clock me-1"></i>${data}</span>`;
                        }
                    },
                    {
                        data: null,
                        render: function (data, type, row) {
                            return `<a class="btn btn-sm btn-outline-primary rounded-pill px-3"
                            href="${taskUrlTemplate + row.id}">
                            <i class="ti tabler-eye me-1"></i> View</a>`;
                        }
                    }
                ]
            });

            $('#customLength').on('change', function () {
                table.page.len($(this).val()).draw();
            });

            $('#customSearch').on('keyup', function () {
                table.search(this.value).draw();
            });

            // Reload when a filter changes
            $('#filter_name, #filter_project').on('change', function () {
                table.ajax.reload();
            });

            // Reset
            $('#resetFilter').on('click', function () {
                $('#filter_name').val('').trigger('change.select2');
                $('#filter_project').val('').trigger('change.select2');
                table.ajax.reload();
            });
        });
    </script>
@endsection