@extends('admin.layout.master')
@section('custom_css')
    <style>
        .cal_loader {
            text-align: right
        }
    </style>
@endsection
@section('content')
    <div class="card sina-card">
        <div class="card-header">
            <h4 class="font-weight-bold mb-0">{{ __('obs.frontdesk_accounts_reconciliation_report') }}</h4>
        </div>
        <div class="card-body">
            <div class="row g-2 mb-3">
                <div class="col-xl-2 col-lg-3 col-6">
                    <label for="">{{ __('obs.from') }}</label>
                    <input type="text" name="from" id="from" class="form-control date_picker" value="{{ date('d-m-Y') }}">
                </div>
                <div class="col-xl-2 col-lg-3 col-6">
                    <label for="">{{ __('obs.to') }}</label>
                    <input type="text" name="to" id="to" class="form-control date_picker" value="{{ date('d-m-Y') }}">
                </div>
                <div class="col-xl-2 col-lg-3 col-6">
                    <label for="">{{ __('obs.hotel') }}</label>
                    @include('admin.inputs.warehouse_select')
                </div>
                <div class="col-xl-1 col-lg-3">
                    <label for="">&nbsp;</label>
                    <button type="button" class="btn btn-primary w-100" onclick="search()">{{ __('obs.search') }}</button>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <table class="table cl-table table-bordered">
                        <thead>
                            <tr>
                                <th>{{ __('obs.particular') }}</th>
                                <th>{{ __('obs.frontdesk') }}</th>
                                <th>{{ __('obs.accounts') }}</th>
                                <th>{{ __('obs.difference') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Sales</td>
                                <td class="cal_loader sales_fd"></td>
                                <td class="cal_loader sales_acc"></td>
                                <td class="cal_loader sales_diff"></td>
                            </tr>
                            <tr>
                                <td>Balady</td>
                                <td class="cal_loader balady_fd"></td>
                                <td class="cal_loader balady_acc"></td>
                                <td class="cal_loader balady_diff"></td>
                            </tr>
                            <tr>
                                <td>VAT</td>
                                <td class="cal_loader vat_fd"></td>
                                <td class="cal_loader vat_acc"></td>
                                <td class="cal_loader vat_diff"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-2 offset-5">
                    <button type="button" class="btn btn-primary w-100 day_wise_search_btn" style="display: none" onclick="searchDayWise()">
                        {{ __('obs.day_wise') }}
                    </button>
                </div>
                <div class="col-12 mt-2" id="report_data">

                </div>
            </div>

        </div>
    </div>

    @include('frontdesk.common.common')
@endsection

@section('script')
    <script>
        let warehouse_id = null;
        let from = null;
        let to = null;
        function search() {
            from = $('#from').val();
            to = $('#to').val();
            warehouse_id = $('#warehouse_id').val();
            let link = "{{ route('frontdesk.reports.fd_acc_reconcilation') }}";
            let data_param = {
                from: from,
                to: to,
                warehouse_id: warehouse_id,
            };
            $('.day_wise_search_btn').hide();
            $('#report_data').html('');
            $('.cal_loader').html('<div class="spinner-border text-primary" style="width: 1.2rem; height: 1.2rem;" role="status"><span class="sr-only">Loading...</span></div>');
            customAjaxCall(function (res) {
                $('.sales_fd').html(res.sales_fd);
                $('.sales_acc').html(res.sales_acc);
                $('.sales_diff').html(res.sales_diff);
                $('.vat_fd').html(res.vat_fd);
                $('.vat_acc').html(res.vat_acc);
                $('.vat_diff').html(res.vat_diff);
                $('.balady_fd').html(res.balady_fd);
                $('.balady_acc').html(res.balady_acc);
                $('.balady_diff').html(res.balady_diff);
                $('.acc_receivable_fd').html(res.acc_receivable_fd);
                $('.acc_receivable_acc').html(res.acc_receivable_acc);
                $('.acc_receivable_diff').html(res.acc_receivable_diff);
                $('.day_wise_search_btn').show();
            }, 'get', link, data_param);
        }
        function searchDayWise() {
            getLoadingStatusNew();
            let link = "{{ route('frontdesk.reports.fd_acc_reconcilation_day_wise') }}";
            let data_param = {
                from: from,
                to: to,
                warehouse_id: warehouse_id,
            };
            customAjaxCall(function (res) {
                closeSweetAlert();
                $('#report_data').html(res.html);
            }, 'get', link, data_param);
        }
    </script>
@endsection