@extends('layouts.master')
@section('css')

<!-- Internal Data table css -->

<!--Internal  Datatable js -->
<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">

<!-- Internal Select2 css -->
<link href="{{ URL::asset('assets/plugins/select2/css/select2.min.css') }}" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">



<style>

    #cartTableBody tr.item-row {
        cursor: pointer;
    }
    #cartTableBody tr.item-row.selected-row td {
        background-color: #fff9c4 !important;
    }
    #cartTableBody tr.item-row.selected-row {
        outline: 2px solid #f0ad4e;
    }
    /* لون الصف عند التحديد */
    .selected-row {
        background-color: #ffc107 !important; /* لون أصفر ذهبي واضح */
        color: #000;
        font-weight: bold;
    }
    /* تأثير عند مرور الماوس */
    #salesTable tbody tr:hover {
        cursor: pointer;
        background-color: #fff3cd;
    }
    .btn-search-trigger {
        transition: all 0.3s ease; /* تنعيم الحركة */
        border: 1px solid #007bff !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    }

    .btn-search-trigger:hover {
        background-color: #0056b3 !important; /* تغميق اللون عند الوقوف */
        transform: scale(1.05); /* تكبير بسيط جداً */
        box-shadow: 0 0 8px rgba(0, 123, 255, 0.5); /* إضاءة حول الزرار */
    }

    .btn-search-trigger:active {
        transform: scale(0.95); /* تأثير الضغطة للداخل */
    }

    .selectable-style:hover {
        border-color: #28a745 !important;
        box-shadow: 0 0 10px rgba(40, 167, 69, 0.2);
    }
    .selected-style-active {
        border-color: #28a745 !important;
        background-color: #f8fff9 !important;
        box-shadow: 0 0 15px rgba(40, 167, 69, 0.3);
    }

    #custom-success-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2000; /* أعلى من الموديل */
    width: 400px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.5);
    display: none; /* مخفية في البداية */
}

/* تكبير الخط في الصفحة كاملة */
    body {
        font-size: 1.1rem !important; /* تكبير الخط الأساسي */
    }

    /* تكبير خط العناوين والجداول والمدخلات */
    table th, table td, input, select, textarea, label, button, .form-control {
        font-size: 18px !important; /* الرقم ده تقدر تغيره حسب راحتك */
        font-weight: 900 !important; /* لجعل الخط أوضح قليلاً */
    }

    /* تكبير خط أسماء الأعمدة في الجدول بشكل خاص */
    .table thead th {
        font-size: 19px !important;
        background-color: #f8f9fa; /* اختيار اختياري لتمييز الهيدر */
    }

    /* لضمان عدم تداخل النصوص داخل الحقول بعد تكبيرها */
    .form-control {
        height: auto !important;
        padding: 10px !important;
    }

        /* استثناء موديل إضافة العميل وإعادة تصغير الخطوط جواه */
    #addCustomerModal,
    #addCustomerModal label,
    #addCustomerModal input,
    #addCustomerModal select,
    #addCustomerModal textarea,
    #addCustomerModal button,
    #addCustomerModal .form-control {
        font-size: 15px !important; /* صغرنا الخط هنا عشان الحقول تبان */
        font-weight: bold !important; /* خليناه بولد طبيعي مش ضخم */
    }

    /* تصغير الـ Padding للحقول جوه الموديل عشان متخدش مساحة عمودية ضخمة */
    #addCustomerModal .form-control {
        height: calc(1.5em + 0.5rem + 2px) !important; /* حجم متناسق للـ input */
        padding: 4px 8px !important; /* مسافات داخلية صغيرة ومحترمة */
    }

    /* ضبط خطوط عناوين الموديل */
    #addCustomerModal .modal-title,
    #addCustomerModal h6 {
        font-size: 17px !important;
        font-weight: bold !important;
    }

    /* منع اختفاء نصوص العناوين الصغيرة للحقول */
    #addCustomerModal .text-truncate {
        overflow: visible !important;
        white-space: normal !important;
    }
</style>
@section('title')
{{ __('home.sales') }}
@stop
@endsection

@section('content')

