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

                        <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() {

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