@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="container-fluid">
    <div class="card shadow-sm">
        <div class="card-header bg-info text-white d-flex justify-content-between align-items-center">
            <h5 class="mb-0"><i class="fa fa-edit"></i> {{ __('sales.edit_invoice_title') }} {{ $invoice->id }}</h5>
            <span class="badge badge-light text-dark">{{ $invoice->created_at->format('Y-m-d') }}</span>
        </div>
        <div class="card-body">
            <form action="{{ route('invoice.edit_process.store') }}" method="POST">
                @csrf
                <input type="hidden" name="invoice_id" value="{{ $invoice->id }}">

                <div class="row">
                    <div class="col-md-4 border-left bg-light p-3">
                        <label class="font-weight-bold text-primary mb-3">
                            <i class="fa fa-info-circle"></i>   {{ __('sales.original_invoice_data') }}
                        </label>

                      <table class="table table-sm table-bordered bg-white">
                        <tr>
                            <th class="bg-light" style="width: 40%;">{{ __('sales.label_invoice_id') }}</th>
                            <td class="font-weight-bold text-danger">{{ $invoice->id }}</td>
                        </tr>
                        <tr>
                            <th class="bg-light">{{ __('sales.label_customer') }}</th>
                            <td>{{ $invoice->customer->name ?? __('sales.not_registered') }}</td>
                        </tr>
                        <tr>
                            <th class="bg-light">{{ __('sales.label_phone') }}</th>
                            <td>{{ $invoice->customer->phone ?? __('sales.not_registered') }}</td>
                        </tr>
                        <tr>
                            <th class="bg-light">{{ __('sales.label_tailor') }}</th>
                            <td>{{ $invoice->employee->name_ar ?? __('sales.no_tailor') }}</td>
                        </tr>
                        <tr>
                            <th class="bg-light">{{ __('sales.label_branch') }}</th>
                            <td>{{ $invoice->branch->name ?? __('sales.main_branch') }}</td>
                        </tr>
                    </table>

                      <div class="form-group mt-4">
                            <label class="font-weight-bold text-danger">
                                <i class="fa fa-tools"></i> {{ __('sales.edit_type_label') }}
                            </label>
                            <select name="edit_type" id="edit_type" class="form-control border-danger" required>
                                <option value="simple">{{ __('sales.edit_type_simple') }}</option>
                                <option value="costly">{{ __('sales.edit_type_costly') }}</option>
                            </select>
                        </div>
                    </div>

              <div class="col-md-8">
                    <label class="font-weight-bold text-success mb-3 border-bottom pb-2 d-block">
                        <i class="fa fa-ruler-combined"></i> {{ __('sales.new_measurements_design') }}
                    </label>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>{{ __('sales.edit_reason_notes') }}</label>
                                <textarea name="notes" class="form-control" rows="4"
                                        placeholder="{{ __('sales.edit_reason_placeholder') }}"></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col-md-6">
                            <label class="text-muted small">{{ __('sales.assigned_tailor_auto') }}</label>
                            <input type="text" class="form-control bg-light"
                                value="{{ $invoice->employee->name_ar ?? __('sales.not_specified') }}" readonly>
                            <input type="hidden" name="tailor_id" value="{{ $invoice->emp_id }}">
                        </div>
                    </div>
                </div>
                </div>
                <div class="row mt-4 border-top pt-3">
                    <div class="col-md-12 text-center">
                        <button type="submit" class="btn btn-primary btn-lg px-5 shadow">
                            <i class="fa fa-save"></i> {{ __('sales.save_and_issue_work_order') }}
                        </button>
                    </div>
                </div>


