@extends('layouts.master')
@section('css')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    .form-control-lg { border-radius: 10px; font-size: 1.1rem; }
    .card { border-radius: 15px; }
    .action-btns i { cursor: pointer; margin: 0 5px; font-size: 1.1rem; }
</style>
@section('title') {{ __('home.confirm_delivery') }} @stop
@endsection

@section('content')
<div class="container-fluid mt-5">
    <div class="row justify-content-center">
        <div class="col-md-11">
            <div id="ajax-alert-container"></div>

            <div class="card shadow-sm border-0 mb-5">
                <div class="card-header bg-dark text-white py-3">
                    <h5 class="mb-0" id="form-title"><i class="fas fa-plus-circle me-2"></i> {{ __('home.add_new_delivery_note') }}</h5>
                </div>
                <div class="card-body p-4">
                    <form id="delivery-note-form">
                        @csrf
                        <input type="hidden" name="note_id" id="note_id">

                        <div class="row g-4">
                            <div class="col-md-3">
                                <label class="form-label fw-bold">{{ __('home.delivery_number') }}</label>
                                <input type="text" name="code" id="code" class="form-control form-control-lg" required>
                            </div>
                       <div class="col-md-3">
                            <label class="form-label fw-bold">{{ __('home.customer') }}</label>
                            <select name="customer_id" id="customer_search" class="form-control form-control-lg"></select>
                        </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">{{ __('home.product_search') }}</label>
                                <select name="product_id" id="product_search" class="form-control form-control-lg"></select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">{{ __('home.quantity') }}</label>
                                <input type="number" name="quantity" id="quantity" class="form-control form-control-lg" required>
                            </div>
                        </div>

                        <div class="text-center mt-5">
                            <button type="submit" id="save-btn" class="btn btn-success btn-lg px-5 shadow-sm">
                                <i class="fas fa-save me-2"></i> {{ __('home.save_data') }}
                            </button>
                            <button type="button" id="cancel-edit" class="btn btn-secondary btn-lg px-4 d-none">
                                {{ __('home.cancel') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card shadow-sm border-0">
                <div class="card-header bg-secondary text-white">{{ __('home.all_notes') }}</div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0 text-center" id="notes-table">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>{{ __('home.code') }}</th>
                                    <th>{{ __('home.product') }}</th>
                                    <th>{{ __('home.customer') }}</th>
                                    <th>{{ __('home.qty') }}</th>
                                    <th>{{ __('home.actions') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($notes as $note)
                                <tr id="row-{{ $note->id }}">
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $note->code }}</td>
                                    <td>{{ $note->product->product_name ?? '---' }}</td>
                                    <td>{{ $note->customer->name ?? '---' }}</td>
                                    <td>{{ $note->quantity }}</td>
                                   <td class="action-btns">
                                        <a href="{{ route('delivery-notes.print', $note->id) }}"
                                        target="_blank"
                                        class="btn btn-sm btn-secondary"
                                        title="{{ __('home.print') }}">
                                            <i class="fas fa-print"></i>
                                        </a>

                                        <button class="btn btn-sm btn-info edit-btn"
                                                data-id="{{ $note->id }}"
                                                data-customer-id="{{ $note->customer_id }}"
                                                data-customer-name="{{ $note->customer->name ?? '' }}" {{-- السطر ده مهم جداً للـ Ajax --}}
                                                data-code="{{ $note->code }}"
                                                data-qty="{{ $note->quantity }}"
                                                data-prod-id="{{ $note->product_id }}"
                                                data-prod-name="{{ $note->product->product_name ?? '' }}">
                                            <i class="fas fa-edit"></i>
                                        </button>

                                        <button class="btn btn-sm btn-danger delete-btn"
                                                data-id="{{ $note->id }}"
                                                title="{{ __('home.delete') }}">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
$(document).ready(function() {
    // 1. تهيئة Select2
    $('#product_search').select2({
        minimumInputLength: 2,
        ajax: {
            url: "{{ route('products.search') }}",
            dataType: 'json',
            delay: 250,
            data: function (params) { return { q: params.term }; },
            processResults: function (data) { return { results: data }; },
            cache: true
        },
        placeholder: "{{ __('home.type_to_search') }}",
        dir: "rtl"
    });

    $(document).ready(function() {
    // إعداد بحث العملاء
    $('#customer_search').select2({
        placeholder: "{{ __('home.type_to_search') }}",
        allowClear: true,
        dir: "rtl",
        ajax: {
            url: "{{ route('customers.ajax') }}",
            type: "get",
            dataType: 'json',
            delay: 250, // انتظار 250ms بعد الكتابة لتقليل الضغط على السيرفر
            data: function (params) {
                return {
                    search: params.term // النص المكتوب في البحث
                };
            },
            processResults: function (response) {
                return {
                    results: response
                };
            },
            cache: true
        }
    });
});

    // 2. الحفظ والتحديث (Ajax)
    $('#delivery-note-form').on('submit', function(e) {
        e.preventDefault();
        let btn = $('#save-btn');
        btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');

        $.ajax({
            url: "{{ route('delivery-notes.store') }}",
            method: "POST",
            data: $(this).serialize(),
            success: function(response) {
                location.reload(); // أفضل وسيلة لتحديث الجدول والترتيب حالياً
            },
            error: function(xhr) {
                alert(xhr.responseJSON.message);
                btn.prop('disabled', false).html('<i class="fas fa-save me-2"></i> {{ __("home.save_data") }}');
            }
        });
    });

    // 3. التعديل: سحب الداتا للفورم فوق
 $(document).on('click', '.edit-btn', function() {
    let id = $(this).data('id');
    let code = $(this).data('code');
    let qty = $(this).data('qty');

    // بيانات العميل
    let customerId = $(this).data('customer-id');
    let customerName = $(this).data('customer-name'); // تأكد إنك ضفتها في الـ data attribute في الزرار

    // بيانات المنتج
    let prodId = $(this).data('prod-id');
    let prodName = $(this).data('prod-name');

    // تعبئة الحقول الأساسية
    $('#note_id').val(id);
    $('#code').val(code);
    $('#quantity').val(qty);

    // 1. ضبط العميل في الـ Select2 الديناميكي
    if (customerId) {
        let customerOption = new Option(customerName, customerId, true, true);
        $('#customer_search').empty().append(customerOption).trigger('change');
    }

    // 2. ضبط المنتج في الـ Select2 الديناميكي
    if (prodId) {
        let productOption = new Option(prodName, prodId, true, true);
        $('#product_search').empty().append(productOption).trigger('change');
    }

    // تغيير عنوان الفورم وإظهار زر الإلغاء
    $('#form-title').html('<i class="fas fa-edit me-2"></i> {{ __("home.edit_note") }}');
    $('#cancel-edit').removeClass('d-none');

    // سكرول لفوق بسلاسة
    window.scrollTo({ top: 0, behavior: 'smooth' });
});

    // 4. الحذف
    $(document).on('click', '.delete-btn', function() {
        if(confirm("{{ __('home.confirm_delete_msg') }}")) {
            let id = $(this).data('id');
            $.ajax({
                url: "{{ url('delivery-notes/delete') }}/" + id,
                method: "DELETE",
                data: { _token: "{{ csrf_token() }}" },
                success: function() { $('#row-'+id).remove(); }
            });
        }
    });

    // 5. إلغاء التعديل
    $('#cancel-edit').on('click', function() {
        $('#delivery-note-form')[0].reset();
        $('#note_id').val('');
        $('#product_search').val(null).trigger('change');
        $(this).addClass('d-none');
        $('#form-title').html('<i class="fas fa-plus-circle me-2"></i> {{ __("home.add_new_delivery_note") }}');
    });
});
</script>
@endsection