@extends('admin.layout.master')
@section('title','Waiting For HK Approval To Checkout')
@section('content')

<div class="">
    <div class="row">
        <div class="col-12">
            <div class="card sina-card">
                <div class="card-header py-1" id="headingOne">
                    <h5 class="mb-0">
                        {{__('obs.check_out_request_list')}} ({{ __('obs.hk_clearance') }})
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row g-2">
                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6 d-none">
                            <div class="row gx-sm-3 gx-0">
                                <label for="" class="col-lg-4 col-md-6">{{ get_customer_lebel() }}</label>
                                <div class="col-lg-8 col-md-6">
                                    <div class="d-flex">
                                        <select name="agent" id="agent" class="form-control fd_agent_search">
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6">
                            <div class="row gx-sm-3 gx-0">
                                <label for="" class="col-lg-5 col-md-6">{{__('obs.start')}} {{__('obs.date')}}</label>
                                <div class="col-lg-7 col-md-6">
                                    <input type="text" autocomplete="false" id="start_date" name="start_date" class="form-control date_picker" value="{{ request()->start_date ? date('d-m-Y', strtotime(request()->start_date)) : date('d-m-Y') }}">
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6">
                            <div class="row gx-sm-3 gx-0">
                                <label for="" class="col-lg-5 col-md-6">{{__('obs.end')}} {{__('obs.date')}}</label>
                                <div class="col-lg-7 col-md-6">
                                    <input type="text" autocomplete="false" id="end_date" name="end_date" class="form-control date_picker" value="{{ request()->end_date ? date('d-m-Y', strtotime(request()->end_date)) : date('d-m-Y') }}">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-2 col-sm-4 col-6">
                            <div class="row gx-sm-3 gx-0">
                                <label for="" class="col-md-6">{{__('obs.checkin_code')}}</label>
                                <div class="col-md-6">
                                    <div class="d-flex">
                                        <select id="check_in_id" name="check_in_id" class="form-control fd_checkin_resv_code_search"></select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-2">
                            <div class="row gx-sm-3 gx-0">
                                <label for="" class="col-md-6">{{ __('obs.room') }}</label>
                                <div class="col-md-6">
                                    <div class="d-flex">
                                        <select name="room" id="room" class="form-control fd_room_search"></select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-2 col-sm-2 col-6">
                            <div class="row gx-sm-3 gx-0">
                                <label for="" class="col-md-6">{{__('obs.status')}}</label>
                                <div class="col-md-6">
                                    <div class="d-flex">
                                        <select id="status" name="status" class="form-control">
                                            <option value="">All</option>
                                            <option value="1" selected>Pending</option>
                                            {{-- <option value="2">Rejected</option> --}}
                                            <option value="3">Approved</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-1">
                            <button onclick="FilterList()" class="btn btn-primary btn-sm w-100">{{__('obs.filter')}}</button>
                        </div>
                        <div class="col-1">
                            <button onclick="resetFilter()" class="btn btn-danger btn-sm w-100">{{__('obs.reset')}}</button>
                        </div>
                    </div>
                    <div id="loadedData"></div>
                </div>
            </div>
        </div>
    </div>
</div>
@include('frontdesk.common.common')
@endsection

@section('script')

<script>
    $(document).ready(function(){
        $('.select_2').select2();
        $(document).on('change','.check_box',function () {
            let check = ($('.check_box').filter(":checked").length == $('.check_box').length);
            $('#check_all').prop("checked", check);
        });
        $(document).on('change','#check_all',function () {
            $('.check_box').prop('checked', this.checked);
        });
    });
    function FilterList(){
        let check_in_id = $('#check_in_id').val();
        let start_date = $('#start_date').val();
        let end_date = $('#end_date').val();
        let agent = $('#agent').val();
        let status = $('#status').val();
        let room = $('#room').val();
        getLoadingStatusNew();
        customAjaxCall(function(res){
            $('#loadedData').html(res.html);
            closeSweetAlert();
        }, "get", "{{ route('frontdesk.checkout.hk_clearance_index') }}", {check_in_id, start_date, end_date, agent, status, room});
    }
    function approveRejectCheckout(id, type){
        let ids = id == 0 ? $('.check_box:checked').map(function(){return $(this).val()}).get() : [id];
        if(ids.length == 0){
            sweet_warning('Please select at least one item');
            return;
        }

        Swal.fire({
            title: 'Are you sure?',
            html: `Want to ${type == 3 ? '<span class="fw-bold text-succecss">Approve</span>' : '<span class="fw-bold text-danger">Reject</span>' }`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes',
            cancelButtonText: 'No',
            input: 'text',
            inputPlaceholder: 'Write Note (Optional)',
        }).then((r) => {
            if(r.isConfirmed){
                getLoadingStatusNew();
                $('.appr_rej_button').attr('disabled', true);
                customAjaxCall(function(res){
                    console.log("res", res);
                    closeSweetAlert();
                    sweet_success(function(){
                        $('.appr_rej_button').attr('disabled', true);
                        FilterList();
                    }, 'Success', res.message);
                }, "POST", "{{ route('frontdesk.checkout.hk_clearance_store') }}", { ids: JSON.stringify(ids), type, approve_note: r.value });
            }
        });
    }
    function resetFilter(){
        $('#check_in_id').val('').trigger('change');
        $('#room').val('').trigger('change');
    }
</script>

@endsection