{{--بداية سكشن العميل اول سكشن --}}

    <div class="card mb-3 shadow-sm" style="background-color: #f4f4f4;">
        <div class="card-body p-2">
            <div class="row align-items-center mb-2">
                <div class="col-md-2">
                    <div class="input-group">
                        <div class="input-group-prepend"><span class="input-group-text py-0"># ID</span></div>
                        <input type="text" class="form-control form-control-sm bg-white" value="170100001" readonly>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="d-flex align-items-center">
                        <label class="mb-0 ml-2" style="white-space: nowrap;">
                            {{ __('sales.customer') }}
                        </label>
                        <select id="customer_select" name="payment_type" class="form-control form-control-sm text-primary font-weight-bold">
                            <option value="" selected disabled>{{ __('sales.choose_customer') ?? 'اختر العميل' }}</option>
                    @foreach($customers as $customer)
                        <option value="{{ $customer->id }}"
                            data-name="{{ $customer->name }}"
                            data-phone="{{ $customer->phone }}"
                            data-tax="{{ $customer->tax_no }}"
                            data-civil_id="{{ $customer->civil_id }}"
                            {{-- المقاسات --}}
                            data-front_length="{{ $customer->front_length }}"
                            data-back_length="{{ $customer->back_length }}"
                            data-shoulder_width="{{ $customer->shoulder_width }}"
                            data-sleeve_length="{{ $customer->sleeve_length }}"
                            data-arm_width="{{ $customer->arm_width }}"
                            data-arm_mid_width="{{ $customer->arm_mid_width }}"
                            data-arm_bottom_width="{{ $customer->arm_bottom_width }}"
                            data-chest_width="{{ $customer->chest_width }}"
                            data-neck_size="{{ $customer->neck_size }}"
                            data-collar_size="{{ $customer->collar_size }}"
                            data-neck_plain="{{ $customer->neck_plain }}"
                            data-step_width="{{ $customer->step_width }}"

                            data-arm_center_width="{{ $customer->arm_center_width }}"
                            data-cuff_width="{{ $customer->cuff_width }}"
                            data-cuff_hem="{{ $customer->cuff_hem }}"
                            data-bottom_hem="{{ $customer->bottom_hem }}"
                            data-dropped_shoulder="{{ $customer->dropped_shoulder }}"


                            data-buttons_count="{{ $customer->buttons_count }}"
                            data-pocket_type="{{ $customer->pocket_type }}"
                            data-notes_one="{{ $customer->notes_one }}"
                            data-notes_two="{{ $customer->notes_two }}"
                            data-notes_three="{{ $customer->notes_three }}"
                            data-notes_four="{{ $customer->notes_four }}"

                            {{-- خيارات الخياطة --}}
                            data-hand_plain="{{ $customer->hand_plain }}"
                            data-kabak_plain="{{ $customer->kabak_plain }}"
                            data-hidden_pockets="{{ $customer->hidden_pockets }}"
                            data-visible_pockets="{{ $customer->visible_pockets }}"
                            data-janzour="{{ $customer->janzour }}"
                            data-hidden="{{ $customer->hidden }}"
                            data-visible_hidden="{{ $customer->visible_hidden }}"
                            data-hidden_sewing="{{ $customer->hidden_sewing }}"
                            data-twisted_sewing="{{ $customer->twisted_sewing }}"

                            data-features='@json($customer->customer_features)'
                            data-styles='@json($customer->order_styles)'
                        >
                            {{ $customer->name }}
                        </option>
                    @endforeach
                    </select>

                        <button type="button" class="btn btn-sm btn-outline-success ml-1"><i class="fa fa-plus"></i></button>
                        <button type="button" id="btnSearchCustomer"
                                data-id="{{ $customer->id ?? null }}"
                                class="btn btn-sm btn-outline-primary ml-1"
                                data-toggle="modal"
                                data-target="#searchCustomersModal">
                            <i class="fa fa-search"></i>
                        </button>
                    </div>
                </div>

                <div class="col-md-7 d-flex align-items-center">
                        <label class="mb-0 ml-2">
                            {{ __('sales.customer_name') }}
                        </label>
                    <input type="text" id="customer_name_display" name="customer_name" class="form-control form-control-sm bg-light" placeholder="{{ __('sales.customer_name_placeholder') }}">
                </div>
            </div>

            <div class="row align-items-center mb-2">
                <div class="col-md-4">
                    <div class="input-group">
                        <div class="input-group-prepend"><span class="input-group-text py-0">{{ __('sales.mobile_number') }}</span></div>
                        <input type="text" name="phone" class="form-control form-control-sm" placeholder="05xxxx">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="input-group">
                        <div class="input-group-prepend"><span class="input-group-text py-0">{{ __('sales.vat_no') }}</span></div>
                        <input type="text" name="tax_id" class="form-control form-control-sm">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="input-group">
                        <div class="input-group-prepend"><span class="input-group-text py-0">{{ __('sales.id_number') }}</span></div>
                        <input type="text" name="civil_id" class="form-control form-control-sm">
                    </div>
                </div>
            </div>

            <div class="row align-items-center py-2" style="background-color: #fff9c4; border: 1px solid #fbc02d;">
                  @php
                        // قراءة رقم الفرع بالاسم الصحيح للعمود في جدول users
                        $userBranchId = auth()->user()->branchs_id ?? auth()->user()->branch_id;

                        // جلب الموظف التابع لنفس الفرع (فرع 22 -> طه حسين)
                        $employeeRecord = App\Models\employee::where('branch_id', $userBranchId)
                        ->where('department', 1)
                        ->first();

                        // جلب اسم الموظف
                        $empName = $employeeRecord
                            ? (app()->getLocale() == 'ar' ? $employeeRecord->name_ar : $employeeRecord->name_en)
                            : auth()->user()->name;

                        // جلب اسم الفرع
                        $branchName = $employeeRecord && $employeeRecord->branch
                            ? (app()->getLocale() == 'ar' ? ($employeeRecord->branch->name_ar ?? $employeeRecord->branch->name) : ($employeeRecord->branch->name_en ?? $employeeRecord->branch->name))
                            : (auth()->user()->branch->name_ar ?? auth()->user()->branch->name ?? 'طويق');
                    @endphp

                <div class="col-md-4">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text py-0 border-0 bg-transparent text-muted">
                                <i class="las la-user-tie mr-1"></i> {{ __('hr.name') }} / {{ __('home.branches') }}:
                            </span>
                        </div>

                        <!-- سيظهر: طه حسين - (اسم الفرع) -->
                        <input type="text"
                            class="form-control form-control-sm border-0 bg-light text-dark font-weight-bold"
                            value="{{ $empName }} - ({{ $branchName }})"
                            readonly>

                        <input type="hidden" name="employee_id" value="{{ $employeeRecord->id ?? '' }}">
                        <input type="hidden" name="branch_id" value="{{ $userBranchId }}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="input-group">
                        <div class="input-group-prepend"><span class="input-group-text py-0 border-0 bg-transparent">{{ __('sales.order_date') }}</span></div>
                        <input type="date" name="order_date" class="form-control form-control-sm border-0" value="{{ date('Y-m-d') }}">
                    </div>
                </div>
                     <div class="col-md-4">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text py-0 border-0 bg-transparent">
                                    {{ __('sales.delivery_date') }}
                                </span>
                            </div>
                            <input type="date" name="delivery_date"
                                class="form-control form-control-sm border-0 text-primary font-weight-bold"
                                value="{{ $suggestedDeliveryDate }}"
                                {{ !in_array('Admin', auth()->user()->roles_name) ? 'readonly' : '' }}>
                        </div>
                    </div>
            </div>
        </div>
    </div>



        {{--   موديل اضافة عميل --}}
        <div class="modal fade" id="addCustomerModal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-xl" role="document">
                <div class="modal-content">
                    <div class="modal-header bg-success text-white">
                        <h5 class="modal-title"><i class="fa fa-user-plus"></i> {{ __('sales.add_customer_title') }}</h5>
                        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    </div>
                    <form id="newCustomerForm">
                        @csrf
                        <div class="modal-body" style="direction: rtl; text-align: right;">
                            <div class="row border-bottom mb-3 pb-2">
                                <div class="col-md-3">
                                    <label class="font-weight-bold"> {{ __('sales.customer_name_label') }} <span class="text-danger">*</span></label>
                                    <input type="text" name="name" class="form-control form-control-sm" required>
                                </div>
                                <div class="col-md-3">
                                    <label class="font-weight-bold"> {{ __('sales.mobile_number_label') }} <span class="text-danger">*</span></label>
                                    <input type="text" name="phone" class="form-control form-control-sm" required>
                                </div>
                                <div class="col-md-3">
                                    <label class="font-weight-bold"> {{ __('sales.vat_no_label') }}</label>
                                    <input type="text" name="tax_no" class="form-control form-control-sm">
                                </div>
                                <div class="col-md-3">
                                    <label class="font-weight-bold"> {{ __('sales.id_number_label') }}</label>
                                    <input type="text" name="civil_id" class="form-control form-control-sm">
                                </div>
                            </div>

                            <h6 class="text-primary border-bottom pb-1"><i class="fa fa-scissors"></i>   {{ __('sales.detailed_measurements') }}</h6>
                            <div class="row mb-3 bg-light p-2 no-gutters">
                             @php
                                    $fields = [
                                        'front_length'     => __('sales.front_length'),
                                        'back_length'      => __('sales.back_length'),
                                        'shoulder_width'   => __('sales.shoulder_width'),
                                        'sleeve_length'    => __('sales.sleeve_length'),
                                        'arm_width'        => __('sales.arm_width'),
                                        'arm_mid_width'    => __('sales.arm_mid_width'),
                                        'arm_bottom_width' => __('sales.arm_bottom_width'),
                                        'chest_width'      => __('sales.chest_width'),
                                        'neck_size'        => __('sales.neck_size'),
                                        'collar_size'      => __('sales.collar_size'),
                                        'neck_plain'       => __('sales.neck_plain'),
                                        'step_width'       => __('sales.step_width'),
                                        'arm_center_width' => __('sales.arm_center_width'),
                                        'cuff_width'       => __('sales.cuff_width'),
                                        'cuff_hem'         => __('sales.cuff_hem'),
                                        'bottom_hem'       => __('sales.bottom_hem'),
                                        'dropped_shoulder' => __('sales.dropped_shoulder'),
                                    ];
                                @endphp
                                @foreach($fields as $name => $label)
                                <div class="col-md-1 px-1 mb-2">
                                    <label class="small d-block text-truncate" title="{{ $label }}">{{ $label }}</label>
                                    <input type="number" step="any" name="{{ $name }}" class="form-control form-control-sm text-center">
                                </div>
                                @endforeach
                            </div>

                            <h6 class="text-warning border-bottom pb-1"><i class="fa fa-check-square"></i>  {{ __('sales.tailoring_options') }}</h6>
                        <div class="row p-2" style="background-color: #fff9c4; border-radius: 5px;">
                        @php
                            $checkboxes = [
                                'hand_plain'      => __('sales.hand_plain'),
                                'kabak_plain'     => __('sales.kabak_plain'),
                                'hidden_pockets'  => __('sales.hidden_pockets'),
                                'visible_pockets' => __('sales.visible_pockets'),
                                'janzour'         => __('sales.janzour'),
                                'hidden'          => __('sales.hidden'),
                                'visible_hidden'  => __('sales.visible_hidden'),
                                'hidden_sewing'   => __('sales.hidden_sewing'),
                                'twisted_sewing'  => __('sales.twisted_sewing'),
                            ];
                        @endphp
                     @foreach($checkboxes as $name => $label)
                    <div class="col-md-4 mb-1">
                        <div class="custom-control custom-checkbox">
                            {{-- غيرنا الـ id هنا ليكون مميزاً عن اللي بره --}}
                            <input type="checkbox" name="{{ $name }}" class="custom-control-input" id="modal_{{ $name }}" value="1">
                            <label class="custom-control-label small" for="modal_{{ $name }}">{{ $label }}</label>
                        </div>
                    </div>
                    @endforeach
                    </div>
                        </div>

                        <div class="modal-footer bg-light">
                            <button type="submit" class="btn btn-success px-5 font-weight-bold"> {{ __('sales.save_customer_full') }}</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('sales.cancel') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        {{--   موديل اضافة عميل --}}



        {{--   موديل بحث عن عميل --}}
            <div class="modal fade" id="searchCustomersModal" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header bg-primary text-white">
                            <h5 class="modal-title"><i class="fa fa-users"></i> {{ __('sales.customers_list') }} </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">
                            <input type="text" id="modal_customer_search_input" class="form-control mb-3" placeholder="{{ __('sales.search_placeholder') }}">

                            <div class="table-responsive" style="max-height: 400px;">
                                <table class="table table-hover table-bordered text-center" id="allCustomersTable">
                                    <thead class="thead-light">
                                        <tr>
                                            <th>{{ __('sales.name') }}</th>
                                            <th>{{ __('sales.mobile') }}</th>
                                            <th>{{ __('sales.tax_number') }}</th>
                                            <th>{{ __('sales.action') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody id="customers_modal_tbody"></tbody>
                                </table>
                            </div>

                            <div id="customers_pagination_container" class="mt-3 d-flex justify-content-center"></div>
                        </div>
                    </div>
                </div>
            </div>
        {{--   موديل بحث عن عميل --}}


{{--نهاية سكشن العميل اول سكشن --}}




{{--بداية سكشن المقاسات تاني سكشن --}}

<div class="card mb-2 shadow-sm border-0" style="background-color: #f1f1f1;">
    <div class="card-body p-1 d-flex flex-row-reverse">

        <div class="d-flex flex-wrap justify-content-start align-items-start p-1" style="background-color: #c0c0c0; border: 1px solid #999; flex: 2; direction: rtl;">
            @php
            $measurements = [
                __('sales.front_length')     => 'front_length',
                __('sales.back_length')      => 'back_length',
                __('sales.shoulder_width')   => 'shoulder_width',
                __('sales.sleeve_length')    => 'sleeve_length',
                __('sales.arm_width')        => 'arm_width',
                __('sales.arm_mid_width')    => 'arm_mid_width',
                __('sales.arm_bottom_width') => 'arm_bottom_width',
                __('sales.chest_width')      => 'chest_width',
                __('sales.neck_size')        => 'neck_size',
                __('sales.collar_size')      => 'collar_size',
                __('sales.neck_plain')       => 'neck_plain',
                __('sales.step_width')       => 'step_width',


                __('sales.arm_center_width')   => 'arm_center_width',
                __('sales.cuff_width')         => 'cuff_width',
                __('sales.cuff_hem')           => 'cuff_hem',
                __('sales.bottom_hem')         => 'bottom_hem',
                __('sales.dropped_shoulder')   => 'dropped_shoulder',
            ];
        @endphp

        @foreach($measurements as $label => $db_field)
            <div class="text-center mx-1 mb-1">
                <label class="d-block mb-0" style="font-size: 17px; font-weight: bold;">{{ $label }}</label>
                <input type="any" id="m_{{ $db_field }}" name="{{ $db_field }}"
                    class="form-control form-control-sm text-center p-0 customer-measurement calc-trigger"
                    style="width: 55px; height: 25px; font-size: 15px; font-weight: bold;"
                    {{-- التعديل هنا: تحويل الرقم لصحيح لإزالة الـ .00 --}}
                    {{-- التعديل: إزالة (int) واستخدام رقم عشري --}}
                    value="{{ isset($customer) && $customer->$db_field ? number_format((float)$customer->$db_field, 2, '.', '') : '' }}">
            </div>
        @endforeach


        @php
        // جلب الأدوار
        $roles = is_array(auth()->user()->roles_name)
                ? auth()->user()->roles_name
                : json_decode(auth()->user()->roles_name, true);

        $isAuthorizedRole = in_array('Admin', $roles ?? []) || in_array('Manger', $roles ?? []);

        // جلب بيانات فرع الموظف الحالي (عن طريق العلاقة في موديل User)
        $branchCanEdit = auth()->user()->branch->allow_extra_edit ?? false;

        // الشرط النهائي: لو هو إداري "أو" فرعه مسموح له
        $canEditIncrease = $isAuthorizedRole || $branchCanEdit;
    @endphp

    <div class="text-center mx-1 mt-1 border-right pr-2 mr-2">
        <label class="d-block mb-0 text-danger" style="font-size: 17px; font-weight: bold;">
            {{ __('sales.extra_increase') }}
        </label>

        <input type="number"
            id="m_extra_const"
            class="form-control form-control-sm text-center p-0 calc-trigger"
            style="width: 45px; height: 25px; font-size: 17px; background-color: #fffde7;"
            value="20"
            @if(!$canEditIncrease) readonly @endif>
    </div>



    <div class="text-center mx-1 mt-2">
            <label class="d-block mb-0 text-primary" style="font-size: 17px; font-weight: bold;">{{ __('sales.total_cm') }}</label>
            <input type="text" id="m_total_consumption" class="form-control form-control-sm text-center p-0 calc-trigger"
                style="width: 60px; height: 25px; font-size: 15px; font-weight: bold; background-color: #e8f5e9;" readonly value="0">
        </div>
        @php
            $notes = [
                __('sales.notes_one')   => 'notes_one',
                __('sales.notes_two')   => 'notes_two',
                __('sales.notes_three') => 'notes_three',
                __('sales.notes_four')  => 'notes_four',
            ];
        @endphp

             @foreach($notes as $label => $db_field)
                    <div class="text-center mx-1 mb-1">
                        <label class="d-block mb-0 text-secondary" style="font-size: 17px; font-weight: bold;">{{ $label }}</label>
                        <input type="text" id="n_{{ $db_field }}" name="{{ $db_field }}"
                            class="form-control form-control-sm text-center p-0"
                            style="width: 250px; height: 25px; font-size: 15px; font-weight: bold; background-color: #ffffff;"
                            value="">
                    </div>
                @endforeach
                {{-- الإضافة الجديدة: عدد الطقطق ونوع الجيب --}}

                    <div class="text-center mx-1 mb-1 border-right pr-2 mr-1">
                        <label class="d-block mb-0 text-dark" style="font-size: 17px; font-weight: bold;">عدد الطقطق</label>
                        <input type="number" id="m_buttons_count" name="buttons_count"
                            class="form-control form-control-sm text-center p-0"
                            style="width: 50px; height: 25px; font-size: 15px; background-color: #ffffff;"
                            value="{{ isset($customer) ? $customer->buttons_count : '' }}">
                    </div>

                    <div class="text-center mx-1 mb-1">
                        <label class="d-block mb-0 text-dark" style="font-size: 17px; font-weight: bold;">نوع الجيب</label>
                        <select id="m_pocket_type" name="pocket_type"
                            class="form-control form-control-sm text-center p-0"
                            style="width: 75px; height: 25px; font-size: 15px; background-color: #ffffff; cursor: pointer;">
                            <option value="">-- اختر --</option>
                            <option value="زرار">زرار</option>
                            <option value="سحاب">سحاب</option>
                        </select>
                    </div>
    </div>

    <div id="garment-features-box" class="p-2 d-flex flex-wrap align-content-start" style="background-color: #fff9c4; border: 1px solid #fbc02d; flex: 1.5; direction: rtl;">
        <div class="row w-100 no-gutters">
            @php
                // تقسيم الحقول إلى 3 مجموعات كما في تصميمك الأصلي
                $groups = [
                    ['hand_plain', 'kabak_plain', 'hidden_pockets'],    // المجموعة 1 (check 1, 2, 3)
                    ['visible_pockets', 'janzour', 'hidden'],          // المجموعة 2 (check 4, 5, 6)
                    ['visible_hidden', 'hidden_sewing', 'twisted_sewing'] // المجموعة 3 (check 7, 8, 9)
                ];
                $checkIndex = 1; // عداد الـ ID يبدأ من 1
            @endphp

            @foreach($groups as $group)
                <div class="col-4 px-1">
                    @foreach($group as $field)
                        <div class="custom-control custom-checkbox text-right">
                            {{-- الـ id هنا هيطلع check1, check2, إلخ لضمان عمل الـ Ajax --}}
                            <input type="checkbox"
                                class="custom-control-input"
                                id="check{{ $checkIndex }}"
                                name="{{ $field }}">

                            <label class="custom-control-label"
                                for="check{{ $checkIndex }}"
                                style="font-size: 11px; font-weight: bold;">
                                {{ __("sales.$field") }}
                            </label>
                        </div>
                        @php $checkIndex++; @endphp
                    @endforeach
                </div>
            @endforeach
        </div>
    </div>
</div>

{{--نهاية سكشن المقاسات تاني سكشن --}}



{{--بداية سكشن الموديلات رابع سكشن --}}
<div class="card mb-3 shadow-sm border-0">
    <div class="card-body p-2">
        <div class="d-flex flex-row-reverse justify-content-between align-items-start text-center">

        @php
            // تعديل قيم الـ max والمسارات بناءً على الموديلات الجديدة
            $style_sections = [
                'neck'    => ['title' => __('sales.neck_section'),    'folder' => 'neck',    'max' => 25], // زادت لـ 20
                'janzour' => ['title' => __('sales.janzour_section'), 'folder' => 'janzour', 'max' => 10], // عدل الرقم حسب فعلي
                'sleeve'  => ['title' => __('sales.sleeve_section'),  'folder' => 'sleeve',  'max' => 19],
                'side_p'  => ['title' => __('sales.side_p_section'),  'folder' => 'side_p',  'max' => 8],
                'front_p' => ['title' => __('sales.front_p_section'), 'folder' => 'front_p', 'max' => 17],
            ];
        @endphp

       @foreach($style_sections as $key => $info)
    <div class="style-box selectable-style"
        data-key="{{ $key }}"
        style="width: 19%; border: 2px solid #ddd; border-radius: 5px; background: #fff; cursor: pointer; transition: 0.3s; position: relative;">

        <div class="selected-check" style="position: absolute; top: -5px; right: -5px; display: none;">
            <span class="badge badge-success rounded-circle"><i class="fas fa-check"></i></span>
        </div>

        <div class="p-1 bg-light border-bottom" style="font-size: 11px; font-weight: bold;">{{ $info['title'] }}</div>

        <div class="position-relative d-flex align-items-center justify-content-between p-1" style="height: 100px;">
            <button type="button" class="btn btn-sm prev-btn" data-target="{{ $key }}">&lt;</button>
            <div class="img-container w-100">
                <img src="{{ asset('assets/img/models/'.$info['folder'].'/1.png') }}" id="img_{{ $key }}" data-current="1" data-folder="{{ $info['folder'] }}" data-max="{{ $info['max'] }}" style="max-width: 100%; max-height: 80px; object-fit: contain;">
            </div>
            <button type="button" class="btn btn-sm next-btn" data-target="{{ $key }}">&gt;</button>
        </div>

        <input type="hidden" name="{{ $key }}_style" id="input_{{ $key }}" value="1">
        <div class="p-1 text-primary small border-top" id="label_{{ $key }}" style="font-weight: bold;"> {{ __('sales.style_model') }} 1</div>

        <div class="p-1 border-top no-print">
            <input type="text"
                   name="{{ $key }}_note"
                   class="form-control form-control-sm style-note-input"
                   placeholder="ملاحظات / مقاس"
                   style="font-size: 10px; height: 25px; border: none; background: #f9f9f9;"
                   onclick="event.stopPropagation();"> {{-- نمنع الـ click من تفعيل اختيار الصندوق --}}
        </div>
    </div>
@endforeach

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

{{--نهاية سكشن الموديلات رابع سكشن --}}


{{--بداية سكشن الانزال تالت سكشن --}}

<div class="row no-gutters align-items-center p-2 mb-1" style="background-color: #eee; border: 1px solid #ccc;">
    <div class="col-md-1">
        <button type="button" id="addRow" class="btn btn-sm btn-primary w-100">
            <i class="fa fa-download"></i> {{ __('sales.drop_item') }}
        </button>
    </div>
    <div class="col-md-8 px-2">
        <div class="input-group">
            <input type="text" id="product_search" class="form-control form-control-sm text-right" placeholder="{{ __('sales.search_item_placeholder') }}">
            <div class="input-group-append">
           <span id="openSearchModal" class="input-group-text bg-primary text-white btn-search-trigger" style="cursor: pointer;">
            <i class="fa fa-search"></i>
            </span>
        </div>
        </div>
    </div>
   <div class="col-md-3 d-flex justify-content-around">
    <button type="button" id="addNewGarment" class="btn btn-sm btn-success w-100 mx-1">
        <i class="fa fa-plus"></i> {{ __('home.add_garment_to_invoice') }}
    </button>
    <button type="button" id="deleteSelected" class="btn btn-sm btn-outline-danger"><i class="fa fa-trash"></i>{{ __('sales.delete_item') }}</button>
    <button type="button" id="clearAll" class="btn btn-sm btn-outline-secondary"><i class="fa fa-eraser"></i> {{ __('sales.clear_all') }}</button>
    </div>
</div>

<div class="table-responsive" style="max-height: 350px; min-height: 45px; overflow-y: auto; border: 1px solid #ccc; background-color: #f8f9fa;">
    <table class="table table-sm table-bordered text-center mb-0" id="" style="table-layout: fixed; width: 100%;">
        <thead style="background-color: #e9ecef; position: sticky; top: 0; z-index: 10;">
       <tr style="font-size: 11px; white-space: nowrap;">
            <th width="8%">{{ __('sales.qty') }}</th>
            <th width="5%">{{ __('sales.unit') }}</th>
            <th width="10%">{{ __('sales.item_number') }}</th>
            <th width="15%">{{ __('sales.item_name') }}</th>
            <th width="10%">{{ __('sales.description') }}</th>
            <th width="10%">{{ __('sales.unit_price') }}</th>
            <th width="10%">{{ __('sales.totall') }}</th>
            <th width="5%">{{ __('sales.discount') }}</th>
            <th width="5%">{{ __('sales.tax') }}</th>
            <th width="10%">{{ __('sales.net_total') }}</th>
        </tr>
        </thead>
        <tbody id="cartTableBody" style="background-color: #fff;">
            </tbody>
    </table>
</div>

{{--نهاية سكشن الانزال تالت سكشن --}}




{{-- موديل البحث --}}

<div class="modal fade" id="searchProductsModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title">{{ __('sales.search_product_title') }}</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">
                <input type="text" id="modal_search_input" class="form-control mb-3" placeholder="{{ __('sales.quick_filter_placeholder') }}">
                <div class="table-responsive" style="max-height: 400px;">
              <table class="table table-hover table-bordered text-center" id="allProductsTable">
                    <thead class="thead-light">
                        <tr>
                            <th>{{ __('sales.product_code') }}</th>
                            <th>{{ __('sales.product_name') }}</th>
                            <th>{{ __('sales.price') }}</th>
                            <th>{{ __('sales.unit') }}</th>
                            <th>{{ __('sales.action') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($products as $product)
                            {{-- إضافة شرط لعرض الأقمشة فقط --}}
                            @if($product->stock_type == 'internal' || $product->product_type == 'fabric')
                                <tr>
                                    <td>{{ $product->Product_Code ?? $product->id }}</td>
                                    <td class="text-right">{{ $product->product_name }}</td>
                                    <td>{{ $product->sale_price }}</td>
                                    <td>{{ $product->unit }}</td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-success select-product"
                                                data-id="{{ $product->id }}">
                                            <i class="fa fa-plus"></i> {{ __('sales.select_item') }}
                                        </button>
                                    </td>
                                </tr>
                            @endif
                        @endforeach
                    </tbody>
                </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- موديل البحث --}}


<div class="row mt-4">
    <div class="col-12">
        <h5><i class="fa fa-cut"></i> {{ __('home.sewing_summary') }}</h5>
        <div class="table-responsive">
            <table class="table table-bordered table-striped text-center" id="garmentsSummaryTable">
                <thead class="bg-dark text-white">
                    <tr>
                        <th>{{ __('home.customer') }}</th>
                        <th>{{ __('home.type') }}</th>
                        <th>{{ __('home.measurements') }}</th>
                        <th>{{ __('home.models') }}</th>
                        <th>{{ __('home.specifications') }}</th>
                        <th>{{ __('home.meters') }}</th>
                        <th>{{ __('home.price') }}</th>
                        <th>{{ __('home.action') }}</th>
                    </tr>
                </thead>
                <tbody>
                    {{-- البيانات هنا هيتم توليدها برضه باستخدام الترجمة لو ثابتة --}}
                </tbody>
            </table>
        </div>
    </div>
</div>







{{--بداية سكشن الحسابات خامس سكشن --}}


<div class="pos-sidebar" style="direction: rtl; text-align: right;">
    <div class="row no-gutters">

        <div class="col-6 p-1">
            <div class="calculation-summary p-2" style="background: #eee; border: 1px solid #ccc; height: 100%;">
               <div class="d-flex justify-content-between">
                    <span>{{ __('sales.subtotal_before_tax_discount') }}</span>
                    <span id="total_before_tax">0.00</span>
                </div>
               <div class="d-flex justify-content-between align-items-center my-1">
                    <span class="font-weight-bold">{{ __('sales.discount') }}</span>
                    <input type="number" id="discount_input"
                        class="form-control form-control-sm w-50 text-center font-weight-bold"
                        style="border: 2px solid #90595f; color: #3b2123;"
                        {{-- هنا نفترض أن هناك عمود للخصم في جدول الإعدادات، وإلا نضعه 0 --}}
                        value="{{ $tax_setting->default_discount ?? 0 }}"
                        step="0.01"
                        oninput="calculateGrandTotal()">
                </div>

               <div class="d-flex justify-content-between">
                    {{-- نضرب في 100 هنا للعرض فقط --}}
                    <span>  {{ __('sales.vat_amount') }} (<span id="display_tax_rate">{{ $tax_rate * 100 }}</span>%):</span>
                    <span id="tax_amount">0.00</span>
                </div>

                {{-- الحقل المخفي يفضل كما هو بالقيمة العشرية 0.15 لسهولة الحساب --}}
                <input type="hidden" id="system_tax_percent" value="{{ $tax_rate }}">
                {{-- تخزين الحد الأقصى للخصم القادم من السيستم --}}
                <input type="hidden" id="max_discount_limit" value="{{ $max_discount }}">

                <div class="total-final mt-2 p-2 text-center" style="background: #28a745; color: white; font-size: 24px; font-weight: bold;">
                    <small>   {{ __('sales.final_price_inc_tax') }}</small> <br>
                    <span id="grand_total">0.00</span>
                </div>
            </div>
        </div>

                <div class="col-6 p-1">
                <div class="row no-gutters mb-1">
                  @if(auth()->user()->hasAnyRole(['Admin', 'Manger']))
                        <div class="col-6 p-1">
                            <button class="btn btn-outline-danger btn-block py-3 shadow-sm"
                                    data-toggle="modal"
                                    data-target="#editInvoiceModal"
                                    style="font-size: 13px;">
                                <i class="fas fa-edit"></i> <br> تعديل فاتورة سابقة
                            </button>
                        </div>
                    @endif
                    <div class="col-6 p-1">
                        <button class="btn btn-outline-secondary btn-block py-3 shadow-sm" style="font-size: 13px;">
                            <i class="fas fa-flag"></i> <br> {{ __('sales.recall_suspended') }}
                        </button>
                    </div>
                </div>

                <div class="row no-gutters mb-1">
                    <div class="col-6 p-1">
                        <button class="btn btn-outline-secondary btn-block py-3 shadow-sm" id="open_drawer" style="font-size: 13px;">
                            <i class="fas fa-cash-register"></i> <br> {{ __('sales.open_drawer') }}
                        </button>
                    </div>
                    <div class="col-6 p-1">
                        <button class="btn btn-outline-secondary btn-block py-3 shadow-sm"
                                data-toggle="modal"
                                data-target="#reprintModal"
                                style="font-size: 13px;">
                            <i class="fa fa-print"></i> <br> {{ __('sales.print_previous') }}
                        </button>
                    </div>
                </div>

                <div class="row no-gutters">
                    <div class="col-12 p-1">
                        <button class="btn btn-info btn-block py-3 shadow-sm font-weight-bold" id="save_f12" style="font-size: 14px;">
                            <i class="fas fa-money-check-alt"></i> {{ __('sales.payment_screen') }}
                        </button>
                    </div>
                </div>
            </div>

    </div>
</div>



{{--  بداية موديل طباعة الرول --}}
<div class="modal fade" id="reprintModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">طباعة فاتورة سابقة</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>أدخل رقم الفاتورة (ID)</label>
                    <input type="number" id="prev_invoice_id" class="form-control" placeholder="مثلاً: 123">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btn-block" onclick="triggerReprint()">طباعة</button>
            </div>
        </div>
    </div>
</div>
{{--  نهاية موديل طباعة الرول --}}


{{--  بداية موديل التعديل --}}
<div class="modal fade" id="editInvoiceModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content shadow border-0">
            <div class="modal-header bg-danger text-white">
                <h6 class="modal-title font-weight-bold">تعديل فاتورة</h6>
                <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">
                <div class="form-group mb-0">
                    <label class="small font-weight-bold">رقم الفاتورة المراد تعديلها</label>
                    <input type="number" id="edit_invoice_id" class="form-control text-center form-control-lg" placeholder="0000">
                </div>
            </div>
            <div class="modal-footer border-top-0">
                <button type="button" class="btn btn-danger btn-block py-2" onclick="loadInvoiceForEdit()">
                    جلب بيانات الفاتورة
                </button>
            </div>
        </div>
    </div>
</div>
{{--  نهاية موديل التعديل --}}






{{--نهاية سكشن الحسابات خامس سكشن --}}


{{--بداية سكشن الدفع سادس سكشن --}}

<div class="modal fade" id="paymentModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl"> <div class="modal-content" style="background-color: #f4f4f4;">
            <div class="modal-body p-4" style="direction: rtl; text-align: right;">
                <div class="row">
                    <div class="col-md-7">
                        <div class="bg-white p-3 border mb-3">
                            <div class="row mb-2">
                                <div class="col-4 text-left">{{ __('sales.cust_phone') }}</div>
                                <div class="col-8"><input type="text" id="modal_cust_phone" class="form-control form-control-sm" readonly></div>
                            </div>
                            <div class="row">
                                <div class="col-4 text-left">{{ __('sales.cust_name') }}</div>
                                <div class="col-8">
                                    <div class="input-group">
                                        <input type="text" id="modal_cust_name" class="form-control form-control-sm" readonly>
                                        <div class="input-group-append"><span class="input-group-text"><i class="fas fa-search"></i></span></div>
                                    </div>
                                </div>

                            </div>
                            <br>
                            <input type="hidden" id="selected_payment_method" name="payment_methods_text" value="Cash">
                        <div class="row align-items-center mb-3">
                            <div class="col-4 text-left font-weight-bold">{{ __('sales.order_status') }}</div>
                            <div class="col-8">
                                <div class="d-flex justify-content-between border rounded p-1 bg-light">
                                    <div class="custom-control custom-radio custom-control-inline mx-1">
                                        <input type="radio" id="status1" name="order_status" value="NOT_STARTED" class="custom-control-input" checked>
                                        <label class="custom-control-label small" for="status1">{{ __('sales.not_started') }}</label>
                                    </div>
                                    <div class="custom-control custom-radio custom-control-inline mx-1">
                                        <input type="radio" id="status2" name="order_status" value="IN_PROGRESS" class="custom-control-input">
                                        <label class="custom-control-label small" for="status2">{{ __('sales.in_progress') }}</label>
                                    </div>
                                    <div class="custom-control custom-radio custom-control-inline mx-1">
                                        <input type="radio" id="status3" name="order_status" value="COMPLETED" class="custom-control-input">
                                        <label class="custom-control-label small" for="status3">{{ __('sales.completed') }}</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </div>

                    <input type="hidden" id="edit_invoice_id" value="">
                  <div class="row text-center">
                            <div class="col-12 mb-2">
                                <button class="btn btn-light border w-100 py-4 payment-method-btn active-payment" data-type="cash">
                                    <img src="https://cdn-icons-png.flaticon.com/512/2331/2331711.png" width="40"> <br> {{ __('sales.cash_method') }}
                                </button>
                            </div>
                            <div class="col-6 mb-2">
                                <button class="btn btn-light border w-100 py-3 payment-method-btn" data-type="credit">
                                    <img src="https://cdn-icons-png.flaticon.com/512/3523/3523887.png" width="30"> <br> {{ __('sales.credit_method') }}
                                </button>
                            </div>
                            <div class="col-6 mb-2">
                                <button class="btn btn-light border w-100 py-3 payment-method-btn" data-type="span">
                                    <img src="https://cdn-icons-png.flaticon.com/512/6963/6963703.png" width="30"> <br> {{ __('sales.span_method') }}
                                </button>
                            </div>
                            <div class="col-6">
                                <button class="btn btn-light border w-100 py-3 payment-method-btn" data-type="tabby" >
                                    <img src="{{ asset('assets/img/tapi.jpg') }}" width="80" alt="Tabby">
                                    <br>{{ __('sales.Tabby') }}
                                </button>
                            </div>
                            <div class="col-6">
                                <button class="btn btn-light border w-100 py-3 payment-method-btn" data-type="tamara">
                                    <img src="{{ asset('assets/img/tamara.png') }}" width="80" alt="Tamara">
                                    <br> {{ __('sales.Tamara') }}
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-5">
                        <div class="form-group row align-items-center">
                            <div class="col-8">
                                <div id="modal_grand_total_display" class="p-2 text-center font-weight-bold" style="background: #90ee90; font-size: 30px; border: 1px solid #777;">0.00</div>
                            </div>
                            <div class="col-4">{{ __('sales.total_amount_label') }}</div>
                        </div>

                        <div class="row no-gutters mb-3">
                            <div class="col-6 px-1">
                                <small>{{ __('sales.span_cash_label') }}</small>
                                <input type="number" id="paid_span" class="form-control text-center font-weight-bold" style="background: #fff9c4;" value="0.00">
                            </div>
                            <div class="col-6 px-1">
                                <small>{{ __('sales.cash_span_label') }}</small>
                                <input type="number" id="paid_cash" class="form-control text-center font-weight-bold" style="background: #fff9c4;" value="0.00">
                            </div>
                        </div>

                        <div class="form-group row align-items-center">
                            <div class="col-8">
                                <input type="number" id="total_paid_input" class="form-control form-control-lg text-center font-weight-bold" style="background: #ffff00; font-size: 28px;">
                            </div>
                            <div class="col-4">{{ __('sales.paid_amount_label') }}</div>
                        </div>

                        <div class="form-group row align-items-center">
                            <div class="col-8">
                                <div id="modal_remaining_display" class="p-2 text-center font-weight-bold" style="background: #90ee90; font-size: 30px; border: 1px solid #777;">0.00</div>
                            </div>
                            <div class="col-4">{{ __('sales.remaining_amount_label') }}</div>
                        </div>

                        <select id="span_type" class="form-control mt-2" style="background: #fff9c4; display:none;">
                            <option value="">{{ __('sales.select_network_type') }}</option>
                            <option value="mada">{{ __('sales.mada') }}</option>
                            <option value="visa">{{ __('sales.visa') }}</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer p-0 border-0">
                <button type="button" class="btn btn-success btn-block m-0 py-3 font-weight-bold" style="font-size: 24px;" id="confirm_and_print">{{ __('sales.ok_confirm') }} <i class="fas fa-check-circle"></i></button>
                <button type="button" class="btn btn-danger btn-block m-0 py-2" data-dismiss="modal">{{ __('sales.cancel_btn') }} <i class="fas fa-times-circle"></i></button>
            </div>
        </div>
    </div>
</div>

{{--نهاية سكشن الدفع سادس سكشن --}}




@endsection
@section('js')

<script src="{{ URL::asset('assets/js/table-data.js') }}"></script>
<!--Internal  Datatable 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 -->
<!-- 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 src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="{{ URL::asset('assets/plugins/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script src="{{ URL::asset('assets/plugins/select2/js/select2.min.js') }}"></script>


<script>
    $(document).ready(function() {
    let currentSearchPage = 1;
    let searchTimeout = null;

    // 1. تشغيل الدالة فور فتح الـ Modal لأول مرة
    $('#searchCustomersModal').on('shown.bs.modal', function () {
        fetchCustomers(1);
    });

    // 2. حدث البحث عند الكتابة (مع تأخير 500 ملي ثانية لعدم إرهاق السيرفر)
    $('#modal_customer_search_input').on('keyup', function() {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(function() {
            fetchCustomers(1); // ابدأ من الصفحة الأولى عند البحث الجديد
        }, 500);
    });

    // 3. دالة جلب البيانات عبر Ajax
    function fetchCustomers(page = 1) {
        currentSearchPage = page;
        let query = $('#modal_customer_search_input').val();
        let tbody = $('#customers_modal_tbody');
        let paginationContainer = $('#customers_pagination_container');

        // إشارة تحميل اختيارية
        tbody.html('<tr><td colspan="4"><i class="fa fa-spinner fa-spin"></i> جاري التحميل...</td></tr>');

        $.ajax({
            url: "{{ route('customers.search') }}", // تأكد من اسم الـ Route لديك
            type: "GET",
            data: {
                query: query,
                page: page
            },
            success: function(response) {
                tbody.empty();

                if(response.data.length === 0) {
                    tbody.html('<tr><td colspan="4">لا يوجد نتائج مطابقة</td></tr>');
                    paginationContainer.empty();
                    return;
                }

                // بناء صفوف الجدول
                response.data.forEach(function(customer) {
                    let taxNo = customer.tax_no ? customer.tax_no : '';
                    let row = `
                        <tr>
                            <td class="text-right">${customer.name}</td>
                            <td>${customer.phone}</td>
                            <td>${taxNo}</td>
                            <td>
                                <button type="button" class="btn btn-sm btn-info select-customer-btn" data-id="${customer.id}">
                                    {{ __('sales.select') }}
                                </button>
                            </td>
                        </tr>
                    `;
                    tbody.append(row);
                });

                // بناء أزرار الباجينيشن
                buildPagination(response);
            },
            error: function() {
                tbody.html('<tr><td colspan="4" class="text-danger">حدث خطأ أثناء جلب البيانات</td></tr>');
            }
        });
    }

    // 4. دالة بناء أزرار الترقيم بشكل متناسق (Bootstrap)
    function buildPagination(data) {
        let container = $('#customers_pagination_container');
        container.empty();

        if (data.last_page <= 1) return; // لا داعي للباجينيشن لو هي صفحة واحدة

        let paginationHtml = '<ul class="pagination pagination-sm m-0">';

        // زر السابق
        if (data.current_page > 1) {
            paginationHtml += `<li class="page-item"><a class="page-link change-page-btn" href="#" data-page="${data.current_page - 1}">&laquo;</a></li>`;
        } else {
            paginationHtml += `<li class="page-item disabled"><span class="page-link">&laquo;</span></li>`;
        }

        // الأرقام (نعرض أول وآخر وبعض الصفحات المحيطة إذا كان العدد ضخم)
        let startPage = Math.max(1, data.current_page - 2);
        let endPage = Math.min(data.last_page, data.current_page + 2);

        for (let i = startPage; i <= endPage; i++) {
            if (i === data.current_page) {
                paginationHtml += `<li class="page-item active"><span class="page-link">${i}</span></li>`;
            } else {
                paginationHtml += `<li class="page-item"><a class="page-link change-page-btn" href="#" data-page="${i}">${i}</a></li>`;
            }
        }

        // زر التالي
        if (data.current_page < data.last_page) {
            paginationHtml += `<li class="page-item"><a class="page-link change-page-btn" href="#" data-page="${data.current_page + 1}">&raquo;</a></li>`;
        } else {
            paginationHtml += `<li class="page-item disabled"><span class="page-link">&raquo;</span></li>`;
        }

        paginationHtml += '</ul>';
        container.html(paginationHtml);
    }

    // 5. حدث الضغط على أزرار الباجينيشن
    $(document).on('click', '.change-page-btn', function(e) {
        e.preventDefault();
        let targetPage = $(this).data('page');
        fetchCustomers(targetPage);
    });
});
</script>
<script>
function saveOrder() {
    let invoiceId = $('#edit_invoice_id').val();
    let url = invoiceId ? `/update-invoice/${invoiceId}` : '/store-invoice';

    let orderData = {
        customer_id: $('#customer_select').val(),
        total: $('.final_total_all').text(),
        paid_cash: $('#paid_cash').val() || 0,
        paid_span: $('#paid_span').val() || 0,
        discount: $('#discount_amount').val() || 0,
        order_date: $('input[name="order_date"]').val(),
        delivery_date: $('input[name="delivery_date"]').val(),
        product_group_id: 1,
        items: []
    };

    console.log("--- بدء تجميع الأصناف من الجدول ---");

$('#cartTableBody tr').each(function(index) {
    let $currentRow = $(this);

    // تأكد من جلب الـ ID بأكثر من طريقة (Data attribute أو من العمود نفسه لو متاح)
    let p_id = $currentRow.attr('data-id') || $currentRow.data('id');

    console.log(`محاولة جلب ID للسطر ${index + 1}:`, p_id);

    alert (p_id)
    if (p_id && p_id !== "undefined") {
        orderData.items.push({
            product_id: p_id, // المفتاح اللي السيرفر بيدور عليه
            consumption: $currentRow.find('.row_total').text().trim() || 0,
            price: $currentRow.find('.price').val() || 0,
            qty: $currentRow.find('.qty').val() || 1,
            styles: $currentRow.data('styles') || {},
            features: $currentRow.data('features') || {},
            measurements: $currentRow.data('measurements') || {}
        });
    } else {
        console.error(`خطأ: السطر ${index + 1} معندوش product_id!`);
    }
});

    // أهم لوج: بيوريك الكائن النهائي قبل الإرسال
    console.log("الكائن النهائي المرسل (Payload):", orderData);

    $.ajax({
        url: url,
        method: 'POST',
        data: {
            _token: $('meta[name="csrf-token"]').attr('content'),
            data: orderData
        },
        success: function(response) {
            console.log("رد السيرفر الناجح:", response);
            Swal.fire("تم!", "تم حفظ التعديلات بنجاح", "success").then(() => {
                location.reload();
            });
        },
        error: function(err) {
            console.error("خطأ في الطلب (AJAX Error):", err);
            if (err.responseJSON) {
                console.error("تفاصيل خطأ السيرفر:", err.responseJSON);
            }
            Swal.fire("خطأ", "حدثت مشكلة أثناء الحفظ، راجع الكونسول", "error");
        }
    });
}
</script>

<script>
   // 1. الدالة الأساسية لطلب البيانات
function loadInvoiceForEdit() {
    let invoiceId = $('#edit_invoice_id').val();

    if (!invoiceId) {
        Swal.fire({
            icon: 'warning',
            title: 'عذراً',
            text: 'يرجى إدخال رقم الفاتورة أولاً',
            confirmButtonText: 'حسناً'
        });
        return;
    }

    // إغلاق المودال
    $('#editInvoiceModal').modal('hide');

    // إظهار مؤشر تحميل (Loading)
    Swal.fire({
        title: 'جاري جلب البيانات...',
        allowOutsideClick: false,
        didOpen: () => { Swal.showLoading(); }
    });

    $.ajax({
        url: "/get-invoice-details/" + invoiceId,
        type: "GET",
        success: function(response) {
            Swal.close(); // إغلاق مؤشر التحميل

            if (response.success) {
                Swal.fire({
                    icon: 'success',
                    title: 'تم العثور على الفاتورة',
                    text: 'جاري تحميل البيانات في الشاشة...',
                    timer: 1500,
                    showConfirmButton: false
                });

                // استدعاء دالة توزيع البيانات
                populateInvoiceData(response.data);
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'خطأ',
                    text: response.message || "الفاتورة غير موجودة",
                });
            }
        },
        error: function(xhr) {
            Swal.close();
            Swal.fire({
                icon: 'error',
                title: 'فشل الاتصال',
                text: 'تعذر الوصول للسيرفر، يرجى المحاولة لاحقاً',
            });
        }
    });
}

