@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>
    /* لون الصف عند التحديد */
    .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; /* مخفية في البداية */
}
</style>
</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">
                   @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-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 }}"
                    >
                        {{ $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"
                            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;">
           <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.category') }}</span></div>
                    <select name="category" class="form-control form-control-sm border-0 bg-white">
                        <option value="">{{ __('sales.select_category') }}</option>
                        @foreach($groups as $group)
                            <option value="{{ $group->id }}">{{ $group->group_ar }}</option>
                        @endforeach
                    </select>
                </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-2">-->
            <!--    <div class="input-group">-->
            <!--        <div class="input-group-prepend"><span class="input-group-text py-0 border-0 bg-transparent">{{ __('sales.days') }}</span></div>-->
            <!--        <input type="number" name="days" class="form-control form-control-sm text-center border-0 font-weight-bold text-danger" value="7">-->
            <!--    </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 = [
                                    'shoulder_width'   => __('sales.shoulder_width'),
                                    'chest_circ'       => __('sales.chest_circ'),
                                    'sleeve_length'    => __('sales.sleeve_length'),
                                    'total_length'     => __('sales.total_length'),
                                    'waist_width'      => __('sales.waist_width'),
                                    'front_length'     => __('sales.front_length'),
                                    'back_length'      => __('sales.back_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')
                                ];
                            @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="0.1" name="{{ $name }}" class="form-control form-control-sm text-center">
                                </div>
                                @endforeach
                            </div>

                            <h6 class="text-info border-bottom pb-1"><i class="fa fa-plus-circle"></i> {{ __('sales.additions_accessories') }}</h6>
                            <div class="row mb-3 p-2">
                                @php
                                    $extras = [
                                        'button'        => __('sales.button'),
                                        'snap_button'   => __('sales.snap_button'),
                                        'composition'   => __('sales.composition'),
                                        'hand_bone_acc' => __('sales.hand_bone_acc'),
                                    ];
                                @endphp

                                @foreach($extras as $key => $label)
                                <div class="col-md-3">
                                    <label class="small">{{ $label }}</label>
                                    <input type="text" name="extra_{{ $key }}" class="form-control form-control-sm">
                                </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'),
                                'superman_sewing' => __('sales.superman_sewing')
                            ];
                        @endphp
                        @foreach($checkboxes as $name => $label)
                        <div class="col-md-4 mb-1">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" name="{{ $name }}" class="custom-control-input" id="{{ $name }}" value="1">
                                <label class="custom-control-label small" for="{{ $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>
                                    @foreach($customers as $customer)
                                    <tr>
                                        <td class="text-right">{{ $customer->name }}</td>
                                        <td>{{ $customer->phone }}</td>
                                        <td>{{ $customer->tax_no }}</td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-info select-customer-btn"
                                                    data-id="{{ $customer->id }}">
                                                {{ __('sales.select') }}
                                            </button>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </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'
            ];
        @endphp

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

            @php
            $roles = is_array(auth()->user()->roles_name)
                ? auth()->user()->roles_name
                : json_decode(auth()->user()->roles_name, true);

            $isAdmin = in_array('Admin', $roles ?? []);
        @endphp

        <div class="text-center mx-1 mb-1 border-right pr-2 mr-2">
            <label class="d-block mb-0 text-danger" style="font-size: 12px; 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: 12px; background-color: #fffde7;"
                value="20"
                @if(! $isAdmin) readonly @endif>
        </div>



        <div class="text-center mx-1 mb-1">
            <label class="d-block mb-0 text-primary" style="font-size: 12px; font-weight: bold;">{{ __('sales.total_cm') }}</label>
            <input type="text" id="m_total_consumption" class="form-control form-control-sm text-center p-0"
                style="width: 60px; height: 25px; font-size: 13px; font-weight: bold; background-color: #e8f5e9;" readonly value="0">
        </div>
    </div>

    <div 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', 'visible_pockets'], // المجموعة 1
                ['janzour', 'hidden', 'visible_hidden'],                           // المجموعة 2
                ['hidden_sewing', 'twisted_sewing', 'superman_sewing']             // المجموعة 3
            ];
            $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>

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




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

