@extends('layouts.master')

@section('css')
<!-- Internal 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">
<!-- Internal Spectrum-colorpicker css -->
<link href="{{ URL::asset('assets/plugins/spectrum-colorpicker/spectrum.css') }}" rel="stylesheet">

<style>
    /* ==========================================================
       Previous Sales Invoices Modern UI
       ========================================================== */
    body {
        background-color: #f1f5f9;
        font-family: 'Segoe UI', Tahoma, 'Inter', sans-serif;
    }

    /* كروت الصفحة */
    .invoices-main-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
        margin-bottom: 24px;
        overflow: visible !important;
    }

    /* عناوين وتنسيقات الفلاتر */
    .filter-title-label {
        font-size: 13.5px;
        font-weight: 800;
        color: #334155;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .form-control-filter {
        border: 1.5px solid #cbd5e1 !important;
        border-radius: 9px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        padding: 9px 12px !important;
        color: #0f172a !important;
        height: 42px !important;
        transition: all 0.2s ease;
    }

    .form-control-filter:focus {
        border-color: #3b82f6 !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
        background: #ffffff !important;
    }

    /* تظبيط Select2 ليتطابق مع الـ DatePicker */
    .select2-container .select2-selection--single {
        border: 1.5px solid #cbd5e1 !important;
        border-radius: 9px !important;
        height: 42px !important;
        padding-top: 5px !important;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        line-height: 28px !important;
    }

    .select2-container .select2-selection--single .select2-selection__arrow {
        top: 8px !important;
    }

    /* أزرار العمليات داخل الجدول */
    .action-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        transition: all 0.2s ease;
        border: none;
        color: white !important;
        text-decoration: none !important;
    }

    .action-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.18);
    }

    .btn-print { background: linear-gradient(135deg, #1e293b, #0f172a) !important; }
    .btn-whatsapp { background: linear-gradient(135deg, #25d366, #128c7e) !important; }
    .btn-date { background: linear-gradient(135deg, #0284c7, #0369a1) !important; }
    .btn-employee { background: linear-gradient(135deg, #7c3aed, #6d28d9) !important; }
    .btn-status { background: linear-gradient(135deg, #f59e0b, #d97706) !important; }

    /* شاشة الانتظار الحديثة */
    #loading-screen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(15, 23, 42, 0.75);
        backdrop-filter: blur(5px);
        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 #38bdf8;
        width: 55px;
        height: 55px;
        animation: spin 0.9s linear infinite;
        margin-bottom: 15px;
    }

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

    /* رفع التقويم فوق المودال */
    body.modal-open #ui-datepicker-div {
        z-index: 1065 !important;
    }

    .dropdown-toggle::after { display: none; }
</style>
@endsection

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

@section('page-header')
<div class="main-parent">
    <!-- breadcrumb -->
    <div class="breadcrumb-header justify-content-between mb-3">
        <div class="my-auto">
            <div class="d-flex align-items-center">
                <div class="bg-primary text-white rounded d-flex align-items-center justify-content-center mr-2" style="width: 38px; height: 38px;">
                    <i class="fa fa-history" style="font-size: 18px;"></i>
                </div>
                <div>
                    <h4 class="content-title mb-0 font-weight-bold" style="color: #0f172a;">{{ __('home.previousSalesInvoices') }}</h4>
                    <span class="text-muted tx-13 font-weight-bold">سجل الفواتير السابقة والبحث المتقدم وحالات الإنتاج</span>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('content')

{{-- شاشة التحميل المعلقة --}}
<div id="loading-screen" style="display: none;">
    <div id="loading-animation"></div>
    <div class="text-center font-weight-bold" style="font-size: 16px;">
        <p class="mb-1">جارٍ معالجة الفاتورة، يرجى الانتظار...</p>
        <small class="text-muted text-white-50">Invoice is being processed, please wait</small>
    </div>
</div>

@if (count($errors) > 0)
<div class="alert alert-danger font-weight-bold shadow-sm" style="border-radius: 10px;">
    <button aria-label="Close" class="close" data-dismiss="alert" type="button">
        <span aria-hidden="true">&times;</span>
    </button>
    <strong>خطأ</strong>
    <ul class="mb-0 mt-1">
        @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif

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

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

                <div class="row align-items-end">

                    {{-- 1. فلترة العميل --}}
                    <div class="col-lg-3 col-md-6 mb-3 mb-lg-0" id="start_at">
                        <label for="clientnamesearch" class="filter-title-label">
                            <i class="fa fa-user text-primary"></i> {{ __('home.chooseclient') }}
                        </label>
                        <select class="form-control select2" name="clientnamesearch" id="clientnamesearch" style="width: 100% !important;">
                            @foreach (App\Models\customers::get() as $customer)
                                <option value="{{ $customer->id }}">
                                    {{ $customer->id == 1 ? __('home.Cash Custome') : $customer->name }} - {{ $customer->phone }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- 2. فلترة الفرع --}}
                    <div class="col-lg-3 col-md-6 mb-3 mb-lg-0" id="branch_search_div">
                        <label for="branch_id_search" class="filter-title-label">
                            <i class="fa fa-building-o text-success"></i> {{ __('users.branch') }}
                        </label>
                        <select class="form-control select2" name="branch_id_search" id="branch_id_search" style="width: 100% !important;">
                            <option value="0">{{ __('home.allbranchs') }}</option>
                            @foreach (App\Models\branchs::get() as $branch)
                                <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    {{-- 3. نوع الفاتورة --}}
                    <div class="col-lg-3 col-md-6 mb-3 mb-lg-0">
                        <label for="invoice_type_search" class="filter-title-label">
                            <i class="fa fa-tag text-info"></i> {{ __('home.invoice_type') }}
                        </label>
                        <select class="form-control select2" name="invoice_type_search" id="invoice_type_search" style="width: 100% !important;">
                            <option value="0">{{ __('home.all') }} (الجميع)</option>
                            <option value="1">{{ __('home.sales') }} (المبيعات)</option>
                            <option value="2">{{ __('home.fabric') }} (القماش)</option>
                        </select>
                    </div>

                    {{-- 4. البحث بالتاريخ --}}
                    <div class="col-lg-3 col-md-6" id="start_at">
                        <label for="date" class="filter-title-label">
                            <i class="fa fa-calendar text-warning"></i> {{ __('home.searchbydate') }}
                        </label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text bg-light text-muted" style="border: 1.5px solid #cbd5e1; border-left: none; border-radius: 0 9px 9px 0;">
                                    <i class="fa fa-calendar-o"></i>
                                </span>
                            </div>
                            <input class="form-control form-control-filter fc-datepicker"
                                value="{{ $start_at ?? '' }}"
                                id="date"
                                placeholder="YYYY-MM-DD"
                                type="text"
                                onchange="searchaboutproductfunction()"
                                style="border-radius: 9px 0 0 9px !important; border-right: none;" required>
                        </div>
                    </div>

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

        {{-- حاوية جدول الفواتير التي يتم تحديثها بواسطة الـ AJAX --}}
        <div class="invoices-main-card p-0">
            <div class="table-responsive hoverable-table" id="ajax_responce_allinvoicesDiv">
                <table class="table text-md-nowrap text-center our-table" id="example1" data-page-length='50' width="100%">
                    <thead>
                        <tr>
                            <th>{{ __('home.Invoice_no') }}</th>
                            <th>{{ __('home.sallerName') }}</th>
                            <th>{{ __('home.clietName') }}</th>
                            <th>{{ __('home.date') }}</th>
                            <th>{{ __('home.branch') }}</th>
                            <th>{{ __('home.total') }}</th>
                            <th>{{ __('home.paymentmethod') }}</th>
                            <th>{{ __('home.operations') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="8" class="py-5 text-center text-muted font-weight-bold">
                                <i class="fa fa-spinner fa-spin fa-2x d-block mb-2 text-primary"></i>
                                جاري تحميل سجل الفواتير السابقة...
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>
<!-- row closed -->


<div class="modal" id="updateDate">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content modal-content-demo">
            <div class="modal-header">
                <h6 class="modal-title"> {{ __('home.date') }} </h6>
            </div>
            {{ csrf_field() }}


            <div class="modal-body">




                <input type="hidden" id="token_search" value="{{ csrf_token() }}">


                <div class="row">
                    <div class="col">


                        <label for="inputName" class="control-label parent-label">{{ __('home.Invoice_no') }}</label>
                        <input type="number" class="form-control parent-input" id="id" name="id"
                            title="    رقم الفاتورة  " readonly>

                    </div>
                    <div class="col">
                        <div class="col parent-label" id="start_at">
                            <label for="exampleFormControlSelect1"> {{ __('home.exportTime') }}</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <div class="input-group-text">
                                        <i class="fas fa-calendar-alt"></i>
                                    </div>
                                </div><input class="form-control parent-input fc-datepicker" autocomplete="off"
                                    name="date_invoice" id="date_invoice" placeholder="YYYY-MM-DD" type="text" required>
                            </div>
                        </div>



                    </div>
                </div>
                <br>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('home.cancel')}}</button>
                    <button type="submit" id="updateDateInvoice" data-dismiss="modal"
                        class="btn btn-danger">{{ __('home.confirm') }}</button>
                </div>

            </div>
        </div>
    </div>
</div>
<!-- enter payments -->
<div class="modal" id="paymentmethod">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content modal-content-demo">
            <div class="modal-header">
                <h6 class="modal-title"> {{ __('home.paymentmethod') }} </h6>
            </div>
            <div class="modal-body">
                <div class="row">
                    <label style="font-size:16px" class="control-label parent-label">&nbsp;&nbsp;{{ __('home.total') }}
                        :&nbsp; </label>
                    <label style="font-size:20px" id="totalvalue">0</label>
                    <label style="font-size:15px" class="control-label parent-label">&nbsp;{{ __('home.SAR') }}
                        &nbsp;&nbsp;&nbsp;&nbsp; </label>
                    <br>


                </div>
                <div class=" col">
                    <label> {{ __('home.paymentmethod') }} </label>
                    <br>

                    <select class="form-control" 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>
                        <option value="Bank_transfer"> {{ __('home.bank_arbic') }} </option>
                        <option value="Partition"> {{ __('home.Partition of the amount') }} </option>

                    </select>


                </div>
                <br>
                <div class="row">

                    <div class="col">

                        <label class="control-label parent-label">{{ __('report.cash') }}</label>
                        <input type="text" class="form-control parent-input" name="cashamount" id="cashamount" readonly
                            value=0>
                    </div>

                    <div class="col">

                        <label class="control-label parent-label">{{ __('report.shabka') }}</label>
                        <input type="text" class="form-control parent-input" name="bankamount" id="bankamount" readonly
                            value=0>
                    </div>

                    <div class="col">

                        <label class="control-label parent-label">{{ __('home.Bank_transfer') }}</label>
                        <input type="text" class="form-control parent-input" name="Bank_transfer" id="Bank_transfer"
                            readonly value=0>
                    </div>
                    <div class="col">

                        <label class="control-label parent-label">{{ __('report.credit') }}</label><br>
                        <input type="text" class="form-control parent-input" name="creaditamount" id="creaditamount"
                            readonly value=0>
                    </div>
                    <input hidden type="text" id="invoiceid">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('home.cancel') }}</button>
                <button id="confirmpayment" name="confirmpayment" data-dismiss="modal"
                    class="btn btn-danger">{{ __('home.confirm') }}</button>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="updateCustomer">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content modal-content-demo">
            <div class="modal-header">
                <h6 class="modal-title"> {{ __('home.updatecustome') }} </h6>
            </div>
            {{ csrf_field() }}


            <div class="modal-body">




                <input type="hidden" id="token_search" value="{{ csrf_token() }}">


                <div class="row">
                    <div class="col">


                        <label for="inputName" class="control-label parent-label">{{ __('home.Invoice_no') }}</label>
                        <input type="number" class="form-control parent-input" id="id" name="id"
                            title="    رقم الفاتورة  " readonly>

                    </div>
                    <div class="col">


                        <label for="inputName" class="control-label parent-label">{{ __('home.clietName') }}</label>
                        <input type="text" class="form-control parent-input" id="customername" name="customername"
                            title="   اسم  العميل  " readonly>

                    </div>
                </div>
                <br>
                <div class=" col">
                    <label> {{ __('home.chooseclient') }}</label>
                    <br>

                    <select class="form-control select2" style="width:300px" 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 class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('home.cancel')}}</button>
                    <button type="submit" id="updatecustomer" data-dismiss="modal"
                        class="btn btn-danger">{{ __('home.confirm') }}</button>
                </div>

            </div>
        </div>
    </div>
</div>






<div class="modal" id="uploadzatca">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content modal-content-demo">
            <div class="modal-header">
                <h6 class="modal-title"> {{ __('home.uploadzatca') }} </h6>
            </div>
            {{ csrf_field() }}


            <div class="modal-body">




                <input type="hidden" id="invoiceid_zatca">


                <div class="row">

                    <div class="col">


                        <label for="inputName"
                            class="control-label parent-label">{{ __('home.confirmzatcasent') }}</label>

                    </div>








                    <br>



                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('home.cancel')}}</button>
                    <button type="submit" id="sent_to_zatca" data-dismiss="modal"
                        class="btn btn-danger">{{ __('home.confirm') }}</button>
                </div>

            </div>
        </div>
    </div>


</div>


<div class="modal fade" id="employeeModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-gradient-info text-white py-3" style="background: linear-gradient(45deg, #17a2b8, #007bff);">
                <h5 class="modal-title font-weight-bold">
                    <i class="fas fa-user-edit ml-2"></i> تحديد الموظف المسؤول (الخياط)
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body p-4 text-right" style="direction: rtl;">
                <div class="form-group mb-0">
                    <label class="font-weight-bold text-secondary mb-2" style="font-size: 14px;">
                        <i class="fas fa-cut ml-1"></i> اختر الخياط المسؤول عن الطلب:
                    </label>
                    <select id="employee_id" class="form-control select2" style="width: 100% !important;">
                        <option value="">-- ابحث عن اسم الموظف --</option>
                        @foreach($employees as $emp)
                            <option value="{{ $emp->id }}">{{ $emp->name_ar }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="modal-footer bg-light d-flex justify-content-between">
                <button type="button" class="btn btn-secondary px-4 shadow-sm" data-dismiss="modal">
                    <i class="fas fa-times ml-1"></i> إلغاء
                </button>
                <button type="button" class="btn btn-primary px-5 shadow-sm font-weight-bold" id="saveEmployee">
                    <i class="fas fa-check ml-1"></i> حفظ وتعيين
                </button>
                <input type="hidden" id="invoice_id_emp">
            </div>
        </div>
    </div>
</div>

@endsection
@section('js')
<!-- Internal Data tables -->

<script src="{{ URL::asset('assets/js/table-data.js') }}"></script>

<!--Internal  Datepicker js -->
<script src="{{ URL::asset('assets/plugins/jquery-ui/ui/widgets/datepicker.js') }}"></script>
<!--Internal  jquery.maskedinput js -->
<script src="{{ URL::asset('assets/plugins/jquery.maskedinput/jquery.maskedinput.js') }}"></script>
<!--Internal  spectrum-colorpicker js -->
<script src="{{ URL::asset('assets/plugins/spectrum-colorpicker/spectrum.js') }}"></script>
<!-- Internal Select2.min js -->
<script src="{{ URL::asset('assets/plugins/select2/js/select2.min.js') }}"></script>
<!--Internal Ion.rangeSlider.min js -->
<script src="{{ URL::asset('assets/plugins/ion-rangeslider/js/ion.rangeSlider.min.js') }}"></script>
<!--Internal  jquery-simple-datetimepicker js -->
<script src="{{ URL::asset('assets/plugins/amazeui-datetimepicker/js/amazeui.datetimepicker.min.js') }}">
</script>
<!-- Ionicons js -->
<script src="{{ URL::asset('assets/plugins/jquery-simple-datetimepicker/jquery.simple-dtpicker.js') }}">
</script>
<!--Internal  pickerjs js -->
<script src="{{ URL::asset('assets/plugins/pickerjs/picker.min.js') }}"></script>
<!-- Internal form-elements js -->
<script src="{{ URL::asset('assets/js/form-elements.js') }}"></script>

<script>
$(document).on('click', '.btn-cut-toggle', function() {
    let btn = $(this);
    let id = btn.data('id');
    let badgeCell = $('#cut-status-' + id);

    $.ajax({
        url: "{{ route('invoice.toggleCut') }}",
        type: "POST",
        data: { _token: "{{ csrf_token() }}", id: id },
        success: function(res) {
            if (res.is_cut) {
                btn.removeClass('btn-cut').addClass('btn-cut-done')
                   .attr('title', 'تم القص - اضغط للإلغاء')
                   .find('i').removeClass('fa-scissors').addClass('fa-check-square');

                badgeCell.html('<span class="status-badge badge-cut-done"><i class="fa fa-check-circle"></i> تم القص</span>');
            } else {
                btn.removeClass('btn-cut-done').addClass('btn-cut')
                   .attr('title', 'وضع علامة تم القص')
                   .find('i').removeClass('fa-check-square').addClass('fa-scissors');

                badgeCell.html('<span class="status-badge badge-not-cut"><i class="fa fa-scissors"></i> لم يقص</span>');
            }
        },
        error: function(xhr) {
            console.error(xhr.responseText);
            Swal.fire('خطأ', 'تعذر تحديث حالة القص', 'error');
        }
    });
});
</script>

<script>
$(document).on('click', '[data-target="#employeeModal"]', function() {
    // التقاط الـ id من الزرار سواء كان كلاسه btn-info أو action-btn
    let id = $(this).data('id');

    // التأكد من وضع القيمة في الـ input المخفي داخل المودال
    $('#invoice_id_emp').val(id);

    console.log("تم تجهيز المعرف رقم: " + id); // للتأكد في المتصفح
});
$(document).on('click', '#saveEmployee', function() {
    let invoiceId = $('#invoice_id_emp').val(); // سحب الـ id من المخفي
    let empId = $('#employee_id').val();
    if(!invoiceId) {
        Swal.fire('خطأ', 'لم يتم العثور على معرف الفاتورة', 'error');
        return;
    }

    $.ajax({
        url: "{{ route('invoices.updateEmployee') }}",
        method: "POST",
        data: {
            _token: "{{ csrf_token() }}",
            invoice_id: invoiceId,
            emp_id: empId
        },
        success: function(res) {
            if(res.status === 'success') {
                $('#employeeModal').modal('hide');
                $('#custom-success-overlay').fadeIn().delay(1000).fadeOut();
                setTimeout(() => { location.reload(); }, 1200);
            }
        },
        error: function(xhr) {
            // هيعرض لك رسالة "No query results" لو الـ id ده مش موجود في جدول invoices
            let msg = xhr.responseJSON ? xhr.responseJSON.message : 'حدث خطأ في البحث';
                        console.log(xhr)

        }
    });
});
</script>


<script>
$(document).on('click', '.status-change-btn', function(e) {
    e.preventDefault();

    var status = $(this).data('status');
    var invId = $(this).data('invoice-id'); // سحب المعرف من الرابط الذي تم الضغط عليه

    if (!invId) {
        alert("خطأ: لم يتم العثور على معرف الفاتورة في العنصر!");
        return;
    }

$.ajax({
    url: "/invoices/update-status",
    method: 'POST',
    data: {
        _token: '{{ csrf_token() }}',
        id: invId,
        status_invoice: status
    },
    success: function(response) {
        if(response.success) {

            // 1. افتح رابط الواتساب الأول لو موجود
            if(response.wa_link) {
                window.open(response.wa_link, '_blank');
            }

            // 2. اعمل ريلود للصفحة بعد فتح الرابط
            location.reload();

        } else {
            alert("فشل التحديث: " + response.message);
        }
    },
    error: function(xhr) {
        console.log(xhr.responseText);
        alert("حدث خطأ في السيرفر، راجع الـ Console");
    }
});
});
</script>






<script>
var date = $('.fc-datepicker').datepicker({
    dateFormat: 'yy-mm-dd'
}).val();
</script>



<script>
$('#uploadzatca').on('show.bs.modal', function(event) {

    var button = $(event.relatedTarget)
    var id = button.data('id')
    var modal = $(this)
    modal.find('.modal-body #invoiceid_zatca').val(id);
})

$('#updateDate').on('show.bs.modal', function(event) {

    // --- الإضافة المطلوبة: رفع الـ z-index عشان الموديل يظهر فوق مش ورا ---
    var zIndex = 1050 + (10 * $('.modal.show').length) + 10;
    $(this).css('z-index', zIndex);
    setTimeout(function() {
        $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
    }, 0);
    // --- نهاية الإضافة ---

    var button = $(event.relatedTarget)
    var id = button.data('id')
    var modal = $(this)
    modal.find('.modal-body #id').val(id);
})


$("#sent_to_zatca").click(function(e) {
    document.getElementById('loading-screen').style.display = 'block'; // show loading screen

    var url = " {{ URL::to('sent_to_zatca') }}" + '/' + $('#invoiceid_zatca').val();
    document.getElementById('sendnowzatca').hidden = true

    token_search = $('#token_search').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();


                $.ajax({
                    url: " {{URL::to('getAllinvicesajax')}}",
                    type: "GET",
                    dataType: "html",
                    success: function(products) {
                        $("#ajax_responce_allinvoicesDiv").html(products);
                    },
                });

                document.getElementById('loading-screen').style.display =
                    'none'; // Hide loading screen

            } else {
                document.getElementById('sendnowzatca').hidden = false
                document.getElementById('loading-screen').style.display =
                    'none'; // Hide loading screen

                alert(data)
            }

        },
        error: function(response) {
            document.getElementById('sendnowzatca').hidden = false
            document.getElementById('loading-screen').style.display =
                'none'; // Hide loading screen

            console.log(response)
            alert(response)


        }
    });


})