function addItemToTableFromEdit(item, styles, features, measurements) {
    let qty = parseFloat(item.qty) || 0;
    let totalPrice = parseFloat(item.price) || 0;
    let productName = item.product_name || "منتج " + item.product_id;
    let productId = item.product_id; // التأكد من وجود الـ ID

    let row = `
    <tr class="item-row" style="cursor:pointer" data-product-id="${productId}">
        <td><input type="number" class="qty form-control text-center" value="${qty}"></td>
        <td>piece</td>
        <td class="product-id-cell">${productId}</td>
        <td class="product-name-cell">${productName}</td>
        <td><input type="text" class="form-control" value=""></td>
        <td><input type="number" class="price form-control text-center" value="${(totalPrice/qty).toFixed(2)}"></td>
        <td class="row_total">${totalPrice.toFixed(2)}</td>
        <td>0.00</td><td>0.00</td>
        <td class="final_row_total">${totalPrice.toFixed(2)}</td>
    </tr>`;

    let $row = $(row);
    // تخزين البيانات "المفككة" كـ Objects
    $row.data('styles', styles);
    $row.data('measurements', measurements);
    $row.data('features', features);
    $row.data('id', productId);

    $('#cartTableBody').append($row);
}

function populateInvoiceData(data) {
    // 1. تنظيف الشاشة الأساسي
    $('#editInvoiceModal').modal('hide');
    $('body').removeClass('modal-open');
    $('.modal-backdrop').remove();

    // 2. تعبئة بيانات العميل الأساسية
    if (data.customer_id) {
        let customerSelect = $('#customer_select');
        customerSelect.val(data.customer_id).trigger('change');

        // سحب البيانات من الـ Option المختار في الـ HTML
        let selectedOption = customerSelect.find('option:selected');
        $('input[name="phone"]').val(selectedOption.data('phone') || "");
        $('input[name="tax_id"]').val(selectedOption.data('tax') || "");
        $('input[name="civil_id"]').val(selectedOption.data('civil_id') || "");
        $('#customer_name_display').val(selectedOption.data('name') || data.customer_name);
    }

    // 3. التواريخ ورقم الفاتورة
    $('input[name="order_date"]').val(data.order_date);
    $('input[name="delivery_date"]').val(data.delivery_date);
    $('.input-group input.bg-white').val(data.invoice_id);

    // 4. تعبئة الأصناف (الجدول العلوي)
    if (data.items && data.items.length > 0) {
        $('#cartTableBody').empty();

        data.items.forEach(function(item) {
            // تأكد إننا بنبعت الـ Objects المفكوكة للدالة
            let stylesObj = item.styles || {};
            let featuresObj = item.features || {};
            let measurementsObj = item.measurements || {};

            addItemToTableFromEdit(item, stylesObj, featuresObj, measurementsObj);
        });

        // أهم خطوة: بعد ما الجدول يترسم، نضغط على أول سطر
        // ده هيشغل الـ Click event اللي إحنا لسه معدلينه فوق ويوزع كل حاجة صح
    setTimeout(function() {
                // الضغط على أول صنف لعرض بياناته
                if ($('#cartTableBody tr:first').length > 0) {
                    $('#cartTableBody tr:first').click();
                }

                // تثبيت الزيادة (20)
                // السطر ده هو السر: بنحط القيمة وبنقول للكود "اعتبر إن في حد كتبها بايده"
                $('#m_extra_const').val('20').trigger('change').trigger('input');

                // تأكيد نهائي باستدعاء دالة الحساب
                if (typeof calculateConsumption === "function") {
                    calculateConsumption();
                }
            }, 500);
    }

    // 5. تحديث الإجماليات (لو موجودة في الـ Data)
    if (data.total) {
        $('.final_total_all').text(parseFloat(data.total).toFixed(2));
    }

    console.log("تم تحميل بيانات الفاتورة بنجاح ✅");



$(document).on('click', '.item-row', function() {
    // 1. تمييز السطر المختار بصرياً
    $('.item-row').removeClass('selected-row').css('background-color', '#fff'); // شيل التحديد من الباقي
    $(this).addClass('selected-row').css('background-color', '#fff9c4'); // حدد الحالي

    // 2. سحب البيانات المخزنة في السطر
    let styles = $(this).data('styles');
    let measurements = $(this).data('measurements');
    let features = $(this).data('features');

    // --- أ. تحديث الموديلات (Styles) ---
    // 1. تصفير شامل للموديلات
    $('.style-box').css('border-color', '#ddd').find('.selected-check').hide();
    $('.style-note-input').val('');
    $('input[id^="input_"]').val(''); // تصفير كل الـ hidden inputs للموديلات
    $('span[id^="label_"]').text("اختر موديل"); // تصفير الليبل

    if (styles) {
        $.each(styles, function(key, styleData) {
            let modelNum = styleData.model;
            if (modelNum && modelNum != "") {
                $(`#input_${key}`).val(modelNum);
                $(`#label_${key}`).text("موديل " + modelNum);
                $(`input[name="${key}_note"]`).val(styleData.note || "");

                // تحديث الصورة
                let $img = $(`#img_${key}`);
                let folder = $img.data('folder');
                if (folder) $img.attr('src', `/assets/img/models/${folder}/${modelNum}.png`);

                // التحديد الأخضر
                let $box = $(`.style-box[data-key="${key}"]`);
                $box.css('border-color', '#28a745').find('.selected-check').show();
            }
        });
    }

    // --- ب. تحديث الخيارات (Checkboxes) ---
    // تصفير جذري لكل التشيك بوكس
    $('.custom-checkbox input[type="checkbox"], .custom-control-input')
        .prop('checked', false)
        .removeAttr('checked')
        .val('0'); // تأكيد القيمة صفر

   if (features) {
    $.each(features, function(key, value) {
        let $el = $(`input[name="${key}"]`);
        if ($el.length > 0) {
            // لو القيمة 1، فعل التشيك بوكس فوراً
            if (value == "1" || value == 1) {
                $el.prop('checked', true).val('1');
            }
        }
    });
    }

    // --- ج. تحديث المقاسات ---
    $('input[id^="m_"]').not('#m_extra_const').val('');
    $('#m_extra_const').val('20');
    if (measurements) {
        $.each(measurements, function(key, val) {
            if (val !== undefined && val !== null && val !== '') {
                $(`#m_${key}`).val(parseFloat(val));
            }
        });
    }

    // --- د. إعادة حساب الاستهلاك ---
    if (typeof calculateConsumption === "function") {
        calculateConsumption();
    }
});


}