<div class="modal fade" id="sizesModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content border-0 shadow-lg">
           <div class="modal-header bg-primary text-white">
                <h5 class="modal-title">
                    <i class="fa fa-shopping-cart mr-2"></i> {{ __('sales.add_items_costly_edit') }}
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal"><span>&times;</span></button>
            </div>

            <div class="modal-body bg-light">
                <div class="row">
                <div class="col-md-5">
                        <div class="card shadow-sm border-0">
                            <div class="card-body">
                                <label class="font-weight-bold">
                                    <i class="fa fa-search"></i> {{ __('sales.search_product_label') }}
                                </label>

                                <select id="product_search" class="form-control select2">
                                    <option value="">{{ __('sales.select_product_option') }}</option>
                                    @foreach($products as $product)
                                        <option value="{{ $product->id }}"
                                                data-price="{{ $product->sale_price }}"
                                                data-name="{{ $product->product_name }}">
                                            {{ $product->product_name }} - ({{ $product->sale_price }} {{ __('sales.currency_sar_short') }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                 <div class="col-md-7">
                    <div class="card shadow-sm border-0">
                        <div class="card-header bg-white font-weight-bold text-primary">
                            {{ __('sales.items_to_consume') }}
                        </div>

                        <div class="card-body p-0">
                            <table class="table table-hover mb-0" id="selected_items_table">
                                <thead class="bg-light">
                                    <tr>
                                        <th>{{ __('sales.column_product') }}</th>
                                        <th style="width: 100px;">{{ __('sales.column_quantity') }}</th>
                                        <th>{{ __('sales.column_price') }}</th>
                                        <th>{{ __('sales.column_total') }}</th>
                                        <th>#</th>
                                    </tr>
                                </thead>
                                <tbody id="items_list">
                                    </tbody>
                                <tfoot>
                                    <tr class="bg-light font-weight-bold">
                                        <td colspan="3" class="text-right">{{ __('sales.total_edit_cost') }}</td>
                                        <td id="total_edit_cost">0.00</td>
                                        <td>{{ __('sales.currency_sar') }}</td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
                </div>
            </div>

           <div class="modal-footer bg-white border-0">
                <input type="hidden" name="total_amount" id="final_total_input" value="0">

                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
                    {{ __('sales.cancel_modal') }}
                </button>

                <button type="button" class="btn btn-primary btn-lg px-5 shadow" id="confirm_edit_items" data-dismiss="modal">
                    {{ __('sales.confirm_and_calculate') }}
                </button>
            </div>
        </div>
    </div>
</div>
        <input type="hidden" name="additional_cost" id="main_additional_cost" value="0">
            </form>
        </div>
    </div>
</div>


{{-- بداية 2. كود المودال (Sizes Modal) --}}



{{-- نهاية 2. كود المودال (Sizes Modal) --}}

@section('js')

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

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

    // 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>${name} <input type="hidden" name="products[]" value="${id}"></td>
                <td><input type="number" name="quantities[]" class="form-control form-control-sm qty" value="1" min="1"></td>
                <td class="price">${price}</td>
                <input type="hidden" name="prices[]" value="${price}">
                <td class="subtotal text-primary font-weight-bold">${price}</td>
                <td><button type="button" class="btn btn-sm btn-danger remove-item"><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', '.qty', function() {
        let row = $(this).closest('tr');
        let qty = parseFloat($(this).val()) || 0;
        let price = parseFloat(row.find('.price').text()) || 0;
        row.find('.subtotal').text((qty * price).toFixed(2));
        calculateTotal();
    });

    // 5. تعريف دالة الحساب (لازم تكون مستقلة داخل الـ ready)
        function calculateTotal() {
            let total = 0;
            $('.subtotal').each(function() {
                total += parseFloat($(this).text()) || 0;
            });

            // تحديث الرقم في المودال (للعرض فقط)
            $('#total_edit_cost').text(total.toFixed(2));

            // تحديث الحقل المخفي اللي هيتبعت فعلياً للكنترولر
            $('input[name="additional_cost"]').val(total.toFixed(2));

            console.log("تم تجهيز المبلغ للإرسال:", total);
        }

});
</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
<script>
$(document).ready(function() {
    $('#edit_type').on('change', function() {
        if ($(this).val() === 'costly') {
            // فتح المودال تلقائياً
            $('#sizesModal').modal('show');

            // لو عندك قسم "بيانات القماش" خليه يظهر برضه بـ ID مختلف
            $('#additional_info_section').slideDown();
        } else {
            $('#additional_info_section').slideUp();
        }
    });
});
</script>
@endsection
@endsection