$("#updateDateInvoice").click(function(e) {

    var url = " {{ URL::to('save_update_DateInvoice') }}" + '/' + $('#id').val() + '/' + $(
            '#date_invoice')
        .val();
    console.log(url)
    $.ajax({
        url: url,
        type: 'GET',
        cache: false,
        dataType: "html",

        success: function(data) {
            if (data == 1) {

                $.ajax({
                    url: " {{URL::to('getAllinvicesajax')}}",
                    type: "GET",
                    dataType: "html",
                    success: function(products) {
                        $("#ajax_responce_allinvoicesDiv").html(products);
                    },
                });


            }

        },
        error: function(response) {

            console.log(response)
            alert(response)


        }
    });


})


// دالة موحدة يتم استدعاؤها عند تغيير الفرع أو التاريخ
function performUnifiedSearch() {
    var branchId = $('#branch_id_search').val();
    var dateValue = $('#date').val();

    $.ajax({
        url: "{{URL::to('getinvoicesbybranch')}}" + "/" + branchId,
        type: "GET",
        data: {
            date: dateValue // نرسل التاريخ كـ Query String
        },
        dataType: "html",
        success: function(products) {
            $("#ajax_responce_allinvoicesDiv").html(products);
        },
        error: function(err) {
            console.log("خطأ في جلب البيانات");
        }
    });
}

