{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
    {{ $page_title }}
@endsection

{{-- Content --}}
@section('content')
    <!--begin::Card-->
    <div class="card shadow-sm">
        <!--begin::Header-->
        <div class="card-header flex-wrap border-0 pt-6 pb-0">
            <div class="card-title">
                <input type="text" data-kt-customer-table-filter="search" class="form-control form-control-solid w-250px ps-15" placeholder="Search" />

                <!--begin::Export buttons-->
                <div id="kt_datatable_example_1_export" class="d-none"></div>
                <!--end::Export buttons-->
            </div>

            <div class="card-toolbar">
                 <!--begin::Export dropdown-->
                <button type="button" class="btn btn-light-primary me-5" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                    <span class="svg-icon svg-icon-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <rect opacity="0.3" x="12.75" y="4.25" width="12" height="2" rx="1" transform="rotate(90 12.75 4.25)" fill="currentColor"></rect>
                            <path d="M12.0573 6.11875L13.5203 7.87435C13.9121 8.34457 14.6232 8.37683 15.056 7.94401C15.4457 7.5543 15.4641 6.92836 15.0979 6.51643L12.4974 3.59084C12.0996 3.14332 11.4004 3.14332 11.0026 3.59084L8.40206 6.51643C8.0359 6.92836 8.0543 7.5543 8.44401 7.94401C8.87683 8.37683 9.58785 8.34458 9.9797 7.87435L11.4427 6.11875C11.6026 5.92684 11.8974 5.92684 12.0573 6.11875Z" fill="currentColor"></path>
                            <path d="M18.75 8.25H17.75C17.1977 8.25 16.75 8.69772 16.75 9.25C16.75 9.80228 17.1977 10.25 17.75 10.25C18.3023 10.25 18.75 10.6977 18.75 11.25V18.25C18.75 18.8023 18.3023 19.25 17.75 19.25H5.75C5.19772 19.25 4.75 18.8023 4.75 18.25V11.25C4.75 10.6977 5.19771 10.25 5.75 10.25C6.30229 10.25 6.75 9.80228 6.75 9.25C6.75 8.69772 6.30229 8.25 5.75 8.25H4.75C3.64543 8.25 2.75 9.14543 2.75 10.25V19.25C2.75 20.3546 3.64543 21.25 4.75 21.25H18.75C19.8546 21.25 20.75 20.3546 20.75 19.25V10.25C20.75 9.14543 19.8546 8.25 18.75 8.25Z" fill="#C4C4C4"></path>
                        </svg>
                    </span>
                    Export
                </button>
                <!--begin::Menu-->
                <div id="kt_datatable_example_1_export_menu" class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-200px py-4" data-kt-menu="true">
                    <!--begin::Menu item-->
                    <div class="menu-item px-3">
                        <a href="#" class="menu-link px-3" data-kt-export="copy">
                            Copy to clipboard
                        </a>
                    </div>
                    <!--end::Menu item-->
                    <!--begin::Menu item-->
                    <div class="menu-item px-3">
                        <a href="#" class="menu-link px-3" data-kt-export="excel">
                            Export as Excel
                        </a>
                    </div>
                    <!--end::Menu item-->
                    <!--begin::Menu item-->
                    <div class="menu-item px-3">
                        <a href="#" class="menu-link px-3" data-kt-export="csv">
                            Export as CSV
                        </a>
                    </div>
                    <!--end::Menu item-->
                    <!--begin::Menu item-->
                    <div class="menu-item px-3">
                        <a href="#" class="menu-link px-3" data-kt-export="pdf">
                            Export as PDF
                        </a>
                    </div>
                    <!--end::Menu item-->
                </div>
                <!--end::Menu-->
                <div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">

                    <!--begin::Filter-->
                    <button type="button" class="btn btn-light-primary me-3" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                        <span class="svg-icon svg-icon-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M19.0759 3H4.72777C3.95892 3 3.47768 3.83148 3.86067 4.49814L8.56967 12.6949C9.17923 13.7559 9.5 14.9582 9.5 16.1819V19.5072C9.5 20.2189 10.2223 20.7028 10.8805 20.432L13.8805 19.1977C14.2553 19.0435 14.5 18.6783 14.5 18.273V13.8372C14.5 12.8089 14.8171 11.8056 15.408 10.964L19.8943 4.57465C20.3596 3.912 19.8856 3 19.0759 3Z" fill="currentColor"></path>
                            </svg>
                        </span>
                        Filter
                    </button>

                    <!--begin::Filter dropdown-->
                    <div class="menu menu-sub menu-sub-dropdown w-300px w-md-325px" data-kt-menu="true" id="kt-toolbar-filter">
                        <!--begin::Header-->
                        <div class="px-7 py-5">
                            <div class="fs-4 text-dark fw-bolder">Filter Options</div>
                        </div>
                        <div class="separator border-gray-200"></div>
                        <!--begin::Content-->
                        <div class="px-7 py-5 scroll_filter_dropmenu">

                            <!--Date From-->
                            <div class="mb-5">
                                <label class="form-label fs-5 fw-bold mb-3">Date From</label>
                                <input type="text" class="form-control datepicker2 filter-date input_start_date"
                                    placeholder="From Date" name="start_date" />
                            </div>

                            <!--Date To-->
                            <div class="mb-5">
                                <label class="form-label fs-5 fw-bold mb-3">Date To</label>
                                <input type="text" class="form-control datepicker2 filter-date input_end_date"
                                    placeholder="To Date" name="end_date" />
                            </div>

                            <!--Status-->
                            <div class="mb-5">
                                <label class="form-label fs-5 fw-bold mb-3">Status</label>
                                <select class="form-control form-select input_status select2" name="status">
                                    <option value="">All Status</option>
                                    @foreach(config('constant.save_list') as $val => $label)
                                        <option value="{{ $val }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <!--Request Status-->
                            <div class="mb-5">
                                <label class="form-label fs-5 fw-bold mb-3">Request Status</label>
                                <select class="form-control form-select input_request_status select2" name="request_status">
                                    <option value="">All Request Statuses</option>
                                    @foreach(config('constant.expense_status') as $val => $label)
                                        <option value="{{ $val }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <!--Staff / Participant filters — admin only-->
                            @if($hasAdminAccess)
                            <div class="mb-5">
                                <label class="form-label fs-5 fw-bold mb-3">Staff / Employee</label>
                                <select class="form-control form-select input_staff_id" data-control="select2" name="staff_id">
                                    <option value="">All Staff</option>
                                    @foreach($users_list as $key => $val)
                                        <option value="{{ $key }}">{{ $val }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-5">
                                {!! Helper::getClientFilterDropDown() !!}
                            </div>
                            @else
                                <input type="hidden" class="input_staff_id" value="">
                                <input type="hidden" class="input_client_id" value="">
                            @endif

                        </div>
                        <!--end::Content-->

                        <!--begin::Actions-->
                        <div class="d-flex justify-content-end mt-2 mb-5 px-7">
                            <button type="reset" class="btn btn-light btn-active-light-primary me-2"
                                data-kt-menu-dismiss="true" data-kt-customer-table-filter="reset">Reset</button>
                            <button type="submit" class="btn btn-primary" data-kt-menu-dismiss="true"
                                data-kt-customer-table-filter="filter">Apply</button>
                        </div>
                        <!--end::Actions-->
                    </div>
                    <!--end::Filter dropdown-->

                </div>

                <!--begin::Add button-->
                @if(auth()->user()->hasPermissionTo('admin.expense_reimbursement.add') || $hasAdminAccess)
                    {!! Helper::getListAddBtn(route('expense-reimbursement.create'), 'Add Expense Reimbursement') !!}
                @endif
            </div>
        </div>
        <!--end::Header-->

        <!--begin::Body-->
        <div class="card-body">
            @include('backend.alerts')
            <!--begin: Datatable-->
            {!! $html->table() !!}
            <!--end: Datatable-->
        </div>
        <!--end::Body-->
    </div>
    <!--end::Card-->
@endsection

@section('scripts')
    {!! $html->scripts() !!}
    <script type="text/javascript">
        function actionDelete(ele) {
            var row = $(ele).parents('tr:first');
            if (row) {
                var id = row.attr('id');
                if (id) {
                    Swal.fire(deleteAlert).then(function(result) {
                        if (result.value) {
                            $.ajax({
                                type: 'POST',
                                dataType: 'json',
                                data: {
                                    id: id,
                                    "_token": "{{ csrf_token() }}",
                                    _method: 'DELETE'
                                },
                                url: "{!! route('expense-reimbursement.destroy', 1) !!}",
                                success: function(data) {
                                    if (data.status) {
                                        Swal.fire(deleteSuccessAlert);
                                        window.LaravelDataTables["dataTableBuilder"].ajax.reload();
                                    }
                                }
                            });
                        }
                    });
                }
            }
        }

        $(document).ready(function () {
            const params = new URLSearchParams(window.location.search);
            let hasFilters = false;
            
            if (params.has('status')) {
                $('.input_status').val(params.get('status')).trigger('change');
                hasFilters = true;
            }
            if (params.has('request_status')) {
                $('.input_request_status').val(params.get('request_status')).trigger('change');
                hasFilters = true;
            }
            if (hasFilters && window.LaravelDataTables["dataTableBuilder"]) {
                window.LaravelDataTables["dataTableBuilder"].ajax.reload();
            }
        });

    </script>
@endsection