<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="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.total') }}</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)
                            <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>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </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' => 24], // زادت لـ 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' => 16],
            ];
        @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="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-2">
                <div class="col-6 p-1">
                    <button class="btn btn-outline-secondary btn-block py-3 shadow-sm" id="bill_hung" style="font-size: 13px;">
                        <i class="fas fa-tag"></i> <br>  {{ __('sales.suspend_bill') }}
                    </button>
                </div>
                <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-2">
                <div class="col-6 p-1">
                    <button class="btn btn-light btn-block border py-2" id="open_drawer"> {{ __('sales.open_drawer') }}</button>
                </div>
                <div class="col-6 p-1">
                    <button class="btn btn-light btn-block border py-2"> {{ __('sales.print_previous') }}</button>
                </div>
            </div>

            <div class="row no-gutters mb-2">
                <div class="col-6 p-1">
                    <button class="btn btn-info btn-block py-3" id="save_f12" style="font-size: 13px;"> {{ __('sales.payment_screen') }} </button>
                </div>
                <div class="col-6 p-1">
                    <button class="btn btn-primary btn-block mb-1" id="save_cash" style="font-size: 12px; padding: 5px;">{{ __('sales.save_cash') }}</button>
                    <button class="btn btn-secondary btn-block mt-0" id="save_no_print" style="font-size: 12px; padding: 5px;">{{ __('sales.save_no_print') }}</button>
                </div>
            </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>
                        <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>

                  <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>

{{-- Select2 --}}
<script src="{{ URL::asset('assets/plugins/select2/js/select2.min.js') }}"></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',
                        'shoulder_slope', 'chest_circ', 'total_length', 'waist_width'
                    ];

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

                    // --- ج. التفضيلات (Checkboxes) ---
                    let preferenceFields = [
                        'hand_plain', 'kabak_plain', 'hidden_pockets', 'visible_pockets',
                        'janzour', 'hidden', 'visible_hidden', 'hidden_sewing',
                        'twisted_sewing', 'superman_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>
    $(document).on('input', '.calc-trigger', function() {
    calculateConsumption();
});

function calculateConsumption() {
    // سحب القيم وتحويلها لأرقام (لو الخانة فاضية بيعتبرها 0)
    let front  = parseFloat($('#m_front_length').val()) || 0;
    let back   = parseFloat($('#m_back_length').val()) || 0;
    let chest  = parseFloat($('#m_chest_width').val()) || 0;
    let extra  = parseFloat($('#m_extra_const').val()) || 0;

    // المعادلة: الطول الأمامي + الطول الخلفي + وسع الصدر + القيمة الثابتة
    let total = front + back + chest + extra;

    // عرض النتيجة في خانة الإجمالي
    $('#m_total_consumption').val(total.toFixed(0)); // .toFixed(0) عشان الرقم يطلع صحيح بدون كسور زحمة
}
</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();

        if(type === 'cash') {
            $('#paid_cash').val(total);
            $('#paid_span').val('0.00');
        } else {
            $('#paid_span').val(total);
            $('#paid_cash').val('0.00');
        }
        $('#paid_cash').trigger('input');
    });

    // 4. عند التأكيد (تجميع البيانات للإرسال)
    $('#confirm_and_print').click(function() {
        let paymentMethods = [];
        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;

        if(cashPaid > 0) paymentMethods.push("كاش");

        if(spanPaid > 0) {
            let activeType = $('.active-payment').data('type');
            if(activeType === 'tabby') paymentMethods.push("تابي");
            else if(activeType === 'tamara') paymentMethods.push("تمارا");
            else paymentMethods.push("شبكة (" + ($('#span_type').val() || "مدى") + ")");
        }

        let paymentText = paymentMethods.join(' + ');

        // تجهيز الداتا للإرسال
        let formData = {
            paid_amount: totalPaid,      // ده هيروح لكولوم Pay
            remaining_amount: remaining, // ده هيروح لكولوم creaditamount
            payment_method_text: paymentText,
            status: remaining > 0 ? 'PARTIAL' : 'PAID' // حالة الفاتورة
        };

        console.log("البيانات الجاهزة للحفظ:", formData);

        // هنا ضيف كود الـ Ajax بتاعك واستخدم formData
        // بعد النجاح، وجهه لصفحة الفاتورة
        // window.location.href = "/print-invoice/" + invoiceId;
    });
});
</script>


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

   // 1. دالة تجميع المقاسات (تم إضافة Math.round لشيل الأصفار .00)
    function collectMeasurements() {
    const cleanNum = (val) => Math.round(parseFloat(val) || 0);

    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()),
        arm_bottom_width:  cleanNum($('#m_arm_bottom_width').val()),
        chest_width:       cleanNum($('#m_chest_width').val()),
        neck_size:         cleanNum($('#m_neck_size').val()),
        collar_size:       cleanNum($('#m_collar_size').val()),
        step_width:        cleanNum($('#m_step_width').val()),
        neck_plain:        cleanNum($('#m_neck_plain').val())
    };
}