// اربط الدالة بالفرع (احذف الـ onchange القديم من الـ HTML واكتفِ بهذا)
$('#branch_id_search').off('change').on('change', function() {
    performUnifiedSearch();
});

// اربط الدالة بالتاريخ أيضاً
function searchaboutproductfunction() {
    performUnifiedSearch();
}



function searchaboutproductfunction() {
    date = $('#date').val();
    console.log(" {{URL::to('searchAllInvoicespaginatenew')}}" + "/" + date)
    $.ajax({
        url: " {{URL::to('searchAllInvoicespaginatenew')}}" + "/" + date,
        type: "GET",
        dataType: "html",
        success: function(products) {
            console.log(products)
            $("#ajax_responce_allinvoicesDiv").html(products);


        },
    });
}
$('select[name="clientnamesearch"]').on('change', function() {
    console.log('AJAX load   work 0000');

    var selectCustomer = $(this).val();
    if (selectCustomer != '') {
        $.ajax({
            url: " {{URL::to('getinvoicesbycustomer')}}" + "/" + selectCustomer,
            type: "GET",
            dataType: "html",
            success: function(products) {
                console.log(products)
                $("#ajax_responce_allinvoicesDiv").html(products);


            },
        });
    } else {
        $.ajax({
            url: " {{URL::to('getAllinvicesajax')}}",
            type: "GET",
            dataType: "html",
            success: function(products) {
                $("#ajax_responce_allinvoicesDiv").html(products);


            },
        });
    }

});



