@extends('Admin.layout')

@section('content')

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">

<style>
    .select2-container {
        width: 100% !important;
    }

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

    .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 36px !important;
        padding-left: 12px;
        padding-right: 30px;
    }

    .select2-container .select2-selection--single .select2-selection__arrow {
        height: 36px !important;
    }

    .select2-search--dropdown .select2-search__field {
        width: 100% !important;
        padding: 7px 10px;
        border: 1px solid #d9dee3 !important;
        border-radius: 5px;
        outline: none;
    }

    .table-scroll-wrapper {
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 5px;
    }

    .table-scroll-wrapper::-webkit-scrollbar {
        display: block !important;
        height: 10px;
    }

    .table-scroll-wrapper::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    .table-scroll-wrapper::-webkit-scrollbar-thumb {
        background: #b8b8b8;
        border-radius: 10px;
    }

    .table-scroll-wrapper::-webkit-scrollbar-thumb:hover {
        background: #909090;
    }

    #dept {
        width: 100% !important;
        min-width: 1450px !important;
        margin-bottom: 0 !important;
    }

    #dept th,
    #dept td {
        white-space: nowrap !important;
        vertical-align: middle !important;
    }

    #dept th:nth-child(1),
    #dept td:nth-child(1) {
        min-width: 70px;
    }

    #dept th:nth-child(2),
    #dept td:nth-child(2) {
        min-width: 130px;
    }

    #dept th:nth-child(3),
    #dept td:nth-child(3) {
        min-width: 130px;
    }

    #dept th:nth-child(4),
    #dept td:nth-child(4) {
        min-width: 130px;
    }

    #dept th:nth-child(5),
    #dept td:nth-child(5) {
        min-width: 140px;
    }

    #dept th:nth-child(6),
    #dept td:nth-child(6) {
        min-width: 400px;
    }

    #dept th:nth-child(7),
    #dept td:nth-child(7) {
        min-width: 180px;
    }

    #dept th:nth-child(8),
    #dept td:nth-child(8) {
        min-width: 130px;
    }

    #dept th:nth-child(9),
    #dept td:nth-child(9) {
        min-width: 100px;
    }

    .dt-search {
        display: none !important;
    }

    .filter-card {
        padding: 16px;
        border-bottom: 1px solid #eee;
    }

    @media (max-width: 767px) {
        #dept {
            min-width: 1400px !important;
        }
    }
</style>

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

            <a
                href="{{ route('admin.dashboard') }}"
                class="btn btn-icon bg-white waves-effect me-2"
                style="box-shadow: 0px 9px 12px -2px #66328E1F;"
            >
                <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"
                >
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                    <path d="M15 6l-6 6l6 6"/>
                </svg>
            </a>

            View Task

        </h5>
    </div>
</div>

