@extends('layouts.master')
@section('css')
<!--  Owl-carousel css-->
<link href="{{ URL::asset('assets/plugins/owl-carousel/owl.carousel.css') }}" rel="stylesheet" />
<!-- Maps css -->
<link href="{{ URL::asset('assets/plugins/jqvmap/jqvmap.min.css') }}" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap" rel="stylesheet">
@endsection
@section('title')
{{ __('home.delivery_orders') }}
@stop

@section('content')
<div class="container-fluid mt-4">
    <div class="card shadow-sm">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
            <h5 class="mb-0">{{ __('home.delivery_invoice_order') }}</h5>
            <span class="badge bg-light text-primary" id="current_date">{{ date('Y/m/d') }}</span>
        </div>

        <div class="card-body">
            <div class="row mb-4 border-bottom pb-3">
                <div class="col-md-4">
                  <label class="form-label fw-bold">{{ __('home.invoice_number') }}</label>
                    <div class="input-group">
                        <span class="input-group-text bg-primary text-white"><i class="fas fa-search"></i></span>
                        <input type="text" id="invoice_number_search" class="form-control form-control-lg border-primary" placeholder="{{ __('home.enter_invoice_placeholder') }}">
                    </div>
                </div>
            </div>

            <div id="no_data_alert" class="alert alert-info text-center mt-3">
                {{ __('home.please_enter_invoice_to_start') }}
            </div>

            <div id="invoice_info_section" style="display: none;">
                <form id="delivery_form" action="{{ route('delivery.store') }}" method="POST">
                    @csrf
                    <input type="hidden" name="invoice_id" id="hidden_invoice_id">

            <div class="card mb-4 border-success shadow-sm">
                    <div class="card-header bg-success text-white small py-2">
                        {{ __('home.delivery_and_shipping_details') }}
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-3">
                                <label class="form-label small">{{ __('home.receiver_name') }}</label>
                                <input type="text" name="receiver_name" class="form-control form-control-sm" placeholder="{{ __('home.receiver_name_placeholder') }}">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label small">{{ __('home.driver_name') }}</label>
                                <input type="text" id="input_driver_name" name="driver_name" class="form-control form-control-sm" placeholder="{{ __('home.driver_name_placeholder') }}">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label small">{{ __('home.driver_phone') }}</label>
                                <input type="text" id="input_driver_phone" name="driver_phone" class="form-control form-control-sm" placeholder="{{ __('home.driver_phone_placeholder') }}">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label small">{{ __('home.driver_car') }}</label>
                                <input type="text" id="input_driver_car" name="driver_car" class="form-control form-control-sm" placeholder="{{ __('home.driver_car_placeholder') }}">
                            </div>
                        </div>
                    </div>
                </div>

        <div class="card mb-4 border-0 shadow-sm">
                <div class="card-header bg-dark text-white small py-2">
                    {{ __('home.invoice_and_customer_details') }}
                </div>
                <div class="card-body bg-light">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="text-muted small d-block">{{ __('home.branch') }}</label>
                            <span class="fw-bold" id="branch_name">---</span>
                        </div>
                        <div class="col-md-3">
                            <label class="text-muted small d-block">{{ __('home.customer_code') }}</label>
                            <span class="fw-bold" id="customer_code">---</span>
                        </div>
                        <div class="col-md-3">
                            <label class="text-muted small d-block">{{ __('home.customer_name') }}</label>
                            <span class="fw-bold" id="customer_name">---</span>
                        </div>
                        <div class="col-md-3">
                            <label class="text-muted small d-block">{{ __('home.customer_phone') }}</label>
                            <span class="fw-bold" id="customer_phone">---</span>
                        </div>
                    </div>
                </div>
            </div>

                <div class="table-responsive">
                    <table class="table table-hover table-bordered align-middle">
                        <thead class="table-dark">
                            <tr>
                                <th width="5%">{{ __('home.index_no') }}</th>
                                <th width="15%">{{ __('home.product_no') }}</th>
                                <th>{{ __('home.product_name') }}</th>
                                <th width="10%">{{ __('home.unit') }}</th>
                                <th width="10%">{{ __('home.invoice_qty') }}</th>
                                <th width="10%" class="bg-success text-white text-center">
                                    {{ __('home.delivered_qty_now') }}
                                </th>
                                <th width="15%">{{ __('home.notes') }}</th>
                            </tr>
                        </thead>
                        <tbody id="items_table_body">
                            </tbody>
                    </table>
                </div>

                <div class="text-end mt-4">
                    <button type="submit" class="btn btn-success btn-lg px-5">
                        <i class="fas fa-save me-2"></i> {{ __('home.save_delivery_order') }}
                    </button>
                </div>
                </form>
            </div> </div>
    </div>
