@extends('admin.layouts.master')
@section('content')
    @include('admin.layouts.css')
    <style>
        .dt-buttons button {
            padding: 12px !important;
        }

        .dataTables_filter label {
            direction: rtl !important;
            padding: 11px;

        }

        .custom-toggle-switch>label::before {

            border-radius: 1.5rem;
            height: 1.4rem;
            margin-block-start: -12px;

        }

        .ltr-text {
            direction: ltr
        }

        .dateDiv input[type='text'] {
            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;
        }

        .from_date {
            font-family: inherit !important;
        }

        .button {
            border: none;
            padding: 9px 0 !important;
            width: 60px;
        }

        .horizontal-label {
            width: auto !important;
            padding-left: 15px !important;
        }
    </style>
    <div class="d-md-flex d-block align-items-center justify-content-end mb-4 page-header-breadcrumb">
        {{-- <h1 class="page-title fw-semibold fs-18 mb-0 urdu-fonts">@lang('lang.supplier_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.beopari')</a></li>
                    <li class="breadcrumb-item active urdu-fonts" aria-current="page"><span>@lang('lang.beopari')</span> <span
                            class="pe-1"> @lang('lang.chittha')</span></li>
                </ol>
            </nav>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-header ">
                    <div class="card-title d-flex justify-content-between w-100 align-items-center"
                        style="font-family:inherit !important;">
                        <p class="urdu-fonts"> <span>@lang('lang.beopari')</span> <span class="pe-1"> @lang('lang.chittha')</span>
                        </p>
                        <form action="{{ route('admin.beopari.generateChitthaPdf') }}" target="_blank" method="POST">
                            @csrf
                            <div class="form-check form-check-md  mb-0">
                                <div class="d-flex align-items-center justify-content-around">

                                    <div class="input-group w-75 align-items-center">
                                        <label class="pe-2">From Date :</label>
                                        <div class="input-group-text text-[#8c9097] dark:text-white/50 !border-e-0"> <i
                                                class="ri-calendar-line"></i> </div>
                                        <input name="from_date" type="text" class="form-control from_date"
                                            id="humanfrienndlydate" placeholder="Human friendly dates">

                                    </div>
                                    <div class="checkbox d-flex align-items-center">
                                        <button type="submit" name="submit_btn" value="Pdf"
                                            class="btn btn-sm button btn-primary ms-2">PDF</button>
                                        <button type="button" id="QrCode"
                                            class="btn btn-sm button btn-primary ms-2">QR</button>
                                        <button type="submit" name="submit_btn" value="Print"
                                            class="btn btn-sm button btn-primary ms-2">Print</button>
                                    </div>
                                </div>
                                <p id="fromDateEmpty" class="text-danger text-center mb-0"></p>
                                @error('from_date')
                                    <p class="text-danger text-center mb-0">{{ $message }}</p>
                                @enderror
                        </form>
                    </div>
                </div>

            </div>
            <div class="card-body">
                <div class="mb-3  d-flex justify-content-center">

                    <div class="box-body mt-3" id="qr-code-container">


                    </div>

                </div>
                <table id="SupplierData" dir="rtl" class=" table table-bordered text-nowrap w-100">
                    <thead>

                        <tr>
                            <th class="urdu-fonts">S.no</th>
                            <th class="urdu-fonts">@lang('lang.name')</th>
                            <th class="urdu-fonts">@lang('lang.previous_balance')</th>
                            <th class="urdu-fonts">@lang('lang.credit_payment')</th>
                            <th class="urdu-fonts">@lang('lang.debit_payment')</th>
                            <th class="urdu-fonts">@lang('lang.balance')</th>
                            {{-- <th class="urdu-fonts">@lang('lang.date')</th> --}}
                        </tr>
                    </thead>
                    <tbody id="tableBody">

                    </tbody>


                </table>
            </div>
        </div>
    </div>
    </div>
    <!-- End:: row-1 -->
    <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-xl-6 col-lg-6 col-md-6 col-sm-12 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-xl-6 col-lg-6 col-md-6 col-sm-12 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-xl-6 col-lg-6 col-md-6 col-sm-12 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" 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 -->
    @push('page-script')
        <script type="b6c6184d4b1d45a311eb6e71-text/javascript">
            $(document).ready(function() {
                $('#QrCode').on('click', function() {
                    $(this).append()
                    let currentDate = $('#humanfrienndlydate').val()
                    currentDate === '' && $('#fromDateEmpty').text('The From Date Field Is Required.')
                    if (currentDate !== '') {
                        $('#qr-code-container').append('<div class="spinner-border" role="status"></div>')

                        $.ajax({
                            url: "{{ route('admin.beopari.generateChitthaQrCodePdf') }}", // Replace with your actual data source URL
                            type: "POST", // GET method to retrieve data
                            data: {
                                from_date: currentDate
                            },
                            success: function(data) {
                                // Append the QR code as an image
                                const qrCodeImage =
                                    `<img src="${data.qr_code}" alt="QR Code" style="width: 200px; height: 200px;">`;

                                // Append the QR code to a specific element
                                $('#qr-code-container').html(qrCodeImage);

                                console.log(data)
                            },
                            error: function(jqXHR, textStatus, errorThrown) {
                                console.error("Error:", textStatus, errorThrown);
                            }
                        });
                    }

                })
                $(".pdf").click(function(e) {
                    e.preventDefault();
                    var href = $(this).attr('href');
                    // Open a new tab with a specified URL
                    window.open(href, "_blank");
                });


                $(".pdf").click(function(e) {
                    e.preventDefault();
                    var href = $(this).attr('href');
                    $.ajax({
                        url: href, // Replace with your actual data source URL
                        type: "GET", // GET method to retrieve data
                        success: function(data) {
                            console.log(data)
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            console.error("Error:", textStatus, errorThrown);
                        }
                    });
                });

                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);

                        }
                    });
                }

                $('.from_date').change(function() {
                    var from_date = $(this).val()
                    $.ajax({

                        url: "{!! route('admin.beopari.table') !!}",
                        type: "GET", // GET method to retrieve data
                        data: {
                            from_date: from_date
                        },
                        success: function(data) {
                            console.log(data)
                            $('#tableBody').empty()
                            var second = 0;
                            $.each(data, function(index, report) {
                                // var supplierName = report.suppliers.name;
                                // var previous_balance = report.suppliers.previous_balance;
                                var supplierName = report.beoparis.name;
                                var previous_balance = report.beoparis.previous_balance;
                                'N/A';
                                second = parseInt(previous_balance)
                                if (report.total_credit_match) {
                                    second += parseInt(report.total_credit_match)
                                }
                                if (report.total_debit_match) {
                                    second -= parseInt(report.total_debit_match)
                                }

                                var transaction_append = `
                                <tr>
                                    <td> ${report.beopari_id} </td>
                                    <td class="urdu-fonts"> <span data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> ${supplierName}</span> </td>
                                    <td class='ltr-text'>${previous_balance}</td>
                                    <td  class='credit ltr-text'> ${report.total_credit_match} </td>
                                    <td  class='debit ltr-text'> ${report.total_debit_match} </td>
                                    <td class='balance'> ${second} </td>
                                    </tr>
                                    `
                                $('#tableBody').append(transaction_append);

                                var balance_total = 0;
                                var credit_total = 0;
                                var debit_total = 0;
                                $('#tableBody tr').each(function() {
                                    // Convert the text to an integer and add it to the sum
                                    let current = $(this)
                                    let value = parseInt(current.find('.balance')
                                        .text());
                                    let credit = parseInt(current.find('.credit')
                                        .text());
                                    let debit = parseInt(current.find('.debit')
                                        .text());
                                    if (!isNaN(value)) {
                                        balance_total += value;
                                        credit_total += credit
                                        debit_total += debit
                                    }
                                });
                                $('#current_balance').val(balance_total)
                                $('#credit').val(credit_total)
                                $('#debit').val(debit_total)
                                var number = Math.abs(parseInt(balance_total))
                                var positiveNegative = balance_total < 0 ? '-' : ''
                                $('#numberWords').val(positiveNegative + ' ' +
                                    convertNumberToWords(number))

                            })
                            // })
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            console.error("Error:", textStatus, errorThrown);
                        }
                    });
                })

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