$('select[name="invoice_type_search"]').on('change', function() {
    console.log('AJAX load   work 0000');

    var selectCustomer = $(this).val();
    if (selectCustomer != '') {
        $.ajax({
            url: " {{URL::to('getinvoicesbytype')}}" + "/" + selectCustomer,
            type: "GET",
            dataType: "html",
            success: function(products) {
                console.log(products)
                $("#ajax_responce_allinvoicesDiv").html(products);
            },
        });
    }

});

$(document).ready(function() {
    document.getElementById('loading-screen').style.display = 'none'; // Hide loading screen

    $.ajax({
        url: " {{URL::to('getAllinvicesajax')}}",
        type: "GET",
        dataType: "html",
        success: function(products) {
            $("#ajax_responce_allinvoicesDiv").html(products);


        },
    });
});

function searchaboutinvoiceByIdfunction() {
    date = $('#invoiceid').val();
    if (date != '') {

        $.ajax({
            url: " {{URL::to('searchaboutinvoiceByIdfunction')}}" + "/" + date,
            type: "GET",
            dataType: "html",
            success: function(products) {
                console.log(products)
                $("#ajax_responce_allinvoicesDiv").html(products);


            },
        });
    } else {
        $.ajax({
            url: " {{URL::to('getAllinvicesajax')}}",
            type: "GET",
            dataType: "html",
            success: function(products) {
                $("#ajax_responce_allinvoicesDiv").html(products);


            },
        });
    }
}

