@extends('layouts.master')

@section('css')
<!-- Data table css -->
<link href="{{ URL::asset('assets/plugins/datatable/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
<link href="{{ URL::asset('assets/plugins/datatable/css/buttons.bootstrap4.min.css') }}" rel="stylesheet">
<link href="{{ URL::asset('assets/plugins/datatable/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" />
<link href="{{ URL::asset('assets/plugins/datatable/css/jquery.dataTables.min.css') }}" rel="stylesheet">
<link href="{{ URL::asset('assets/plugins/datatable/css/responsive.dataTables.min.css') }}" rel="stylesheet">
<link href="{{ URL::asset('assets/plugins/select2/css/select2.min.css') }}" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

<style>
    /* شاشة الانتظار الزجاجية الحديثة */
    #loading-screen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(15, 23, 42, 0.65);
        backdrop-filter: blur(4px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 99999;
        color: white;
    }

    #loading-animation {
        border: 4px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        border-top: 4px solid #10b981;
        width: 55px;
        height: 55px;
        animation: spin 0.9s linear infinite;
        margin-bottom: 15px;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* كارت الفلاتر الرئيسي */
    .filter-card-header {
        background: #ffffff;
        border-radius: 16px;
        border: 1px solid #edf2f7;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.02);
        padding: 22px;
        margin-bottom: 24px;
    }

    .filter-label {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
        margin-bottom: 6px;
        display: block;
    }

    .custom-input {
        border-radius: 10px !important;
        border: 1px solid #cbd5e1 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        height: 44px !important;
    }

    .custom-input:focus {
        border-color: #004d44 !important;
        box-shadow: 0 0 0 3px rgba(0, 77, 68, 0.1) !important;
    }

    /* تخصيص Select2 ليتماشى مع الارتفاع والحواف */
    .select2-container .select2-selection--single {
        height: 44px !important;
        border-radius: 10px !important;
        border: 1px solid #cbd5e1 !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 12px !important;
        font-weight: 600 !important;
        font-size: 13px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 9px !important;
        left: 10px !important;
    }

    /* تصميم المودالات الفخمة */
    .modal-content-modern {
        border-radius: 16px !important;
        border: none !important;
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1) !important;
        overflow: hidden;
    }

    .modal-header-modern {
        background: #f8fafc;
        border-bottom: 1px solid #edf2f7;
        padding: 16px 22px;
    }

    .modal-footer-modern {
        background: #f8fafc;
        border-top: 1px solid #edf2f7;
        padding: 14px 22px;
    }
</style>
@endsection

@section('title')
{{ __('home.previousSalesInvoices') }}
@endsection

@section('page-header')
<div class="breadcrumb-header justify-content-between align-items-center my-4 p-3 bg-white shadow-sm" style="border-radius: 15px;">
    <div class="left-content text-right">
        <h2 class="main-content-title tx-24 mg-b-1 font-weight-bold" style="color: #004d44;">
            <i class="fas fa-file-invoice text-success mg-l-5"></i> {{ __('home.previousSalesInvoices') }}
        </h2>
        <p class="text-muted card-sub-title m-0 mt-1" style="font-size: 13px;">
            استعراض سجل المبيعات والاشتراكات السابقة مع إمكانية الفحص والتعديل المالي السريع.
        </p>
    </div>
    <div class="d-flex align-items-center gap-2">
        <a href="{{ route('customers.report') }}" class="btn btn-outline-success px-3 py-2 ml-2" style="border-radius: 10px; font-weight: 600; font-size: 13px;">
            <i class="fas fa-address-book mg-l-5"></i> دليل العملاء
        </a>
        <a href="{{ url('/dashboard') }}" class="btn btn-light px-3 py-2" style="border-radius: 10px; font-weight: 600; font-size: 13px; border: 1px solid #e2e8f0;">
            <i class="fas fa-arrow-left mg-l-5 text-muted"></i> العودة للرئيسية
        </a>
    </div>
</div>
@endsection

