@extends('client.layouts.app-pos')


@section('title', ' فاتورة كاشير ')

@section('content')
    <!-- BEGIN: Content-->
    <div class="app-content content" style="padding: calc(0rem + 0.45rem + 1.3rem) 1rem 0">
        <div class="content-overlay"></div>
        <div class="content-wrapper container-xxl p-0">
            <div class="content-body">
                <!-- Basic Horizontal form layout section start -->
                <!-- Basic multiple Column Form section start -->
                <section class="invoice-add-wrapper" data-select2-id="13">
                    <form target="_blank" action="#" method="POST" id="invoice">

                        @csrf
                        <input id="sales_name" value="{{ auth()->user()->name }}" type="hidden">
                        <input id="company_id" value="{{ $company_id }}" type="hidden">
                        <input id="company_name" value="{{ $company->company_name }}" type="hidden">
                        <input id="company_phone" value="{{ $company->phone_number }}" type="hidden">
                        <input id="company_address" value="{{ $company->company_address }}" type="hidden">
                        <input type="hidden" name="tax_value" id="tax_value" value="{{ $company->tax_value_added ?? 0 }}">



                        <input id="tax_number" value="{{ $company->tax_number }}" type="hidden">
                        <input id="commercial_registration_number" value="{{ $company->commercial_registration_number }}"
                            type="hidden">


                        <div class="row invoice-add">
                            <div id="invoice-section" class="col-12 col-md-5">

                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="card-title bg-primary p-1 text-white text-center">الفاتورة</h4>

                                        <div class="mb-2 text-center">
                                            <button type="button" id="suspendInvoice" class="btn btn-primary mb-2">تعليق
                                                الفاتورة</button>
                                            <button type="button" id="viewSuspendedInvoices"
                                                class="btn btn-secondary mb-2">عرض الفواتير
                                                المعلقة</button>
                                            <ul id="suspendedInvoicesList" class="list-group"></ul>
                                        </div>


                                        @if ($company->tax_value_added)
                                            <h5 class="bg-primary p-1 text-white text-center" id="taxes">إجمالي الضرائب:
                                                0</h5>
                                            <h5 class="bg-primary p-1 text-white text-center" id="subtotal">0</h5>
                                        @endif
                                        <h2 class="bg-danger p-1 text-white text-center" id="finaltotal">0</h2>

                                        <!-- حقل المستلم من العميل -->
                                        <div class="mt-2">
                                            <input type="number" id="receivedFromCustomer" class="form-control"
                                                placeholder="أدخل المبلغ المستلم من العميل">
                                            <!-- حقل باقي العميل -->
                                            <h2 class="bg-dark text-white p-1 text-center hidden " id="customerBalance">
                                                الباقي :
                                                <span id="balanceAmount"></span>
                                            </h2>
                                        </div>


                                        <div id="payments">
                                            <div id="payment-methods-container">
                                                <div class="payment-method">
                                                    <div class="mt-2">
                                                        <p class="mb-50">طريقة الدفع</p>
                                                        <select class="payment_method form-select">
                                                            <option value="">اختر طريقة الدفع</option>
                                                            <option value="cash">دفع كاش نقدى</option>
                                                            @if (count($banks) > 0)
                                                                <option value="bank">دفع بنكى شبكة</option>
                                                            @endif
                                                        </select>
                                                    </div>

                                                    <div class="cash-details" style="display: none">
                                                        <div class="mt-2">
                                                            <p class="mb-50">إختر خزنة الدفع</p>
                                                            <select class="safe_id form-select">
                                                                <option value="">اختر خزنة الدفع</option>
                                                                @foreach ($safes as $safe)
                                                                    <option value="{{ $safe->id }}"
                                                                        @if ($safe->safe_name == 'الخزنة الرئيسية') selected @endif>
                                                                        {{ $safe->safe_name }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>

                                                        <div class="mt-2">
                                                            <p class="mb-50">المبلغ المدفوع</p>
                                                            <input class="form-control payAmount" name="amount"
                                                                type="text">
                                                        </div>
                                                    </div>

                                                    <div class="bank-details" style="display: none">
                                                        <div class="mt-2">
                                                            <p class="mb-50">إختر البنك</p>
                                                            <select class="bank_id form-select">
                                                                <option value="">اختر البنك</option>
                                                                @foreach ($banks as $bank)
                                                                    <option value="{{ $bank->id }}">
                                                                        {{ $bank->bank_name }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>

                                                        <div class="mt-2">
                                                            <p class="mb-50">المبلغ المدفوع</p>
                                                            <input class="form-control payAmount" name="amount"
                                                                type="text">
                                                        </div>

                                                        <div class="mt-2">
                                                            <p class="mb-50">رقم المعاملة</p>
                                                            <input type="text" class="form-control bank_check_number" />
                                                        </div>
                                                    </div>

                                                    <div class="mt-2 d-none" id="addNewPayment" align="center">
                                                        <button type="button" id="addPaymentMethod"
                                                            class="btn btn-outline-primary w-50 mb-50 waves-effect">
                                                            <i class="fa fa-plus"></i> إضافة طريقة دفع أخرى
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div>
                                                <button type="submit" class="btn btn-primary w-100 mt-2"
                                                    id="submitInvoice">دفع الفاتورة</button>
                                            </div>
                                        </div>

                                        <hr>
                                        <div id="invoice-content">
                                            <!-- محتوى الفاتورة سيتم إضافته هنا -->
                                        </div>
                                    </div>
                                </div>


                            </div>


                            <!-- Invoice Add Left starts -->
                            <div id="product-section" class="col-12 col-md-7" data-select2-id="12"
                                style="overflow: hidden">
                                <div class="card invoice-preview-card" data-select2-id="11">
                                    <!-- Header starts -->
                                    <div class="card-body invoice-padding pb-0 row">


                                        <div class="col-xl-4 col-md-4 col-12">
                                            <div class="mb-1" align="center">
                                                <b class="form-label d-flex justify-content-between" for="client_name">
                                                  اسم العميل
                                                  @include("components.modal-view", [
                                                        'modalLabl' => 'إضافة عميل جديد',
                                                        'modalId' => 'add-new-client',
                                                        'modalTrigger' => [
                                                          'icon' => 'plus',
                                                          'label' => '',
                                                          'class' => 'btn ',
                                                        ],
                                                        'srcUrl' => 'client.outer_clients.createForm'
                                                      ])
                                                </b>

                                                <select name="outer_client_id" id="outer_client_id"
                                                    class="search select2-selection__placeholder">
                                                    <option selected value="">عميل نقدي </option>
                                                    @foreach ($outer_clients as $outer_client)
                                                        <option value="{{ $outer_client->id }}">
                                                            {{ $outer_client->client_name }} - (
                                                            {{ $outer_client->phones[0]->client_phone }} )</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-xl-4 col-md-4 col-12">
                                            <div class="mb-1" align="center">
                                                <b class="form-label" for="date">تاريخ الفاتورة</b>
                                                <input type="date" name="date" id="date"
                                                    value="2026-05-22" class="form-control" />
                                            </div>
                                        </div>

                                        <div class="col-xl-4 col-md-4 col-12">
                                            <div class="mb-1" align="center">
                                                <b class="form-label" for="time">وقت الفاتورة</b>
                                                <input type="time" name="time" id="time"
                                                    value="23:33:40" class="form-control" />
                                            </div>
                                        </div>


                                        <div class="col-lg-12 col-md-12 col-12" id="products_section">
                                            <div class="mb-1">
                                                <br>
                                                <center>
                                                    <h5 class="">الاصناف</h5>
                                                </center>
                                                <div class="card-body" id="vertical-example">
                                                    <div class="row" id="products_list">

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Invoice Add Left ends -->

                            </div>



                    </form>
                </section>
            </div>
        </div>
    </div>
    </div>
    </div>


    <!-- لوحة المفاتيح الرقمية -->
    <div id="keyboard" class="d-none">
        <div class="keyboard-row">
            <button type="button" class="keyboard-key">1</button>
            <button type="button" class="keyboard-key">2</button>
            <button type="button" class="keyboard-key">3</button>
        </div>
        <div class="keyboard-row">
            <button type="button" class="keyboard-key">4</button>
            <button type="button" class="keyboard-key">5</button>
            <button type="button" class="keyboard-key">6</button>
        </div>
        <div class="keyboard-row">
            <button type="button" class="keyboard-key">7</button>
            <button type="button" class="keyboard-key">8</button>
            <button type="button" class="keyboard-key">9</button>
        </div>
        <div class="keyboard-row">
            <button type="button" class="keyboard-key">0</button>
            <button type="button" class="keyboard-key btn-warning">حذف رقم</button> <!-- زر المسح -->
            <button type="button" class="keyboard-key btn-danger">حذف الكل</button> <!-- زر حذف الكل -->
        </div>
    </div>




@endsection






@section('script')
    <script src="{{ asset('app-assets/js/select2.min.js') }}"></script>
    {{-- <script src="{{ asset('app-assets/js/pages/sales-pos.js') }}"></script> --}}
    <script
        src="https://demos.pixinvent.com/vuexy-html-admin-template/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js">
    </script>
    <script src="https://demos.pixinvent.com/vuexy-html-admin-template/assets/js/extended-ui-perfect-scrollbar.js"></script>


    <script>
        $('.search').select2();

        $(document).ready(function() {
            // تشغيل النقر على عناصر الصفحة التي تحتوي على الكلاس 'feather'
            $('.feather').trigger('click');
        });
    </script>






    {{-- الفاتورة --}}
    <script>
        let invoiceProducts = [];

        let subtotal_value = 0;
        let finaltotal_value = 0;

        $(document).ready(function() {
            // عرض المنتجات عند تحميل الصفحة
            displayProducts(@json($products)); // قم بتحويل المصفوفة إلى JSON وتمريرها كمتغير JavaScript
        });


        // عرض المنتجات
        function displayProducts(products) {
            const productsSection = $('#products_section');
            const productsList = $('#products_list');

            if (productsSection.hasClass('d-none')) {
                productsSection.removeClass('d-none');
            }

            products.forEach(product => {
                const productHtml = `
                <div class="col-lg-3 col-md-4 col-sm-6 mb-3" style="flex: 0 0 auto;">
                    <div class="card">
                        <img style="margin: auto; width: 150px; height: 150px;" src="${product.product_pic}" class="card-img-top" alt="${product.product_name}">
                        <div class="card-body text-center">
                            <h5 class="card-title">${product.product_name}</h5>
                            <p class="card-text">السعر : ${product.sector_price}</p>
                            <button type="button" class="btn btn-primary add-product" data-id="${product.id}" data-name="${product.product_name}" data-price="${product.sector_price}" data-pic="${product.product_pic}">اضف الي السلة</button>
                        </div>
                    </div>
                </div>
            `;
                productsList.prepend(productHtml);
            });

            productsList.off('click').on('click', '.add-product', function() {
                const button = $(this);
                const product = {
                    id: button.data('id'),
                    name: button.data('name'),
                    price: button.data('price'),
                    pic: button.data('pic'),
                    quantity: 1
                };

                const existingProduct = invoiceProducts.find(p => p.id === product.id);
                if (existingProduct) {
                    existingProduct.quantity++;
                } else {
                    invoiceProducts.push(product);
                }

                updateInvoice();

            });
        }

        // تحديث الفاتورة
        function updateInvoice() {
            const invoiceContent = $('#invoice-content');
            invoiceContent.empty();

            invoiceProducts.forEach(product => {
                const totalPrice = product.price * product.quantity;
                const productHtml = `
                <div class="card mb-3 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div class="d-flex align-items-center">
                                <img src="${product.pic}" alt="${product.name}" class="img-thumbnail" style="width: 50px; height: 50px;margin-left: 20px;">
                                <h5 class="card-title mb-0">${product.name}</h5>
                            </div>
                            <button type="button" class="btn btn-danger btn-sm remove-product" data-id="${product.id}">&times;</button>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <div class="input-group mr-2">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">الكمية</span>
                                </div>
                                <input type="number" id="productQty-${product.id}" class="form-control quantity-input" data-id="${product.id}" value="${product.quantity}" min="1">
                            </div>
                            <div class="input-group ml-2">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">السعر</span>
                                </div>
                                <input type="number" id="productPrice-${product.id}" class="form-control total-price-input" data-id="${product.id}" value="${totalPrice.toFixed(2)}" min="0.01" step="0.01" readonly>
                            </div>
                        </div>
                    </div>
                </div>
            `;
                invoiceContent.append(productHtml);
            });

            invoiceContent.off('change').on('change', '.quantity-input', function() {
                const productId = $(this).data('id');
                const newQuantity = parseInt($(this).val());

                const product = invoiceProducts.find(p => p.id === productId);
                if (product && newQuantity > 0) {
                    product.quantity = newQuantity;
                }

                updateInvoice();
            });

            invoiceContent.off('click').on('click', '.remove-product', function() {
                const productId = $(this).data('id');
                invoiceProducts = invoiceProducts.filter(p => p.id !== productId);

                updateInvoice();
            });

            updateSummary();
        }

        // حساب الإجماليات وتحديث العرض
        function updateSummary() {
            const subtotal = invoiceProducts.reduce((sum, product) => sum + (product.price * product.quantity), 0);
            const taxRate = {{ $company->tax_value_added ?? 0 }};
            const taxes = subtotal * (taxRate / 100);
            const finalTotal = subtotal + taxes;

            $('#subtotal').text(`${subtotal.toFixed(2)}`);
            $('#taxes').text(`إجمالي الضرائب: ${taxes.toFixed(2)}`);
            $('#finaltotal').text(`${finalTotal}`);

            subtotal_value = subtotal;
            finaltotal_value = finalTotal;

        }



        // لوحة المفاتيح
        $(document).ready(function() {
            let activeInput;

            $('body').on('focus', 'input', function() {
                activeInput = $(this);
                $('#keyboard').removeClass('d-none');
            });

            $('.keyboard-key').click(function(event) {
                event.preventDefault();
                const key = $(this).text();

                if (key === 'حذف رقم') {
                    activeInput.val(activeInput.val().slice(0, -1));
                } else if (key === 'حذف الكل') {
                    activeInput.val('');
                } else {
                    activeInput.val(activeInput.val() + key);
                }

                // تحديث الكمية والسعر فورًا بعد التعديل
                if (activeInput.hasClass('quantity-input')) {
                    const productId = activeInput.data('id');
                    const newQuantity = parseInt(activeInput.val());

                    const product = invoiceProducts.find(p => p.id === productId);
                    if (product && newQuantity > 0) {
                        product.quantity = newQuantity;
                        const totalPrice = product.price * product.quantity;
                        $(`#productPrice-${productId}`).val(totalPrice.toFixed(2));
                    }

                    updateSummary();
                }
            });

            $(document).click(function(event) {
                if (!$(event.target).closest('#keyboard, input').length) {
                    $('#keyboard').addClass('d-none');
                }
            });
        });
    </script>

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

            function updatePaymentMethodOptions() {
                const selectedMethods = [];
                $('.payment_method').each(function() {
                    const value = $(this).val();
                    if (value) {
                        selectedMethods.push(value);
                    }
                });

                $('.payment_method').each(function() {
                    const currentMethod = $(this).val();
                    $(this).find('option').each(function() {
                        const optionValue = $(this).val();
                        if (optionValue && selectedMethods.includes(optionValue) && optionValue !==
                            currentMethod) {
                            $(this).hide();
                        } else {
                            $(this).show();
                        }
                    });
                });
            }

            function resetPaymentForm() {
                $('#payForm')[0].reset();
                $('.cash-details').hide();
                $('.bank-details').hide();
            }

            $('#payment-methods-container').on('change', '.payment_method', function() {
                const paymentMethod = $(this).val();
                const container = $(this).closest('.payment-method');

                $('#addNewPayment').removeClass('d-none');

                if (paymentMethod === 'cash') {
                    container.find('.cash-details').show();
                    container.find('.bank-details').hide();
                } else if (paymentMethod === 'bank') {
                    container.find('.cash-details').hide();
                    container.find('.bank-details').show();
                } else {
                    container.find('.cash-details').hide();
                    container.find('.bank-details').hide();
                }

                updatePaymentMethodOptions();
            });

            $('#addPaymentMethod').click(function() {
                const newPaymentMethod = `
                <div class="payment-method">
                    <div class="mt-2">
                        <p class="mb-50">طريقة الدفع</p>
                        <select class="payment_method form-select">
                            <option value="">اختر طريقة الدفع</option>
                            <option value="cash">دفع كاش نقدى</option>
                            @if (count($banks) > 0)
                                <option value="bank">دفع بنكى شبكة</option>
                            @endif
                        </select>
                    </div>

                    <div class="cash-details" style="display: none">
                        <div class="mt-2" id="safes">
                            <p class="mb-50">إختر خزنة الدفع</p>
                            <select class="safe_id form-select">
                                <option value="">اختر خزنة الدفع</option>
                                @foreach ($safes as $safe)
                                    <option value="{{ $safe->id }}" @if ($safe->safe_name == 'الخزنة الرئيسية') selected @endif>
                                        {{ $safe->safe_name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mt-2">
                            <p class="mb-50">المبلغ المدفوع</p>
                            <input class="form-control payAmount" name="amount" type="text">
                        </div>
                    </div>

                    <div class="bank-details" style="display: none">
                        <div class="mt-2" id="banks">
                            <p class="mb-50">إختر البنك</p>
                            <select class="bank_id form-select">
                                <option value="">اختر البنك</option>
                                @foreach ($banks as $bank)
                                    <option value="{{ $bank->id }}">{{ $bank->bank_name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mt-2">
                            <p class="mb-50">المبلغ المدفوع</p>
                            <input class="form-control payAmount" name="amount" type="text">
                        </div>

                        <div class="mt-2">
                            <p class="mb-50">رقم المعاملة</p>
                            <input type="text" class="form-control bank_check_number" />
                        </div>

                        <div class="mt-2">
                            <p class="mb-50">ملاحظات</p>
                            <input type="text" class="form-control bank_notes" />
                        </div>
                    </div>
                </div>
            `;
                $('#payment-methods-container').append(newPaymentMethod);
                updatePaymentMethodOptions();
            });

            updatePaymentMethodOptions();
        });
    </script>

    <script>
        function generateUniqueID() {
            var timestamp = new Date().getTime();
            var randomNum = Math.floor(Math.random() * 1000);
            return 'INV_' + timestamp + '_' + randomNum;
        }


        var invoiceID = generateUniqueID();

        $(document).ready(function() {
            const company_id = $("#company_id").val();

            function collectInvoiceData() {
                if (invoiceProducts.length === 0) {
                    toastr.error("يجب إضافة منتجات إلى الفاتورة.", "خطأ في الإدخال", {
                        positionClass: "toast-top-right",
                        tapToDismiss: !1,
                        timeOut: 2e3,
                        rtl: $("html").attr("data-textdirection")
                    });
                    return false;
                }

                const products = invoiceProducts.map(product => ({
                    productID: product.id,
                    productName: product.name,
                    quantity: product.quantity,
                    price: product.price,
                    total: (product.price * product.quantity),
                    productStoreID: null,
                    unitName: null,
                }));



                let payment_details = {}; // الكائن الذي سيحتوي تفاصيل الدفع
                let totalPaidAmount = 0;
                let hasPayment = false;

                $('.payment-method').each(function() {
                    const currentPaymentMethod = $(this).find('.payment_method').val();
                    if (!currentPaymentMethod) {
                        return; // تخطي إذا لم يتم اختيار طريقة دفع
                    }

                    hasPayment = true;

                    const payment = {
                        method: currentPaymentMethod
                    };

                    if (currentPaymentMethod === 'cash') {
                        const cashDetails = {
                            payAmount: parseFloat($(this).find('.cash-details .payAmount').val()),
                            safe_id: $(this).find('.cash-details .safe_id').val()
                        };

                        if (!cashDetails.payAmount) {
                            toastr.error("يجب إدخال المبلغ المدفوع.", "خطأ في الإدخال", {
                                positionClass: "toast-top-right",
                                tapToDismiss: !1,
                                timeOut: 2e3,
                                rtl: $("html").attr("data-textdirection")
                            });
                            return false; // عودة false لإيقاف التنفيذ
                        }

                        payment.payAmountCash = cashDetails.payAmount;
                        payment.safe_id = cashDetails.safe_id;
                        totalPaidAmount += cashDetails.payAmount;

                    } else if (currentPaymentMethod == 'bank') {
                        const bankDetails = {
                            payAmountCash: parseFloat($(this).find('.bank-details .payAmount').val()),
                            bank_id: $(this).find('.bank-details .bank_id').val(),
                            bank_check_number: $(this).find('.bank-details .bank_check_number').val()
                        };

                        if (!bankDetails.payAmountCash || !bankDetails.bank_id || !bankDetails
                            .bank_check_number) {
                            toastr.error("يجب إدخال جميع تفاصيل الدفع البنكي.", "خطأ في الإدخال", {
                                positionClass: "toast-top-right",
                                tapToDismiss: !1,
                                timeOut: 2e3,
                                rtl: $("html").attr("data-textdirection")
                            });
                            return false; // عودة false لإيقاف التنفيذ
                        }

                        payment.payAmountCash = bankDetails.payAmountCash;
                        payment.bank_id = bankDetails.bank_id;
                        payment.bank_check_number = bankDetails.bank_check_number;
                        totalPaidAmount += bankDetails.payAmountCash;
                    }

                    payment_details = payment; // تحديث كائن payment_details بآخر طريقة دفع تمت إضافتها
                });

                if (!hasPayment) {
                    const totalAmount = parseFloat($('#finaltotal').text());
                    payment_details = {
                        method: 'cash',
                        payAmountCash: totalAmount,
                        safe_id: null // يمكن تخصيص خزنة افتراضية هنا إذا لزم الأمر
                    };
                    totalPaidAmount = totalAmount;
                    totalPaidAmount = parseFloat($('#finaltotal').text());
                    paymentMethod = 'cash';
                }

                // التحقق من أن المبلغ المدفوع يغطي إجمالي الفاتورة
                if (totalPaidAmount < parseFloat($('#finaltotal').text())) {
                    toastr.error("المبلغ المدفوع أقل من إجمالي الفاتورة.", "خطأ في الدفع", {
                        positionClass: "toast-top-right",
                        tapToDismiss: !1,
                        timeOut: 2e3,
                        rtl: $("html").attr("data-textdirection")
                    });
                    return false;
                }


                var tax = $('#tax_value').val();

                var company_phone = $('#company_phone').val();
                var company_address = $('#company_address').val();
                var tax_number = $('#tax_number').val();
                var commercial_registration_number = $('#commercial_registration_number').val();


                const invoiceData = {
                    invoiceID: invoiceID, // تعيين ID مؤقت للفاتورة بناءً على الوقت الحالي
                    customerID: $('#outer_client_id').val(),
                    customerName: $('#outer_client_id option:selected').text(),
                    companyID: $('#company_id').val(),
                    companyName: $('#company_name').val(),
                    salesName: $("#sales_name").val(),
                    date: $('#date').val(),
                    time: $('#time').val(),

                    payment_method: paymentMethod,
                    payment_details: payment_details,
                    products: products,
                    finalTotal: finaltotal_value,
                    subtotal: subtotal_value,
                    tax: tax,


                    companyPhone: company_phone,

                    companyAddress: company_address,

                    taxNumber: tax_number,

                    commercialRegistrationNumber: commercial_registration_number,

                };

                return invoiceData;
            }

            function saveInvoiceToIndexedDB(invoiceData) {
                // Open or create a database
                var request = indexedDB.open('offline');

                request.onerror = function(event) {
                    console.log('Database error: ' + event.target.errorCode);
                };

                request.onsuccess = function(event) {
                    var db = event.target.result;

                    var transaction = db.transaction(['sale_bills'], 'readwrite');
                    var objectStore = transaction.objectStore('sale_bills');

                    var addRequest = objectStore.add(invoiceData);

                    addRequest.onsuccess = function(event) {
                        toastr.success(
                            "تم اضافة الفاتورة محليا حتي عودة الاتصال بالانترنت",
                            "لا يوجد إتصال بالإنترنت", {
                                positionClass: "toast-top-right",
                                tapToDismiss: !1,
                                timeOut: 2e4,
                                rtl: $("html").attr("data-textdirection")
                            });


                        window.open(`/print_offline.html?id=${invoiceID}&pos=true`, '_blank');
                        location.reload();

                        // resetFields(); // إعادة ضبط الحقول بدلاً من إعادة تحميل الصفحة
                    };

                    addRequest.onerror = function(event) {
                        toastr.error(
                            "في خطأ جرب تاني",
                            "لا يوجد إتصال بالإنترنت", {
                                positionClass: "toast-top-right",
                                tapToDismiss: !1,
                                timeOut: 2e4,
                                rtl: $("html").attr("data-textdirection")
                            });

                    };
                };
            }

            $('#submitInvoice').click(function(event) {
                event.preventDefault(); // منع تحميل الصفحة الافتراضية عند النقر على زر الإرسال

                const invoiceData = collectInvoiceData();
                if (!invoiceData) return; // في حالة وجود خطأ في جمع البيانات

                // حفظ البيانات في IndexedDB
                saveInvoiceToIndexedDB(invoiceData);
            });

            function resetFields() {
                // فرغ المصفوفة invoiceProducts
                invoiceProducts = [];
                $('#invoice-content').empty();
                updateSummary();
                // الحصول على تاريخ اليوم
                const todayDate = new Date().toISOString().slice(0, 10);
                $('#date').val(todayDate); // إفراغ حقل التاريخ

                const currentDate = new Date();
                const hours = String(currentDate.getHours()).padStart(2, '0'); // Ensure 2-digit format
                const minutes = String(currentDate.getMinutes()).padStart(2, '0'); // Ensure 2-digit format
                const seconds = String(currentDate.getSeconds()).padStart(2, '0'); // Ensure 2-digit format

                const currentTime = `${hours}:${minutes}:${seconds}`;
                $('#time').val(currentTime); // Set the formatted time to the time input field

                // إفراغ حقول طرق الدفع
                $('.payment_method').val(''); // حقل اختيار طريقة الدفع
                $('.payAmount').val(''); // حقل المبلغ المدفوع
                $('.safe_id').val(''); // حقل معرف الخزنة
                $('.bank_id').val(''); // حقل معرف البنك
                $('.bank_check_number').val(''); // حقل رقم المعاملة
                $('.bank_notes').val(''); // حقل الملاحظات

                $('#receivedFromCustomer').val('');
                $('#customerBalance').hide();

                // إخفاء وإظهار العناصر المناسبة بناءً على طريقة الدفع المحددة
                $('.cash-details').hide();
                $('.bank-details').hide();
                $('.payment_method').each(function() {
                    const paymentMethod = $(this).val();
                    if (paymentMethod === 'cash') {
                        $(this).closest('.payment-method').find('.cash-details').show();
                    } else if (paymentMethod === 'bank') {
                        $(this).closest('.payment-method').find('.bank-details').show();
                    }
                });
            }
        });
    </script>



    {{-- حساب الباقي --}}
    <script>
        // دالة لحساب الباقي للعميل
        function calculateBalance() {
            const receivedFromCustomer = parseFloat($('#receivedFromCustomer').val());
            const finalTotal = parseFloat($('#finaltotal').text());

            if (!isNaN(receivedFromCustomer) && !isNaN(finalTotal)) {
                const balance = receivedFromCustomer - finalTotal;

                // عرض الباقي للعميل
                $('#balanceAmount').text(balance);

                // إذا كان الباقي صفر أو أقل، إخفاء حقل الباقي، وإلا عرضه
                if (balance >= 0) {
                    $('#customerBalance').removeClass('hidden');
                } else {
                    $('#customerBalance').addClass('hidden');
                }
            }
        }

        // حدث عند تغيير حقل المستلم من العميل
        $('#receivedFromCustomer').on('input', calculateBalance);

        // قم بإعادة حساب الباقي عند تحميل الصفحة، في حال كانت هناك قيمة مسبقة في الحقول
        $(document).ready(function() {
            calculateBalance();
        });
    </script>

    {{-- تعليق الفاتورة --}}
    <script>
        let suspendedInvoices = [];

        // تعليق الفاتورة
        $('#suspendInvoice').click(function(event) {
            const invoiceData = collectInvoiceData();
            if (!invoiceData) {
                event.preventDefault();
                return;
            }

            // حفظ الفاتورة المعلقة
            suspendedInvoices.push(invoiceData);
            resetFields();
            toastr.success("تم تعليق الفاتورة بنجاح", "تعليق الفاتورة", {
                positionClass: "toast-top-right",
                tapToDismiss: !1,
                timeOut: 2000,
                rtl: $("html").attr("data-textdirection")
            });
        });

        // عرض الفواتير المعلقة
        $('#viewSuspendedInvoices').click(function(event) {
            if (suspendedInvoices.length === 0) {
                event.preventDefault();
                toastr.warning("لا توجد فواتير معلقة.", "عرض الفواتير المعلقة", {
                    positionClass: "toast-top-right",
                    tapToDismiss: !1,
                    timeOut: 2000,
                    rtl: $("html").attr("data-textdirection")
                });
                return;
            }

            const suspendedInvoicesList = suspendedInvoices.map((invoice, index) => {
                return `
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <span>فاتورة رقم ${index + 1}: الإجمالي ${invoice.finaltotal.toFixed(2)}</span>
                        <button class="btn btn-primary retrieve-invoice" data-index="${index}">استرجاع</button>
                    </li>
                `;
            }).join('');
            $('#suspendedInvoicesList').html(suspendedInvoicesList);
        });

        // استرجاع الفاتورة المعلقة
        $('#suspendedInvoicesList').on('click', '.retrieve-invoice', function(event) {
            const index = $(this).data('index');
            const invoice = suspendedInvoices[index];

            invoiceProducts = invoice.products;
            updateInvoice();
            updateSummary();

            suspendedInvoices.splice(index, 1); // إزالة الفاتورة المسترجعة من القائمة
            $('#suspendedInvoicesList').html(''); // إفراغ قائمة الفواتير المعلقة بعد الاسترجاع
        });

        function collectInvoiceData() {
            if (invoiceProducts.length === 0) {
                toastr.error("يجب إضافة منتجات إلى الفاتورة.", "خطأ في الإدخال", {
                    positionClass: "toast-top-right",
                    tapToDismiss: !1,
                    timeOut: 2000,
                    rtl: $("html").attr("data-textdirection")
                });
                return false;
            }

            const products = invoiceProducts.map(product => ({
                id: product.id,
                name: product.name,
                price: product.price,
                quantity: product.quantity,
                pic: product.pic
            }));

            const invoiceData = {
                products: products,
                subtotal: subtotal_value,
                finaltotal: finaltotal_value,
                company_id: company_id
            };

            return invoiceData;
        }
    </script>





@endsection




@section('style')
    <link href="{{ asset('app-assets/css/app-invoice.css') }}" rel="stylesheet" />

    <link
        href="https://demos.pixinvent.com/vuexy-html-admin-template/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css"
        rel="stylesheet" />

    <style>
        .header-navbar {
            display: none;
        }


        #keyboard {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #f8f9fa;
            border-top: 1px solid #ced4da;
            padding: 10px;
        }

        .keyboard-row {
            display: flex;
            justify-content: center;
            margin-bottom: 5px;
        }

        .keyboard-key {
            flex: 1;
            padding: 15px;
            margin: 2px;
            font-size: 1.2rem;
            background: #7367F0;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .keyboard-key:active {
            background: #0056b3;
        }

        #finaltotal {
            font-size: 70px;
            font-weight: 900;
        }
    </style>

@endsection