$("#updatecustomer").click(function(e) {
    var url = " {{ URL::to('updatecustomerDataInvoice') }}";
    token_search = $('#token_search').val();
    $.ajax({
        url: url,
        type: 'post',
        cache: false,
        dataType: "html",
        data: {
            _token: token_search,
            id: $('#id').val(),
            customername: $('#customername').val(),
            customerId: $('#customerId').val(),

        },


        success: function(data) {
            $("#ajax_responce_allinvoicesDiv").html(data);

        },
        error: function(error) {
            console.log('error')
            console.log(error)
        }
    });
})

$(document).on('click', '.payment-change-btn', function(e) {
    e.preventDefault();

    var invoiceId = $(this).data('invoice-id');
    var paymentMethod = $(this).data('payment');

    if(confirm('هل أنت متأكد من تغيير طريقة الدفع؟')) {
        $.ajax({
            url: "{{ route('invoices.updatePayment') }}", // تأكد من مطابقة اسم الروت
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                id: invoiceId,
                payment_method: paymentMethod
            },
            success: function(response) {
                if(response.success) {
                    alert('تم تحديث طريقة الدفع بنجاح');
                    // يمكنك هنا تحديث النص في الجدول لو كنت تعرضه في مكان آخر بنفس السطر
                    location.reload(); // لإعادة تحميل الصفحة ورؤية التغيير فوراً
                } else {
                    alert('حدث خطأ ما، يرجى المحاولة لاحقاً');
                }
            },
            error: function() {
                alert('فشلت العملية، تأكد من الصلاحيات أو الاتصال');
            }
        });
    }
});

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

    jQuery.ajax({
        url: url,
        type: 'get',
        dataType: 'html',
        cache: false,
        data: {
            search_by_text: search_by_text,
            "_token": token_search
        },
        success: function(data) {
            console.log(data)
            $("#ajax_responce_allinvoicesDiv").html(data);
        },
        error: function() {

        }
    });
});

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

    jQuery.ajax({
        url: url,
        type: 'get',
        dataType: 'html',
        cache: false,
        data: {
            search_by_text: search_by_text,
            "_token": token_search
        },
        success: function(data) {
            console.log(data)
            $("#ajax_responce_allinvoicesDiv").html(data);
        },
        error: function() {

        }
    });
});
</script>





