</script>














<script>
   function triggerReprint() {
    let invoiceId = $('#prev_invoice_id').val();

    if (invoiceId) {
        // 1. إغلاق المودال برمجياً
        $('#reprintModal').modal('hide');

        // 2. إزالة الطبقة المظلمة يدوياً للتأكد أن الشاشة لن تظل "مضلمة"
        $('.modal-backdrop').remove();
        $('body').removeClass('modal-open');
        $('body').css('padding-right', '');

        // 3. فتح نافذة الطباعة
        let printUrl = "/print-thermal/" + invoiceId;
        window.open(printUrl, '_blank', 'width=350,height=600');

        // 4. تفريغ الحقل
        $('#prev_invoice_id').val('');
    } else {
        alert("يرجى إدخال رقم فاتورة صحيح");
    }
}

</script>

<script>
    $(document).on('click', '.select-customer-btn', function() {
        // 1. هات الـ ID بتاع العميل اللي اخترته من المودال
        var selectedId = $(this).data('id');

        // 2. روح للـ Select الأساسي (customer_select) واختاره بالـ ID ده
        // استخدام .trigger('change') هو السر هنا، لأنه هيشغل الكود اللي هنكتبه في الخطوة الجاية
        $('#customer_select').val(selectedId).trigger('change');

        // 3. اقفل المودال بعد ما تختار
        $('#searchCustomersModal').modal('hide');

        // كونسول للتأكد إن الخطوة دي تمت
        console.log("تم ربط المودال بالـ Select الأساسي للعميل رقم: " + selectedId);
    });
</script>
<script>
    $(document).ready(function() {
    // الاستماع لحدث الكتابة في حقل البحث داخل المودال
    $('#modal_customer_search_input').on('keyup', function() {
        let value = $(this).val().toLowerCase(); // القيمة المكتوبة

        // البحث داخل صفوف الجدول (tbody)
        $("#allCustomersTable tbody tr").filter(function() {
            // هيعمل search في كل الأعمدة (الاسم، الفون، الضريبي)
            // لو عاوز الفون بس غير (this).text() لخلية الفون تحديداً
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
        });
    });
});
</script>
<script>
$(document).ready(function() {
    // عند الضغط على زرار "اختيار" داخل مودال البحث
    $(document).on('click', '.select-customer-btn', function() {
        // تعديل: استخدام attr لضمان جلب ID الصف المختار بدقة وليس أول صف
        let customerId = $(this).attr('data-id');
        let btn = $(this);

        // 1. طلب البيانات من الكنترولر (الراوت بتاعك getcustomer)
        $.ajax({
            url: "{{ url('getcustomer') }}/" + customerId,
            type: "GET",
            dataType: "json",
            success: function(data) {
                if (data) {

                    // --- أ. البيانات الأساسية ---
                    // ملاحظة: تأكد أن الأسماء (name="...") مطابقة للـ HTML عندك
                    $('input[name="customer_name"]').val(data.name || '');
                    $('input[name="phone"]').val(data.phone || '');

                    // تعديل: إضافة احتمالات لمسميات الرقم الضريبي والهوية لضمان الظهور
                    $('input[name="tax_id"]').val(data.tax_no || data.tax_id || '');
                    $('input[name="civil_id"]').val(data.id_no || data.civil_id || '');

                    // --- ب. المقاسات (الشتة) ---
                    let measurementFields = [
                       'front_length', 'back_length', 'shoulder_width', 'sleeve_length',
                        'arm_width', 'arm_mid_width', 'arm_bottom_width', 'chest_width',
                        'neck_size', 'collar_size', 'neck_plain', 'step_width',

                        'arm_center_width', 'cuff_width', 'cuff_hem',
                         'bottom_hem', 'dropped_shoulder'
                    ];

                 measurementFields.forEach(field => {
                        let val = data[field];
                        if (val !== undefined && val !== null && val !== '') {
                            // التعديل هنا: استخدام parseFloat مباشرة بدون Math.round
                            // ونضيف + 0 في الآخر لمسح الأصفار الزائدة فقط (مثل 10.500 تصبح 10.5)
                            let cleanVal = parseFloat(val);
                            $(`#m_${field}`).val(cleanVal);
                        } else {
                            $(`#m_${field}`).val('');
                        }
                    });


         if (data.customer_features) {
            try {
                let features = (typeof data.customer_features === 'string')
                    ? JSON.parse(data.customer_features)
                    : data.customer_features;

                // 1. صَفّر كل الخيارات اللي في "المنطقة الصفراء" فقط عشان نضمن الدقة
                $('.custom-checkbox input[type="checkbox"]').prop('checked', false);

                // 2. لف على البيانات
                $.each(features, function(key, value) {
                    // البحث باستخدام الاسم بالظبط
                    let el = $(`input[name="${key}"]`);

                    if (el.length > 0) {
                        if (value == "1" || value == 1) {
                            // تفعيل الصح
                            el.prop('checked', true);
                            // إضافة attribute مادي للتأكد إن المتصفح شايفه
                            el.attr('checked', 'checked');
                        } else {
                            el.prop('checked', false);
                            el.removeAttr('checked');
                        }

                        // أهم سطر: تشغيل الـ change يدويًا
                        el.trigger('change');
                    }
                });

                console.log("تم تحديث الخصائص المرئية بنجاح", features);
            } catch (e) {
                console.error("Error updating features:", e);
            }
        }

                    // --- (ج) توزيع الموديلات والصور (order_styles) ---
                    if (data.order_styles) {
                        try {
                            let styles = (typeof data.order_styles === 'string') ? JSON.parse(data.order_styles) : data.order_styles;
                            $.each(styles, function(key, styleData) {
                                // 1. تحديث الـ Hidden Input (رقم الموديل)
                                $(`#input_${key}`).val(styleData.model);
                                // 2. تحديث الليبل (رقم الموديل تحت الصورة)
                                $(`#label_${key}`).text("موديل " + styleData.model);
                                // 3. تحديث الملاحظة (Note)
                                $(`input[name="${key}_note"]`).val(styleData.note);
                                // 4. تحديث الصورة عشان تظهر للعين
                                let folder = $(`#img_${key}`).data('folder');
                                if(folder) {
                                    $(`#img_${key}`).attr('src', `/assets/img/models/${folder}/${styleData.model}.png`);
                                }
                            });
                        } catch (e) { console.error("Error parsing styles:", e); }
                    }



                    // تحديث ID العميل لضمان الربط عند الحفظ
                        $('input[name="customer_id"]').val(customerId);

                        // تشغيل دالة الحساب فوراً
                        if (typeof calculateConsumption === "function") {
                            calculateConsumption();
                        }


                    // --- ج. التفضيلات (Checkboxes) ---
                 let preferenceFields = [
                        'hand_plain', 'kabak_plain', 'hidden_pockets', 'visible_pockets',
                        'janzour', 'hidden', 'visible_hidden', 'hidden_sewing',
                        'twisted_sewing'
                    ];

                    preferenceFields.forEach((field, index) => {
                        let isChecked = (data[field] == 1);
                        $(`#${field}`).prop('checked', isChecked);
                        $(`#check${index + 1}`).prop('checked', isChecked);
                    });

                    // 2. إغلاق المودال وتنظيف الشاشة
                    $('#searchCustomersModal').modal('hide');
                    $('body').removeClass('modal-open');
                    $('.modal-backdrop').remove();

                    // تنبيه النجاح
                    Swal.fire({
                        icon: 'success',
                        title: 'تم استيراد البيانات',
                        text: 'تم تحميل مقاسات العميل: ' + data.name,
                        timer: 1500,
                        showConfirmButton: false
                    });
                }
            },
            error: function() {
                Swal.fire('خطأ', 'تعذر جلب بيانات المقاسات لهذا العميل', 'error');
            }
        });
    });
});
</script>
<script>
    // 1. الدالة الأساسية (بالمعادلة اللي بتطلع 3.56)
    function calculateConsumption() {
        let front = parseFloat($('#m_front_length').val()) || 0;
        let back  = parseFloat($('#m_back_length').val()) || 0;
        let extra = parseFloat($('#m_extra_const').val()) || 0;

        let totalInches = front + back + extra;

        if (totalInches > 0) {
            // المعادلة دي هي اللي هتطلع لك 3.56 بالظبط
            // (140 * 2.54) / 100 = 3.556 -> 3.56
            let totalMeters = ((totalInches * 2.54) / 100).toFixed(2);
            $('#m_total_consumption').val(totalMeters);
        } else {
            $('#m_total_consumption').val("0");
        }
    }

    // 2. تشغيل الحسبة عند أي تغيير يدوي
    $(document).on('input change', '.calc-trigger', function() {
        calculateConsumption();
    });

       $(document).ready(function() {

    // دالة مخصصة للتصفير الذكي
    function resetToDefault() {
        // 1. تصفير البيانات الأساسية
        $('input[name="customer_name"], input[name="phone"], input[name="tax_id"], input[name="civil_id"]').val('');

        // 2. تصفير كل المقاسات (m_) مع استثناء الـ 20 الثابتة
        // استخدمنا parseFloat(0) لضمان التعامل مع أرقام في الحسابات لاحقاً
        $('input[id^="m_"]').not('#m_extra_const').val('0');

        // التأكد أن الثابت يظل 20 دايماً
        $('#m_extra_const').val('20');

        // 3. إلغاء تحديد كل الـ Checkboxes (المنطقة الصفراء)
        $('.custom-control-input, input[type="checkbox"]').prop('checked', false).trigger('change');

        // 4. تصفير صناديق الموديلات (الستايلات) - لإزالة اللون الأخضر وعلامات الصح
        $('.style-box').css({
            'border-color': '#ddd',
            'background-color': '#fff'
        }).find('.selected-check').hide();

        // تصفير ملاحظات الموديلات (مثل مقاس 10*20)
        $('.style-note-input').val('');

        // 5. إعادة حساب الاستهلاك
        // الحسبة هتطلع رقم بناءً على الـ 20 فقط (الزيادة الثابتة)
        calculateConsumption();
    }

    // --- أولاً: عند تشغيل الصفحة (Reload) ---
    let customerId = $('#customer_select').val();
    if (!customerId || customerId === "") {
        resetToDefault();
    } else {
        calculateConsumption();
    }

    // --- ثانياً: عند تغيير العميل ---
    $(document).on('change', '#customer_select', function() {
        let selected = $(this).find('option:selected');
        let val = $(this).val();

        if (!val || val === "") {
            resetToDefault();
        } else {
            // كود سحب بيانات العميل الطبيعي
            // ... (هنا يتم ملء الحقول بالبيانات القادمة من الداتا أتريبيوت)

            // استدعاء الحسبة بعد الملء
            setTimeout(calculateConsumption, 200);
        }
    });
});

    // 4. نداء الدالة يدوياً عند اختيار عميل من القائمة (لو عندك Ajax)
    // في كود الـ Ajax Success بتاعك، ضيف السطر ده في الآخر:
    // calculateConsumption();
</script>




