@extends('admin.layouts.master')
<style>
    /* .khata .col-sm-12 input{
display: inline;
} */
    .box-body input {
        font-family: inherit !important;
    }

    .select2-search__field {
        line-height: normal;
        font-family: "Noto Nastaliq Urdu", serif !important;
    }

    .card-body .selection span {
        font-family: "Noto Nastaliq Urdu", serif;
        font-size: 18px;
    }

    .select2-results__option {
        font-family: "Noto Nastaliq Urdu", serif;
    }

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

    .khata-buttons {
        font-size: 18px !important;
        padding: 0px 0px 14px !important;
    }
</style>
@section('content')
    @include('admin.layouts.css')
    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-end my-4 page-header-breadcrumb">
        {{-- <h1 class="page-title fw-semibold fs-18 mb-0 urdu-fonts">@lang('lang.bank_account')</h1> --}}
        <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.bank')</a></li>
                    <li class="breadcrumb-item active urdu-fonts" aria-current="page">@lang('lang.bank')
                        @lang('lang.khata') </li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- 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">
                        <h3>
                            @lang('lang.bank') @lang('lang.khata')
                        </h3>
                    </div>
                </div>

                <div class="card-body" id="">
                    <form id="khataForm" action="{{ route('admin.bank.khata_report') }}">
                        @csrf
                        <div class="row d-flex align-items-center justify-content-end">

                            <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 class="col-xl-4 col-lg-3 col-md-3 col-sm-12 d-flex">

                                <select id="bank_data" required dir="rtl"
                                    class="urdu-fonts select_beopari js-example-basic-single select2-hidden-accessible"
                                    name="bank_id" tabindex="-1" aria-hidden="true">
                                    <option disabled selected class="urdu-fonts" value="">
                                        @lang('lang.bank') درج</option>
                                </select>
                                <label class="form-label horizontal-label"> :@lang('lang.bank')</label>
                            </div>
                        </div>
                        <div class="row mt-3 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>
                    </form>
                </div>
                </form>

                <!-- End:: row-form -->
                <div class="row">
                    <div class="col-xl-12">

                        <div class="card-body pt-0">
                            <div class="table-responsive">
                                <table id="myTable" class="display table text-nowrap">
                                    <thead class="table-primary">
                                        <tr class="urdu-fonts">
                                            <th>@lang('lang.balance')</th>
                                            <th>@lang('lang.debit_payment')</th>
                                            <th>@lang('lang.credit_payment')</th>
                                            <th>@lang('lang.previous_balance')</th>
                                            <th>@lang('lang.tafseel_payment')</th>
                                            <th>@lang('lang.date')</th>
                                            <th>@lang('lang.sno')</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableBody">

                                    </tbody>
                                </table>
                            </div>
                            <div class="links mt-3 float-end">

                            </div>
                        </div>
                        <div class="card-footer d-none border-top-0">


                        </div>
                    </div>
                </div>
            </div>
            <!-- End:: row-table -->

        </div>
    </div>

    <div class="row">
        <div class="col-xl-12 ">
            <div class="card custom-card">
                <div class="card-body">
                    <div class="row justify-content-end">

                        <div class="col-lg-6 d-flex">
                            <input style="font-family: inherit !important" id="debit" readonly type="numbers"
                                class=" form-control">
                            <label class="form-label horizontal-label"> :@lang('lang.debit_payment')</label>
                        </div>
                        <div class="col-lg-6 d-flex">
                            <input style="font-family: inherit !important" id="credit" readonly type="numbers"
                                class=" form-control">
                            <label class="form-label horizontal-label"> :@lang('lang.credit_payment')</label>
                        </div>

                    </div>
                    <div class="row mt-2">

                        <div class="col-lg-6 d-flex">
                            <input id="current_balance" style="font-family: inherit !important" readonly type="numbers"
                                class=" form-control">
                            <label class="form-label horizontal-label"> :@lang('lang.balance')</label>
                        </div>
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 d-flex">

                            <input style="font-family: inherit !important" placeholder="@lang('lang.number_words')" readonly
                                id="numberWords" type="numbers" class=" form-control">
                            <label class="form-label horizontal-label"> :@lang('lang.word')</label>
                        </div>
                    </div>
                </div>

                <div class="card-footer d-none border-top-0">


                </div>
            </div>
        </div>
    </div>
    <!-- End:: row-2 -->
