@extends('admin.layout.master')

@section('custom_style')
    <link rel="stylesheet" href="{{ asset('assets/css/custom_print.css') }}">
    <style>
        select {
            box-shadow: inset -1px 4px 10px 0px rgb(212 212 212);
            height: 28px !important;
            font-size: 14px !important;
        }
    </style>

@endsection
@section('content')

    <div class="card sina-card">
        <div class="card-header d-flex justify-content-between">
            <h4>Vacant Room Report</h4>

        </div>
        <div class="card-body">
            <div class="row justify-content-center">
                <div class="col-6">
                    {{-- <form action="{{route('')}}" method="get"> --}}
                        <div class="row">
                            <div class="col-4">
                                <div class="form-group">
                                    <label for="">Start Date</label>
                                    <input type="text" autocomplete="false" disabled id="start_date" name="start_date" @if(request()->start_date) value="{{ date('d-m-Y', strtotime(request()->start_date)) }}" @else value="{{ date('d-m-Y') }}" @endif
                                           class="form-control date_picker" data-type="datepicker">
                                </div>
                            </div>

                            <div class="col-4">
                                <div class="form-group">
                                    <label for="">End Date</label>
                                    <input type="text" autocomplete="false" id="end_date" name="end_date" @if(request()->end_date) value="{{ date('d-m-Y', strtotime(request()->end_date)) }}" @else value="{{ date('d-m-Y') }}" @endif
                                           class="form-control date_picker" data-type="datepicker">
                                </div>
                            </div>
                            <div class="col-4">
                                <label for="">&nbsp;</label><br>
                                <button class="btn btn-info btn-sm" onclick="getReportData()">Filter</button>
                            </div>
                        </div>
                    {{-- </form> --}}
                </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 startDate = $('#start_date').val();
            let endDate = $('#end_date').val();
            let payload = {
                'start_date' : startDate,
                'end_date' : endDate
            };
            ajaxCustom(function(res){
                console.log(res);
                $('#divTableDataHolder').html("{!! includeAsJsString('frontdesk.report.report_header') !!}");
                $('#divTableDataHolder').append(res.data);
                $('.dynamic_report_title').text(res.report_title);
            }, 'GET', "{{ route('frontdesk.report.vacant_room_report_print') }}", payload);
        }
    </script>

@endsection