<script>
$(document).ready(function() {
    // 1. فتح الموديل (نفس كودك مع تصفير المتبقي)
    window.openPaymentModal = function() {
        let grandTotal = parseFloat($('#grand_total').text()) || 0;
        let customerOption = $('#customer_select option:selected');

        if (customerOption.length > 0) {
            let name = customerOption.data('name');
            let phone = customerOption.data('phone');
            $('#modal_cust_name').val(name ? name : "عميل نقدي");
            $('#modal_cust_phone').val(phone ? phone : "---");
        }

        $('#modal_grand_total_display').text(grandTotal.toFixed(2));
        $('#paid_cash').val(grandTotal.toFixed(2));
        $('#paid_span').val('0.00');
        $('#total_paid_input').val(grandTotal.toFixed(2));
        $('#modal_remaining_display').text('0.00');
        $('#paymentModal').modal('show');
    };

    // 2. الحسابات التلقائية (تعديل بسيط لحساب المتبقي وتغيير الألوان)
    $(document).on('input', '#paid_cash, #paid_span, #total_paid_input', function() {
        let total = parseFloat($('#modal_grand_total_display').text()) || 0;

        // لو المستخدم عدل في الإجمالي الأصفر مباشرة
        if ($(this).attr('id') === 'total_paid_input') {
            let val = parseFloat($(this).val()) || 0;
            $('#paid_cash').val(val.toFixed(2));
            $('#paid_span').val('0.00');
        }

        let cash = parseFloat($('#paid_cash').val()) || 0;
        let span = parseFloat($('#paid_span').val()) || 0;
        let totalPaid = cash + span;

        $('#total_paid_input').val(totalPaid.toFixed(2));

        let remaining = total - totalPaid;
        $('#modal_remaining_display').text(remaining.toFixed(2));

        // تغيير لون المتبقي للتنبيه
        if(remaining > 0) {
            $('#modal_remaining_display').css({'background': '#ffcdd2', 'color': '#b71c1c'});
        } else {
            $('#modal_remaining_display').css({'background': '#90ee90', 'color': '#1b5e20'});
        }

        if(span > 0) $('#span_type').show(); else $('#span_type').hide();
    });

    // 3. تعديل اختيار طريقة الدفع السريعة
    $('.payment-method-btn').click(function() {
        $('.payment-method-btn').removeClass('btn-primary text-white active-payment').addClass('btn-light');
        $(this).removeClass('btn-light').addClass('btn-primary text-white active-payment');

        let type = $(this).data('type');
        let total = $('#modal_grand_total_display').text();
    // تحديث الحقل المخفي بنوع الدفع
        $('#selected_payment_method').val(type);

        if(type === 'cash') {
            $('#paid_cash').val(total);
            $('#paid_span').val('0.00');
        } else if(type === 'credit') {
            // في حالة الآجل: المدفوع صفر والباقي هو الإجمالي
            $('#paid_cash').val('0.00');
            $('#paid_span').val('0.00');
        } else {
            // span أو أي طريقة تانية
            $('#paid_span').val(total);
            $('#paid_cash').val('0.00');
        }
        $('#paid_cash').trigger('input');
    });

    // 4. عند التأكيد (تجميع البيانات للإرسال)
});
</script>


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

    let finalItems = []; // دي اللي هنخزن فيها الأصناف بمقاساتها
   // 1. دالة تجميع المقاسات (تم إضافة Math.round لشيل الأصفار .00)
    function collectMeasurements() {
    const cleanNum = (val) => {
        let n = parseFloat(val);
        return isNaN(n) ? 0 : n; // يرجع الرقم بكسوره زي ما هو
    };

    const getVal = (id) => $('#' + id).val();

    return {
        // بنقرأ الـ .val() يعني اللي مكتوب حالياً في المربع
        front_length:      cleanNum($('#m_front_length').val()),
        back_length:       cleanNum($('#m_back_length').val()),
        shoulder_width:    cleanNum($('#m_shoulder_width').val()),
        sleeve_length:     cleanNum($('#m_sleeve_length').val()),
        arm_width:         cleanNum($('#m_arm_width').val()),
        arm_mid_width:     cleanNum($('#m_arm_mid_width').val()),
        chest_width:       cleanNum($('#m_chest_width').val()),
        neck_size:         cleanNum($('#m_neck_size').val()),
        collar_size:       cleanNum($('#m_collar_size').val()),
        neck_plain:        cleanNum($('#m_neck_plain').val()),
        step_width:        cleanNum($('#m_step_width').val()),

        notes_one:         $('#n_notes_one').val(),
        notes_two:         $('#n_notes_two').val(),
        notes_three:       $('#n_notes_three').val(),
        notes_four:        $('#n_notes_four').val(),
        // +++ الإضافات الجديدة +++
        buttons_count:     cleanNum($('#m_buttons_count').val()), // سحب عدد الطقطق كرقم
        pocket_type:       $('#m_pocket_type').val()   ,          // سحب نوع الجيب (زرار أو سحاب) كنص

        arm_center_width:  cleanNum($('#m_arm_center_width').val()), // وسط اليد
        cuff_width:        cleanNum($('#m_cuff_width').val()),       // وسع كبك
        cuff_hem:          cleanNum($('#m_cuff_hem').val()),         // كفة كبك
        bottom_hem:        cleanNum($('#m_bottom_hem').val()),       // كفة أسفل
        dropped_shoulder:  cleanNum($('#m_dropped_shoulder').val()), // كتف نازل
    };
}








    // 2. دالة تجميع أصناف الجدول (مهمة للعمليات المباشرة)


    // --- الدالة الجديدة: تجميع الموديلات المختارة ---
      function collectOrderStyles() {
            let styles = {};
            $('.selectable-style.selected-style-active').each(function() {
                let key = $(this).data('key');
                let modelId = $(this).find('input[type="hidden"]').val();
                let noteValue = $(this).find('.style-note-input').val(); // الملاحظة

                styles[key] = {
                    'model': modelId,
                    'note': noteValue || ""
                };
            });
            return styles;
        }



    // --- الأحداث (Events) ---

    // فتح موديل الدفع التفصيلي (F12)
    window.openPaymentModal = function() {
        let grandTotal = 0;

        // 1. حساب الإجمالي الفعلي من جدول ملخص الأثواب
        $('#garmentsSummaryTable tbody tr').each(function() {
            // تأكد أن السعر موجود في العمود السابع (index 6)
            let rowPrice = parseFloat($(this).find('td:nth-child(7)').text()) || 0;
            grandTotal += rowPrice;
        });

        // 2. تحديث نص الإجمالي في الصفحة الرئيسية (اختياري لضمان التطابق)
        $('#grand_total').text(grandTotal.toFixed(2));

        // 3. جلب بيانات العميل
        let selectedCustomer = $('#customer_select option:selected');
        $('#modal_cust_name').val(selectedCustomer.data('name') || "عميل نقدي");
        $('#modal_cust_phone').val(selectedCustomer.data('phone') || "-");

        // 4. تحديث شاشة الدفع بالقيم الجديدة
        $('#modal_grand_total_display').text(grandTotal.toFixed(2)); // الإجمالي الكبير
        $('#paid_cash').val(grandTotal.toFixed(2));                 // المبلغ المدفوع كاش (افتراضي)
        $('#paid_span').val('0.00');                                // تصفير الشبكة
        $('#total_paid_input').val(grandTotal.toFixed(2));          // إجمالي المدفوع
        $('#modal_remaining_display').text('0.00');                 // المتبقي

        // 5. فتح المودال
        $('#paymentModal').modal('show');
    };

    $('#save_f12').click(function() { openPaymentModal(); });

    // زر الحفظ المباشر (كاش + طباعة)
    $('#save_cash').click(function() {
        let currentDisc = parseFloat($('#discount_input').val()) || 0;
        let limit = parseFloat($('#max_discount_limit').val()) || 0;

        if (currentDisc > limit) {
            Swal.fire("خطأ", "لا يمكن الحفظ، الخصم يتجاوز الحد المسموح!", "error");
            return false;
        }

        // تجميع البيانات النهائية للإرسال
        let finalData = {
            customer_id: $('#customer_id').val(), // تأكد من الـ ID بتاع حقل العميل
            product_group_id: $('#product_group_id').val(),
            items: collectTableItems(), // الدالة اللي بتجمع الأصناف بمقاساتها
            sub_total: $('#total_before_tax').text(),
            tax_amount: $('#tax_amount').text(),
            discount: currentDisc,
            grand_total: $('#grand_total').text(),
            paid_cash: $('#grand_total').text(), // لأنه حفظ كاش مباشر
            amount_rest: 0,
            payment_methods_text: 'Cash',
            status: 'PAID'
        };

        processInvoiceSave(finalData, true); // إرسال وطباعة
    });

    // زر الحفظ المباشر (كاش بدون طباعة)
   $('#save_no_print').click(function() {
        let total = $('#grand_total').text();
        let data = {
            customer_id: $('#customer_select').val(),
            measurements: collectMeasurements(),
            features: collectOrderFeatures(),
            product_group_id: ($('select[name="category"]').val() || $('#product_group_id').val() || null),
            order_date: $('input[name="order_date"]').val(),
            delivery_date: $('input[name="delivery_date"]').val(),
            styles: collectOrderStyles(),
            items: collectTableItems(),
            discount: $('#discount_input').val() || 0,
            total: total,
            paid_cash: total,
            paid_span: 0,
            amount_rest: 0,
            payment_methods_text: 'cash'
        };
        processInvoiceSave(data, false);
    });


    // حسابات الموديل التلقائية
    $(document).on('input', '#paid_cash, #paid_span', function() {
        let total = parseFloat($('#modal_grand_total_display').text()) || 0;
        let cash = parseFloat($('#paid_cash').val()) || 0;
        let span = parseFloat($('#paid_span').val()) || 0;
        $('#total_paid_input').val((cash + span).toFixed(2));
        $('#modal_remaining_display').text((total - (cash + span)).toFixed(2));
    });
});
</script>




<script>
$(document).ready(function() {
    // 1. تحديد الـ Input النشط (لوحة الأرقام)
    let activeInput = '#discount_input';
    $(document).on('focus', 'input[type="number"], input[type="text"]', function() {
        activeInput = this;
    });

    // 2. برمجة لوحة الأرقام (Numpad)
    $('.num-btn').click(function() {
        let btnVal = $(this).text().trim();
        let currentVal = $(activeInput).val().toString();

        if (btnVal === 'Clear') {
            $(activeInput).val('0');
        } else if (btnVal === '.') {
            if (!currentVal.includes('.')) $(activeInput).val(currentVal + '.');
        } else {
            // معالجة الصفر الابتدائي
            let newVal = (currentVal == "0" || currentVal == "0.00") ? btnVal : currentVal + btnVal;
            $(activeInput).val(newVal);
        }

        // إطلاق حدث التغيير لضمان تفاعل المتصفح
        $(activeInput).trigger('change');
        $(activeInput).trigger('input');

        // تشغيل الحسابات فوراً بعد كل ضغطة
        window.calculateGrandTotal();
    });

    // 3. أزرار الكمية (+) و (-)
    $('.btn-plus').click(function() {
        let selected = $('#cartTableBody tr.selected-row');
        if (selected.length > 0) {
            let qtyInp = selected.find('.qty');
            let currentQty = parseFloat(qtyInp.val());

            // نجيب الكمية المتاحة (ممكن تخزنها في data-attribute في الـ tr)
            let availableStock = parseFloat(selected.find('.qty').attr('max')) || 999;

            if (currentQty >= availableStock) {
                Swal.fire('تنبيه', 'لا يمكنك تجاوز الكمية المتاحة في المخزن', 'warning');
            } else {
                qtyInp.val(currentQty + 1);
                window.calculateGrandTotal();
            }
        } else {
            alert("اختر صنفاً من الجدول أولاً");
        }
    });

    $('.btn-minus').click(function() {
        let selected = $('#cartTableBody tr.selected-row');
        if (selected.length > 0) {
            let qtyInp = selected.find('.qty');
            if (parseFloat(qtyInp.val()) > 1) {
                qtyInp.val(parseFloat(qtyInp.val()) - 1);
                window.calculateGrandTotal();
            }
        }
    });



    // 4. دالة الحسابات الكبرى (بدون أي ضريبة)
window.calculateGrandTotal = function() {
    let subtotal = 0;

    // 1. جلب نسبة الضريبة (وهي أصلاً 0.15 بناءً على صورتك السابقة)
    const taxRate = parseFloat($('#system_tax_percent').val()) || 0;

    // 2. جلب الخصم وسقفه
    const maxAllowedDiscount = parseFloat($('#max_discount_limit').val()) || 0;
    let disc = parseFloat($('#discount_input').val()) || 0;

    // 3. التحقق من تجاوز سقف الخصم باستخدام SweetAlert
    if (disc > maxAllowedDiscount) {
        Swal.fire({
            title: 'تجاوز الحد المسموح!',
            text: `أقصى مبلغ خصم مسموح به هو ${maxAllowedDiscount} ريال فقط.`,
            icon: 'warning',
            confirmButtonText: 'حسناً',
            confirmButtonColor: '#28a745',
            timer: 3000,
            timerProgressBar: true
        });

        disc = maxAllowedDiscount;
        $('#discount_input').val(maxAllowedDiscount.toFixed(2));
    }

    // 4. حساب إجمالي الأصناف من الجدول وتحديث كل صف
    $('#cartTableBody tr').each(function() {
        let q = parseFloat($(this).find('.qty').val()) || 0;
        let p = parseFloat($(this).find('.price').val()) || 0;
        let rowSum = q * p;
        subtotal += rowSum;

        // تحديث خانات الصف في الجدول
        $(this).find('.row_total').text(rowSum.toFixed(2));

        let rowTax = rowSum * taxRate; // (مثلاً 100 * 0.15 = 15)
        $(this).find('.row_tax').text(rowTax.toFixed(2));
        $(this).find('.final_row_total').text((rowSum + rowTax).toFixed(2));
    });

    // 5. الحسابات النهائية للسكشن السفلي
    let afterDiscount = subtotal - disc; // (مثلاً 480 - 20 = 460)
    let taxAmount = afterDiscount * taxRate; // (مثلاً 460 * 0.15 = 69)
    let finalTotal = afterDiscount + taxAmount; // (460 + 69 = 529)

    // 6. التحديث في الواجهة
    $('#total_before_tax').text(subtotal.toFixed(2)); // الإجمالي قبل الضريبة والخصم
    $('#tax_amount').text(taxAmount.toFixed(2));     // قيمة الضريبة النهائية
    $('#grand_total').text(finalTotal.toFixed(2));   // الإجمالي النهائي المطلوب دفعه

    // 7. تحديث النص بجانب الضريبة (نضرب في 100 ليظهر للمستخدم "15%" وليس "0.15")
    $('#display_tax_rate').text((taxRate * 100).toFixed(0));
};

    // 5. مراقبة التغييرات اليدوية (لو المستخدم كتب بالكيبورد العادي)
    $(document).on('input change', '.qty, .price, #discount_input', function() {
        window.calculateGrandTotal();
    });

    // 6. زر حفظ الفاتورة
    $('#save_cash').click(function() {
        let currentDisc = parseFloat($('#discount_input').val()) || 0;
        let limit = parseFloat($('#max_discount_limit').val()) || 0;

        if (currentDisc > limit) {
            alert("لا يمكن الحفظ، الخصم يتجاوز الحد المسموح!");
            return false;
        }

        alert("جاري حفظ الفاتورة بقيمة صافية: " + $('#grand_total').text());
        // هنا يتم وضع كود الـ AJAX الخاص بك للإرسال للـ Controller
    });
});
</script>


<script>
$(document).ready(function() {
    // 1. مراقبة أي تغيير في الكمية أو السعر داخل الجدول
    // استخدمنا (document) هنا عشان يلقط الصفوف اللي بتضاف بعد كدة
    $(document).on('input', '.qty-input, .price-input', function() {
        calculateGrandTotal();
    });

    // 2. مراقبة تغيير الخصم العام
    $(document).on('input', '#discount_input', function() {
        calculateGrandTotal();
    });
});

function calculateGrandTotal() {
    let grandSubtotal = 0;

    // 1. جلب النسبة (وهي أصلاً 0.15 كما في صورتك)
    const taxRate = parseFloat($('#system_tax_percent').val()) || 0;

    // 2. جلب سقف الخصم والخصم الحالي
    const maxAllowedDiscount = parseFloat($('#max_discount_limit').val()) || 0;
    let generalDiscount = parseFloat($('#discount_input').val()) || 0;

    // 3. التحقق من الخصم (SweetAlert)
    if (generalDiscount > maxAllowedDiscount) {
        Swal.fire({
            title: 'تجاوز الحد المسموح!',
            text: `أقصى مبلغ خصم هو ${maxAllowedDiscount} ريال.`,
            icon: 'warning',
            confirmButtonText: 'حسناً'
        });
        generalDiscount = maxAllowedDiscount;
        $('#discount_input').val(maxAllowedDiscount.toFixed(2));
    }

    // 4. اللف على كل صفوف الجدول
    $('#cartTableBody tr').each(function() {
        let qty = parseFloat($(this).find('.qty').val()) || 0;
        let price = parseFloat($(this).find('.price').val()) || 0;

        let rowTotal = qty * price;
        grandSubtotal += rowTotal;

        // تحديث خانات الصف (بدون تقسيم الضريبة مرتين)
        $(this).find('.row_total').text(rowTotal.toFixed(2));

        let rowTax = rowTotal * taxRate; // ضرب مباشر في 0.15
        $(this).find('.row_tax').text(rowTax.toFixed(2));
        $(this).find('.final_row_total').text((rowTotal + rowTax).toFixed(2));
    });

    // 5. الحسابات الكلية للسكشن السفلي
    let totalAfterDiscount = grandSubtotal - generalDiscount;
    let totalTaxAmount = totalAfterDiscount * taxRate; // 480 * 0.15 = 72
    let finalGrandTotal = totalAfterDiscount + totalTaxAmount;

    // 6. تحديث السكشن السفلي (يسمع تحت)
    $('#total_before_tax').text(grandSubtotal.toFixed(2));
    $('#tax_amount').text(totalTaxAmount.toFixed(2));
    $('#grand_total').text(finalGrandTotal.toFixed(2));

    // تحديث النص التوضيحي (ضرب في 100 عشان يظهر 15% للمستخدم)
    $('#display_tax_rate').text((taxRate * 100).toFixed(0));
}

function addItemToTable(item) {
    let row = `
    <tr class="item-row" style="font-size: 12px;">
        <td><input type="number" class="form-control form-control-sm text-center qty-input" value="1" style="width:50px;"></td>
        <td>متر</td>
        <td>${item.code}</td>
        <td>${item.name}</td>
        <td><input type="text" class="form-control form-control-sm" placeholder="ملاحظات"></td>
        <td><input type="number" class="form-control form-control-sm text-center price-input" value="${item.price}"></td>
        <td class="row-subtotal">${item.price}</td>
        <td><input type="number" class="form-control form-control-sm text-center row-discount" value="0"></td>
        <td class="row-tax">0.00</td>
        <td class="row-total-final">${item.price}</td>
    </tr>`;

    $('#cartTableBody').append(row);
    calculateGrandTotal();
}