@endsection
@push('page-script')
    <script type="6b23789d053afda392585892-text/javascript">
        $(document).ready(function() {
            $('#bank_data').select2({
                ajax: {
                    url: "{{ route('admin.bank.bank_payment.bank_select2') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            q: params.term // search term
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: $.map(data, function(item) {
                                return {
                                    id: item.id,
                                    text: item.name
                                }
                            })
                        };
                    },
                    cache: true
                },
                placeholder: 'بنام درج',
                minimumInputLength: 2,
                language: {
                    inputTooShort: function() {
                        return 'نام درج کریں'; // Custom message
                    },
                    noResults: function() {
                        return "کوئی نتیجہ نہیں ملا";
                    }
                }
            });
            $('#khataForm').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) {
                        $('#tableBody').empty()
                        set_report_table(response)
                    },
                    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");
                        }

                    },
                });
            })

            function set_report_table(reports) {
                var sno = 1;
                var debitSum = 0;
                var creditSum = 0;
                let remaining_balance = 0;
                let previous_balance;
                $.each(reports, function(index, report) {

                    if (index === 0) {
                        previous_balance = report.previous_balance;
                        // parseInt(previous_balance)
                    }

                    if (report.debit_credit == 'D') {
                        // debitSum+=report.muballig;
                        report.muballig !== '' ? debitSum += report.muballig : debitSum = report.muballig
                        remaining_balance = parseInt(previous_balance) - report.muballig;
                    } else if (report.debit_credit == 'C') {
                        remaining_balance = parseInt(previous_balance) + report.muballig;
                        report.muballig !== '' ? creditSum += report.muballig : creditSum = report.muballig

                    }
                    $('#credit').val(creditSum)
                    $('#debit').val(debitSum)
                    // console.log(debitSum)
                    console.log(creditSum)
                    var transaction_append = `
                        <tr>

                            <td> ${remaining_balance} </td>
                            <td > ${report.debit_credit == 'D'? report.muballig : ''} </td>
                            <td > ${report.debit_credit == 'C'? report.muballig : ''} </td>
                            <td class=> ${previous_balance} </td>
                            <td class='urdu-fonts'> ${report.description == null ? '' : report.description} </td>
                            <td > ${report.recorded_at} </td>
                            <td class = 'urdu-fonts'> ${sno++} </td>
                            <td class='d-none'>${index} </td>
                        </tr>
                        `
                    $('#tableBody').append(transaction_append);
                    updateRows()
                    ConvertWords()


                })

            }

            function updateRows() {
                var rows = $('#tableBody tr');
                let creditTotal = 0;
                let debitTotal = 0;
                let total
                rows.each(function(index) {
                    if (index > 0) {
                        var currentRow = $(this);
                        var prevRow = $(rows[index - 1]);
                        var prevRemain = prevRow.find('td:nth-child(1)').text() || 0
                        currentRow.find('td:nth-child(4)').text(prevRemain);
                        var second_previous = parseFloat(currentRow.find('td:nth-child(4)').text())
                        var credit = currentRow.find('td:nth-child(3)').text() !== '' ? credit = parseFloat(
                            currentRow.find('td:nth-child(3)').text()) : currentRow.find(
                            'td:nth-child(3)').text(0)
                        var debit = currentRow.find('td:nth-child(2)').text() !== '' ? debit = parseFloat(
                            currentRow.find('td:nth-child(2)').text()) : currentRow.find(
                            'td:nth-child(2)').text(0)
                        if (currentRow.find('td:nth-child(3)').text() !== 0 && currentRow.find(
                                'td:nth-child(2)').text() == 0) {
                            total = second_previous + credit
                        }
                        if (currentRow.find('td:nth-child(2)').text() !== 0 && currentRow.find(
                                'td:nth-child(3)').text() == 0) {
                            total = second_previous - parseFloat(debit)
                        }
                        currentRow.find('td:nth-child(1)').text(total);

                    }
                });
            }

            function ConvertWords() {
                var Balance = $('#tableBody tr:last td:nth-child(1)').text();
                $('#current_balance').val(Balance)

                var number = Math.abs(parseInt(Balance))
                var positiveNegative = Balance < 0 ? '-' : ''
                $('#numberWords').val(positiveNegative + ' ' + convertNumberToWords(number))

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