@extends('staff.layout')

@section('content')

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

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

       <div class="d-flex gap-2 align-items-center">
         <a href="{{  route('staff.leave_form') }}"
           class="btn btn-sm btn-outline-primary">

            <i class="ti ti-arrow-left"></i>

        </a> <h3 class="mb-0 text-white fw-bold">
            Leave Report
        </h3>
       </div>

    </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 Reports
                </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>REASON</th>
                        <th>STATUS</th>

                    </tr>
                </thead>

                <tbody></tbody>

            </table>

        </div>

    </div>

</div>



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



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



<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',
            reason: 'Personal work',
            status: 'Not Approved'
        },

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

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

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

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

        {
            id: 6,
            from_date: '30 Oct 2026',
            to_date: '31 Oct 2026',
            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>
                    `;

                }
            },


            /* 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>
                    `;

                }
            },

   ]

    });


    /* =========================================
       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