</script>



<script>
$(document).ready(function() {
    // --- الجزء الجديد: تفعيل الـ 5 موديلات افتراضياً عند فتح الصفحة ---
    // $('.style-box').each(function() {
    //     // إضافة الكلاس الأخضر
    //     $(this).addClass('selected-style-active').css({
    //         'border-color': '#28a745',
    //         'background-color': '#f8fff9'
    //     });
    //     // إظهار علامة الصح
    //     $(this).find('.selected-check').show();

    //     // التأكد أن الـ Input المخفي واخد قيمة 1 (الموديل الافتراضي)
    //     let target = $(this).find('img').attr('id').replace('img_', '');
    //     $(`#input_${target}`).val(1);
    // });
    // -------------------------------------------------------
    // استخدمنا .off() للتأكد من عدم تكرار الحدث إذا كان الكود مستدعى مرتين
    $('.next-btn, .prev-btn').off('click').on('click', function(e) {
        e.stopPropagation();

        let target = $(this).data('target');
        let imgTag = $(`#img_${target}`);

        // جلب البيانات الخاصة بالسكشن الحالي فقط
        let current = parseInt(imgTag.attr('data-current')) || 1;
        let maxForThisSection = parseInt(imgTag.attr('data-max')); // يقرأ القيمة من الـ Blade
        let folder = imgTag.attr('data-folder');

        // الحساب الدقيق: لو وصل للـ Max يرجع لـ 1، ولو رجع من 1 يروح للـ Max
        if ($(this).hasClass('next-btn')) {
            current = (current < maxForThisSection) ? current + 1 : 1;
        } else {
            current = (current > 1) ? current - 1 : maxForThisSection;
        }

        // بناء المسار الجديد بالامتداد الصحيح
        let fileName = current + '.png';
        let newSrc = `{{ asset('assets/img/models') }}/${folder}/${fileName}`;

        // تحديث الصورة والبيانات
        imgTag.attr('src', newSrc);
        imgTag.attr('data-current', current);
        $(`#input_${target}`).val(current);
        $(`#label_${target}`).text('موديل ' + current);

        // تفعيل الإطار الأخضر تلقائياً عند التقليب لضمان الاختيار
        let box = $(this).closest('.style-box');
        box.addClass('selected-style-active').css({'border-color': '#28a745', 'background-color': '#f8fff9'});
        box.find('.selected-check').show();
    });

    // اختيار وإلغاء اختيار الموديل يدوياً
    $('.selectable-style').on('click', function() {
        if ($(this).hasClass('selected-style-active')) {
            $(this).removeClass('selected-style-active').css({'border-color': '#ddd', 'background-color': '#fff'});
            $(this).find('.selected-check').hide();
        } else {
            $(this).addClass('selected-style-active').css({'border-color': '#28a745', 'background-color': '#f8fff9'});
            $(this).find('.selected-check').show();
        }
    });
});
</script>
<script>
    $(document).ready(function() {

    // دالة لحساب تاريخ الاستلام بناءً على تاريخ الحجز والأيام
    function updateDeliveryDate() {
        let orderDate = new Date($('input[name="order_date"]').val());
        let days = parseInt($('input[name="days"]').val()) || 0;

        if (!isNaN(orderDate.getTime())) {
            orderDate.setDate(orderDate.getDate() + days);

            // تحويل التاريخ لصيغة YYYY-MM-DD
            let year = orderDate.getFullYear();
            let month = String(orderDate.getMonth() + 1).padStart(2, '0');
            let day = String(orderDate.getDate()).padStart(2, '0');

            $('input[name="delivery_date"]').val(`${year}-${month}-${day}`);
        }
    }

    // دالة لحساب عدد الأيام لو المستخدم غير تاريخ الاستلام يدوياً
    function updateDaysCount() {
        let orderDate = new Date($('input[name="order_date"]').val());
        let deliveryDate = new Date($('input[name="delivery_date"]').val());

        if (!isNaN(orderDate.getTime()) && !isNaN(deliveryDate.getTime())) {
            let diffTime = deliveryDate - orderDate;
            let diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

            $('input[name="days"]').val(diffDays >= 0 ? diffDays : 0);
        }
    }

    // تشغيل الحسابات عند تغيير أي خانة
    $('input[name="order_date"], input[name="days"]').on('change keyup', function() {
        updateDeliveryDate();
    });

    $('input[name="delivery_date"]').on('change', function() {
        updateDaysCount();
    });

});
</script>


<script>
    $(document).ready(function() {
    // 1. فتح موديل إضافة عميل جديد
    $('.btn-outline-success').click(function() {
        $('#addCustomerModal').modal('show');
    });

    // 2. المحرك الأساسي: سحب البيانات والمقاسات عند تغيير العميل
$('#customer_select').change(function() {
    let selected = $(this).find('option:selected');
    if (!selected.val()) return;

    // --- أ. البيانات الأساسية ---
    $('input[name="customer_name"]').val(selected.data('name') || '');
    $('input[name="phone"]').val(selected.data('phone') || '');
    $('input[name="tax_id"]').val(selected.data('tax') || '');
    $('input[name="civil_id"]').val(selected.data('civil_id') || '');

    // --- ب. المقاسات ---
    let measurementFields = [
        'front_length', 'back_length', 'shoulder_width', 'sleeve_length',
        'arm_width', 'arm_mid_width', 'arm_bottom_width', 'chest_width',
        'neck_size', 'collar_size', 'neck_plain', 'step_width',
        'arm_center_width', 'cuff_width', 'cuff_hem',
        'bottom_hem', 'dropped_shoulder', 'buttons_count',
    ];

    measurementFields.forEach(field => {
        let rawValue = selected.data(field);
        if (rawValue !== undefined && rawValue !== null && rawValue !== '') {
            $(`#m_${field}`).val(parseFloat(rawValue));
        } else {
            $(`#m_${field}`).val('');
        }
    });

    // --- ج. الملاحظات ---
    ['notes_one', 'notes_two', 'notes_three', 'notes_four'].forEach(field => {
        $(`#n_${field}`).val(selected.data(field) || '');
    });

    // --- د. نوع الجيب ---
    let pocketType = selected.data('pocket_type');
    $('#m_pocket_type').val(pocketType || '');

    // --- هـ. التفضيلات (Checkboxes) ---
    let preferenceFields = [
        'hand_plain', 'kabak_plain', 'hidden_pockets', 'visible_pockets',
        'janzour', 'hidden', 'visible_hidden', 'hidden_sewing',
        'twisted_sewing'
    ];
    $('.style-box').removeClass('selected-style-active').css('border-color', '#ddd').find('.selected-check').hide();
        $('.style-note-input').val('');

        let rawStyles = selected.data('styles');
        let stylesObj = {};
        if (rawStyles) {
            try {
                stylesObj = (typeof rawStyles === 'string') ? JSON.parse(rawStyles) : rawStyles;
            } catch (e) {
                console.error('تعذر قراءة موديلات العميل:', e);
            }
        }

        $.each(stylesObj, function(key, styleData) {
            let modelNum = styleData ? styleData.model : null;
            if (modelNum && modelNum != "") {
                $(`#input_${key}`).val(modelNum);
                $(`#label_${key}`).text("موديل " + modelNum);
                $(`input[name="${key}_note"]`).val((styleData && styleData.note) || '');

                let $img = $(`#img_${key}`);
                let folder = $img.data('folder');
                if (folder) $img.attr('src', `/assets/img/models/${folder}/${modelNum}.png`);
                $img.attr('data-current', modelNum);

                $(`.style-box[data-key="${key}"]`)
                    .addClass('selected-style-active')
                    .css('border-color', '#28a745')
                    .find('.selected-check').show();
            }
        });

    preferenceFields.forEach(field => {
        let isChecked = (selected.data(field) == 1);
        $(`#${field}`).prop('checked', isChecked);

        if(field === 'hand_plain') $('#check1').prop('checked', isChecked);
        if(field === 'kabak_plain') $('#check2').prop('checked', isChecked);
        if(field === 'hidden_pockets') $('#check3').prop('checked', isChecked);
        if(field === 'visible_pockets') $('#check4').prop('checked', isChecked);
        if(field === 'janzour') $('#check5').prop('checked', isChecked);
        if(field === 'hidden') $('#check6').prop('checked', isChecked);
        if(field === 'visible_hidden') $('#check7').prop('checked', isChecked);
        if(field === 'hidden_sewing') $('#check8').prop('checked', isChecked);
        if(field === 'twisted_sewing') $('#check9').prop('checked', isChecked);
    });
});

            // استدعاء دالة الحسبة بعد ما الحقول اتملت بمقاسات العميل
        if (typeof calculateConsumption === "function") {
            calculateConsumption();
        }

    // 3. حفظ العميل الجديد بـ AJAX
    $('#newCustomerForm').on('submit', function(e) {
        e.preventDefault();
        let form = $(this);
        let formData = form.serialize();
            $.ajax({
                url: "{{ route('customers.store.ajax') }}",
                type: "POST",
                data: formData,
             success: function(response) {
                    if(response.status == 'success') {
                        let c = response.data;
                        let newOption = new Option(c.name, c.id, true, true);

                        $.each(c, function(key, value) {
                            $(newOption).data(key, value);
                        });

                        $('#customer_select').append(newOption).trigger('change');

                        // 1. إغلاق المودال وتصفير الفورم
                        $('#addCustomerModal').modal('hide');
                        form[0].reset();

                        // 2. إظهار رسالة النجاح
                        Swal.fire('تم الحفظ', 'تم إضافة العميل وحفظ شتة المقاسات بنجاح', 'success');

                        // 3. فتح رابط الواتساب في صفحة جديدة (هذا هو السطر المطلوب)
                        if(response.wa_link) {
                            window.open(response.wa_link, '_blank');
                        }
                        console.log(wa_link)
                    }
                },
                error: function(xhr) {
                    // إغلاق المودال حتى في حالة الخطأ أو التكرار كما طلبت
                    $('#addCustomerModal').modal('hide');

                    if (xhr.status === 409) {
                        // حالة العميل موجود مسبقاً
                        let message = xhr.responseJSON ? xhr.responseJSON.message : 'هذا العميل مسجل بالفعل';
                        Swal.fire({
                            title: 'تنبيه (موجود مسبقاً)',
                            text: message,
                            icon: 'warning',
                            confirmButtonText: 'حسناً'
                        });
                    } else {
                        // أي خطأ آخر (فشل سيرفر أو فاليجيشن)
                        let errorMsg = xhr.responseJSON ? xhr.responseJSON.message : 'حدث خطأ أثناء الحفظ';
                        Swal.fire('خطأ', errorMsg, 'error');
                    }
                }
            });
    });
});
</script>




<script>

function addProduct() {
    let searchVal = $('#product_search').val();

    if (searchVal != "") {
        $.ajax({
            url: "{{ route('get.product.data') }}",
            type: "GET",
            data: { search_val: searchVal },
            success: function(response) {
                if (response.status == 'success') {
                    let p = response.data;

                    $('.selected-row').removeClass('selected-row');

                    // لاحظ التعديلات هنا:
                    // 1. أضفنا data-product-id للـ tr مباشرة
                    // 2. غيرنا اسم الـ hidden input وخليناه جوه <td>
                    let rowHtml = `
                            <tr class="selected-row" style="font-size: 13px;" data-product-id="${p.id}" data-min-price="${p.min_price ?? 0}" id="row_${Date.now()}">
                            <td><input type="number" name="qty[]" class="form-control form-control-sm text-center qty" value="1"></td>
                            <td>${p.unit ?? 'حبة'}</td>
                            <td>${p.Product_Code ?? p.id}</td>
                            <td class="text-right">${p.product_name}</td>
                            <td><input type="text" name="desc[]" class="form-control form-control-sm" value=""></td>
                            <td><input type="number" name="price[]" class="form-control form-control-sm price" value="${p.sale_price}"></td>
                            <td class="row_total">${p.sale_price}</td>
                            <td>0.00</td>
                            <td class="row_tax">${(p.sale_price * 0.15).toFixed(2)}</td>
                            <td class="final_row_total">${(p.sale_price * 1.15).toFixed(2)}</td>

                            <td style="display:none">
                                <input type="hidden" name="product_id[]" class="product_id" value="${p.id}">
                            </td>
                        </tr>
                    `;

                    $('#cartTableBody').prepend(rowHtml);
                    $('#product_search').val('');

                    if (typeof calculateGrandTotal === "function") {
                        calculateGrandTotal();
                    }

                } else {
                    alert(response.message);
                }
            }
        });
    }
}

