@include('layouts.header_script')
@section('css')
    <style>
        table {
            margin-bottom: 0 !important;
        }

        .table td,
        .table td {
            padding-bottom: 4px;
        }
    </style>
    @include('layouts.footer_script')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-title text-white card_1 justify-content-between d-flex">
                    <h5>{{__('msg.receive_payment_statement')}}</h5>
                    @include('layouts.print_excel')
                </div>
                <div class="card-body">
                    <div class="row">
                        {{-- <div class="col-2">
                            <div class="form-group">
                                <label for="">{{__('msg.cost_center')}}</label>
                                <select id="ledger" class="form-control select_2">
                                    <option value="">{{__('msg.')}}Select Ledger</option>
                                    @foreach ($ledgers as $key => $l)
                                        <option value="{{ $l->id }}">{{ $l->name }}-{{ $l->auto_code }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div> --}}
                        <div class="col-2">
                            <div class="form-group">
                                <label for="">{{__('msg.start_date')}}</label>
                                <input type="text" class="form-control date_picker" id="sdate" value="{{ date('d-m-Y') }}">
                            </div>
                        </div>
                        <div class="col-2">
                            <div class="form-group">
                                <label for="">{{__('msg.end_date')}}</label>
                                <input type="text" class="form-control date_picker" id="edate" value="{{ date('d-m-Y') }}">
                            </div>
                        </div>
                        <div class="col-1">
                            <div class="form-group">
                                <label for="">&nbsp;</label>
                                <button class="btn btn-sm w-100 btn-success d-block filter_button" onclick="getData()">{{__('msg.filter')}}</button>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
            <div class="mt-2">
                <div class="commonListBody mx-5" id="printThis" style="border: 1px solid #000"></div>
            </div>
        </div>
    </div>
</div>
    
    @include('layouts.footer_script')


    <script>
        sdate = $('#sdate').val();
        edate = $('#edate').val();
        $(document).ready(function() {
            flatpickr(".date_picker", {
                dateFormat: "d-m-Y"
            });
        })

        function getData() {
            // $('.filter_button').attr('disabled', true);
            sdate = $('#sdate').val();
            edate = $('#edate').val();
            getLoader();
            let data = {
                sdate,
                edate
            };
            customAjaxCall(async function(res) {
                console.log("res", res);
                $('.commonListBody').html(res.body);
                getPaymentsAndReceives();
            }, 'GET', "{{ route('accounts.report.receive_payment_statement.index') }}", data);
        }

        function getPaymentsAndReceives() {
            sdate = $('#sdate').val();
            edate = $('#edate').val();
            let data = {
                sdate,
                edate
            };
            track = 0;
            customAjaxCall(function(res) {
                console.log("res", res);
                $('#payments_info').html(res.body);
                track += 1;
                if (track >= 2) {
                    setTableheight();
                }
            }, 'GET', "{{ route('json_accounts.get_payment_infos') }}", data);

            customAjaxCall(function(res) {
                console.log("res", res);
                $('#receives_info').html(res.body);
                track += 1;
                if (track >= 2) {
                    setTableheight();
                }
            }, 'GET', "{{ route('json_accounts.get_receive_infos') }}", data);
        }

        function setTableheight() {
            receive_info_height = $('#receives_info').height();
            payment_info_height = $('#payments_info').height();
            diff = parseFloat(receive_info_height) - parseFloat(payment_info_height);
            console.log("receive_info_height", receive_info_height);
            console.log("payment_info_height", payment_info_height);
            if (diff > 0) {
                $('#payments_info .last_row').css('padding-bottom', `${diff+5}px`);
            } else {
                $('#receives_info .last_row').css('padding-bottom', `${(-diff)+5}px`);
            }
        }
    </script>