@extends('client.layouts.app-pos')
@section('title', ' فاتورة كاشير ')

@section('content')
    <!-- BEGIN: Content-->
    <div class="app-content content" style="padding: calc(0rem + 0.45rem + 0.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="company_id" value="{{ $company_id }}" type="hidden">
                        {{-- <input type="hidden" name="subtotal_value" id="subtotal_value"> --}}
                        {{-- <input type="hidden" name="finaltotal_value" id="finaltotal_value"> --}}
                        <div class="row invoice-add">
                            <div id="invoice-section" class="col-12 col-md-5">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="text-center mb-2">
                                            <img class="m-auto" style="width: 30%"
                                                src="{{ asset('assets/images/logo.png') }}" alt="">
                                        </div>

                                        <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>
                                        @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:03" class="form-control" />
                                            </div>
                                        </div>
                                        <div class="col-lg-12 col-md-12 col-12">
                                            <div class="mb-1">
                                                <br>
                                                <center>
                                                    <h5>الفئات</h5>
                                                </center>
                                                <div class="card-body" id="horizontal-example">
                                                    <div class="row" id="categories_list">
                                                        <!-- إضافة فئة "كل المنتجات" -->
                                                        <div class="col-lg-3 col-md-3 col-sm-6">
                                                            <div class="card mb-1">
                                                                <div class="card-body text-center">
                                                                    <h5 class="card-title">الجميع</h5>
                                                                    <button class="btn btn-danger category_btn"
                                                                        onclick="handleCategorySelection(event, 'all')">اختر
                                                                        الكل</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- عرض باقي الفئات -->
                                                        @foreach ($categories as $category)
                                                            <div class="col-lg-3 col-md-3 col-sm-6">
                                                                <div class="card mb-1">
                                                                    <div class="card-body text-center">
                                                                        <h5 class="card-title">
                                                                            {{ $category['category_name'] }}</h5>
                                                                        <!-- يمكنك إضافة المزيد من التفاصيل هنا -->
                                                                        <button class="btn btn-primary category_btn"
                                                                            onclick="handleCategorySelection(event, {{ $category['id'] }})">اختر</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </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 justify-content-center">
                                                        <div class="col-lg-6 col-md-8 col-sm-10 col-12 m-1">
                                                            <div class="input-group">
                                                                <input type="text" class="form-control form-control-lg"
                                                                    id="searchInput"
                                                                    placeholder="ابحث باسم المنتج أو الكود">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- إضافة زر البحث -->
                                                    <div class="row justify-content-center">
                                                        <div class="col-lg-6 col-md-8 col-sm-10 col-12 mb-3 text-center">
                                                            <button type="button"
                                                                class="btn btn-primary btn-lg btn-block w-50"
                                                                id="searchButton">بحث</button>
                                                        </div>
                                                    </div>

                                                    <div class="row" id="products_list">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Invoice Add Left ends -->
                                <div class="text-center d-block d-sm-none">
                                    <a href="{{ route('client.sale_bills.index') }}" class="btn btn-primary">الرجوع لصفحة
                                        المبيعات</a>
                                </div>
                            </div>
                        </div>
                    </form>
                </section>
            </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 searchTimeout;

        $('#searchInput').on('input', function() {
            const searchText = $(this).val().trim();

            if (searchTimeout) {
                clearTimeout(searchTimeout);
            }

            // بدء البحث تلقائيًا عند تجاوز النص 8 أحرف
            if (searchText.length >= 8) {
                searchTimeout = setTimeout(function() {
                    executeSearch(searchText);
                }, 500); // تأخير قصير لمنع طلبات كثيرة
            }
        });

        $('#searchButton').click(function() {
            const searchText = $('#searchInput').val().trim();
            executeSearch(searchText);
        });

        function executeSearch(searchText) {
            // التحقق من طول النص المدخل
            if (searchText.length < 3) {
                // عرض رسالة الخطأ
                toastr.error(
                    "رجاء ادخال 3 حروف على الاقل",
                    "خطأ اثناء البحث", {
                        positionClass: "toast-top-right",
                        tapToDismiss: !1,
                        timeOut: 2e3,
                        rtl: $("html").attr("data-textdirection")
                    }
                );
                return; // عدم القيام بعملية البحث
            }

            // استمرار عملية البحث في حالة كان النص المدخل مناسبًا
            $('.category_btn').prop('disabled', false);
            $('#products_list').empty();

            ajaxRequest('{{ route('client.products.searchProductByNameOrCode') }}', {
                search_term: searchText,
                company_id: {{ $company_id }}
            }, displayProducts);
        }
    </script>

    {{-- الفاتورة --}}
    <script>
        let invoiceProducts = [];
        const units = @json($units);

        let subtotal_value = 0;
        let finaltotal_value = 0;

        // سكشن الفئات
        function handleCategorySelection(event, categoryId) {
            event.preventDefault();
            const button = $(event.target);
            if (button.prop('disabled')) {
                return;
            }

            button.prop('disabled', true);
            console.log("المعرف المختار هو: ", categoryId);

            if (categoryId === 'all') {
                $('.category_btn').prop('disabled', true);
                $('#products_list').empty();
            }

            ajaxRequest('{{ route('client.sale_bills.get_products_by_category') }}', {
                category_id: categoryId,
                company_id: {{ $company_id }}
            }, displayProducts);
        }

        // البحث
        // $('#searchButton').click(function() {
        //     const searchText = $('#searchInput').val().trim();

        //     // التحقق من طول النص المدخل
        //     if (searchText.length < 3) {
        //         // عرض رسالة الخطأ
        //         toastr.error(
        //             "رجاء ادخال 3 حروف على الاقل",
        //             "خطأ اثناء البحث", {
        //                 positionClass: "toast-top-right",
        //                 tapToDismiss: !1,
        //                 timeOut: 2e3,
        //                 rtl: $("html").attr("data-textdirection")
        //             });
        //         return; // عدم القيام بعملية البحث
        //     }

        //     // استمرار عملية البحث في حالة كان النص المدخل مناسبًا
        //     $('.category_btn').prop('disabled', false);
        //     $('#products_list').empty();

        //     ajaxRequest('{{ route('client.products.searchProductByNameOrCode') }}', {
        //         search_term: searchText,
        //         company_id: {{ $company_id }}
        //     }, displayProducts);
        // });


        // طلب Ajax عام
        function ajaxRequest(url, data, successCallback) {
            $.ajax({
                url: url,
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data: JSON.stringify(data),
                contentType: 'application/json; charset=utf-8',
                success: function(data) {
                    console.log("البيانات المستلمة: ", data);
                    successCallback(data);
                },
                error: function(error) {
                    console.error("حدث خطأ:", error);
                }
            });
        }


        function displayProducts(products) {
            const productsSection = $('#products_section');
            const productsList = $('#products_list');

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

            if (products.length === 0) {
                productsList.html('<h3 class="text-center text-danger font-weight-bold ">لا يوجد نتائج بحث</h3>');
                return; // توقف هنا إذا لم تكن هناك منتجات
            }

            products.forEach(product => {
                let priceToShow = product.price || (product.quantity ? product.quantity * product.sector_price :
                    product.sector_price);

                const unitOptions = units.map((unit, index) =>
                    `<option value="${unit.id}" ${unit.id == product.secondary_unit_id ? 'selected' : (index == 0 ? 'selected' : '')}>${unit.unit_name}</option>`
                ).join('');

                const defaultUnit = units.find(unit => unit.id == product.secondary_unit_id) || units[0];

                const productHtml = `
                    <div class="col-lg-4 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">السعر : <span class="product-price" data-price="${priceToShow}">${priceToShow}</span></p>
                                <select class="form-select unit-select mb-1 m-auto" style="width:95%" data-product-id="${product.id}">
                                    ${unitOptions}
                                </select>
                                <button type="button" class="btn btn-primary btn-lg add-product" data-id="${product.id}"
                                    data-name="${product.product_name}" data-price="${priceToShow}"
                                    data-pic="${product.product_pic}" data-unit-id="${defaultUnit.id}"
                                    data-unit-name="${defaultUnit.unit_name}" data-barcode="${product.barCode}">اضف الي السلة</button>
                            </div>
                        </div>
                    </div>
                `;
                productsList.prepend(productHtml);

                // أضف المنتج إلى الفاتورة مباشرة إذا كان يحتوي على barCode
                if (product.barCode) {
                    const button = $(
                        `<button data-id="${product.id}" data-name="${product.product_name}" data-price="${priceToShow}" data-pic="${product.product_pic}" data-unit-id="${defaultUnit.id}" data-unit-name="${defaultUnit.unit_name}" data-barcode="${product.barCode}"></button>`
                    );
                    addProductToInvoice(button);
                }
            });

            // تحديث السعر عند تغيير الوحدة
            $('.unit-select').change(function() {
                const select = $(this);
                const productId = select.data('product-id');
                const unitId = select.val();
                const app_url = "{{ url('') }}"; // تعيين رابط الأساس
                const token = "{{ csrf_token() }}";

                // طلب Ajax لجلب السعر بناءً على الوحدة المختارة
                $.post(app_url + "/dashboard/sale_bills/get/UnitPrice", {
                    product_id: productId,
                    unit_id: unitId,
                    "_token": token
                }, function(data) {
                    const newPrice = data.price || data.product_sector_price;
                    select.closest('.card').find('.product-price').text(newPrice);
                    select.closest('.card').find('.add-product').data('price', newPrice);
                    select.closest('.card').find('.add-product').data('unit-id', unitId); // حفظ unit_id
                    select.closest('.card').find('.add-product').data('unit-name', select.find(
                        'option:selected').text()); // حفظ اسم الوحدة المختارة
                }).fail(function(error) {
                    console.error("حدث خطأ:", error);
                });
            });

            productsList.off('click').on('click', '.add-product', function() {
                const button = $(this);
                addProductToInvoice(button);
            });
        }

        function addProductToInvoice(button) {
            const selectedUnit = button.closest('.card').find('.unit-select option:selected');
            const product = {
                id: button.data('id'),
                name: button.data('name'),
                price: parseFloat(button.data('price')),
                pic: button.data('pic'),
                quantity: 1,
                unit: button.data('unit-id'), // استخدم unit_id
                unit_name: button.data('unit-name') // حفظ اسم الوحدة للعرض فقط
            };

            const existingProduct = invoiceProducts.find(p => p.id === product.id && p.unit === product.unit);
            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 unitOptions = units.map((unit, index) => `
                    <option value="${unit.id}" data-index="${index}" ${unit.id == product.unit ? 'selected' : ''}>${unit.unit_name}</option>
                `).join('');

                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="mb-1">
                                <select class="form-select unit-select-invoice" data-product-id="${product.id}" data-current-unit="${product.unit}">
                                    ${unitOptions}
                                </select>
                            </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);
            });


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

                console.log(newQuantity);

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

                updateInvoice();
            });





            invoiceContent.off('change').on('change', '.unit-select-invoice', function() {
                const select = $(this);
                const productId = select.data('product-id');
                const unitId = select.val();
                const app_url = "{{ url('') }}"; // تعيين رابط الأساس
                const token = "{{ csrf_token() }}";

                // طلب Ajax لجلب السعر بناءً على الوحدة المختارة
                $.post(app_url + "/dashboard/sale_bills/get/UnitPrice", {
                    product_id: productId,
                    unit_id: unitId,
                    "_token": token
                }, function(data) {
                    const newPrice = data.price || data.product_sector_price;
                    const product = invoiceProducts.find(p => p.id === productId);
                    if (product) {
                        product.price = newPrice;
                        product.unit = unitId; // استخدام unit ID بدلاً من unit name
                        product.unit_name = select.find('option:selected').text(); // تحديث اسم الوحدة
                        updateInvoice();
                    }
                }).fail(function(error) {
                    console.error("حدث خطأ:", error);
                });
            });

            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;
        }
    </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 d-flex justify-content-between align-items-center">
                    <div class="w-75">
                        <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>
                    <button type="button" class="btn btn-danger btn-sm remove-payment-method" style="margin-top: 25px;">&times;</button>
                </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>
            </div>
        `;
                $('#payment-methods-container').append(newPaymentMethod);
                updatePaymentMethodOptions();
            });

            // حدث لإزالة طريقة الدفع
            $('#payment-methods-container').on('click', '.remove-payment-method', function() {
                $(this).closest('.payment-method').remove();
                updatePaymentMethodOptions();
            });

            updatePaymentMethodOptions();
        });
    </script>

    {{-- ارسال الفاتورة --}}
    <script>
        var customerID;
        $('#outer_client_id').change(function() {
            customerID = $('#outer_client_id').val();
        });


        $(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,
                    quantity: product.quantity,
                    price: product.price,
                    total: (product.price * product.quantity),
                    unit: product.unit // استخدام unit ID

                }));

                const payments = [];
                let totalPaidAmount = 0;
                let hasPayment = false;

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

                    hasPayment = true;

                    const payment = {
                        method: paymentMethod
                    };

                    if (paymentMethod === '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;
                        }

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

                    } else if (paymentMethod === 'bank') {
                        const bankDetails = {
                            payAmount: 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.payAmount || !bankDetails.bank_id || !bankDetails
                            .bank_check_number) {
                            toastr.error("يجب إدخال جميع تفاصيل الدفع البنكي.", "خطأ في الإدخال", {
                                positionClass: "toast-top-right",
                                tapToDismiss: !1,
                                timeOut: 2e3,
                                rtl: $("html").attr("data-textdirection")
                            });
                            return false;
                        }

                        payment.amount = bankDetails.payAmount;
                        payment.bank_id = bankDetails.bank_id;
                        payment.bank_check_number = bankDetails.bank_check_number;
                        totalPaidAmount += bankDetails.payAmount;
                    }

                    payments.push(payment);
                });

                // إذا لم يتم اختيار أي وسيلة دفع
                if (!hasPayment) {
                    payments.push({
                        method: 'cash',
                        amount: finaltotal_value,
                        safe_id: null // يمكن تخصيص خزنة افتراضية هنا إذا لزم الأمر
                    });
                    totalPaidAmount = finaltotal_value;
                }

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

                const invoiceData = {
                    products: products,
                    payments: payments,
                    outer_client_id: customerID ?? null,
                    date: $('#date').val(),
                    time: $('#time').val(),
                    subtotal: subtotal_value, // يجب أن تحدد كيف تحصل على قيمة الإجمالي الجزئي
                    finaltotal: finaltotal_value,
                    company_id: company_id
                };

                return invoiceData;
            }

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

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

                console.log(invoiceData);

                try {
                    const jsonData = JSON.stringify(invoiceData);

                    $.ajax({
                        url: '{{ route('client.sale_bills.store_pos') }}',
                        type: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        data: jsonData,
                        contentType: 'application/json; charset=utf-8',
                        success: function(response) {
                            toastr.success(
                                "تم اضافة الفاتورة بنجاح",
                                "تم اضافة الفاتورة بنجاح", {
                                    positionClass: "toast-top-right",
                                    tapToDismiss: !1,
                                    timeOut: 2e3,
                                    rtl: $("html").attr("data-textdirection")
                                });

                            // فتح صفحة الطباعة في نافذة جديدة
                            const printUrl =
                                '{{ route('client.sale_bills.print_pos', ['id' => ':id']) }}'
                                .replace(':id', response.id);
                            window.open(printUrl, '_blank');

                            // إفراغ الحقول وإعادة تعيين القيم الافتراضية
                            resetFields();
                        },
                        error: function(error) {
                            console.error('حدث خطأ أثناء إرسال الفاتورة:', error);
                        }
                    });
                } catch (e) {
                    console.error('خطأ أثناء تحويل البيانات إلى JSON:', e);
                }
            });
        });

        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>
        let suspendedInvoices = [];

        $(document).ready(function() {


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

                // Add customer ID to invoice data
                invoiceData.customerID = customerID;

                // حفظ الفاتورة المعلقة
                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;
                customerID = invoice.customerID; // Retrieve customer ID from the suspended invoice
                $('#outer_client_id').val(customerID).trigger('change'); // Update the select element
                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,
                unit: product.unit
            }));

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

            return invoiceData;
        }
    </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);
    </script>
    {{-- الكيبورد --}}
    <script>
        $(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();
                }

                // حساب الباقي بعد كل تغيير في حقل الإدخال
                calculateBalance();
            });

            $(document).click(function(event) {
                if (!$(event.target).closest('#keyboard, input').length) {
                    $('#keyboard').addClass('d-none');
                }
            });
        });
    </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>
        html body .app-content {
            padding: 0 !important;
        }

        @media (min-width: 768px) {
            html body .app-content {
                padding: calc(0rem + 0.45rem + 1.3rem) 1rem 0 !important;
            }
        }


        .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;
        }

        .buy-now {
            display: none;
        }
    </style>

@endsection