@extends('voyager::master')

@section('page_title', 'Wallet Summary')

@section('page_header')
    <div class="page-header">
        <div class="row align-items-center py-2">
            <div class="col-sm mb-2 mb-sm-0">
                <div class="d-flex align-items-center">
                    <img class="onerror-image" data-onerror-image="{{ asset('thumb.png') }}" src="{{ asset('thumb.png') }}"
                        width="38" alt="img">
                    <div class="w-0 flex-grow pl-2">
                        <h1 class="page-header-title mb-0">Wallet Summary</h1>
                        <p class="page-header-text m-0">Here you can manage-monitor wallet summary services.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('content')
    <div class="page-content browse">
        @include('_partials.alerts')

        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-bordered">
                    <div class="panel-body box-shadow--2dp p-4">

                        <div class="date-picker-wraper form-inline align-items-center">
                            <div class="form-group">
                                <label for="startDate">Start Date</label>
                                <input id="startDate" name="startDate" type="text" class="form-control datepicker" />
                                &nbsp;
                                <label for="endDate">End Date</label>
                                <input id="endDate" name="endDate" type="text" class="form-control datepicker" />
                                &nbsp;
                                <button id="filterBtn" class="btn btn-primary">Filter</button>
                            </div>
                        </div>
                        <br>
                        <table id="dataTable" class="table table-hover table-striped ">
                            <tr>
                                <th>Name</th>
                                <th>Amount</th>
                            </tr>

                            <tr>
                                <td>Total amount debited :</td>
                                <td class="total-amt-debited"></td>
                            </tr>

                            <tr>
                                <td>Total amount credited :</td>
                                <td class="total-amt-credited"></td>
                            </tr>


                            <tr style="background: #F5F5F5;">
                                <td>GL accounting summary</td>
                                <td></td>
                            </tr>



                            <tr>
                                <td>Total amount debited from agents :</td>
                                <td class="total-debited-amt-agent"></td>
                            </tr>

                            <tr>
                                <td>Total amount credited to agents :</td>
                                <td class="total-credited-amt-agent"></td>
                            </tr>

                            <tr style="background: #F5F5F5;">
                                <td>Customer account Summary</td>
                                <td></td>
                            </tr>

                            <tr>
                                <td>Total amount debited from customer's account :</td>
                                <td class="total-debited-amt-customer"></td>
                            </tr>

                            <tr>
                                <td>Total amount credited to customer's account :</td>
                                <td class="total-credited-amt-customer"></td>
                            </tr>
                        </table>


                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('paynow.agents.fields')
@stop

@section('css')
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/base/jquery-ui.css">

    <style>
        #dataTable {
            border-collapse: collapse;
            width: 100%;
            font-size: 1.3rem;
        }


        #dataTable th,
        #dataTable td {
            border: 1px solid rgb(211, 210, 210);
            padding: 8px;
            text-align: left;
        }

        .box-shadow--2dp {
            box-shadow:
                0px 0px 20px 0px rgb(240, 238, 238);
        }
    </style>
@stop

@section('javascript')

    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>


    <script>
        $(document).ready(function() {
            renderData();

            $('.datepicker').datepicker({
                dateFormat: 'yy-mm-dd',
                autoclose: true
            });

            $('#filterBtn').on('click', function() {
                var startDate = $('#startDate').val();
                var endDate = $('#endDate').val();
                updateData(startDate, endDate);
            });

            function renderData() {
                const data = @json($data['data'] ?? '');
                $('.total-amt-debited').text(data.totalAmtDebited);
                $('.total-amt-credited').text(data.totalAmtCredited);
                $('.total-debited-amt-agent').text(data.totalAmtDebitedFromAgents);
                $('.total-credited-amt-agent').text(data.totalAmtCreditedToAgents);
                $('.total-debited-amt-customer').text(data.totalAmtDebitedFromClient);
                $('.total-credited-amt-customer').text(data.totalAmtCreditedToClient);
            }

            function updateData(startDate, endDate) {
                $.ajax({
                    url: "{{ route('wallet.summary') }}",
                    method: 'GET',
                    data: {
                        startDate: startDate,
                        endDate: endDate
                    },
                    success: function(response) {
                        console.log('success');
                        $('.total-amt-debited').text(response.totalAmtDebited);
                        $('.total-amt-credited').text(response.totalAmtCredited);
                        $('.total-debited-amt-agent').text(response.totalAmtDebitedFromAgents);
                        $('.total-credited-amt-agent').text(response.totalAmtCreditedToAgents);
                        $('.total-debited-amt-customer').text(response.totalAmtDebitedFromClient);
                        $('.total-credited-amt-customer').text(response.totalAmtCreditedToClient);
                    },
                    error: function(xhr, status, error) {
                        console.log('error ');
                        console.error(xhr.responseText);
                    }
                });
            }
        });
    </script>

@stop