$(document).ready(function() {
// فتح موديل البحث عند الضغط على أيقونة العدسة
$('#openSearchModal').click(function() {
        $('#searchProductsModal').modal('show');

        // فوكس تلقائي على خانة البحث جوه الموديل أول ما يفتح
        setTimeout(() => {
            $('#modal_search_input').focus();
        }, 500);
    });

    // --- 1. دالة الإضافة الموحدة (Function) ---
    // عملنا دي عشان ننادي عليها من الانتر، ومن زرار انزال، ومن الموديل


    // --- 2. ربط الأحداث (Events) ---

    // أ- الضغط على Enter في خانة البحث
  // أ- الضغط على Enter في خانة البحث (نسخة معدلة لمنع التكرار)
    $('#product_search').on('keydown', function(e) {
        if (e.which == 13) { // زرار Enter
            e.preventDefault(); // منع الفورم من الإرسال التلقائي
            e.stopPropagation(); // منع وصول الحدث لأي عناصر تانية

            // منع التنفيذ المتكرر في نفس اللحظة
            if (e.handled !== true) {
                addProduct();
                e.handled = true;
            }
            return false;
        }
    });

    // ب- الضغط على زرار "إنزال Drop" بالماوس
    $('#addRow').click(function() {
        addProduct();
    });

    // ج- اختصار F9 لفتح الموديل
    $(document).keydown(function(e) {
        if (e.keyCode == 120) {
            e.preventDefault();
            $('#searchProductsModal').modal('show');
            setTimeout(() => $('#modal_search_input').focus(), 500);
        }
    });

    // د- الضغط على "أيقونة العدسة" لفتح الموديل
    $('.input-group-append .fa-search').closest('span').css('cursor', 'pointer').click(function() {
        $('#searchProductsModal').modal('show');
    });

    // هـ- اختيار منتج من داخل الموديل
    $(document).on('click', '.select-product', function() {
        let productId = $(this).data('id');
        $('#product_search').val(productId); // حط الـ ID في الخانة الرئيسية
        $('#searchProductsModal').modal('hide'); // اقفل الموديل
        addProduct(); // نفذ الإضافة فوراً
    });

    // و- فلترة جدول الموديل (البحث اللحظي)
   // و- فلترة جدول الموديل (بحث احترافي بالكود أو الاسم)
$("#modal_search_input").on("keyup", function() {
    let value = $(this).val().toLowerCase(); // القيمة المدخلة

    $("#allProductsTable tbody tr").each(function() {
        // هنجيب نص الكود (أول عمود) ونص الاسم (تاني عمود)
        let productCode = $(this).find('td:eq(0)').text().toLowerCase();
        let productName = $(this).find('td:eq(1)').text().toLowerCase();

        // لو القيمة موجودة في الكود "أو" موجودة في الاسم، اظهر الصف
        if (productCode.indexOf(value) > -1 || productName.indexOf(value) > -1) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
});

});
</script>




<script>
// 1. حذف الصنف المحدد (اللي عليه الاختيار أو آخر صنف تم لمسه)
// الأفضل في أنظمة الـ POS إننا بنخلي الصف يتحدد لما تضغط عليه
$(document).on('click', '#salesTable tbody tr', function() {
    $('.selected-row').removeClass('selected-row').css('background-color', '#ffffcc');
    $(this).addClass('selected-row').css('background-color', '#ffcfcf'); // لون أحمر خفيف للتحديد
});
$(document).on('input', '.price, .qty', function() {
        calculateGrandTotal();
    });
$('#deleteSelected').click(function() {
    if ($('.selected-row').length > 0) {
        $('.selected-row').remove();
        calculateGrandTotal(); // متنساش تعيد حساب الإجمالي بعد الحذف
    } else {
        alert("من فضلك اختر صنفاً من الجدول أولاً لحذفه");
    }
});

// 2. إلغاء الكل (مسح الجدول بالكامل)
$('#clearAll').click(function() {
    if (confirm("هل أنت متأكد من مسح جميع الأصناف؟")) {
        $('#cartTableBody').empty();
        calculateGrandTotal();
    }
});
$('#product_search').on('keypress', function(e) {
    if (e.which == 13) { // عند الضغط على Enter
        e.preventDefault();
        let searchVal = $(this).val();

        if (searchVal != "") {
            $.ajax({
                url: "{{ route('get.product.data') }}", // اتأكد من تعريف الـ route
                type: "GET",
                data: { search_val: searchVal },
                success: function(response) {
                    if (response.status == 'success') {
                        let p = response.data;

                        $('.selected-row').removeClass('selected-row');
                        let rowHtml = `
                                <tr style="font-size: 13px; background-color: #ffffcc;" data-product-id="${p.id}" data-min-price="${p.min_price ?? 0}">
                                <td><input type="number" name="qty[]" class="form-control form-control-sm text-center qty" value="1"></td>
                                <td>${p.unit ?? 'حبة'}</td>
                                <td>${p.Product_Code ?? p.id}</td>
                                <td class="text-center">${p.product_name}</td>
                                <td><input type="text" name="desc[]" class="form-control form-control-sm" value="${p.notes ?? ''}"></td>
                                <td><input type="number" name="price[]" class="form-control form-control-sm price" value="${p.sale_price}"></td>
                                <td class="row_total">${p.sale_price}</td>
                                <td>0.00</td>
                                <td class="row_tax">${(p.sale_price * 0.15).toFixed(2)}</td>
                                <td class="final_row_total">${(p.sale_price * 1.15).toFixed(2)}</td>
                                <input type="hidden" name="product_ids[]" value="${p.id}">
                            </tr>
                        `;
                        $('#cartTableBody').prepend(rowHtml);
                        $('#product_search').val(''); // تصفير الخانة لبحث جديد
                        calculateGrandTotal(); // دالة الحسابات الكلية
                    } else {
                        alert(response.message);
                    }
                }
            });
        }
    }
});
</script>








<script>
    // 1. مصفوفة المسميات العربية (عشان نضمن إنها تظهر بالظبط زي اللي في الـ HTML)
 const measurementLabels = {
    'front_length': 'طول أمام',
    'back_length': 'طول خلف',
    'shoulder_width': 'عرض الكتف',
    'sleeve_length': 'يد سادة',
    'arm_width': 'وسع يد',
    'arm_mid_width': 'يد كبك',
    'arm_bottom_width': 'اسفل اليد',
    'chest_width': 'وسع الصدر',
    'neck_size': 'رقبة سادة',
    'collar_size': 'رقبة قلاب',
    'neck_plain': 'رقبة سادة', // تم التصحيح: كانت "وسع الورك" وهي المفروض رقم 9
    'step_width': 'وسع الورك', // تم التصحيح: كانت "وسع خطوة"

    // الإضافات الجديدة حسب الصورة
    'arm_center_width': 'وسط اليد',
    'cuff_width': 'وسع كبك',
    'cuff_hem': 'كفة كبك',
    'bottom_hem': 'كفة أسفل',
    'dropped_shoulder': 'كتف نازل',

    'buttons_count': 'عدد الطقطق',
    'pocket_type': 'نوع الجيب'
};

    function collectMeasurements() {
        const getVal = (id) => $('#' + id).val();

        // التعديل هنا: شيلنا Math.round وخليناها parseFloat بس
        const cleanNum = (val) => {
            let n = parseFloat(val);
            return isNaN(n) ? 0 : n;
        };

        return {
            front_length:      cleanNum(getVal('m_front_length')),
            back_length:       cleanNum(getVal('m_back_length')),
            shoulder_width:    cleanNum(getVal('m_shoulder_width')),
            sleeve_length:     cleanNum(getVal('m_sleeve_length')),
            arm_width:         cleanNum(getVal('m_arm_width')),
            arm_mid_width:     cleanNum(getVal('m_arm_mid_width')),
            arm_bottom_width:  cleanNum(getVal('m_arm_bottom_width')),
            chest_width:       cleanNum(getVal('m_chest_width')),
            neck_size:         cleanNum(getVal('m_neck_size')),
            collar_size:       cleanNum(getVal('m_collar_size')),
            neck_plain:        cleanNum(getVal('m_neck_plain')),
            step_width:        cleanNum(getVal('m_step_width')),
            arm_center_width:  cleanNum(getVal('m_arm_center_width')),
            cuff_width:        cleanNum(getVal('m_cuff_width')),
            cuff_hem:          cleanNum(getVal('m_cuff_hem')),
            bottom_hem:        cleanNum(getVal('m_bottom_hem')),
            dropped_shoulder:  cleanNum(getVal('m_dropped_shoulder')),

            buttons_count:     cleanNum(getVal('m_buttons_count')),
            pocket_type:       $('#m_pocket_type option:selected').text() || "زرار",
            notes_one:         getVal('n_notes_one') || "",
            notes_two:         getVal('n_notes_two') || "",
            notes_three:       getVal('n_notes_three') || "",
            notes_four:        getVal('n_notes_four') || ""
        };
    }

function collectTableItems() {
    let items = [];
    $('#garmentsSummaryTable tbody tr').each(function() {
        let rowData = $(this).data('all_details');
        if (rowData) {
            items.push({
                product_id: rowData.product_id,
                qty: rowData.qty,
                price: parseFloat($(this).find('td:nth-child(7)').text()) || 0,
                // انقلنا الداتا هنا عشان تبقى جوه الـ item
                measurements: rowData.measurements,
                styles: rowData.styles,
                features: rowData.features,
                consumption: rowData.consumption
            });
        }
    });
    return items;
}


function collectOrderStyles() {
    let styles = {};
    $('.style-box').each(function() {
        let $box = $(this);
        let key = $box.data('key'); // مثلاً: 'neck', 'sleeve'
        let modelVal = $(`#input_${key}`).val(); // القيمة المخفية
        let noteVal = $(`input[name="${key}_note"]`).val();
        let displayName = $(`#label_${key}`).text();

        // لو الخانة مش مكتوب فيها "اختر موديل" وفيه رقم موديل موجود
        if (modelVal && modelVal !== "" && modelVal !== "0") {
            styles[key] = {
                model: modelVal,
                note: noteVal,
                displayName: displayName // ده اللي هيظهر في الـ Badge الزرقاء
            };
        }
    });
    return styles;
}
function collectOrderFeatures() {
    let featuresData = {};
    let displayNames = [];

    $('#garment-features-box input[type="checkbox"]').each(function() {
        let name = $(this).attr('name');
        if (!name) return;

        if ($(this).is(':checked')) {
            let label = $(this).closest('.custom-control').find('label').text().trim() || name;
            featuresData[name] = 1;
            if (!displayNames.includes(label)) {
                displayNames.push(label);
            }
        } else {
            featuresData[name] = 0;
        }
    });

    return { data: featuresData, display: displayNames };
}


                // 3. دالة الحفظ المركزية (هي اللي بتكلم السيرفر)
function processInvoiceSave(data, shouldPrint) {
    let checkTotal = parseFloat(data.total) || 0;
    if (checkTotal <= 0) {
        Swal.fire("تنبيه", "عذراً، لا يمكن حفظ فاتورة فارغة أو قيمتها صفر!", "warning");
        return false;
    }
    // 1. فحص هل يوجد ID فاتورة (حالة تعديل) أم لا (حالة جديدة)
    let editInvoiceId = $('#edit_invoice_id').val();

    // 2. تحديد المسار بناءً على وجود الـ ID
    // لو فيه ID هيبعت لـ update_invoice، لو مفيش هيبعت لـ save_invoice
    let targetUrl = editInvoiceId
        ? "{{ url('pos/update-invoice') }}/" + editInvoiceId
        : "{{ route('pos.save_invoice') }}";

    $.ajax({
        url: targetUrl,
        method: "POST", // يفضل تستخدم POST وتمرر الـ ID في الداتا أو الـ URL
        data: {
            _token: "{{ csrf_token() }}",
            data: data,
            invoice_id: editInvoiceId // بنبعت الـ ID برضه لزيادة التأكيد في الـ Controller
        },
        beforeSend: function() {
            $('#confirm_and_print, #save_cash, #save_no_print').prop('disabled', true).text('جاري الحفظ...');
        },
        success: function(res) {
            $('.modal').modal('hide');

            if(res.status === 'success') {
                // رسالة نجاح مخصصة لو تعديل أو حفظ جديد
                let successTitle = editInvoiceId
                    ? 'تم تحديث الفاتورة بنجاح'
                    : 'تم حفظ الفاتورة رقم: ' + (res.invoice_no || res.id);

                Swal.fire({
                    title: successTitle,
                    html: `
                        <div class="mt-3">
                            <button id="btn-print-thermal" class="btn btn-warning btn-lg w-100 mb-2" style="font-weight:bold;">
                                <i class="fa fa-print"></i> طباعة (رول)
                            </button>
                            <button id="btn-new-order" class="btn btn-success btn-lg w-100">
                                <i class="fa fa-plus"></i> فاتورة جديدة
                            </button>
                        </div>
                    `,
                    icon: 'success',
                    showConfirmButton: false,
                    allowOutsideClick: false,
                    didOpen: () => {
                        $('#btn-print-thermal').on('click', function() {
                            window.open("/print-thermal/" + res.id, "_blank", "width=300,height=600");
                        });

                        $('#btn-new-order').on('click', function() {
                            // مهم: تصفير الـ ID المخفي قبل الانتقال أو الريفرش
                            $('#edit_invoice_id').val('');
                            window.location.href = "{{ route('sales.index') }}";
                        });
                    }
                });

                if(shouldPrint) {
                    window.open("/print-invoice/" + res.id, "_blank");
                }
            }
        },
        error: function(err) {
            console.log(err);
            // استرجاع النصوص الأصلية للأزرار في حالة الخطأ
            $('#confirm_and_print').text("{{ __('sales.ok_confirm') }}").prop('disabled', false);
            $('#save_cash, #save_no_print').prop('disabled', false).text('حفظ');

            Swal.fire({
                title: 'خطأ في العملية!',
                text: (err.responseJSON ? err.responseJSON.message : "تعذر الاتصال بالسيرفر"),
                icon: 'error'
            });
        }
    });
}


    $(document).ready(function() {

  $('#addNewGarment').on('click', function() {
    // 1. التقاط السطر الأخير (النشط) من جدول القماش
    let lastRow = $('#cartTableBody tr.selected-row');
    if (lastRow.length === 0) {
        lastRow = $('#cartTableBody tr:last-child');
    }

    if (!lastRow || lastRow.length === 0) {
        Swal.fire("تنبيه", "يجب إضافة الصنف (القماش) أولاً", "warning");
        return;
    }

// 1. التقاط الكمية وسعر الوحدة
    let currentQty = parseFloat(lastRow.find('.qty').val()) || 1;
    let unitPrice = parseFloat(lastRow.find('.price').val()) || 0;

    // 2. تحديد استهلاك الثوب الواحد (بذكاء)
    let single_unit_consumption = 0;
    let rawConsumption = parseFloat($('#m_total_consumption').val()) || 0;

    // لو الشاشة فيها رقم حقيقي (أكبر من 0.51 اللي هي قيمة الزيادة فقط)
    if (rawConsumption > 0.60) {
        single_unit_consumption = rawConsumption;
    } else {
        // لو الشاشة أصفار أو لسه مسمعتش، بنجيب استهلاك الثوب من آخر سطر نزل في الملخص
        let lastSummaryRow = $('#garmentsSummaryTable tbody tr:last-child');
        if (lastSummaryRow.length > 0) {
            let lastDetails = lastSummaryRow.data('all_details');
            // بنقسم استهلاك السطر اللي فات على كميته عشان نجيب "الواحد" بكام
            single_unit_consumption = parseFloat(lastDetails.single_consumption) || 0;
        }
    }

    // 3. الحسبة النهائية للسطر الحالي
    // لو الكمية 1 هيحط نفس الرقم (مثلاً 3.57) ولو 4 هيضربه (14.28)
    let total_line_consumption = single_unit_consumption * currentQty;

    let consumption = total_line_consumption.toFixed(2);
    let price = (currentQty * unitPrice).toFixed(2);


    let pId = lastRow.data('product-id') ||
          lastRow.find('.product-id-cell').text().trim() ||
          lastRow.find('.product_id').val();


    let measurements = collectMeasurements();
    let styles = collectOrderStyles();
    let featuresResult = collectOrderFeatures();

    let customerName = $('#customer_select option:selected').data('name') || $('#customer_name_display').val() || "عميل نقدي";
    let productName = lastRow.find('td:nth-child(4)').text() || "صنف غير محدد";

    // تجهيز الـ HTML
    let measSummaryHTML = Object.keys(measurementLabels).map(key =>
        `<span style="white-space:nowrap"><b>${measurementLabels[key]}:</b>${measurements[key]}</span>`
    ).join(' | ');

    let stylesHtml = Object.values(styles).map(s =>
        `<div class="badge badge-primary d-block mb-1" style="font-size: 10px; white-space: normal;">${s.displayName}</div>`
    ).join('');

    let featuresHtml = featuresResult.display.map(f =>
        `<span class="badge badge-secondary m-1" style="font-size: 10px;">${f}</span>`
    ).join('');

    let rowId = 'summary_' + Date.now();

    let summaryRow = `
        <tr id="${rowId}" data-parent-row="${lastRow.attr('id')}" data-product-id="${pId}">
            <td>${customerName}</td>
            <td>${productName}</td>
            <td style="font-size: 11px; background: #fdfdfd; max-width: 200px;">${measSummaryHTML}</td>
            <td style="background: #f0f7ff;">${stylesHtml || '<small class="text-muted">بدون موديل</small>'}</td>
            <td>${featuresHtml || '<small class="text-muted">قياسي</small>'}</td>
            <td><span class="badge badge-info">${consumption} م</span></td>
            <td><b>${price}</b></td>
            <td>
                <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-info edit-garment-btn"><i class="fa fa-edit"></i></button>
                    <button type="button" class="btn btn-sm btn-danger remove-summary-row"><i class="fa fa-times"></i></button>
                </div>
            </td>
        </tr>`;

    let $htmlRow = $(summaryRow);
    $htmlRow.data('all_details', {
        product_id: pId,
        measurements: measurements,
        styles: styles,
        qty: currentQty,
        single_consumption: single_unit_consumption,
        features: featuresResult.data,
        consumption: consumption
    });

    let buttonsCountVal = $('#m_buttons_count').val();
    let pocketTypeVal = $('#m_pocket_type').val();
    if (!buttonsCountVal || buttonsCountVal.trim() === '' || !pocketTypeVal || pocketTypeVal.trim() === '') {
        Swal.fire("تنبيه", "عليك تعيين عدد الطقطق ونوع الجيب قبل إضافة الثوب للفاتورة", "warning");
        return;
    }

    // إضافة السطر للجدول السفلي
    $('#garmentsSummaryTable tbody').append($htmlRow);

    // --- الإضافة الفنية الجديدة هنا ---
    // مسح السطر من الجدول العلوي عشان البائع ميتلخبطش
    lastRow.remove();
    // تحديث إجمالي الفاتورة (لو عندك دالة حسابية للإجمالي الكلي ناديها هنا)
    if (typeof calculateGrandTotal === "function") calculateGrandTotal();

    resetGarmentFields();
    Swal.fire({ icon: 'success', title: 'تمت الإضافة للملخص وتنظيف القائمة', toast: true, position: 'top-end', timer: 2000 });
});

        $(document).on('click', '.edit-garment-btn', function() {
            let row = $(this).closest('tr');
            let data = row.data('all_details');
            if (!data) return;

            // إرجاع المقاسات والملاحظات
            Object.keys(data.measurements).forEach(key => {
                $(`#m_${key}`).val(data.measurements[key]);
            });

            // إرجاع نوع الجيب (Select)
            let pocketVal = data.measurements.pocket_type == "سحاب" ? "zipper" : "button";
            $('#m_pocket_type').val(pocketVal);

            // إرجاع الـ Checkboxes
            $('input[type="checkbox"]').prop('checked', false);
            Object.keys(data.features).forEach(key => {
                if (data.features[key] === 1) $(`input[name="${key}"]`).prop('checked', true);
            });

            // إرجاع الموديلات
            $('.selectable-style').removeClass('selected-style-active');
            Object.keys(data.styles).forEach(key => {
                let style = data.styles[key];
                $(`.selectable-style[data-key="${key}"]`).each(function() {
                    if ($(this).find('input[type="hidden"]').val() == style.model) {
                        $(this).addClass('selected-style-active');
                        $(this).find('.style-note-input').val(style.note);
                    }
                });
            });

            row.remove();
            $('html, body').animate({ scrollTop: 0 }, 'fast');
        });

        function resetGarmentFields() {
            // 1. تصفير المقاسات (باستثناء خانة الزيادة)
            // $('.customer-measurement').val('0');

            // 2. تعيين قيمة خانة "الزيادة" لـ 20 بدلاً من صفر
            $('#m_extra_increase').val('20'); // تأكد أن الـ ID هنا هو الخاص بخانة الزيادة

            // 3. تصفير بقية الحقول
            $('#m_total_consumption').val('0');
            $('input[id^="m_notes_"]').val('');
            // $('input[type="checkbox"]').prop('checked', false);

            // 4. إعادة تعيين الموديلات (نفس الكود السابق)
            // $('.selectable-style').each(function() {
            //     let $box = $(this);
            //     let $img = $box.find('img');
            //     let folder = $img.data('folder');

            //     $box.removeClass('selected-style-active').find('.selected-check').hide();
            //     $box.find('input[type="hidden"]').val('1');
            //     $img.attr('src', `/assets/img/models/${folder}/1.png`).data('current', 1);
            //     $box.find('.text-primary.small').text('موديل 1');
            //     $box.find('.style-note-input').val('');
            // });
        }
        $(document).on('click', '.remove-summary-row', function() {
            $(this).closest('tr').remove();
        });


// امسح الـ Click Events القديمة لزرار confirm_and_print وحط ده مكانه
// امسح الـ Click Events القديمة لزرار confirm_and_print وحط ده مكانه
$(document).off('click', '#confirm_and_print').on('click', '#confirm_and_print', function() {

    // 1. تجميع بيانات الدفع
    let cashPaid = parseFloat($('#paid_cash').val()) || 0;
    let spanPaid = parseFloat($('#paid_span').val()) || 0;
    let totalPaid = cashPaid + spanPaid;
    let remaining = parseFloat($('#modal_remaining_display').text()) || 0;

    let paymentMethods = [];
    if(cashPaid > 0) paymentMethods.push("cash");
    if(spanPaid > 0) {
        let activeType = $('.active-payment').data('type') || "شبكة";
        paymentMethods.push(activeType);
    }

    // 2. تجميع الأصناف
    let itemsArray = collectTableItems();

    if (itemsArray.length === 0) {
        Swal.fire("تنبيه", "يجب إضافة أصناف للملخص أولاً!", "warning");
        return;
    }

    let zeroPriceItem = itemsArray.find(item => (parseFloat(item.price) || 0) <= 0);
    if (zeroPriceItem) {
       $('#paymentModal').modal('hide');
        $('.modal-backdrop').remove();
        $('body').removeClass('modal-open').css('overflow', 'auto');
        Swal.fire({
            title: "تنبيه",
            text: "لا يمكن حفظ الفاتورة، يوجد صنف بسعر صفر أو أقل ضمن الأصناف (" + (zeroPriceItem.product_id || '') + ")",
            icon: "warning"
        });
        return;
    }

    // قراءة إجمالي الفاتورة
    let invoiceTotal = parseFloat($('#modal_grand_total_display').text()) || 0;

    // الفحص الأول: الفاتورة الصفرية أو الأقل
    if (invoiceTotal <= 0) {
        $('#paymentModal').modal('hide');
        $('.modal-backdrop').remove();
        $('body').removeClass('modal-open').css('overflow', 'auto');

        Swal.fire("تنبيه", "لا يمكن حفظ فاتورة قيمتها صفر أو أقل!", "warning");
        return;
    }

    // [التعديل الجديد]: جلب الحد الأدنى للبيع من متغير الـ settings الممرر من الكنترولر
    let minSalesLimit = parseFloat("{{ $settings->min_sales_amount ?? 0 }}") || 0;

    // الفحص الثاني: فحص الحد الأدنى للمبيعات المسموح به
    if (invoiceTotal < minSalesLimit) {
        // إغلاق الموديل وتنظيف الشاشة
        $('#paymentModal').modal('hide');
        $('.modal-backdrop').remove();
        $('body').removeClass('modal-open').css('overflow', 'auto');

        // إظهار التنبيه بالمبلغ المطلوب
        Swal.fire({
            title: "تنبيه (الحد الأدنى)",
            text: "عذراً، إجمالي الفاتورة (" + invoiceTotal.toFixed(2) + ") أقل من الحد الأدنى المسموح به للنظام وهو: " + minSalesLimit.toFixed(2),
            icon: "warning"
        });
        return; // إيقاف التنفيذ ومنع حفظ الفاتورة
    }

    // 3. التجهيز النهائي
    let finalPayload = {
        customer_id: $('#customer_id').val() || $('#customer_select').val(),
        product_group_id: ($('select[name="category"]').val() || $('#product_group_id').val() || null),
        order_date: $('input[name="order_date"]').val(),
        delivery_date: $('input[name="delivery_date"]').val(),
        items: itemsArray,
        total: invoiceTotal,
        discount: $('#discount_input').val() || 0,
        paid_cash: $('#paid_cash').val() || 0,
        paid_span: $('#paid_span').val() || 0,
        payment_methods_text: paymentMethods.join(' + ') || "Cash",
        status: $('input[name="order_status"]:checked').val() || 'NOT_STARTED',
        total_measurements: 0,
        note: $('#order_general_note').val() || ""
    };

    console.log("البيانات المرسلة:", finalPayload);

    // 4. الإرسال
    processInvoiceSave(finalPayload, true);
});

    });

</script>

<script>
$(document).on('blur', '#cartTableBody .price', function() {
    let $input = $(this);
    let $row = $input.closest('tr');
    let minPrice = parseFloat($row.data('min-price')) || 0;
    let enteredPrice = parseFloat($input.val()) || 0;

    if (minPrice > 0 && enteredPrice < minPrice && enteredPrice > 0) {
        Swal.fire({
            icon: 'warning',
            title: 'تنبيه السعر',
            text: `لا يمكن إدخال سعر أقل من الحد الأدنى المسموح به (${minPrice})`,
        });
        $input.val(minPrice);
        calculateGrandTotal();
    }
});
</script>


@endsection

ظبطلي شكل الفاتورة دي بس اوعي تمسح داتا
<style>
    /* الإعدادات العامة للشاشة */
    .invoice-container {
        max-width: 21cm;
        margin: auto;
        font-family: 'Segoe UI', Tahoma, sans-serif;
        background: #fff;
    }

    @media print {
        .no-print { display: none !important; }

        /* تصفير الهوامش تماماً في جسم الصفحة */
        body, html {
            margin: 0 !important;
            padding: 0 !important;
            width: 100%;
        }

        /* ضبط إعدادات الورقة */
        @page {
            size: A4;
            margin: 1cm; /* هوامش أمان 1 سم من كل اتجاه */
        }

        /* إجبار الحاوية على التوسط */
        .invoice-container {
            width: 100% !important;
            max-width: none !important;
            margin: 0 auto !important;
            padding: 0 !important;
            border: none !important;
        }

        /* لضمان ظهور الصور والألوان بشكل صحيح */
        * {
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
        }
    }
</style>

    <div class="invoice-container" style="direction: rtl; font-family: sans-serif; max-width: 800px; margin: auto;">
        {{-- 1. الهيدر العام (تم تقليل البادينج) --}}
        <div style="border: 2px solid #000; padding: 0; margin-bottom: 5px;">
            <table style="width: 100%; border-collapse: collapse; border-bottom: 2px solid #000;">
                <tr>
                    <td style="width: 25%; text-align: right; padding: 3px; border-left: 1px solid #000; font-size: 10px;">
                        تاريخ التفصيل: <strong>{{ $invoice->created_at->format('Y-m-d') }}</strong><br>
                        <span style="color: #d32f2f;">التسليم: <strong>{{ $invoice->delivery_date ? \Carbon\Carbon::parse($invoice->delivery_date)->format('Y-m-d') : '-' }}</strong></span>
                    </td>
                    <td style="width: 50%; text-align: center; padding: 3px; border-left: 1px solid #000;">
                <div style="font-size: 16px; font-weight: bold;">
                            {{-- عرض رقم الهاتف واسم الفرع بناءً على العلاقة --}}
                            @if($invoice->branch)
                                {{ $invoice->branch->phone }}

                                <div style="margin-top: 2px;">
                                    الفرع: {{ $invoice->branch->name }} - {{ $invoice->branch->place }}
                                </div>
                            @else
                                {{-- بيانات افتراضية في حال عدم وجود فرع مرتبط بالفاتورة --}}
                                0571700030 &nbsp; / &nbsp; YAROB - يعرب
                                <div style="margin-top: 2px;">العنوان : لين - شارع الطائف</div>
                            @endif
                        </div>
                        <div style="font-size: 12px; font-weight: bold; margin-top: 1px;">
                        {{ $invoice->customer->id ?? '-' }} | {{ $invoice->customer->name ?? 'سعود التميمي' }} | {{ $invoice->customer->phone ?? '0507970570' }}
                        </div>
                    </td>
                    <td style="width: 25%; text-align: center; padding: 3px;">
                        <img src="https://barcode.tec-it.com/barcode.ashx?data={{$invoice->id}}&code=Code128" width="100" style="height: 30px;">
                        <div style="font-size: 12px; font-weight: bold;">{{ $invoice->id }}</div>
                    </td>
                </tr>
            </table>

            <table style="width: 100%; border-collapse: collapse; text-align: center; font-weight: bold; font-size: 11px; background: #f9f9f9;">
                <tr>
                    <td style="width: 12%; border-left: 1px solid #000; padding: 3px;">الثياب: <span style="color: #d32f2f;">{{ $items->sum('qty') }}</span></td>
                    <td style="width: 23%; border-left: 1px solid #000; color: #2e7d32; background: #e8f5e9;">إجمالي القماش: {{ number_format($items->sum('total_measurements'), 2) }} م</td>
                    <td style="width: 15%; border-left: 1px solid #000; padding: 5px;">
                        الدفع:
                        <span style="font-weight: bold;">
                            @php
                                // نقوم بتنظيف النص وتقسيمه بناءً على الشرطة (-)
                                $methods = explode('-', $invoice->payment_methods_text);
                                $translatedMethods = [];

                                foreach($methods as $method) {
                                    $method = trim($method);
                                    if(!empty($method)) {
                                        // البحث عن الترجمة في ملف home
                                        $translatedMethods[] = __('sales.' . strtolower($method));
                                    }
                                }
                            @endphp
                            {{-- عرض النتائج مفصولة بـ + --}}
                            {{ count($translatedMethods) > 0 ? implode(' + ', $translatedMethods) : $invoice->payment_methods_text }}
                        </span>
                    </td>
                    <td style="width: 17%; border-left: 1px solid #000;">المبلغ: {{ number_format($invoice->Price, 2) }}</td>
                    <td style="width: 17%; border-left: 1px solid #000;">المدفوع: {{ number_format($invoice->Pay, 2) }}</td>
                    <td style="width: 16%;">المتبقي: <span style="color: #d32f2f;">{{ number_format($invoice->Price - $invoice->Pay, 2) }}</span></td>
                </tr>
            </table>
        </div>

        {{-- 2. جدول المقاسات (تم تصغير المربعات) --}}
        @php
            $firstItem = $items->first();
            $global_measurements = json_decode($firstItem->order_measurements ?? '[]', true) ?? [];

            // التعديل هنا ليتطابق مع مسميات النظام (Sales)
            $meas_labels = [
                'front_length'     => 'طول أمام',
                'back_length'      => 'طول خلف',
                'shoulder_width'   => 'عرض الكتف',
                'sleeve_length'    => 'يد سادة',
                'arm_width'        => 'وسع اليد',
                'arm_mid_width'    => 'يد كبك',
                'arm_bottom_width' => 'اسفل اليد',
                'chest_width'      => 'وسع الصدر',
                'neck_size'        => 'وسع الورك',
                'collar_size'      => 'رقبة قلاب',
                'neck_plain'       => 'رقبة سادة', // تم تصحيح المسمى هنا
                'step_width'       => 'وسع خطوة',
                'arm_center_width' => 'وسط اليد',
                'cuff_width'       => 'وسع كبك',
                'cuff_hem'         => 'كفة كبك',
                'bottom_width'     => 'وسع أسفل',
                'bottom_hem'       => 'كفة أسفل',
                'dropped_shoulder' => 'كتف نازل',
            ];
        @endphp

        <div style="border: 1px solid #000; padding: 3px; margin-bottom: 8px; background: #fff;">
            <div style="display: flex; flex-wrap: wrap; gap: 3px; justify-content: center;">
                @foreach($meas_labels as $key => $label)
                    <div style="width: 58px; border: 1px solid #ccc; text-align: center;">
                        <div style="font-size: 12px; font-weight: bold; background: #eee; border-bottom: 1px solid #ccc; padding: 1px;">{{ $label }}</div>
                        <div style="font-size: 15px; font-weight: bold; padding: 1px;">{{ $global_measurements[$key] ?? '0' }}</div>
                    </div>
                @endforeach
            </div>
        </div>

        {{-- 3. لوب الموديلات --}}
    {{-- بداية حلقة عرض الثياب --}}
    @foreach($items as $index => $item)
        @php
            $item_styles = json_decode($item->order_styles ?? '[]', true) ?? [];
            $item_features = json_decode($item->order_features ?? '[]', true) ?? [];
            $item_m_data = json_decode($item->order_measurements ?? '[]', true) ?? [];
            $getVal = function($data) { return is_array($data) ? ($data['model'] ?? 1) : ($data ?? 1); };
        @endphp

        <div style="border: 1px solid #444; margin-bottom: 8px; page-break-inside: avoid;">
        <div style="background: #444; color: #fff; padding: 2px 10px; font-size: 11px; font-weight: bold; display: flex; justify-content: space-between;">
        <span>ثوب رقم: {{ $index + 1 }} | الصنف: {{ $item->product->product_name ?? 'غير محدد' }}</span>
        <span>الكمية: {{ number_format($item->qty, 0) }} ثوب &nbsp;|&nbsp; السعر: {{ number_format($item->price, 2) }}</span>
    </div>

        <div style="padding: 5px;">
            <div style="display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start;">
            @foreach($item_styles as $s_key => $style)
                @php
                    // تأكد من طريقة جلب البيانات، إذا كانت $style عبارة عن مصفوفة أو كائن
                    $imgNum = is_array($style) ? ($style['model'] ?? '1') : ($style->model ?? '1');
                    $note = is_array($style) ? ($style['note'] ?? '') : ($style->note ?? '');
                @endphp

                <div style="width: 150px; border: 1px solid #888; border-radius: 4px; text-align: center; background: #fff; display: flex; flex-direction: column;">
                    <div style="background: #f0f0f0; font-size: 10px; font-weight: bold; padding: 2px; border-bottom: 1px solid #888;">
                        {{ __('sales.' . $s_key) }}
                    </div>

                    <div style="height: 90px; display: flex; align-items: center; justify-content: center; padding: 4px;">
                        <img src="{{ asset('assets/img/models/'.$s_key.'/'.$imgNum.'.png') }}" style="max-height: 100%; max-width: 100%;">
                    </div>

                    <div style="font-size: 9px; color: #007bff; padding: 2px; border-top: 1px solid #eee;">
                        موديل {{ $imgNum }}
                    </div>

                    @if(!empty($note))
                        <div style="font-size: 19px; background: #e9ecef; color: #333; padding: 4px; border-top: 1px solid #888; word-wrap: break-word;">
                            {{ $note }}
                        </div>
                    @endif
                </div>
            @endforeach
        </div>

            <div style="margin-top: 5px; border-top: 1px solid #eee; padding-top: 5px; font-size: 10px;">
                @foreach($item_features as $f_key => $f_val)
                    @if($f_val == 1)
                        <span style="color: #000000; margin-left: 8px; font-weight: bold; font-size: 15px;">✓ {{ __('sales.' . $f_key) }}</span>
                    @endif
                @endforeach

                @php $note_keys = ['notes_one', 'notes_two', 'notes_three', 'notes_four', 'buttons_count','pocket_type']; @endphp
                @foreach($note_keys as $n_key)
                    @if(!empty($item_m_data[$n_key]))
                        <span style="margin-right: 10px; border-right: 3px solid #0a0a0a; padding-right: 5px; font-size: 15px; font-weight: bold;">
                            <strong>{{ __('sales.'.$n_key) }}:</strong> <span style="color: #000000;">{{ $item_m_data[$n_key] }}</span>
                        </span>
                    @endif
                @endforeach
            </div>
        </div>
    </div>
@endforeach

{{-- الجزء المطلوب: قسيمة التجهيز (أسفل الصفحة) --}}
<div style="margin-top: 30px; border-top: 2px dashed #000; padding-top: 15px; page-break-inside: avoid;">
    <style>
        .stub-table { width: 100%; border-collapse: collapse; background: #fff; }
        .stub-table td { border: 1px solid #000; padding: 8px; vertical-align: middle; }
        .big-number { font-size: 28px; font-weight: bold; }
    </style>

   <table class="stub-table">
    <tr>
        <td style="width: 10%; text-align: center;">
            <div class="big-number">{{ $items->sum('qty') }}</div>
            <div style="font-weight: bold; font-size: 12px;">عدد الثياب</div>
        </td>

        <td style="width: 20%; text-align: center;">
            <div style="font-size: 14px; margin-bottom: 5px;">{{ $invoice->created_at->format('Y-m-d') }}</div>
            <div style="border: 2px solid #000; padding: 5px; font-weight: bold; font-size: 18px; display: inline-block; min-width: 120px;">
                {{ $invoice->id }}
            </div>
        </td>

        <td style="width: 28%; text-align: right; padding-right: 15px;">
            <div style="font-size: 12px; color: #555;">العميل:</div>
            <div style="font-size: 18px; font-weight: bold;">{{ $invoice->customer->name ?? 'سعود التميمي' }}</div>
            <div style="font-size: 12px; margin-top: 5px;">رقم العميل: <strong>{{ $invoice->customer->id ?? '-' }}</strong></div>
        </td>

        <!-- خانة الخياط والبائع -->
        <td style="width: 22%; text-align: right; padding-right: 15px; background: #f9f9f9;">
            <!-- البائع / الموظف الحالي -->
           <!-- خانة البائع في الفاتورة -->
            <div style="font-size: 12px; color: #555;">البائع:</div>
            <div style="font-size: 15px; font-weight: bold; color: #000; margin-bottom: 6px;">
                {{ $employee->name_ar ?? 'مدير' }}
            </div>

            <!-- الخياط -->
            <div style="font-size: 12px; color: #555;">الخياط:</div>
            <div style="font-size: 15px; font-weight: bold; color: #000;">
                {{ $invoice->tailor->name_ar ?? ($invoice->tailor_name ?? 'غير محدد') }}
            </div>
        </td>

        <td style="width: 20%; text-align: center; background: #fdfdfd;">
            <img src="https://barcode.tec-it.com/barcode.ashx?data={{$invoice->id}}&code=Code128" style="width: 160px; height: 45px;">
            <div style="font-weight: bold; border-top: 1px solid #000; margin-top: 8px; padding-top: 5px; font-size: 14px;">باركود التجهيز</div>
        </td>
    </tr>
</table>
</div>

{{-- زر الطباعة (يظهر في الشاشة فقط) --}}
<div style="text-align: center; margin-top: 20px;" class="no-print">
    <button onclick="window.print()" style="background: #28a745; color: #fff; padding: 10px 40px; border: none; border-radius: 25px; cursor: pointer; font-size: 16px; font-weight: bold; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
        طباعة الفاتورة 🖨️
    </button>
</div>
    <style>
        @media print {
            .no-print { display: none; }
            body { margin: 0; padding: 0; }
            .invoice-container { width: 100%; border: none; }
            @page { size: A4; margin: 0.5cm; }
        }
    </style>

</div>