@extends('admin.layout.master')
@section('custom_style')
    <link href="{{asset('assets/css/custom_print.css')}}" rel="stylesheet"/>
@endsection
@section('content')

    <div class="card sina-card">
        <div class="card-header card-header-s d-flex flex-wrap align-items-center">
            <div class="col-md-6 col-12 pl-0">
                <h4>Fund Transaction</h4>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-3">
                    <label for="">Cashier</label>
                    <select name="" id="cashier_id" class="form-control select_2">
                        @foreach ($cashiers as $c)
                            <option value="{{ $c->admin_id }}">{{ $c->admin->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-3">
                    <label for="">Start Date</label>
                    <input type="text" class="date_picker form-control" id="start_date" value="{{ date('d-m-Y') }}">
                </div>
                <div class="col-3">
                    <label for="">End Date</label>
                    <input type="text" class="date_picker form-control" id="end_date" value="{{ date('d-m-Y') }}">
                </div>
                <div class="col-1">
                    <label for="">&nbsp;</label><br>
                    <button class="btn btn-success btn-sm" onclick="getReportData()">Filter</button>
                </div>
            </div>
            @include('inventory.global.loader')
            <div id="tbl_data" class="d-flex mt-3">
                <div id="receipts_div" class="table-responsive">

                </div>
                <div id="payments_div" class="table-responsive"></div>
            </div>
            <div id="tbl_data2" class="d-flex mt-3">
                <div id="balance_html" class="table-responsive">45353</div>
            </div>
        </div>
    </div>

@endsection


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


        const getReportData = () => {
            let cashier_id = $('#cashier_id').val();
            let start_date = $('#start_date').val();
            let end_date = $('#end_date').val();

            let payload = {
                cashier_id: cashier_id,
                start_date: start_date,
                end_date: end_date
            };

            // console.log(payload);

            ajaxCall("{{ route('frontdesk.report.fund_transaction_ajax') }}", 'GET', payload, function(res){
                console.log(res);
                $('#receipts_div').html(res.receipts);
                $('#payments_div').html(res.payments);
                $("#balance_html").html(res.balance);
                $('#loader').hide();
            });
        }
    </script>

@endsection