@extends('Admin.layout')

@section('content')

<div class="page-view w-100">

    <!-- Header -->
    <div class="d-flex align-items-center justify-content-between gap-2 mb-3">

        <h3 class="mb-0 text-white fw-bold">
            Leave Report
        </h3>
        <a href="{{route('leave_report')}}" class="btn btn-primary">Leave Report</a>

    </div>


    <!-- Report Card -->
    <div class="card bank-card p-3 p-md-4 w-100">

        <!-- Table Header -->
        <div class="row g-3 align-items-center mb-3">

            <div class="col-12 col-md-6">

                <h5 class="text-white mb-0">
                    Leave Requests
                </h5>

            </div>


            <div class="col-12 col-md-6">

                <div class="d-flex flex-column flex-sm-row justify-content-md-end gap-2">

                    <!-- Page Length -->
                    <select id="pageLength"
                        class="form-select form-select-sm"
                        style="width:100%; max-width:100px;">

                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="all">All</option>

                    </select>


                    <!-- Search -->
                    <input type="search"
                        id="leaveSearch"
                        class="form-control form-control-sm"
                        placeholder="Search Leave..."
                        style="width:100%; max-width:300px;">

                </div>

            </div>

        </div>


        <!-- Table -->
        <div class="table-responsive bank-table-wrapper w-100">

            <table id="leaveTable"
                class="table align-middle text-nowrap mb-0 w-100">

                <thead>
                    <tr>

                        <th>#</th>
                        <th>FROM DATE</th>
                        <th>TO DATE</th>
                        <th>Staff Name</th>
                        <th>REASON</th>
                        <th>STATUS</th>
                        <th>ACTION</th>

                    </tr>
                </thead>

                <tbody></tbody>

            </table>

        </div>

    </div>

</div>


<!-- ========================================= -->
<!-- APPROVE MODAL -->
<!-- ========================================= -->

<div class="modal fade"
    id="approveLeaveModal"
    tabindex="-1"
    aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content bank-card border-0">

            <!-- Modal Header -->
            <div class="modal-header border-secondary">

                <h5 class="modal-title text-white">

                    <i class="ti ti-check me-2 text-success"></i>

                    Approve Leave

                </h5>

                <button type="button"
                    class="btn-close btn-close-white"
                    data-bs-dismiss="modal">
                </button>

            </div>


            <!-- Modal Body -->
            <div class="modal-body">

                <input type="hidden" id="leaveId">


                <!-- From Date -->
                <div class="mb-3">

                    <label class="form-label text-white">
                        From Date
                    </label>

                    <input type="text"
                        id="modalFromDate"
                        class="form-control"
                        readonly>

                </div>


                <!-- To Date -->
                <div class="mb-3">

                    <label class="form-label text-white">
                        To Date
                    </label>

                    <input type="text"
                        id="modalToDate"
                        class="form-control"
                        readonly>

                </div>


                <!-- Reason -->
                <div class="mb-3">

                    <label class="form-label text-white">
                        Reason
                    </label>

                    <textarea id="modalReason"
                        class="form-control"
                        rows="3"
                        readonly></textarea>

                </div>


                <div class="alert alert-warning mb-0">

                    <i class="ti ti-alert-circle me-1"></i>

                    Are you sure you want to approve this leave request?

                </div>

            </div>


            <!-- Modal Footer -->
            <div class="modal-footer border-secondary">

                <button type="button"
                    class="btn btn-outline-secondary"
                    data-bs-dismiss="modal">

                    Cancel

                </button>


                <button type="button"
                    class="btn btn-success"
                    id="confirmApprove">

                    <i class="ti ti-check me-1"></i>

                    Approve Leave

                </button>

            </div>

        </div>

    </div>

</div>


<!-- ========================================= -->
<!-- DATATABLE CSS -->
<!-- ========================================= -->

<link rel="stylesheet"
    href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">


<!-- ========================================= -->
<!-- JQUERY -->
<!-- ========================================= -->

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


<!-- ========================================= -->
<!-- DATATABLE JS -->
<!-- ========================================= -->

<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>


<script>