</div>

<div id="previous_deliveries_section" class="mt-5">
    <div class="card shadow-sm border-info">
        <div class="card-header bg-info text-white d-flex justify-content-between align-items-center py-2">
            <h6 class="mb-0"><i class="fas fa-history me-2"></i> {{ __('home.previous_delivery_orders') }}</h6>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-sm table-striped table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>{{ __('home.order_no') }}</th>
                            <th>{{ __('home.invoice_number') }}</th> {{-- أضفنا رقم الفاتورة هنا لأن الجدول عام --}}
                            <th>{{ __('home.delivery_date') }}</th>
                            <th>{{ __('home.receiver_name') }}</th>
                            <th>{{ __('home.driver_name') }}</th>
                            <th>{{ __('home.items_count') }}</th>
                            <th>{{ __('home.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody id="previous_deliveries_body">
                        @forelse($recentDeliveries as $order)
                            <tr>
                                <td>{{ $order->id }}</td>
                                <td>{{ $order->invoice->id ?? '---' }}</td>
                                <td>{{ $order->delivery_date ?? $order->created_at->format('Y-m-d') }}</td>
                                <td>{{ $order->receiver_name }}</td>
                                <td>{{ $order->driver_name }}</td>
                                <td>
                                    <span class="badge bg-info">
                                        {{ $order->items->count() }} {{ __('home.items') }}
                                    </span>
                                </td>
                                <td>
                                    <a href="{{ route('delivery.print', $order->id) }}" target="_blank" class="btn btn-sm btn-outline-dark" title="{{ __('home.print') }}">
                                        <i class="fas fa-print"></i>
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center py-3 text-muted">
                                    {{ __('home.no_data_found') }}
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
$(document).ready(function() {
    // رسالة النجاح
    @if(session('success'))
        Swal.fire({
            icon: 'success',
            title: "{{ __('home.operation_success') }}", // ترجمة العنوان
            text: "{{ session('success') }}",
            confirmButtonText: "{{ __('home.ok') }}", // ترجمة الزر
            timer: 3000,
            timerProgressBar: true
        });
    @endif

    // رسالة الخطأ
    @if(session('error'))
        Swal.fire({
            icon: 'error',
            title: "{{ __('home.error_occurred') }}", // ترجمة العنوان
            text: "{{ session('error') }}",
            confirmButtonText: "{{ __('home.try_again') }}" // ترجمة الزر
        });
    @endif
});
</script>
<script>
$(document).ready(function() {
    $('#invoice_number_search').on('keypress', function(e) {
        if (e.which == 13) { // عند الضغط على Enter
            e.preventDefault(); // منع الفورم من الإرسال التلقائي لو ضغط انتر

            let inv_id = $(this).val();

            // إظهار تنبيه جاري التحميل وإخفاء قسم البيانات
            $('#no_data_alert').show().removeClass('alert-danger').text('جاري جلب بيانات الفاتورة...');
            $('#invoice_info_section').hide();

            $.ajax({
                url: "{{ url('get-invoice-details') }}/" + inv_id,
                type: 'GET',
                success: function(data) {
                    console.log("Data Received:", data);

                    if (data.invoice) {
                        // 1. القضاء على مشكلة الـ Null: حقن الـ ID في الحقل المخفي فوراً
                        $('#hidden_invoice_id').val(data.invoice.id);

                        // تأكيد إضافي في الكونسول عشان لو حصلت مشكلة تعرف الـ ID اتحقن ولا لأ
                        console.log("Hidden Invoice ID set to: " + $('#hidden_invoice_id').val());

                        // 2. إظهار قسم البيانات
                        $('#no_data_alert').hide();
                        $('#invoice_info_section').fadeIn();

                        // 3. تعبئة بيانات العميل والفرع (تأكد أن الـ IDs في الـ HTML مطابقة)
                        $('#branch_name').text(data.invoice.branch ? data.invoice.branch.name : '---');

                        let customer = data.invoice.customer || {};
                        $('#customer_code').text(data.invoice.customer_id || '---');
                        $('#customer_name').text(customer.name || data.invoice.customer_name || '---');
                        $('#customer_phone').text(customer.phone || data.invoice.phone || '---');

                        // 4. تعبئة بيانات السائق تلقائياً لو موجودة
                        if (data.invoice.commissions && data.invoice.commissions.length > 0) {
                            let rep = data.invoice.commissions[0].representative;
                            if (rep) {
                                $('#input_driver_name').val(rep.name || '');
                                $('#input_driver_phone').val(rep.phone || '');
                                $('#input_driver_car').val(rep.area || '');
                            }
                        }

                        // 5. بناء جدول الأصناف
                       let rows = '';
                            let visibleItemsCount = 0;

                            if (data.items && data.items.length > 0) {
                                data.items.forEach((item) => {
                                    // --- الحسبة الجديدة: الكمية المتبقية القابلة للصرف ---
                                    let qtyOriginal = parseFloat(item.quantity) || 0;
                                    let qtyReceived = parseFloat(item.received_quantity) || 0;
                                    let qtyRemaining = qtyOriginal - qtyReceived;

                                    // التحقق من أن هناك كمية متبقية للصرف
                                    if (qtyRemaining > 0) {
                                        visibleItemsCount++;
                                        let product = item.product_data || {};

                                        rows += `
                                            <tr>
                                                <td>${visibleItemsCount}</td>
                                                <td>${product.Product_Code || '---'}</td>
                                                <td>${product.product_name || '---'}</td>
                                                <td>${product.unit || '---'}</td>

                                                <td class="text-center fw-bold text-primary">${qtyRemaining}</td>

                                                <td>
                                                    <input type="number" name="received_qty[${item.id}]"
                                                        class="form-control text-center border-success"
                                                        value="${qtyRemaining}"
                                                        min="0"
                                                        max="${qtyRemaining}">
                                                </td>
                                                <td><input type="text" name="notes[${item.id}]" class="form-control"></td>
                                            </tr>`;
                                    }
                                });

                                if (visibleItemsCount === 0) {
                                    rows = '<tr><td colspan="7" class="text-center text-danger fw-bold">عذراً، تم تسليم جميع الكميات في هذه الفاتورة بالكامل مسبقاً.</td></tr>';
                                    $('#no_data_alert').show().addClass('alert-danger').text('تنبيه: لا توجد كميات متاحة للتسليم في هذه الفاتورة.');
                                }
                            } else {
                                rows = '<tr><td colspan="7" class="text-center text-danger">لا توجد أصناف في هذه الفاتورة</td></tr>';
                            }
                            $('#items_table_body').html(rows);
                    }
                },
                error: function(xhr) {
                    $('#invoice_info_section').hide();
                    let errorMsg = 'عذراً، رقم الفاتورة غير صحيح أو غير موجود.';
                    if(xhr.responseJSON && xhr.responseJSON.message) errorMsg = xhr.responseJSON.message;
                    $('#no_data_alert').show().addClass('alert-danger').text(errorMsg);
                    console.error("AJAX Error:", xhr);
                }
            });
        }
    });
});
</script>
@endsection