<script>
$('select[name="paymodal"]').on('change', function() {

    var selectCustomer = $(this).val();
    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)
        document.getElementById("bankamount").readOnly = true;
        document.getElementById("cashamount").readOnly = true;
        document.getElementById("Bank_transfer").readOnly = true;


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

        document.getElementById("bankamount").readOnly = true;
        document.getElementById("cashamount").readOnly = true;
        document.getElementById("Bank_transfer").readOnly = true;

    } else if (selectCustomer == 'Credit') {
        $('#cashamount').val(0)
        $('#bankamount').val(0)
        $('#Bank_transfer').val(0)
        $('#creaditamount').val(value)
        document.getElementById("bankamount").readOnly = true;
        document.getElementById("cashamount").readOnly = true;
        document.getElementById("Bank_transfer").readOnly = true;

    } else if (selectCustomer == 'Bank_transfer') {


        $('#cashamount').val(0)
        $('#bankamount').val(0)
        $('#creaditamount').val(0)
        $('#Bank_transfer').val(value)
        document.getElementById("bankamount").readOnly = true;
        document.getElementById("cashamount").readOnly = true;
        document.getElementById("Bank_transfer").readOnly = true;

    } else {
        $('#cashamount').val(value)
        $('#bankamount').val(0)
        $('#creaditamount').val(0)
        $('#Bank_transfer').val(0)
        document.getElementById("bankamount").readOnly = false;
        document.getElementById("cashamount").readOnly = false;
        document.getElementById("Bank_transfer").readOnly = false;


    }





});
$('#updateCustomer').on('show.bs.modal', function(event) {
    var button = $(event.relatedTarget)
    var id = button.data('id')
    $('#cashamount').val(0)
    $('#Bank_transfer').val(0)
    $('#creaditamount').val(0)
    $('#bankamount').val(0)

    var customername = button.data('customername')


    var modal = $(this)

    modal.find('.modal-body #customername').val(customername);
    modal.find('.modal-body #id').val(id);

})
</script>

