@extends('layouts.master')

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

@section('css')
<!-- Internal Data table css -->
<link href="{{ URL::asset('assets/plugins/datatable/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
<link href="{{ URL::asset('assets/plugins/datatable/css/buttons.bootstrap4.min.css') }}" rel="stylesheet">
<link href="{{ URL::asset('assets/plugins/datatable/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" />
<link href="{{ URL::asset('assets/plugins/datatable/css/jquery.dataTables.min.css') }}" rel="stylesheet">
<link href="{{ URL::asset('assets/plugins/datatable/css/responsive.dataTables.min.css') }}" rel="stylesheet">
<link href="{{ URL::asset('assets/plugins/select2/css/select2.min.css') }}" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

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

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

    .edit-process-card-header {
        background: #0f172a;
        color: #ffffff;
        padding: 16px 22px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .section-title-label {
        font-size: 15px;
        font-weight: 800;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* جدول بيانات الفاتورة الأصلية */
    .table-original-info {
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 0;
    }

    .table-original-info th {
        background: #f8fafc !important;
        color: #475569 !important;
        font-weight: 800 !important;
        font-size: 13.5px !important;
        padding: 10px 14px !important;
        border-color: #f1f5f9 !important;
    }

    .table-original-info td {
        padding: 10px 14px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        border-color: #f1f5f9 !important;
    }

    /* حقول الإدخال */
    .form-control-modern {
        border: 1.5px solid #cbd5e1 !important;
        border-radius: 9px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        padding: 10px 14px !important;
        color: #0f172a !important;
        transition: all 0.2s ease;
    }

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

    /* قسم التعديل المكلف الإضافي */
    .costly-edit-box {
        background: #fff8f8;
        border: 1.5px solid #fecaca;
        border-radius: 12px;
        padding: 18px;
        margin-top: 15px;
    }

    /* زر الحفظ الرئيسي */
    .btn-save-order {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        border: none;
        color: #ffffff !important;
        font-size: 16px !important;
        font-weight: 900 !important;
        padding: 14px 45px !important;
        border-radius: 10px !important;
        box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all 0.25s ease;
        cursor: pointer;
    }

    .btn-save-order:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(16, 185, 129, 0.45);
    }

    /* ==================== تنسيقات المودال ==================== */
    .modal-content-mfg {
        border-radius: 14px !important;
        border: none !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        overflow: hidden;
    }

    .modal-header-mfg {
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
        color: #ffffff;
        padding: 16px 22px;
    }

    .table-modal-items thead th {
        background: #0f172a !important;
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        padding: 12px 10px !important;
        border: none !important;
    }

    .table-modal-items tbody td {
        vertical-align: middle !important;
        padding: 10px 8px !important;
        font-size: 13.5px !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }
</style>
@endsection

@section('content')
<div class="container-fluid p-2 mt-2">
    @if ($errors->any() || session('error'))
        <div class="alert alert-danger font-weight-bold">
            {{ session('error') }}
            @if ($errors->any())
                <ul class="mb-0 mt-1">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            @endif
        </div>
    @endif

    <div class="edit-process-card shadow-sm">

        <div class="edit-process-card-header">
            <h5 class="mb-0 font-weight-bold">
                <i class="fa fa-edit text-info ml-1"></i> {{ __('sales.edit_invoice_title') }} #{{ $invoice->id }}
            </h5>
            <span class="badge badge-light border px-3 py-1 font-weight-bold text-dark" style="font-size: 13px;">
                <i class="fa fa-calendar text-primary ml-1"></i> {{ $invoice->created_at->format('Y-m-d') }}
            </span>
        </div>

        <div class="card-body p-4">

            {{-- بداية النموذج الشامل --}}
            <form action="{{ route('invoice.edit_process.store') }}" method="POST" id="editInvoiceForm">
                @csrf
                <input type="hidden" name="invoice_id" value="{{ $invoice->id }}">
                <input type="hidden" name="tailor_id" value="{{ $invoice->emp_id }}">
                <input type="hidden" name="additional_cost" id="main_additional_cost" value="0">

                <div class="row">

                    {{-- 1. الجانب الأيمن: بيانات الفاتورة الأصلية ونوع التعديل --}}
                    <div class="col-lg-4 col-md-5 mb-4 mb-md-0 p-3 bg-light rounded" style="border: 1px solid #e2e8f0;">
                        <label class="section-title-label text-primary border-bottom pb-2">
                            <i class="fa fa-info-circle"></i> {{ __('sales.original_invoice_data') }}
                        </label>

                        <div class="table-responsive">
                            <table class="table table-sm bg-white table-original-info shadow-sm">
                                <tr>
                                    <th style="width: 40%;">{{ __('sales.label_invoice_id') }}</th>
                                    <td class="text-primary font-weight-bold">#{{ $invoice->id }}</td>
                                </tr>
                                <tr>
                                    <th>{{ __('sales.label_customer') }}</th>
                                    <td>{{ $invoice->customer->name ?? __('sales.not_registered') }}</td>
                                </tr>
                                <tr>
                                    <th>{{ __('sales.label_phone') }}</th>
                                    <td dir="ltr" class="text-right">{{ $invoice->customer->phone ?? __('sales.not_registered') }}</td>
                                </tr>
                                <tr>
                                    <th>{{ __('sales.label_tailor') }}</th>
                                    <td>{{ $invoice->employee->name_ar ?? __('sales.no_tailor') }}</td>
                                </tr>
                                <tr>
                                    <th>{{ __('sales.label_branch') }}</th>
                                    <td>{{ $invoice->branch->name ?? __('sales.main_branch') }}</td>
                                </tr>
                            </table>
                        </div>

                        {{-- اختيار نوع التعديل --}}
                        <div class="mt-4 p-3 bg-white rounded border">
                            <label class="font-weight-bold text-dark d-block mb-2" style="font-size: 14px;">
                                <i class="fa fa-cogs text-danger"></i> {{ __('sales.edit_type_label') }}
                            </label>
                            <select name="edit_type" id="edit_type" class="form-control form-control-modern font-weight-bold" required>
                                <option value="simple">{{ __('sales.edit_type_simple') }}</option>
                                <option value="costly">{{ __('sales.edit_type_costly') }}</option>
                            </select>
                        </div>
                    </div>

                    {{-- 2. الجانب الأيسر: تفاصيل ومواصفات التعديل والخامات --}}
                    <div class="col-lg-8 col-md-7 pr-md-4">
                        <label class="section-title-label text-success border-bottom pb-2">
                            <i class="fa fa-ruler-combined"></i> {{ __('sales.new_measurements_design') }}
                        </label>

                        @php
                            $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' => 'رقبة سادة', 'step_width' => 'وسع خطوة',
                                'arm_center_width' => 'وسط اليد', 'cuff_width' => 'وسع الكبك',
                                'cuff_hem' => 'كفة الكبك', 'bottom_width' => 'وسع أسفل',
                                'bottom_hem' => 'كفة أسفل', 'dropped_shoulder' => 'كتف نازل',
                                'buttons_count' => 'عدد الطقطق', 'pocket_type' => 'نوع الجيب',
                                'notes_one' => 'ملاحظة 1', 'notes_two' => 'ملاحظة 2',
                                'notes_three' => 'ملاحظة 3', 'notes_four' => 'ملاحظة 4',
                            ];
                            $featureGroups = [
                                ['hand_plain', 'kabak_plain', 'hidden_pockets'],
                                ['visible_pockets', 'janzour', 'hidden'],
                                ['visible_hidden', 'hidden_sewing', 'twisted_sewing'],
                            ];
                            $styleSections = [
                                'neck' => ['label' => __('sales.neck_section'), 'folder' => 'neck', 'max' => 25],
                                'janzour' => ['label' => __('sales.janzour_section'), 'folder' => 'janzour', 'max' => 10],
                                'sleeve' => ['label' => __('sales.sleeve_section'), 'folder' => 'sleeve', 'max' => 19],
                                'side_p' => ['label' => __('sales.side_p_section'), 'folder' => 'side_p', 'max' => 8],
                                'front_p' => ['label' => __('sales.front_p_section'), 'folder' => 'front_p', 'max' => 17],
                            ];
                        @endphp

                        @forelse($orders as $order)
                            @php
                                $orderMeasurements = is_array($order->order_measurements)
                                    ? $order->order_measurements
                                    : (json_decode($order->order_measurements ?? '{}', true) ?: []);
                                $orderStyles = is_array($order->order_styles)
                                    ? $order->order_styles
                                    : (json_decode($order->order_styles ?? '{}', true) ?: []);
                                $orderFeatures = is_array($order->order_features)
                                    ? $order->order_features
                                    : (json_decode($order->order_features ?? '{}', true) ?: []);
                            @endphp
                            <div class="card border shadow-sm mb-3">
                                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                                    <strong>{{ $order->product->product_name ?? $order->group_ar ?? 'الصنف' }}</strong>
                                    <span class="text-muted">#{{ $order->id }}</span>
                                </div>
                                <div class="card-body">
                                    <input type="hidden" name="orders[{{ $order->id }}][id]" value="{{ $order->id }}">
                                    <div class="row">
                                        <div class="col-md-4 form-group">
                                            <label>الكمية</label>
                                            <input type="number" min="0" step="any" class="form-control form-control-modern" name="orders[{{ $order->id }}][qty]" value="{{ old('orders.' . $order->id . '.qty', $order->qty) }}">
                                        </div>
                                        <div class="col-md-4 form-group">
                                            <label>السعر</label>
                                            <input type="number" min="0" step="0.01" class="form-control form-control-modern" name="orders[{{ $order->id }}][price]" value="{{ old('orders.' . $order->id . '.price', $order->price) }}">
                                        </div>
                                        <div class="col-md-4 form-group">
                                            <label>استهلاك القماش (متر)</label>
                                            <input type="number" min="0" step="0.01" class="form-control form-control-modern" name="orders[{{ $order->id }}][total_measurements]" value="{{ old('orders.' . $order->id . '.total_measurements', $order->total_measurements) }}">
                                        </div>
                                    </div>

                                    <h6 class="font-weight-bold text-primary border-bottom pb-2">المقاسات والملاحظات</h6>
                                    <div class="row">
                                        @foreach($measurementLabels as $key => $label)
                                            <div class="col-lg-3 col-md-4 col-6 form-group mb-2">
                                                <label class="small mb-1">{{ $label }}</label>
                                                @if($key === 'pocket_type')
                                                    @php
                                                        $savedPocketType = $orderMeasurements[$key] ?? $order->pocket_type ?? '';
                                                        $savedPocketType = in_array($savedPocketType, ['سحاب', 'zipper'], true) ? 'سحاب' : 'زرار';
                                                    @endphp
                                                    <select class="form-control form-control-sm" name="orders[{{ $order->id }}][measurements][{{ $key }}]">
                                                        <option value="زرار" {{ old('orders.' . $order->id . '.measurements.' . $key, $savedPocketType) === 'زرار' ? 'selected' : '' }}>زرار</option>
                                                        <option value="سحاب" {{ old('orders.' . $order->id . '.measurements.' . $key, $savedPocketType) === 'سحاب' ? 'selected' : '' }}>سحاب</option>
                                                    </select>
                                                @else
                                                    <input type="text" class="form-control form-control-sm" name="orders[{{ $order->id }}][measurements][{{ $key }}]" value="{{ old('orders.' . $order->id . '.measurements.' . $key, $orderMeasurements[$key] ?? ($order->$key ?? '')) }}">
                                                @endif
                                            </div>
                                        @endforeach
                                    </div>

                                    @php $featureValues = $orderFeatures['data'] ?? $orderFeatures; @endphp
                                    <h6 class="font-weight-bold text-warning border-bottom pb-2 mt-3">خيارات الخياطة</h6>
                                    <div class="row">
                                        @foreach($featureGroups as $featureGroup)
                                            @foreach($featureGroup as $feature)
                                                <div class="col-md-4 col-6 mb-2">
                                                    <div class="custom-control custom-checkbox">
                                                        <input type="hidden" name="orders[{{ $order->id }}][features][{{ $feature }}]" value="0">
                                                        <input type="checkbox" class="custom-control-input" id="edit_{{ $order->id }}_{{ $feature }}"
                                                               name="orders[{{ $order->id }}][features][{{ $feature }}]" value="1"
                                                               {{ old('orders.' . $order->id . '.features.' . $feature, !empty($featureValues[$feature])) ? 'checked' : '' }}>
                                                        <label class="custom-control-label" for="edit_{{ $order->id }}_{{ $feature }}">{{ __('sales.' . $feature) }}</label>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endforeach
                                    </div>

                                    <h6 class="font-weight-bold text-success border-bottom pb-2 mt-3">الموديلات</h6>
                                    <div class="row">
                                        @foreach($styleSections as $styleKey => $styleInfo)
                                            @php
                                                $styleValue = $orderStyles[$styleKey] ?? [];
                                                $styleModel = is_array($styleValue) ? ($styleValue['model'] ?? 0) : $styleValue;
                                                $styleNote = is_array($styleValue) ? ($styleValue['note'] ?? '') : '';
                                                $displayModel = old('orders.' . $order->id . '.styles.' . $styleKey . '.model', $styleModel);
                                            @endphp
                                            <div class="col-lg col-md-4 col-6 mb-3">
                                                <div class="card h-100 text-center {{ $displayModel ? 'border-success' : 'border-light' }}" style="min-width:125px;">
                                                    <div class="card-header py-2 font-weight-bold">{{ $styleInfo['label'] }}</div>
                                                    <div class="d-flex align-items-center justify-content-between p-1">
                                                        <button type="button" class="btn btn-sm btn-light edit-style-prev" data-target="edit_style_{{ $order->id }}_{{ $styleKey }}">‹</button>
                                                        <img id="edit_style_img_{{ $order->id }}_{{ $styleKey }}"
                                                             src="{{ asset('assets/img/models/' . $styleInfo['folder'] . '/' . ($displayModel ?: 1) . '.png') }}"
                                                             data-folder="{{ $styleInfo['folder'] }}" data-max="{{ $styleInfo['max'] }}"
                                                             style="height:90px;max-width:75%;object-fit:contain;">
                                                        <button type="button" class="btn btn-sm btn-light edit-style-next" data-target="edit_style_{{ $order->id }}_{{ $styleKey }}">›</button>
                                                    </div>
                                                    <div class="card-body p-2">
                                                        <input type="number" min="0" max="{{ $styleInfo['max'] }}" id="edit_style_{{ $order->id }}_{{ $styleKey }}"
                                                               class="form-control form-control-sm text-center edit-style-model"
                                                               name="orders[{{ $order->id }}][styles][{{ $styleKey }}][model]" value="{{ old('orders.' . $order->id . '.styles.' . $styleKey . '.model', $styleModel) }}"
                                                               data-image="edit_style_img_{{ $order->id }}_{{ $styleKey }}">
                                                        <input type="text" class="form-control form-control-sm mt-2 text-center" placeholder="ملاحظة الموديل"
                                                               name="orders[{{ $order->id }}][styles][{{ $styleKey }}][note]" value="{{ old('orders.' . $order->id . '.styles.' . $styleKey . '.note', $styleNote) }}">
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="alert alert-warning">لا توجد تفاصيل أصناف مرتبطة بهذه الفاتورة.</div>
                        @endforelse

                        <div class="row">
                            <div class="col-12 mb-3">
                                <div class="form-group mb-0">
                                    <label class="font-weight-bold text-dark mb-2" style="font-size: 13.5px;">
                                        {{ __('sales.edit_reason_notes') }}
                                    </label>
                                    <textarea name="notes" class="form-control form-control-modern" rows="4"
                                        placeholder="{{ __('sales.edit_reason_placeholder') }}" style="line-height: 1.6;"></textarea>
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <div class="form-group mb-0">
                                    <label class="text-muted font-weight-bold small mb-1">{{ __('sales.assigned_tailor_auto') }}</label>
                                    <input type="text" class="form-control form-control-modern bg-light"
                                        value="{{ $invoice->employee->name_ar ?? __('sales.not_specified') }}" readonly>
                                </div>
                            </div>
                        </div>

                        {{-- سكشن التعديل المكلف (يظهر عند اختيار تعديل مكلف) --}}
                        <div id="costly_section" class="costly-edit-box" style="display: none;">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6 class="font-weight-bold text-danger mb-0">
                                    <i class="fa fa-cubes"></i> تفاصيل التكلفة والخامات المستهلكة
                                </h6>
                                <button type="button" class="btn btn-sm btn-outline-danger font-weight-bold" data-toggle="modal" data-target="#sizesModal">
                                    <i class="fa fa-plus-circle ml-1"></i> فتح قائمة الأصناف والخامات
                                </button>
                            </div>

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

                                {{-- عرض إجمالي التكلفة الإضافية --}}
                                <div class="col-md-6 text-center text-md-left">
                                    <label class="font-weight-bold text-muted small d-block mb-1">إجمالي تكلفة الخامات المضافة:</label>
                                    <span class="badge badge-danger p-2 font-weight-bold" style="font-size: 15px;">
                                        <span id="display_additional_cost">0.00</span> ريال
                                    </span>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>

                {{-- زر الحفظ النهائي --}}
                <div class="row mt-4 border-top pt-4">
                    <div class="col-12 text-center">
                        <button type="submit" class="btn btn-save-order">
                            <i class="fa fa-save"></i>
                            <span>{{ __('sales.save_and_issue_work_order') }}</span>
                        </button>
                    </div>
                </div>

                {{-- مودال الخامات المستهلكة (داخل الـ Form لضمان إرسال البيانات للكنترولر) --}}
                <div class="modal fade" id="sizesModal" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
                        <div class="modal-content modal-content-mfg">

                            <div class="modal-header modal-header-mfg d-flex align-items-center justify-content-between">
                                <h5 class="modal-title mb-0">
                                    <i class="fa fa-shopping-cart ml-2 text-warning"></i> {{ __('sales.add_items_costly_edit') }}
                                </h5>
                                <button type="button" class="close text-white" data-dismiss="modal" style="opacity: 0.9;">
                                    <span>&times;</span>
                                </button>
                            </div>

                            <div class="modal-body bg-light p-4">

                                {{-- حقل البحث عن الأصناف --}}
                                <div class="card shadow-sm border-0 mb-4" style="border-radius: 10px;">
                                    <div class="card-body p-3">
                                        <label class="font-weight-bold text-dark mb-2" style="font-size: 13.5px;">
                                            <i class="fa fa-search text-primary"></i> {{ __('sales.search_product_label') }}
                                        </label>
                                        <select id="product_search" class="form-control select2" style="width: 100%;">
                                            <option value="">{{ __('sales.select_product_option') }}</option>
                                            @foreach($products as $product)
                                                <option value="{{ $product->id }}"
                                                        data-price="{{ $product->purchasingـprice }}"
                                                        data-name="{{ $product->product_name }}">
                                                    {{ $product->product_name }} - ({{ $product->purchasingـprice }} {{ __('sales.currency_sar_short') }})
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                {{-- جدول الأصناف المختارة --}}
                                <div class="card shadow-sm border-0" style="border-radius: 10px; overflow: hidden;">
                                    <div class="card-header bg-white font-weight-bold text-primary py-3">
                                        <i class="fa fa-list ml-1"></i> {{ __('sales.items_to_consume') }}
                                    </div>
                                    <div class="card-body p-0">
                                        <div class="table-responsive">
                                            <table class="table table-hover mb-0 table-modal-items text-center" id="selected_items_table">
                                                <thead>
                                                    <tr>
                                                        <th style="width: 25%;" class="text-right pr-3">{{ __('sales.column_product') }}</th>
                                                        <th style="width: 15%;">{{ __('sales.column_price') }}</th>
                                                        <th style="width: 50%;">{{ __('sales.column_notes') }}</th>
                                                        <th style="width: 10%;">#</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="items_list">
                                                </tbody>
                                                <tfoot>
                                                    <tr class="bg-light font-weight-bold" style="border-top: 2px solid #e2e8f0;">
                                                        <td colspan="2" class="text-right font-weight-bold text-dark pr-3">
                                                            {{ __('sales.total_edit_cost') }}:
                                                        </td>
                                                        <td id="total_edit_cost" class="text-center font-weight-bold text-primary" style="font-size: 16px;">
                                                            0.00
                                                        </td>
                                                        <td class="font-weight-bold text-muted">{{ __('sales.currency_sar') }}</td>
                                                    </tr>
                                                </tfoot>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div class="modal-footer bg-white border-top p-3 d-flex justify-content-between">
                                <button type="button" class="btn btn-outline-secondary px-4 font-weight-bold" data-dismiss="modal" style="border-radius: 8px;">
                                    {{ __('sales.cancel_modal') }}
                                </button>
                                <button type="button" class="btn btn-primary px-5 font-weight-bold shadow-sm" id="confirm_edit_items" data-dismiss="modal" style="border-radius: 8px;">
                                    <i class="fa fa-check ml-1"></i> {{ __('sales.confirm_and_calculate') }}
                                </button>
                            </div>

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

            </form>
            {{-- نهاية النموذج --}}

        </div>
    </div>
