@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;
        }
    </style>
    <link rel="stylesheet" href="{{ asset('assets/css/custom_print.css') }}">

@endsection
@section('content')
    <div class="card sina-card">
        <div class="card-header">
            <h4>Reservation Cancel Report</h4>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-12">
                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                                <label for="">Agent</label>
                                <select type="text" name="agent" id="agent" class="form-control fd_agent_search"></select>
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="">Type</label>
                                <select type="text" name="type" id="type" class="form-control select_2">
                                    <option value="">All</option>
                                    <option value="4">Approved</option>
                                    <option value="3">Requested For Cancel</option>
                                </select>
                            </div>
                        </div>

                        <div class="col">
                            <div class="form-group">
                                <label for="">Start Date</label>
                                <input type="text" autocomplete="false" id="start_date"
                                        class="form-control fd_bs_datepicker" value="{{ date('Y-m-d') }}" data-type="datepicker">
                            </div>
                        </div>

                        <div class="col">
                            <div class="form-group">
                                <label for="">End Date</label>
                                <input type="text" autocomplete="false" id="end_date"
                                        class="form-control fd_bs_datepicker" value="{{ date('Y-m-d') }}" data-type="datepicker">
                            </div>
                        </div>
                        <div class="col-1">
                            <label for="">&nbsp;</label><br>
                            <button type="button" class="btn btn-info btn-sm" onclick="getReportData()" >Filter</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('frontdesk.report.frontdesk_common_report_setup')
@endsection

<script src="{{ asset('frontdesk/shared/fd_settings.js') }}"></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