$(document).ready(function () {


    /* =========================================
       LEAVE DATA
    ========================================= */

    const data = [

        {
            id: 1,
            from_date: '06 Oct 2026',
            to_date: '07 Oct 2026',
            staff_name: 'John Doe',
            reason: 'Personal work',
            status: 'Not Approved'
        },

        {
            id: 2,
            from_date: '10 Oct 2026',
            to_date: '12 Oct 2026',
            staff_name: 'Jane Smith',
            reason: 'Family function',
            status: 'Approved'
        },

        {
            id: 3,
            from_date: '15 Oct 2026',
            to_date: '15 Oct 2026',
            staff_name: 'Bob Johnson',
            reason: 'Medical appointment',
            status: 'Not Approved'
        },

        {
            id: 4,
            from_date: '20 Oct 2026',
            to_date: '22 Oct 2026',
            staff_name: 'Alice Williams',
            reason: 'Personal reasons',
            status: 'Approved'
        },

        {
            id: 5,
            from_date: '25 Oct 2026',
            to_date: '26 Oct 2026',
            staff_name: 'Charlie Brown',
            reason: 'Family emergency',
            status: 'Not Approved'
        },

        {
            id: 6,
            from_date: '30 Oct 2026',
            to_date: '31 Oct 2026',
            staff_name: 'David Wilson',
            reason: 'Personal work',
            status: 'Not Approved'
        }

    ];


    /* =========================================
       DATATABLE
    ========================================= */

    const leaveTable = $('#leaveTable').DataTable({

        data: data,

        pageLength: 10,

        lengthChange: false,

        searching: true,

        ordering: true,

        order: [],

        info: true,

        autoWidth: false,

        dom: 'rtip',


        columns: [

            /* # */

            {
                data: null,

                orderable: false,

                searchable: false,

                render: function (data, type, row, meta) {

                    return meta.row + 1;

                }
            },


            /* FROM DATE */

            {
                data: 'from_date',

                render: function (data) {

                    return `
                        <span>

                            <i class="ti ti-calendar-event me-1 text-warning"></i>

                            ${data}

                        </span>
                    `;

                }
            },


            /* TO DATE */

            {
                data: 'to_date',

                render: function (data) {

                    return `
                        <span>

                            <i class="ti ti-calendar-event me-1 text-warning"></i>

                            ${data}

                        </span>
                    `;

                }
            },

            {
                data: 'staff_name',

                render: function (data) {

                    return `
                        <span>
                            ${data || '-'}
                        </span>
                    `;

                }
            },

            /* REASON */

            {
                data: 'reason',

                render: function (data) {

                    return `
                        <span>
                            ${data || '-'}
                        </span>
                    `;

                }
            },


            /* STATUS */

            {
                data: 'status',

                render: function (data) {

                    if (data === 'Approved') {

                        return `
                            <span class="badge bg-success">

                                <i class="ti ti-check me-1"></i>

                                Approved

                            </span>
                        `;

                    }


                    return `
                        <span class="badge bg-warning text-dark">

                            <i class="ti ti-clock me-1"></i>

                            Not Approved

                        </span>
                    `;

                }
            },


            /* ACTION */

            {
                data: null,

                orderable: false,

                searchable: false,

                render: function (data, type, row) {

                    if (row.status === 'Approved') {

                        return `
                            <span class="text-success fw-semibold">

                                <i class="ti ti-circle-check me-1"></i>

                                Approved

                            </span>
                        `;

                    }


                    return `
                        <button type="button"
                            class="btn btn-sm btn-outline-success approve-leave-btn"
                            data-id="${row.id}">

                            <i class="ti ti-check me-1"></i>

                            Approve

                        </button>
                    `;

                }
            }

        ]

    });


    /* =========================================
       SEARCH
    ========================================= */

    $('#leaveSearch').on('keyup', function () {

        leaveTable
            .search(this.value)
            .draw();

    });


    /* =========================================
       PAGE LENGTH
    ========================================= */

    $('#pageLength').on('change', function () {

        const value = this.value;


        if (value === 'all') {

            leaveTable
                .page
                .len(-1)
                .draw();

        } else {

            leaveTable
                .page
                .len(parseInt(value))
                .draw();

        }

    });


    /* =========================================
       OPEN APPROVE MODAL
    ========================================= */

    $(document).on('click', '.approve-leave-btn', function () {

        const id = $(this).data('id');


        const leave = data.find(function (item) {

            return item.id == id;

        });


        if (!leave) {
            return;
        }


        /* Fill Modal */

        $('#leaveId').val(leave.id);

        $('#modalFromDate')
            .val(leave.from_date);

        $('#modalToDate')
            .val(leave.to_date);

        $('#modalReason')
            .val(leave.reason);


        /* Show Modal */

        const modalElement =
            document.getElementById('approveLeaveModal');


        const modal =
            bootstrap.Modal.getOrCreateInstance(modalElement);


        modal.show();

    });


    /* =========================================
       CONFIRM APPROVE
    ========================================= */

    $('#confirmApprove').on('click', function () {

        const id = $('#leaveId').val();


        const leave = data.find(function (item) {

            return item.id == id;

        });


        if (!leave) {
            return;
        }


        /* Update Status */

        leave.status = 'Approved';


        /* Refresh Table */

        leaveTable.clear();

        leaveTable.rows.add(data);

        leaveTable.draw(false);


        /* Close Modal */

        const modalElement =
            document.getElementById('approveLeaveModal');


        const modal =
            bootstrap.Modal.getOrCreateInstance(modalElement);


        modal.hide();

    });

});

</script>

@endsection