</div>
@endsection

@section('js')
<script>
$(document).ready(function() {
    const modelAssetRoot = @json(asset('assets/img/models'));

    function refreshStyleModel(input) {
        const $input = $(input);
        const maximum = parseInt($input.attr('max'), 10) || 1;
        let model = parseInt($input.val(), 10) || 0;
        model = Math.max(0, Math.min(maximum, model));
        $input.val(model);
        const image = document.getElementById($input.data('image'));
        if (image) {
            image.src = modelAssetRoot + '/' + image.dataset.folder + '/' + (model || 1) + '.png';
        }
        $input.closest('.card').toggleClass('border-success', model > 0).toggleClass('border-light', model === 0);
    }

    $(document).on('input change', '.edit-style-model', function() {
        refreshStyleModel(this);
    });

    $(document).on('click', '.edit-style-prev, .edit-style-next', function() {
        const input = document.getElementById($(this).data('target'));
        if (!input) return;
        const max = parseInt(input.max, 10) || 1;
        let value = parseInt(input.value, 10) || 0;
        value = $(this).hasClass('edit-style-next') ? (value >= max ? 0 : value + 1) : (value <= 0 ? max : value - 1);
        input.value = value;
        refreshStyleModel(input);
    });

    // 1. تفعيل Select2 داخل المودال
    $('#sizesModal').on('shown.bs.modal', function () {
        $('#product_search').select2({
            dropdownParent: $('#sizesModal'),
            width: '100%',
            dropdownAutoWidth: true
        });
    });

    // 2. حدث اختيار الصنف
    $('#product_search').on('change', function (e) {
        let selectedOption = $(this).find('option:selected');
        let id = selectedOption.val();
        let name = selectedOption.data('name');
        let price = selectedOption.data('price');

        if (!id || id === "") return;

        if ($(`#items_list tr[data-id="${id}"]`).length > 0) {
            alert('هذا المنتج مضاف بالفعل');
            $(this).val(null).trigger('change.select2');
            return;
        }

        let row = `
            <tr data-id="${id}">
                <td class="text-right pr-3 font-weight-bold text-dark">
                    ${name}
                    <input type="hidden" name="products[]" value="${id}">
                    <input type="hidden" name="quantities[]" class="qty" value="1">
                </td>
                <td>
                    <input type="number" name="prices[]" class="form-control form-control-sm price text-center font-weight-bold" value="${price}" step="0.01">
                </td>
                <td>
                    <input type="text" name="item_notes[]" class="form-control form-control-sm" placeholder="اكتب التفاصيل والمواصفات هنا...">
                </td>
                <td class="subtotal d-none">${price}</td>
                <td>
                    <button type="button" class="btn btn-sm btn-outline-danger remove-item" style="border-radius: 6px;">
                        <i class="fa fa-trash"></i>
                    </button>
                </td>
            </tr>`;

        $('#items_list').append(row);
        calculateTotal();
        $(this).val(null).trigger('change.select2');
    });

    // 3. حذف صنف
    $(document).on('click', '.remove-item', function() {
        $(this).closest('tr').remove();
        calculateTotal();
    });

    // 4. تحديث الإجمالي عند تغيير السعر
    $(document).on('input', '.price', function() {
        let row = $(this).closest('tr');
        let price = parseFloat($(this).val()) || 0;

        row.find('.subtotal').text(price.toFixed(2));
        calculateTotal();
    });

    // 5. دالة حساب التكلفة
    function calculateTotal() {
        let total = 0;
        $('.price').each(function() {
            total += parseFloat($(this).val()) || 0;
        });

        $('#total_edit_cost').text(total.toFixed(2));
        $('#display_additional_cost').text(total.toFixed(2));
        $('#main_additional_cost').val(total.toFixed(2));
    }

    // 6. التحكم في نوع التعديل (مكلف / بسيط)
    $('#edit_type').on('change', function() {
        if ($(this).val() === 'costly') {
            $('#costly_section').slideDown(250);
            $('#sizesModal').modal('show');
        } else {
            $('#costly_section').slideUp(250);
            $('#waste_quantity').val(0);
            $('#items_list').empty();
            calculateTotal();
        }
    });
});
</script>

@if(session('success'))
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        Swal.fire({
            icon: 'success',
            title: 'تم الحفظ بنجاح',
            text: "{{ session('success') }}",
            timer: 2500,
            showConfirmButton: false,
            position: 'center',
            backdrop: `rgba(0,0,123,0.1)`,
            showClass: {
                popup: 'animate__animated animate__fadeInDown'
            },
            hideClass: {
                popup: 'animate__animated animate__fadeOutUp'
            }
        });
    </script>
@endif
@endsection