@extends('admin.layouts.master')
@section('content')
    <style>
        /* tbody tr td:nth-child(3) {
                                                                                                                                                                                                                                                                                                                                            font-size: 17px;
                                                                                                                                                                                                                                                                                                                                            font-weight: 100
                                                                                                                                                                                                                                                                                                                                        } */

        .horizontal-label {
            width: auto !important;
            padding-left: 15px !important;
        }

        .khata-buttons {
            font-size: 18px !important;
            padding: 0px 0px 14px !important;
        }
    </style>
    <div class="d-md-flex d-block align-items-center justify-content-end mb-4 page-header-breadcrumb">
        <div class="ms-md-1 ms-0">
            <nav>
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item urdu-fonts"><a href="javascript:void(0);">@lang('lang.cash_book')</a></li>
                    <li class="breadcrumb-item active urdu-fonts" aria-current="page"><span>@lang('lang.cash_book')</span> </li>
                </ol>
            </nav>
        </div>
    </div>

    @include('admin.layouts.css')
    <!-- Start:: row-1 -->
    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-header  justify-content-end">
                    <div class="card-title">
                        <h4 class="urdu-fonts py-2">
                            @lang('lang.cash_book')
                        </h4>

                    </div>
                </div>

                <div class="card-body ">

                    <form id="CashBookForm" action="{{ route('admin.cashbook.generate_cash_report') }}">
                        @csrf
                        <div class="row d-flex align-items-center justify-content-end">
                            <div class="col-lg-2">
                                <button type="submit"
                                    class=" w-100 btn btn-primary urdu-fonts khata-buttons">@lang('lang.report')</button>
                            </div>
                            <div class="col-lg-2">
                                <button class=" w-100  btn btn-primary urdu-fonts khata-buttons">@lang('lang.print')</button>
                            </div>
                            <div class="col-xl-4 col-lg-3 col-md-3 col-sm-12 d-flex">

                                <div class="box-body">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <div class="input-group-text text-[#8c9097] dark:text-white/50 !border-e-0"> <i
                                                    class="ri-calendar-line"></i> </div>
                                            <input style="font-family: inherit !important;" type="hidden" name="to_date"
                                                class="form-control flatpickr-input" id="humanfrienndlydate"
                                                placeholder="Human friendly dates" value="{{ date('Y-m-d') }}">
                                        </div>
                                    </div>
                                </div>
                                <label class="form-label horizontal-label">@lang('lang.to')</label>
                            </div>

                            <div class="col-xl-4 col-lg-3 col-md-3 col-sm-12 d-flex">

                                <div class="box-body">
                                    <div class="form-group">
                                        @php
                                            $today = \Carbon\Carbon::now('Asia/Karachi')->format('F j, Y');
                                        @endphp
                                        <div class="input-group">
                                            <div class="input-group-text text-[#8c9097] dark:text-white/50 !border-e-0"> <i
                                                    class="ri-calendar-line"></i> </div>
                                            <input style="font-family: inherit !important;" type="hidden" name="from_date"
                                                class="form-control flatpickr-input" id="humanfrienndlydate"
                                                placeholder="Human friendly dates" value="{{ date('Y-m-d') }}">
                                        </div>
                                    </div>
                                </div>
                                <label class="form-label horizontal-label">@lang('lang.from')</label>
                            </div>

                        </div>

                </div>
                </form>
                <div dir="rtl" class="table-responsive mt-2">
                    <table dir="rtl" id="myTable" class="display table text-nowrap">
                        <thead class="table-primary">
                            <tr>
                                <th class="urdu-fonts">@lang('lang.sno')</th>
                                <th class="urdu-fonts">@lang('lang.date')</th>
                                <th class="urdu-fonts">@lang('lang.tafseel_payment')</th>
                                <th class="urdu-fonts">@lang('lang.supplier') &nbsp; @lang('lang.credit_payment')</th>
                                <th class="urdu-fonts">@lang('lang.supplier') &nbsp; @lang('lang.debit_payment')</th>
                                <th class="urdu-fonts">@lang('lang.beopari') &nbsp; @lang('lang.credit_payment')</th>
                                <th class="urdu-fonts">@lang('lang.beopari') &nbsp; @lang('lang.debit_payment')</th>
                                <th class="urdu-fonts">@lang('lang.bank') &nbsp; @lang('lang.credit_payment')</th>
                                <th class="urdu-fonts">@lang('lang.bank') &nbsp; @lang('lang.debit_payment')</th>
                                <th class="urdu-fonts">@lang('lang.expense') &nbsp; @lang('lang.credit_payment')</th>
                                <th class="urdu-fonts">@lang('lang.expense') &nbsp; @lang('lang.debit_payment')</th>
                                <th class="urdu-fonts">@lang('lang.bhugtan')/@lang('lang.purchase_salebook')</th>
                                {{-- <th class="urdu-fonts">@lang('lang.naqadi')</th> --}}

                            </tr>
                        </thead>
                        <tbody id="tBody">

                        </tbody>

                    </table>
                </div>
                {{-- <div dir="rtl" class="row gy-4 mb-3 container" style="margin-top: 22px; border-top: 2px solid;">
                    <div class="col-xl-1 col-2 text-center">
                        <label style="font-size: 15px !important;"
                            class="form-label d-inline mb-3">@lang('lang.previous_balance')</label>
                    </div>
                    <div class="main col-xl-2 col-2 p-0">
                        <input id="kiraya" type="number" value="0" placeholder="Enter number..."
                            class="ltr main_input form-control" fdprocessedid="evar6d">
                    </div>
                    <div class="col-xl-1 col-2 text-center">
                        <label style="font-size: 1rem !important" class="form-label d-inline mb-3">@lang('lang.supplier')
                            @lang('lang.credit_payment')</label>
                    </div>
                    <div class="main col-xl-2 col-2 p-0">
                        <input id="kiraya" type="number" value="0" placeholder="Enter number..."
                            class="ltr main_input form-control" fdprocessedid="evar6d">
                    </div>
                    <div class="col-xl-1 col-2 text-center">
                        <label style="font-size: 1rem !important" class="form-label d-inline mb-3">@lang('lang.supplier')
                            @lang('lang.debit_payment')</label>
                    </div>
                    <div class="main col-xl-2 col-2 p-0">
                        <input id="supplier_debit" type="number" value="0" placeholder="Enter number..."
                            class="ltr main_input form-control" fdprocessedid="evar6d">
                    </div>
                    <div class="col-xl-1 col-2 text-center">
                        <label style="font-size: 14px !important;"class="form-label d-inline mb-3">@lang('lang.beopari')
                            @lang('lang.credit_payment')</label>
                    </div>
                    <div class="main col-xl-2 col-2 p-0">
                        <input id="supplier_debit" type="number" value="0" placeholder="Enter number..."
                            class="ltr main_input form-control" fdprocessedid="evar6d">
                    </div>
                </div> --}}
                <div dir="rtl" class="d-flex container mt-4">
                    <div class="label-input-wrapper d-flex justify-content-center" style="width: 25%">
                        <label for="" class="horizontal-label urdu-fonts "
                            style="font-size:20px;">@lang('lang.previous_balance')</label>
                        <input type="text" id="previous_balance" class="form-control ltr-text" style="width: 60%">
                    </div>
                    <div class="label-input-wrapper d-flex" style="width: 25%">
                        <label for="" class="horizontal-label urdu-fonts "
                            style="font-size:20px;">@lang('lang.supplier')
                            @lang('lang.credit_payment')</label>
                        <input type="text" id="supplierCreditSum" class="form-control ltr-text" style="width: 60%">
                    </div>
                    <div class="label-input-wrapper d-flex" style="width: 25%">
                        <label for="" class="horizontal-label urdu-fonts "
                            style="font-size:20px;">@lang('lang.supplier') @lang('lang.debit_payment')</label>
                        <input type="text" id="supplierdebitSum" class="form-control ltr-text" style="width: 60%">
                    </div>
                    <div class="label-input-wrapper d-flex" style="width: 25%">
                        <label for="" class="horizontal-label urdu-fonts "
                            style="font-size:20px;">@lang('lang.beopari') @lang('lang.credit_payment')</label>
                        <input id="beopariCreditSum" type="text" class="form-control ltr-text" style="width: 60%">
                    </div>


                </div>
                <div dir="rtl" class="d-flex container mt-4">
                    <div class="label-input-wrapper d-flex justify-content-center" style="width: 25%">
                        <label for="" class="horizontal-label urdu-fonts "
                            style="font-size:20px;">@lang('lang.beopari') @lang('lang.debit_payment')</label>
                        <input id="beopariDebitSum" type="text" class="form-control ltr-text" style="width: 60%">
                    </div>
                    <div class="label-input-wrapper d-flex" style="width: 25%">
                        <label for="" class="horizontal-label urdu-fonts "
                            style="font-size:20px;">@lang('lang.bank')
                            @lang('lang.credit_payment')</label>
                        <input id="bankCreditSum" type="text" class="form-control ltr-text" style="width: 60%">
                    </div>
                    <div class="label-input-wrapper d-flex" style="width: 25%">
                        <label for="" class="horizontal-label urdu-fonts "
                            style="font-size:20px;">@lang('lang.bank') @lang('lang.debit_payment')</label>
                        <input id="bankDebitSum" type="text" class="form-control ltr-text" style="width: 60%">
                    </div>
                    <div class="label-input-wrapper d-flex" style="width: 25%">
                        <label for="" class="horizontal-label urdu-fonts "
                            style="font-size:15px;">@lang('lang.expense') @lang('lang.credit_payment')</label>
                        <input id="expenseCreditSum" type="text" class="form-control ltr-text" style="width: 60%">
                    </div>


                </div>
                <div dir="rtl" class="d-flex container mt-4 mb-3">
                    <div class="label-input-wrapper d-flex justify-content-center" style="width: 27%">
                        <label for="" class="horizontal-label urdu-fonts "
                            style="font-size:20px;">@lang('lang.expense') @lang('lang.debit_payment')</label>
                        <input id="expenseDebitSum" type="text" class="form-control ltr-text" style="width: 59%">
                    </div>

                    <div class="label-input-wrapper d-flex me-3" style="width: 25%">
                        <label for="" class="horizontal-label urdu-fonts "
                            style="font-size:20px;">@lang('lang.remaining') @lang('lang.balance')</label>
                        <input type="text" id="remaining_balance" class="form-control ltr-text" style="width: 60%">
                    </div>



                </div>
                {{-- <div class="d-flex container mt-4 mb-3 justify-content-end">
                    <div class="label-input-wrapper d-flex justify-content-center" style="width: 27%">
                        <input type="text" class="form-control " style="width: 59%">
                        <label for="" class="horizontal-label urdu-fonts "
                            style="font-size:20px;">@lang('lang.expense') @lang('lang.debit_payment')</label>
                    </div>
                    <div class="label-input-wrapper d-flex me-3" style="width: 25%">
                        <input type="text" class="form-control " style="width: 60%">
                        <label for="" class="horizontal-label urdu-fonts "
                            style="font-size:20px;">@lang('lang.bank')
                            @lang('lang.credit_payment')</label>
                    </div>
                    <div class="label-input-wrapper d-flex me-3" style="width: 25%">
                        <input type="text" id="remaining_balance" class="form-control " style="width: 60%">
                        <label for="" class="horizontal-label urdu-fonts "
                            style="font-size:20px;">@lang('lang.remaining') @lang('lang.balance')</label>
                    </div>



                </div> --}}

            </div>
        @endsection
        @push('page-script')
            <script type="0c42bf43b6c7c47292f796f6-text/javascript">
                $(document).ready(function() {
                    $('#CashBookForm').on('submit', function(e) {

                        e.preventDefault();
                        var url = $(this).attr('action');
                        var formData = $(this).serialize();
                        $.ajax({
                            url: url,
                            type: "POST",
                            data: formData,
                            success: function(response) {
                                console.log(response)
                                $('#tBody').empty();

                                $('#tBody').append(response.beoparis.CreditTr)
                                $('#tBody').append(response.beoparis.DebitTr)
                                $('#tBody').append(response.suppliers.CreditTr)
                                $('#tBody').append(response.suppliers.DebitTr)
                                $('#tBody').append(response.expenses.CreditTr)
                                $('#tBody').append(response.expenses.DebitTr)
                                $('#tBody').append(response.banks.CreditTr)
                                $('#tBody').append(response.banks.DebitTr)
                                // $('#tBody').append(response.PurchaseSaleBook.kachiCopyTr)
                                $('#tBody').append(response.Naqadi.NaqdiTr)
                                $('#tBody').append(response.bhugtan.bhugtanTr)

                                $('#previous_balance').val(response.balance.opening_balance)
                                $('#remaining_balance').val(response.balance.closing_balance)
                                $('#supplierCreditSum').val(response.supplierSum.credit)
                                $('#supplierdebitSum').val(response.supplierSum.debit)
                                $('#beopariCreditSum').val(response.beopariSum.credit)
                                $('#beopariDebitSum').val(response.beopariSum.debit)
                                $('#bankCreditSum').val(response.bankSum.credit)
                                $('#bankDebitSum').val(response.bankSum.debit)
                                $('#expenseCreditSum').val(response.expenseSum.credit)
                                $('#expenseDebitSum').val(response.expenseSum.debit)
                                // if (response['reload'] !== undefined) {
                                //     location.reload();
                                // }

                            },
                            // error: function(response) {
                            //     console.log(response.error);
                            //     if (response.status === 422) {
                            //         var errors = response.responseJSON.errors;
                            //         var errorMessages = "";
                            //         $.each(errors, function(key, value) {
                            //             errorMessages += value[0] +
                            //                 "\n"; // Assumes the error messages are arrays
                            //         });
                            //         Swal.fire(errorMessages, "Error", "error");
                            //     } else if (response.status === 500) {
                            //         Swal.fire("Internal Servor Error", "Error", "error");
                            //     } else {
                            //         Swal.fire("error", "an error occured", "error");
                            //     }

                            // },
                        });
                    })
                })
            </script>
        @endpush
<script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="0c42bf43b6c7c47292f796f6-|49" defer></script>