<script>
$('#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) {


    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)
    } else {

    }


    text = document.getElementById('totalvalue').innerText
    const select = document.getElementById("paymodal");
    const selectedIndex = select.selectedIndex;

    console.log(" {{URL::to('updatepaymentconfirmpayment')}}/" + $('#invoiceid').val() + '/' + $(
            '#cashamount').val() + '/' + $('#bankamount').val() + '/' + $('#creaditamount').val() +
        "/" + $('#Bank_transfer').val() + '/' + $('#paymodal').val() + '/' + selectedIndex)
    if (Number(text) == (Number($('#cashamount').val()) + Number($('#Bank_transfer').val()) + Number($(
            '#bankamount').val()) + Number($('#creaditamount').val()))) {
        $.ajax({
            url: " {{URL::to('updatepaymentconfirmpayment')}}/" + $('#invoiceid').val() + '/' +
                $('#cashamount').val() + '/' + $('#bankamount').val() + '/' + $(
                    '#creaditamount').val() + "/" + $('#Bank_transfer').val() + '/' + $(
                    '#paymodal').val() + '/' + selectedIndex,
            type: "GET",
            dataType: "html",
            success: function(data) {
                $("#ajax_responce_allinvoicesDiv").html(data);



            },
            error: function(response) {

                alert("{{ __('home.sorryerror') }}")

            }

        })
    } else {
        $('#saveinvice').val(0);

        alert("{{ __('home.entermonycorrect') }}")

    }


})
$(document).ready(function() {


    $('select[name="clientnamesearch"]').on('change', function() {
        console.log('AJAX load   work 0000');

        var selectclientid = $(this).val();
        if (selectclientid) {
            console.log('AJAX load   work');

            $.ajax({
                url: "{{ URL::to('getcustomer') }}/" + selectclientid,
                type: "GET",
                dataType: "json",
                success: function(data) {
                    console.log("success");
                    console.log(data['name']);
                    $('#clientName').val(data['name']);
                    $('#address').val(data['address']);
                    $('#phonenumber').val(data['phone']);
                    $('#notes').val(data['notes']);
                },
            });
        } else {
            console.log('AJAX load did not work');
        }
    });
});