<div class="card mt-5">

    <div class="filter-card">
        <div class="row g-3 align-items-end">

            <div class="col-12 col-md-3">
                <label class="form-label">
                    Project Name
                </label>

                <select
                    id="projectFilter"
                    class="form-select"
                    style="width:100%;"
                >
                    <option value="">All Projects</option>

                    @foreach($projects as $project)
                        <option value="{{ $project->id }}">
                            {{ $project->project_name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="col-12 col-md-3">
                <label class="form-label">
                    Staff Name
                </label>

                <select
                    id="staffFilter"
                    class="form-select"
                    style="width:100%;"
                >
                    <option value="">All Staff</option>

                    @foreach($staffs as $staff)
                        <option value="{{ $staff->id }}">
                            {{ $staff->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="col-12 col-md-3 ms-md-auto">
                <label class="form-label">
                    Search
                </label>

                <input
                    type="text"
                    id="customSearch"
                    class="form-control"
                    placeholder="Search task..."
                    autocomplete="off"
                >
            </div>

        </div>
    </div>

    <div class="card-body p-3">

        <div class="table-scroll-wrapper">

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

                <thead>
                    <tr>
                        <th>SNO</th>
                        <th>START DATE</th>
                        <th>DUE DATE</th>
                        <th>PROJECT</th>
                        <th>MODULE</th>
                        <th>TASK</th>
                        <th>ASSIGNED STAFF</th>
                        <th>STATUS</th>
                        <th>ACTION</th>
                    </tr>
                </thead>

                <tbody></tbody>

            </table>

        </div>

    </div>

</div>

<div
    class="modal fade"
    id="update"
    tabindex="-1"
    data-bs-backdrop="static"
    data-bs-keyboard="false"
>
    <div class="modal-dialog modal-sm modal-dialog-centered">

        <div class="modal-content rounded-4 px-4 py-5 text-center">

            <h5 class="fw-bold mb-3">
                Are you sure?
            </h5>

            <form action="">

                <div class="row">

                    <div class="col-lg-12 mb-3">

                        <label class="form-label d-block text-start">
                            Module
                        </label>

                        <input
                            type="text"
                            class="form-control"
                            value="Staff"
                        >

                    </div>

                    <div class="col-lg-12 mb-3">

                        <label class="form-label d-block text-start">
                            Task
                        </label>

                        <input
                            type="text"
                            class="form-control"
                            value="Create Staff"
                        >

                    </div>

                    <div class="col-lg-12 mb-3">

                        <label class="form-label d-block text-start">
                            Due Date
                        </label>

                        <input
                            type="text"
                            class="form-control"
                            value="12 Nov 2025"
                        >

                    </div>

                    <div class="col-lg-12">

                        <label class="form-label d-block text-start">
                            Assign To
                        </label>

                        <input
                            type="text"
                            class="form-control"
                            value="John"
                        >

                    </div>

                </div>

            </form>

            <div class="d-flex justify-content-center gap-3 mt-3">

                <button
                    type="button"
                    class="btn btn-outline-secondary px-4"
                    data-bs-dismiss="modal"
                >
                    Cancel
                </button>

                <button
                    type="button"
                    class="btn btn-primary px-4 fw-semibold"
                    id="finalSubmit"
                >
                    Update
                </button>

            </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.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
var jq = jQuery.noConflict();

jq(document).ready(function() {

    jq('#projectFilter').select2({
        placeholder: 'Select Project',
        allowClear: true,
        width: '100%'
    });

    jq('#staffFilter').select2({
        placeholder: 'Select Staff',
        allowClear: true,
        width: '100%'
    });

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

        processing: true,
        serverSide: true,

        autoWidth: false,

        ajax: {
            url: "{{ route('today_in_progress_data') }}",
            type: "GET",

            data: function(d) {
                d.project_id = jq('#projectFilter').val();
                d.staff_id = jq('#staffFilter').val();
            }
        },

        columns: [
            {
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                orderable: false,
                searchable: false
            },
            {
                data: 'start_date',
                name: 'start_date'
            },
            {
                data: 'due_date',
                name: 'due_date'
            },
            {
                data: 'project',
                name: 'project',
                orderable: false,
                searchable: false
            },
            {
                data: 'module',
                name: 'module',
                orderable: false,
                searchable: false
            },
            {
                data: 'task',
                name: 'task',
                orderable: false,
                searchable: false
            },
            {
                data: 'assigned_staff',
                name: 'assigned_staff',
                orderable: false,
                searchable: false
            },
            {
                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']
        ],

        pageLength: 10,

        language: {
            search: '',
            searchPlaceholder: 'Search',
            lengthMenu: '_MENU_'
        },

        drawCallback: function() {
            jq('#dept').css('min-width', '1450px');
        }

    });

    jq('#projectFilter').on('change', function() {
        table.ajax.reload();
    });

    jq('#staffFilter').on('change', function() {
        table.ajax.reload();
    });

    var searchTimer;

    jq('#customSearch').on('keyup', function() {

        clearTimeout(searchTimer);

        var value = jq(this).val();

        searchTimer = setTimeout(function() {
            table.search(value).draw();
        }, 300);

    });

});
</script>

@endsection