@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">

        <div class="d-flex gap-2 align-items-center">
            <a href="{{  route('leave_request') }}"
           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>Staff Name</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 () {



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

                }
            },


           

        ]

    });


    /* =========================================
       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();

        }

    });


  

});

</script>

@endsection