function collectOrderFeatures() {
        let features = {};
        // نفس أسماء الحقول اللي أنت معرفها في المصفوفة فوق
        let fields = [
            'hand_plain', 'kabak_plain', 'hidden_pockets', 'visible_pockets',
            'janzour', 'hidden', 'visible_hidden', 'hidden_sewing',
            'twisted_sewing', 'superman_sewing'
        ];

        fields.forEach(function(field) {
            // بنشوف الـ input اللي الـ name بتاعه كذا.. لو checked ياخد 1 وإلا 0
            features[field] = $('input[name="' + field + '"]').is(':checked') ? 1 : 0;
        });

        return features;
    }



    // 2. دالة تجميع أصناف الجدول (مهمة للعمليات المباشرة)
    function collectTableItems() {
        let items = [];
        $('#cartTableBody tr').each(function() {
            let row = $(this);
            items.push({
                product_id: row.find('input[name="product_ids[]"]').val(),
                qty: row.find('.qty').val(),
                price: row.find('.price').val()
            });
        });
        return items;
    }

    // --- الدالة الجديدة: تجميع الموديلات المختارة ---
      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;
        }

    // 3. دالة الحفظ المركزية (هي اللي بتكلم السيرفر)
    function processInvoiceSave(data, shouldPrint) {
        $.ajax({
            url: "{{ route('pos.save_invoice') }}",
            method: "POST",
            data: { _token: "{{ csrf_token() }}", data: data },
            beforeSend: function() {
                $('#confirm_and_print, #save_cash, #save_no_print').prop('disabled', true).text('جاري...');
            },
            success: function(res) {
                if(res.status === 'success') {
                    Swal.fire({
                        title: 'تم حفظ الفاتورة بنجاح',
                        icon: 'success',
                        timer: 1500,
                        showConfirmButton: false,
                        didOpen: () => { $('.swal2-container').css('z-index', '9999'); },
                        willClose: () => {
                            if(shouldPrint) { window.open("/print-invoice/" + res.id, "_blank"); }
                            window.location.href = "{{ route('sales.index') }}";
                        }
                    });
                }
            },
            error: function(err) {
                console.log(err);

                $('.btn').prop('disabled', false);
                alert("خطأ: " + (err.responseJSON ? err.responseJSON.message : "راجع البيانات"));
            }
        });
    }

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

    // فتح موديل الدفع التفصيلي (F12)
    window.openPaymentModal = function() {
        let grandTotal = parseFloat($('#grand_total').text()) || 0;
        let selectedCustomer = $('#customer_select option:selected');
        $('#modal_cust_name').val(selectedCustomer.data('name') || "عميل نقدي");
        $('#modal_cust_phone').val(selectedCustomer.data('phone') || "-");
        $('#modal_grand_total_display').text(grandTotal.toFixed(2));
        $('#paid_cash').val(grandTotal.toFixed(2));
        $('#paid_span').val('0.00').trigger('input');
        $('#paymentModal').modal('show');
    };

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

    // زر الحفظ المباشر (كاش + طباعة)
    $('#save_cash').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(),
            order_date: $('input[name="order_date"]').val(),
            delivery_date: $('input[name="delivery_date"]').val(),
            items: collectTableItems(),
            discount: $('#discount_input').val() || 0,
            total: total,
            paid_cash: total,
            paid_span: 0,
            amount_rest: 0,
            payment_methods_text: 'cash'
        };
        processInvoiceSave(data, 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(),
            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);
    });

    // زر الحفظ من داخل الموديل (التفصيلي)
    $('#confirm_and_print').click(function() {
        $('#paymentModal').hide();
  let paymentMethods = [];

        // التحقق من الكاش
        if(parseFloat($('#paid_cash').val()) > 0) {
            paymentMethods.push("Cash");
        }

        // التحقق من المبالغ غير النقدية (شبكة، تابي، تمارا)
        let spanVal = parseFloat($('#paid_span').val());
        if(spanVal > 0) {
            let activeType = $('.active-payment').data('type');

            if(activeType === 'tabby') {
                paymentMethods.push("Tabby");
            }
            else if(activeType === 'tamara') {
                paymentMethods.push("Tamara");
            }
            else {
                // لو شبكة عادية، بنجيب النوع (Mada, Visa)
                let networkType = $('#span_type').val() || "Mada";
                paymentMethods.push("Network (" + networkType + ")");
            }
        }

        // لو مفيش حاجة خالص، بنخليها Cash كافتراضي
        let methodText = paymentMethods.length > 0 ? paymentMethods.join(' + ') : "Cash";


             let selectedStyles = {};
        $('.selectable-style.selected-style-active').each(function() {
            let key = $(this).data('key'); // مثلاً neck
            let modelId = $(this).find('input[type="hidden"]').val(); // رقم الموديل
            let note = $(this).find('.style-note-input').val(); // الملاحظة المكتوبة

            selectedStyles[key] = {
                'model': modelId,
                'note': note || "" // إذا كانت فارغة نرسل نص فارغ
            };
        });
        // ----------------------------------------------

        let orderStatus = $('input[name="order_status"]:checked').val();
        let totalCons = $('#m_total_consumption').val() || 0;

        let data = {
            customer_id: $('#customer_select').val(),
            measurements: collectMeasurements(),
            features: collectOrderFeatures(),
            product_group_id: $('select[name="category"]').val(),
            order_date: $('input[name="order_date"]').val(),
            delivery_date: $('input[name="delivery_date"]').val(),
            styles: selectedStyles, // الآن ستحتوي على المصفوفة الجديدة
            items: collectTableItems(),
            status: orderStatus,
            total_measurements: totalCons,
            discount: $('#discount_input').val() || 0,
            total: $('#modal_grand_total_display').text(),
            paid_cash: $('#paid_cash').val(),
            paid_span: $('#paid_span').val(),
            amount_rest: $('#modal_remaining_display').text(),
            payment_methods_text: methodText
        };
        processInvoiceSave(data, true);
    });

    // حسابات الموديل التلقائية
    $(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');
            qtyInp.val(parseFloat(qtyInp.val()) + 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',
            'shoulder_slope', 'chest_circ', 'total_length', 'waist_width'
        ];

        measurementFields.forEach(field => {
            let rawValue = selected.data(field);

            // إذا كانت القيمة موجودة، نحولها لرقم صحيح، وإذا لا نتركها فارغة
            if (rawValue !== undefined && rawValue !== null && rawValue !== '') {
                // Math.round بتحول الـ 70.00 لـ 70
                $(`#m_${field}`).val(Math.round(parseFloat(rawValue)));
            } else {
                $(`#m_${field}`).val('');
            }
        });

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

        preferenceFields.forEach(field => {
            let isChecked = (selected.data(field) == 1);

            // تحديث بالـ ID الأصلي (مثل #janzour)
            $(`#${field}`).prop('checked', isChecked);

            // دعم الـ IDs القديمة (check1, check2, check3) لضمان العمل 100%
            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(field === 'superman_sewing') $('#check10').prop('checked', isChecked);
        });
    });

    // 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);

                    // نستخدم حلقة دائرية لحقن الـ data لتقليل حجم الكود وتجنب النسيان
                    // هذا الجزء يحقن كل خصائص العميل التي عادت من السيرفر في الـ Option
                    $.each(c, function(key, value) {
                        $(newOption).data(key, value);
                    });

                    $('#customer_select').append(newOption).trigger('change');
                    $('#addCustomerModal').modal('hide');
                    form[0].reset();

                    Swal.fire('تم الحفظ', 'تم إضافة العميل وحفظ شتة المقاسات بنجاح', 'success');
                }
            },
            error: function(xhr) {
                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') }}", // تأكد ان الاسم صح في الـ routes
                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 class="selected-row" style="font-size: 13px;">
                                <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>
                                <input type="hidden" name="product_ids[]" value="${p.id}">
                            </tr>
                        `;
                        $('#cartTableBody').prepend(rowHtml);
                        $('#product_search').val(''); // فضي الخانة لبحث جديد
                        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;">
                                <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>

@endsection