@extends('admin.layout.master')

@section('custom_style')

    <style>
        /* select {
            box-shadow: inset -1px 4px 10px 0px rgb(212 212 212);
            height: 28px !important;
            font-size: 14px !important;
        } */
        #divTableDataHolder{
            /* overflow: auto;
            height: calc(100vh - 200px); */
        }
    </style>
    <link rel="stylesheet" href="{{ asset('assets/css/custom_print.css') }}">

@endsection
@section('content')
    <div class="card sina-card">
        <div class="card-header">
            <h4>{{__('obs.reservation')}} {{__('obs.cancel')}} {{__('obs.report')}}</h4>
        </div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-12">
                    <div class="row">
                        <div class="col-lg-2 col-md-3">
                            <div class="form-group">
                                <label for="">{{__('obs.agent')}} </label>
                                <select type="text" name="agent" id="agent" class="form-control fd_agent_search"></select>
                            </div>
                        </div>
                        <div class="col-lg-2 col-md-3">
                            <div class="form-group">
                                <label for="">{{__('obs.type')}}</label>
                                <select type="text" name="type" id="type" class="form-control select_2">
                                    <option value="">{{__('obs.all')}}</option>
                                    <option value="4">{{__('obs.approved')}}</option>
                                    <option value="3">{{__('obs.requested_for_cancel')}}</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-2 col-md-3">
                            <div class="form-group">
                                <label for="">{{__('obs.start_date')}}</label>
                                <input type="text" autocomplete="false" id="start_date"
                                        class="form-control date_picker" value="{{ date('d-m-Y') }}">
                            </div>
                        </div>

                        <div class="col-lg-2 col-md-3">
                            <div class="form-group">
                                <label for="">{{__('obs.end_date')}}</label>
                                <input type="text" autocomplete="false" id="end_date"
                                        class="form-control date_picker" value="{{ date('d-m-Y') }}">
                            </div>
                        </div>
                        <div class="col">
                            <label for="">&nbsp;</label><br>
                            <button type="button" class="btn btn-primary btn-sm" onclick="getReportData()" >{{__('obs.filter')}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('frontdesk.report.frontdesk_common_report_setup')
@endsection

<script src="{{ asset('frontdesk/shared/fd_settings.js' . getJsVersion()) }}"></script>
@section('script')

    <script>
        function getReportData(){
            callLoader();
            let start_date = $('#start_date').val();
            let end_date = $('#end_date').val();
            let type = $('#type').val();
            let agent = $('#agent').val();
            let payload = {
                start_date,
                end_date,
                agent,
                type
            };
            console.log("pay", payload);
            ajaxCustom(function(res){
                console.log(res);
                $('#divTableDataHolder').html("{!! includeAsJsString('frontdesk.report.report_header') !!}");
                $('#divTableDataHolder').append(res.data);
                $('.dynamic_report_title').text(res.report_title);
                $('#loader').hide();
            }, 'GET', "{{route('frontdesk.report.reservation_cancel_report_print')}}", payload);
        }

        $(document).ready(function(){
            $('.select_2').select2();
        });
    </script>

@endsection