@section('content')

    <!-- شاشة التحميل التفاعلية -->
    <div id="loading-screen" style="display: none;">
        <div id="loading-animation"></div>
        <p class="font-weight-bold mb-1" style="font-size: 16px;">جارٍ إرسال الفاتورة، يرجى الانتظار...</p>
        <small class="text-light" style="opacity: 0.8;">Invoice is being sent to ZATCA, please wait</small>
    </div>

    <!-- عرض أخطاء التحقق إن وجدت -->
    @if (count($errors) > 0)
        <div class="alert alert-danger alert-dismissible fade show p-3 mb-3" role="alert" style="border-radius: 12px;">
            <strong class="d-block mb-1"><i class="fas fa-exclamation-triangle mg-l-2"></i> تنبيه! توجد بعض الأخطاء:</strong>
            <ul class="mb-0 pr-3">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    <!-- كارت الفلترة والبحث السريع -->
    <div class="filter-card-header">
        <form action="{{ url(Mcamara\LaravelLocalization\Facades\LaravelLocalization::getCurrentLocale() . '/' . ($page = 'printavaliableproduct')) }}"
              method="POST" role="search" autocomplete="off">
            {{ csrf_field() }}

            <div class="row row-sm align-items-end">
                <!-- 1. البحث برقم الفاتورة -->
                <div class="col-lg-4 col-md-6 mb-3 mb-lg-0">
                    <label class="filter-label" for="invoiceid">
                        <i class="fas fa-hashtag mg-l-2 text-muted"></i> {{ __('home.enterinvoicenumber') }}
                    </label>
                    <input class="form-control custom-input text-center" value="{{ $start_at ?? '' }}" id="invoiceid" placeholder="اكتب رقم الفاتورة واضغط Enter..."
                           type="text" onchange="searchaboutinvoiceByIdfunction()" required>
                </div>

                <!-- 2. الفلترة حسب العميل -->
                <div class="col-lg-4 col-md-6 mb-3 mb-lg-0">
                    <label for="clientnamesearch" class="filter-label">
                        <i class="fas fa-user mg-l-2 text-muted"></i> {{ __('home.chooseclient') }}
                    </label>
                    <select class="select2 form-control" name="clientnamesearch" id="clientnamesearch">
                        <option value="">{{ __('home.all_customers') ?? 'كل العملاء' }}</option>
                        @foreach (App\Models\customers::get() as $customer)
                            <option value="{{ $customer->id }}">
                                {{ $customer->id == 1 ? __('home.Cash Custome') : $customer->name }}
                                @if($customer->phone) - ({{ $customer->phone }}) @endif
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- 3. الفلترة بالتاريخ -->
                <div class="col-lg-4 col-md-12">
                    <label class="filter-label" for="date">
                        <i class="fas fa-calendar-alt mg-l-2 text-muted"></i> {{ __('home.searchbydate') }}
                    </label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text bg-light" style="border-radius: 0 10px 10px 0; border: 1px solid #cbd5e1; border-left: none;">
                                <i class="fas fa-calendar-day text-muted"></i>
                            </span>
                        </div>
                        <input class="form-control custom-input fc-datepicker text-center" value="{{ $start_at ?? '' }}"
                               id="date" placeholder="YYYY-MM-DD" type="text"
                               style="border-radius: 10px 0 0 10px !important;"
                               onchange="searchaboutproductfunction()" required>
                    </div>
                </div>
            </div>

            <!-- جدول عرض الفواتير المسترجعة بالـ AJAX -->
            <div class="row mg-t-20">
                <div class="col-12">
                    <div id="ajax_responce_allinvoicesDiv">
                        {{-- يتم تحميل كود الجدول الجزئي هنا تلقائياً عبر AJAX --}}
                        <div class="text-center py-5 text-muted">
                            <i class="fas fa-spinner fa-spin fa-2x mb-2 text-success"></i>
                            <p class="mb-0 font-weight-bold">{{ __('home.loading') ?? 'جاري استدعاء البيانات...' }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <!-- ========================================== -->
    <!-- 1. مودال تحديث تاريخ الفاتورة -->
    <!-- ========================================== -->
    <div class="modal fade" id="updateDate" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content modal-content-modern">
                <div class="modal-header modal-header-modern">
                    <h6 class="modal-title font-weight-bold text-dark">
                        <i class="fas fa-calendar-edit text-primary mg-l-2"></i> {{ __('home.date') }}
                    </h6>
                    <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body p-4">
                    <input type="hidden" id="token_search" value="{{ csrf_token() }}">
                    <div class="row row-sm">
                        <div class="col-6 form-group">
                            <label for="id" class="filter-label">{{ __('home.Invoice_no') }}</label>
                            <input type="number" class="form-control custom-input bg-light" id="id" name="id" readonly>
                        </div>
                        <div class="col-6 form-group">
                            <label for="date_invoice" class="filter-label">{{ __('home.exportTime') }}</label>
                            <input class="form-control custom-input fc-datepicker text-center" autocomplete="off"
                                   name="date_invoice" id="date_invoice" placeholder="YYYY-MM-DD" type="text" required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer modal-footer-modern">
                    <button type="button" class="btn btn-light px-4 font-weight-bold" data-dismiss="modal" style="border-radius: 8px;">{{ __('home.cancel') }}</button>
                    <button type="button" id="updateDateInvoice" data-dismiss="modal" class="btn btn-primary px-4 font-weight-bold" style="border-radius: 8px;">{{ __('home.confirm') }}</button>
                </div>
            </div>
        </div>
    </div>

    <!-- ========================================== -->
    <!-- 2. مودال تأكيد وطرق الدفع والتقسيم المالي -->
    <!-- ========================================== -->
    <div class="modal fade" id="paymentmethod" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content modal-content-modern">
                <div class="modal-header modal-header-modern">
                    <h6 class="modal-title font-weight-bold text-dark">
                        <i class="fas fa-wallet text-success mg-l-2"></i> {{ __('home.paymentmethod') }}
                    </h6>
                    <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body p-4">
                    {{-- كارت الإجمالي الفخم --}}
                    <div class="d-flex align-items-center justify-content-between p-3 mb-3" style="background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px;">
                        <span class="font-weight-bold text-muted" style="font-size: 14px;">{{ __('home.total') }}:</span>
                        <div class="d-flex align-items-baseline">
                            <span style="font-size: 24px; font-weight: 800; color: #15803d;" id="totalvalue">0</span>
                            <small class="text-muted font-weight-bold mr-1">{{ __('home.SAR') }}</small>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label for="paymodal" class="filter-label">اختر طريقة السداد الأساسية:</label>
                        <select class="form-control custom-input" name="paymodal" id="paymodal" required>
                            <option value="Cash">{{ __('report.cash') }} (نقدي)</option>
                            <option value="Shabka">{{ __('report.shabka') }} (شبكة / مدى)</option>
                            <option value="Bank_transfer">{{ __('home.Bank_transfer') }} (تحويل بنكي)</option>
                            <option value="Credit">{{ __('report.credit') }} (آجل)</option>
                        </select>
                    </div>

                    <div class="row row-sm">
                        <div class="col-md-3 col-6 form-group">
                            <label for="cashamount" class="filter-label">{{ __('report.cash') }}</label>
                            <input type="text" class="form-control custom-input text-center" name="cashamount" id="cashamount" readonly value="0">
                        </div>
                        <div class="col-md-3 col-6 form-group">
                            <label for="bankamount" class="filter-label">{{ __('report.shabka') }}</label>
                            <input type="text" class="form-control custom-input text-center" name="bankamount" id="bankamount" readonly value="0">
                        </div>
                        <div class="col-md-3 col-6 form-group">
                            <label for="Bank_transfer" class="filter-label">{{ __('home.Bank_transfer') }}</label>
                            <input type="text" class="form-control custom-input text-center" name="Bank_transfer" id="Bank_transfer" readonly value="0">
                        </div>
                        <div class="col-md-3 col-6 form-group">
                            <label for="creaditamount" class="filter-label">{{ __('report.credit') }}</label>
                            <input type="text" class="form-control custom-input text-center" name="creaditamount" id="creaditamount" readonly value="0">
                        </div>
                    </div>

                    <input type="hidden" id="invoiceid_payment">
                </div>
                <div class="modal-footer modal-footer-modern">
                    <button type="button" class="btn btn-light px-4 font-weight-bold" data-dismiss="modal" style="border-radius: 8px;">{{ __('home.cancel') }}</button>
                    <button type="button" id="confirmpayment" class="btn text-white px-4 font-weight-bold" style="background: #004d44; border-radius: 8px;">{{ __('home.confirm') }}</button>
                </div>
            </div>
        </div>
    </div>

    <!-- ========================================== -->
    <!-- 3. مودال تحديث بيانات العميل -->
    <!-- ========================================== -->
    <div class="modal fade" id="updateCustomer" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content modal-content-modern">
                <div class="modal-header modal-header-modern">
                    <h6 class="modal-title font-weight-bold" style="color: #004d44;">
                        <i class="fas fa-user-edit mg-l-2"></i> {{ __('home.updatecustome') }}
                    </h6>
                    <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body p-4">
                    <input type="hidden" id="token_search" value="{{ csrf_token() }}">

                    <div class="row row-sm mb-3">
                        <div class="col-6">
                            <label for="id" class="filter-label">{{ __('home.Invoice_no') }}</label>
                            <input type="number" class="form-control custom-input bg-light text-center" id="id" name="id" readonly>
                        </div>
                        <div class="col-6">
                            <label for="customername" class="filter-label">{{ __('home.clietName') }}</label>
                            <input type="text" class="form-control custom-input bg-light" id="customername" name="customername" readonly>
                        </div>
                    </div>

                    <div class="form-group mb-0">
                        <label class="filter-label">{{ __('home.chooseclient') }} الجديد:</label>
                        <select class="form-control" name="customerId" id="customerId" required>
                            @foreach (App\Models\customers::get() as $customer)
                                <option value="{{ $customer->id }}">
                                    {{ $customer->id == 1 ? __('home.Cash Custome') : $customer->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="modal-footer modal-footer-modern">
                    <button type="button" class="btn btn-light px-4 font-weight-bold" data-dismiss="modal" style="border-radius: 8px;">{{ __('home.cancel') }}</button>
                    <button type="button" id="btn-submit-update-customer" class="btn text-white px-4 font-weight-bold" style="background-color: #0d9488; border-radius: 8px; border: none;">{{ __('home.confirm') }}</button>
                </div>
            </div>
        </div>
    </div>

    <!-- ========================================== -->
    <!-- 4. مودال الرفع لهيئة الزكاة والدخل (ZATCA) -->
    <!-- ========================================== -->
    <div class="modal fade" id="uploadzatca" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content modal-content-modern">
                <div class="modal-header modal-header-modern">
                    <h6 class="modal-title font-weight-bold text-dark">
                        <i class="fas fa-cloud-upload-alt text-info mg-l-2"></i> {{ __('home.uploadzatca') }}
                    </h6>
                    <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body p-4 text-center">
                    <input type="hidden" id="invoiceid_zatca">
                    <i class="fas fa-shield-alt fa-3x text-info mb-3 d-block"></i>
                    <p class="font-weight-bold text-dark mb-1" style="font-size: 15px;">
                        {{ __('home.confirmzatcasent') }}
                    </p>
                    <small class="text-muted">سيتم تشفير وإرسال الفاتورة عبر المنصة المعتمدة لهيئة الزكاة والضريبة والجمارك.</small>
                </div>
                <div class="modal-footer modal-footer-modern justify-content-center">
                    <button type="button" class="btn btn-light px-4 font-weight-bold" data-dismiss="modal" style="border-radius: 8px;">{{ __('home.cancel') }}</button>
                    <button type="button" id="sent_to_zatca" data-dismiss="modal" class="btn btn-success px-4 font-weight-bold" style="border-radius: 8px;">
                        <i class="fas fa-paper-plane mg-l-2"></i> إرسال وتأكيد
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- ========================================== -->
    <!-- 5. مودال تعديل تواريخ اشتراك الفاتورة -->
    <!-- ========================================== -->
    <div class="modal fade" id="updateSubscriptionDatesModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content modal-content-modern">
                <div class="modal-header modal-header-modern">
                    <h6 class="modal-title font-weight-bold text-dark">
                        <i class="fas fa-calendar-alt text-primary mg-l-2"></i> تعديل تواريخ اشتراك الفاتورة
                    </h6>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="updateDatesForm" autocomplete="off">
                    {{ csrf_field() }}
                    <div class="modal-body p-4">
                        <input type="hidden" id="modal_invoice_id" name="id">

                        <div class="form-group mb-3">
                            <label for="modal_start_date" class="filter-label">تاريخ بدء الاشتراك الحالي:</label>
                            <input type="date" class="form-control custom-input text-center" id="modal_start_date" name="subscription_start_date" required>
                        </div>

                        <div class="form-group mb-2">
                            <label for="modal_end_date" class="filter-label">تاريخ انتهاء الاشتراك الحالي:</label>
                            <div class="input-group">
                                <input type="date" class="form-control custom-input text-center" id="modal_end_date" name="subscription_end_date" style="border-radius: 0 10px 10px 0 !important;">
                                <div class="input-group-append">
                                    <button type="button" class="btn btn-success font-weight-bold px-3" id="set_lifetime_btn" title="جعل البرنامج محلي (مدى الحياة)" style="border-radius: 10px 0 0 10px; font-size: 12px;">
                                        <i class="fas fa-infinity ml-1"></i> مدى الحياة
                                    </button>
                                </div>
                            </div>
                            <small class="text-muted d-block mt-2" style="font-size: 11px;">
                                <i class="fas fa-info-circle mg-l-1"></i> اضغط على "مدى الحياة" في حال كان الترخيص محلياً ودائماً.
                            </small>
                        </div>
                    </div>
                    <div class="modal-footer modal-footer-modern">
                        <button type="button" class="btn btn-light px-3 font-weight-bold" data-dismiss="modal" style="border-radius: 8px;">إلغاء</button>
                        <button type="submit" class="btn btn-primary px-4 font-weight-bold" style="border-radius: 8px;">حفظ التعديلات</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('js')
<!-- Internal Data tables & Plugins -->
<script src="{{ URL::asset('assets/plugins/jquery-ui/ui/widgets/datepicker.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/jquery.maskedinput/jquery.maskedinput.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/select2/js/select2.min.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/jquery-simple-datetimepicker/jquery.simple-dtpicker.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/pickerjs/picker.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
$(document).ready(function() {
    // 1. قراءة الـ ID وتعبئة حقول المودال بالبيانات عند الضغط على زر التعديل
    $(document).on('click', '.edit-dates-btn', function() {
        var id = $(this).data('id');
        var start = $(this).data('start');
        var end = $(this).data('end');

        $('#modal_invoice_id').val(id);
        $('#modal_start_date').val(start);

        if(end && end !== '---') {
            $('#modal_end_date').val(end);
        } else {
            $('#modal_end_date').attr('type', 'text').val('').attr('type', 'date');
        }
    });

    // 2. تشغيل زرار مدى الحياة داخل المودال
    $(document).on('click', '#set_lifetime_btn', function(e) {
        e.preventDefault();
        var endDateInput = $('#modal_end_date');
        endDateInput.attr('type', 'text').val('').attr('type', 'date');
        endDateInput.css('background-color', '#fff3cd');
        setTimeout(function() {
            endDateInput.css('background-color', '#fff');
        }, 500);
    });

    // 3. إرسال بيانات التواريخ الجديدة عبر الأياكس
    $('#updateDatesForm').on('submit', function(e) {
        e.preventDefault();
        var formData = $(this).serializeArray();
        formData = formData.map(function(item) {
            if (item.name === 'subscription_end_date' && item.value === '') {
                item.value = '';
            }
            return item;
        });

        $.ajax({
            url: "{{ url(Mcamara\LaravelLocalization\Facades\LaravelLocalization::getCurrentLocale() . '/updateInvoiceSubscriptionDates') }}",
            type: "POST",
            data: $.param(formData),
            success: function(response) {
                if(response.success) {
                    $('#updateSubscriptionDatesModal').modal('hide');
                    Swal.fire({
                        icon: 'success',
                        title: 'تم التحديث بنجاح',
                        text: response.message,
                        confirmButtonText: 'حسناً'
                    }).then(() => {
                        refreshAllInvoicesTable();
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'فشل التحديث',
                        text: response.message || 'حدث خطأ غير متوقع.',
                        confirmButtonText: 'حسناً'
                    });
                }
            },
            error: function(xhr) {
                var errors = 'يرجى مراجعة الحقول والمحاولة مرة أخرى.';
                if (xhr.responseJSON) {
                    if (xhr.responseJSON.errors) {
                        errors = Object.values(xhr.responseJSON.errors).map(e => e.join('\n')).join('\n');
                    } else if (xhr.responseJSON.message) {
                        errors = xhr.responseJSON.message;
                    }
                }
                Swal.fire({
                    icon: 'error',
                    title: 'حدث خطأ أثناء التحديث',
                    text: errors,
                    confirmButtonText: 'حسناً'
                });
            }
        });
    });

    // 4. حدث فتح مودال تعديل العميل وتعبئة البيانات
    $('#updateCustomer').on('show.bs.modal', function(event) {
        var button = $(event.relatedTarget);
        var id = button.data('id');
        var customername = button.data('customername');

        var modal = $(this);
        modal.find('#id').val(id);
        modal.find('#customername').val(customername);

        if (modal.find('#customerId').data('select2')) {
            modal.find('#customerId').select2('destroy');
        }

        modal.find('#customerId').select2({
            dropdownParent: $('#updateCustomer'),
            width: '100%',
            dir: 'rtl'
        });
    });

    // 5. حدث الضغط على زر تأكيد تعديل العميل
    $(document).on('click', '#btn-submit-update-customer', function (e) {
        e.preventDefault();

        var url = "{{ URL::to('updatecustomerDataInvoice') }}";
        var token_search = $('#token_search').val();
        var id = $('#updateCustomer').find('#id').val();
        var customername = $('#updateCustomer').find('#customername').val();
        var customerId = $('#updateCustomer').find('#customerId').val();

        if (!id) {
            Swal.fire({
                icon: 'warning',
                title: 'تنبيه',
                text: 'لم يتم العثور على رقم الفاتورة، يرجى إعادة محاولة فتح النافذة.'
            });
            return;
        }

        Swal.fire({
            title: 'جاري التحديث...',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        $.ajax({
            url: url,
            type: 'POST',
            cache: false,
            data: {
                _token: token_search,
                id: id,
                customername: customername,
                customerId: customerId,
            },
            success: function (data) {
                Swal.close();
                $('#updateCustomer').modal('hide');
                $("#ajax_responce_allinvoicesDiv").html(data);

                Swal.fire({
                    icon: 'success',
                    title: 'تم تحديث بيانات العميل بنجاح',
                    showConfirmButton: false,
                    timer: 2000
                });
            },
            error: function(xhr) {
                Swal.close();
                var errorMessage = 'يرجى المحاولة مرة أخرى لاحقاً.';
                if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                Swal.fire({
                    icon: 'error',
                    title: 'حدث خطأ أثناء التحديث',
                    text: errorMessage
                });
            }
        });
    });
});
</script>

<script>
    // تهيئة حقل التاريخ
    $('.fc-datepicker').datepicker({
        dateFormat: 'yy-mm-dd'
    });

    // مودال هيئة الزكاة والدخل
    $('#uploadzatca').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var id = button.data('id');
        $(this).find('.modal-body #invoiceid_zatca').val(id);
    });

    // مودال تحديث التاريخ
    $('#updateDate').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var id = button.data('id');
        $(this).find('.modal-body #id').val(id);
    });

    // مودال طريقة الدفع
    $('#paymentmethod').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var id = button.data('id');
        var invoice = button.data('totalinvoice');

        $('#invoiceid').val(id);
        document.getElementById('totalvalue').innerHTML = invoice;
        $('#cashamount').val(invoice);
    });

    // عمليات تأكيد الدفع
    $("#confirmpayment").click(function (e) {
        e.preventDefault();

        if ($('#cashamount').val() == '') $('#cashamount').val(0);
        if ($('#bankamount').val() == '') $('#bankamount').val(0);
        if ($('#creaditamount').val() == '') $('#creaditamount').val(0);
        if ($('#Bank_transfer').val() == '') $('#Bank_transfer').val(0);

        let text = document.getElementById('totalvalue').innerText;
        let paymentMethodValue = $('#paymodal').val();
        let anotherBankValue = 5;

        let totalEntered = Number($('#cashamount').val()) + Number($('#Bank_transfer').val()) + Number($('#bankamount').val()) + Number($('#creaditamount').val());

        if (Number(text) == totalEntered) {
            $.ajax({
                url: "{{URL::to('updatepaymentconfirmpayment')}}/" + $('#invoiceid').val() + '/' +
                    $('#cashamount').val() + '/' + $('#bankamount').val() + '/' +
                    $('#creaditamount').val() + "/" + $('#Bank_transfer').val() + '/' +
                    paymentMethodValue + '/' + anotherBankValue,
                type: "GET",
                dataType: "html",
                success: function (data) {
                    $("#ajax_responce_allinvoicesDiv").html(data);
                    $('#paymentmethod').modal('hide');
                    Swal.fire({
                        title: "تم التحديث بنجاح",
                        text: "تم تعديل طريقة السداد والحسابات بنجاح.",
                        icon: "success",
                        confirmButtonText: "موافق",
                        confirmButtonColor: "#004d44"
                    });
                },
                error: function (response) {
                    alert("{{ __('home.sorryerror') }}");
                }
            });
        } else {
            $('#saveinvice').val(0);
            alert("{{ __('home.entermonycorrect') }}");
        }
    });

    // توزيع المبالغ حسب السيلكت
    $('select[name="paymodal"]').on('change', function () {
        var selectCustomer = $(this).val();
        var value = 0;

        if ($('#cashamount').val() != 0) {
            value = $('#cashamount').val();
        } else if ($('#bankamount').val() != 0) {
            value = $('#bankamount').val();
        } else if ($('#Bank_transfer').val() != 0) {
            value = $('#Bank_transfer').val();
        } else {
            value = $('#creaditamount').val();
        }

        if (selectCustomer == 'Cash') {
            $('#cashamount').val(value);
            $('#bankamount').val(0); $('#creaditamount').val(0); $('#Bank_transfer').val(0);
            $("#bankamount, #cashamount, #Bank_transfer").prop('readOnly', true);
        } else if (selectCustomer == 'Shabka') {
            $('#cashamount').val(0); $('#bankamount').val(value); $('#creaditamount').val(0); $('#Bank_transfer').val(0);
            $("#bankamount, #cashamount, #Bank_transfer").prop('readOnly', true);
        } else if (selectCustomer == 'Credit') {
            $('#cashamount').val(0); $('#bankamount').val(0); $('#Bank_transfer').val(0); $('#creaditamount').val(value);
            $("#bankamount, #cashamount, #Bank_transfer").prop('readOnly', true);
        } else if (selectCustomer == 'Bank_transfer') {
            $('#cashamount').val(0); $('#bankamount').val(0); $('#creaditamount').val(0); $('#Bank_transfer').val(value);
            $("#bankamount, #cashamount, #Bank_transfer").prop('readOnly', true);
        } else {
            $('#cashamount').val(value);
            $('#bankamount').val(0); $('#creaditamount').val(0); $('#Bank_transfer').val(0);
            $("#bankamount, #cashamount, #Bank_transfer").prop('readOnly', false);
        }
    });

    // إرسال لهيئة الزكاة والدخل
    $("#sent_to_zatca").click(function (e) {
        document.getElementById('loading-screen').style.display = 'flex';
        var url = "{{ URL::to('sent_to_zatca') }}/" + $('#invoiceid_zatca').val();

        $.ajax({
            url: url,
            type: 'GET',
            cache: false,
            dataType: "html",
            success: function (data) {
                if (data == 1) {
                    var audio = new Audio('/sounds/done.mp3');
                    audio.play();
                    refreshAllInvoicesTable();
                } else {
                    alert(data);
                }
                document.getElementById('loading-screen').style.display = 'none';
            },
            error: function (response) {
                document.getElementById('loading-screen').style.display = 'none';
                alert(response);
            }
        });
    });

    // تحديث التاريخ
    $("#updateDateInvoice").click(function (e) {
        var url = "{{ URL::to('save_update_DateInvoice') }}/" + $('#id').val() + '/' + $('#date_invoice').val();
        $.ajax({
            url: url,
            type: 'GET',
            cache: false,
            dataType: "html",
            success: function (data) {
                if (data == 1) {
                    refreshAllInvoicesTable();
                }
            },
            error: function (response) {
                alert(response);
            }
        });
    });

    // دوال البحث بالـ AJAX
    function searchaboutproductfunction() {
        var dateVal = $('#date').val();
        $.ajax({
            url: "{{URL::to('searchAllInvoicespaginatenew')}}/" + dateVal,
            type: "GET",
            dataType: "html",
            success: function (products) {
                $("#ajax_responce_allinvoicesDiv").html(products);
            },
        });
    }

    function searchaboutinvoiceByIdfunction() {
        var idVal = $('#invoiceid').val();
        var url = idVal != '' ? "{{URL::to('searchaboutinvoiceByIdfunction')}}/" + idVal : "{{URL::to('getAllinvicesajax')}}";
        $.ajax({
            url: url,
            type: "GET",
            dataType: "html",
            success: function (products) {
                $("#ajax_responce_allinvoicesDiv").html(products);
            },
        });
    }

    $('select[name="clientnamesearch"]').on('change', function () {
        var selectCustomer = $(this).val();
        var url = selectCustomer != '' ? "{{URL::to('getinvoicesbycustomer')}}/" + selectCustomer : "{{URL::to('getAllinvicesajax')}}";
        $.ajax({
            url: url,
            type: "GET",
            dataType: "html",
            success: function (products) {
                $("#ajax_responce_allinvoicesDiv").html(products);
            },
        });
    });

    // دالة موحدة لتحديث الجدول
    function refreshAllInvoicesTable() {
        $.ajax({
            url: "{{URL::to('getAllinvicesajax')}}",
            type: "GET",
            dataType: "html",
            success: function (products) {
                $("#ajax_responce_allinvoicesDiv").html(products);
            },
        });
    }

    // تهيئة الصفحة عند التحميل
    $(document).ready(function () {
        $('#clientnamesearch').select2({
            placeholder: "{{ __('home.chooseclient') }}",
            allowClear: true,
            width: '100%',
            dir: "{{ App::getLocale() == 'ar' ? 'rtl' : 'ltr' }}"
        });

        document.getElementById('loading-screen').style.display = 'none';
        refreshAllInvoicesTable();
    });

    // دالة ترقيم الصفحات بالـ AJAX
    $(document).on('click', '#ajax_pagination_in_search a', function (e) {
        e.preventDefault();
        var search_by_text = $("#date").val();
        var url = $(this).attr("href");
        var token_search = $("#token_search").val();

        $.ajax({
            url: url,
            type: 'get',
            dataType: 'html',
            cache: false,
            data: {
                search_by_text: search_by_text,
                "_token": token_search
            },
            success: function (data) {
                $("#ajax_responce_allinvoicesDiv").html(data);
            }
        });
    });
</script>
@endsection