$('select[name="searchproductNo"]').on('change', function() {
    console.log('AJAX load   work 0000');

    var selectclientid = $(this).val();
    if (selectclientid) {
        console.log('AJAX load   work');

        $.ajax({
            url: "{{ URL::to('getproduct') }}/" + selectclientid,
            type: "GET",
            dataType: "json",
            success: function(data) {
                console.log("success");
                console.log(data['name']);
                $('#quentity').val(data['numberofpice']);

            },
        });
    } else {
        console.log('AJAX load did not work');
    }
});
</script>




<script>
$(document).ready(function() {
    $.ajax({
        url: " {{URL::to('getAllinvicesajax')}}",
        type: "GET",
        dataType: "html",
        success: function(products) {
            $("#ajax_responce_allinvoicesDiv").html(products);


        },
    });
    $('#invoice_number').hide();

    $('input[type="radio"]').click(function() {
        if ($(this).attr('id') == 'type_div') {
            $('#invoice_number').hide();
            $('#type').show();
            $('#start_at').show();
            $('#end_at').show();
        } else {
            $('#invoice_number').show();
            $('#type').hide();
            $('#start_at').hide();
            $('#end_at').hide();
        }
    });
});


$("#reciptprinter").click(function(e) {
    reciptprinter
    var url = " {{ URL::to('reciptprinter') }}";
    var token_search = $("#token_search").val();
    $.ajax({
        url: url,
        type: 'post',
        cache: false,
        dataType: 'html',
        data: {
            _token: token_search,
            show_invoice_number: $('#show_invoice_number').val(),
        },
        success: function(data) {
            console.log(data)
            const winUrl = URL.createObjectURL(
                new Blob([data], {
                    type: "text/html"
                })
            );
            const win = window.open(
                winUrl,
                "win",
                `width=800,height=400,screenX=200,screenY=200`
            );

        },
        error: function(response) {
            console.log(response)
            alert("{{ __('home.sorryerror') }}")

        }
    });
});
</script>


@endsection