@extends('layouts.master')
@section('css')
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Internal Data table css -->


<!-- Internal Spectrum-colorpicker css -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />


<style>
    /* تظبيط شكل الحاوية الرئيسية */
    .select2-container--bootstrap-5 .select2-selection {
        border: 1px solid #ced4da !important;
        min-height: 40px !important;
        padding-top: 5px !important;
    }

    /* تظبيط حقل البحث داخل الدروب داون */
    .select2-container--bootstrap-5 .select2-search__field {
        border-radius: 5px !important;
        padding: 8px !important;
        border: 1px solid #ddd !important;
        outline: none !important;
    }

    /* تغيير لون السطر المختار عند تمرير الماوس */
    .select2-container--bootstrap-5 .select2-results__option--highlighted {
        background-color: #007bff !important;
        color: #fff !important;
    }

    /* تظبيط المسافات بين الاسم والرقم داخل القائمة */
    .select2-results__option {
        padding: 10px 15px !important;
        font-size: 14px !important;
        border-bottom: 1px solid #f8f9fa;
    }
</style>
@section('title')
{{ __('home.external_edits') }}
@stop
@endsection

@section('content')
<div class="row mt-5">
    <div class="col-md-12">
        <div class="card card-statistics h-100">
            <div class="card-body">

                <div class="col-12 d-flex justify-content-between align-items-center">
                    <h4 class="mb-4">{{ __('home.add_new_external_edit') }}</h4>
                    <a href="{{ route('external.edits.index') }}" class="btn btn-primary shadow-sm">
                        <i class="fa fa-list-ul"></i> {{ __('home.all_requests') ?? 'قائمة الطلبات' }}
                    </a>
                </div>

                <form action="{{ route('external.edits.store') }}" method="POST" id="externalEditForm">
                    @csrf
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <label>{{ __('home.customer') }} <span class="text-danger">*</span></label>
                            <div class="d-flex">
                                <select name="customer_id" id="customer_select" class="form-control select2" required>
                                    <option value="">--- {{ __('home.choose_customer') }} ---</option>
                                    @foreach($customers as $customer)
                                        <option value="{{ $customer->id }}" data-phone="{{ $customer->phone }}">
                                            {{ $customer->name }} | {{ $customer->phone }}
                                        </option>
                                    @endforeach
                                </select>
                                <button type="button" class="btn btn-success ms-2" data-toggle="modal" data-target="#quickAddCustomer">
                                    <i class="fa fa-plus"></i>
                                </button>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <label>{{ __('home.delivery_date') }}</label>
                            <input type="date" name="delivery_date" class="form-control" value="{{ date('Y-m-d') }}">
                        </div>
                    </div>

                    <div class="row bg-light p-3 rounded mb-4 align-items-end">
                        <div class="col-md-5">
                            <label>**{{ __('home.add_service_edit') }}**</label>
                            <input type="text" id="service_name_input" class="form-control" placeholder="اكتب اسم التعديل أو الخدمة هنا">
                        </div>

                        <div class="col-md-3">
                            <label>**السعر**</label>
                            <input type="number" id="service_price_input" class="form-control" min="0" step="0.01" placeholder="0.00">
                        </div>

                        <div class="col-md-3">
                            <label>**ملاحظة عن الخدمة**</label>
                            <input type="text" id="service_note_input" class="form-control" placeholder="ملاحظات اختيارية...">
                        </div>

                        <div class="col-md-1">
                            <button type="button" id="add_service_btn" class="btn btn-success w-100">
                                <i class="fa fa-plus"></i>
                            </button>
                        </div>
                    </div>

                    <div class="table-responsive mt-4">
                        <table class="table table-bordered text-center" id="services_table">
                            <thead class="bg-dark text-white">
                                <tr>
                                    <th>{{ __('home.service') }}</th>
                                    <th>{{ __('home.price') }}</th>
                                    <th>{{ __('home.notes') }}</th>
                                    <th>{{ __('home.delete') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                </tbody>
                        </table>
                    </div>

                    <div class="row mt-4 bg-light p-3">
                        <div class="col-md-3">
                            <label>{{ __('home.total') }}</label>
                            <input type="number" name="total_amount" id="total_amount" class="form-control" readonly value="0">
                        </div>
                        <div class="col-md-3">
                            <label>{{ __('home.paid') }}</label>
                            <input type="number" name="paid_amount" id="paid_amount" class="form-control" value="0" step="0.01">
                        </div>
                        <div class="col-md-3">
                            <label>{{ __('home.remaining') }}</label>
                            <input type="number" name="remaining_amount" id="remaining_amount" class="form-control" readonly value="0">
                        </div>
                        <div class="col-md-3">
                            <label>{{ __('home.payment_method') }}</label>
                            <select name="payment_method" class="form-control">
                                <option value="credit">{{ __('sales.credit_method') }}</option>
                                <option value="cash">{{ __('home.cash') }}</option>
                                <option value="network">{{ __('home.network') }}</option>
                            </select>
                        </div>
                    </div>

                    <div class="text-center mt-4">
                        <button type="submit" class="row-print btn btn-primary btn-lg px-5">
                            <i class="fa fa-print"></i> {{ __('home.save_and_print_invoice') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@include('external_edits.partials.quick_customer_modal')

@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
    // تفعيل الـ Select2 للعملاء
    $('#customer_select').select2({
        theme: 'bootstrap-5',
        width: '100%',
        placeholder: "ابحث باسم العميل أو رقم الجوال...",
        allowClear: true,
        selectionCssClass: 'select2--small',
        dropdownCssClass: 'select2--small',
    });
});
</script>
<script>
$(document).ready(function() {
    // 1. عرض رسائل السيشن (نجاح أو خطأ) عند تحميل الصفحة
    @if(session('success'))
        Swal.fire('تم!', "{{ session('success') }}", 'success');
    @endif

    @if(session('swal_error'))
        Swal.fire('خطأ!', "{{ session('swal_error') }}", 'error');
    @endif

    @if ($errors->any())
        let errorMessages = `@foreach ($errors->all() as $error) {{ $error }} <br> @endforeach`;
        Swal.fire('تنبيه!', errorMessages, 'warning');
    @endif

    // 2. التعديل الجديد: إضافة الخدمة يدويًا إلى الجدول عند الضغط على زر الإضافة (+)
    $('#add_service_btn').on('click', function() {
        let name = $('#service_name_input').val().trim();
        let price = parseFloat($('#service_price_input').val());
        let note = $('#service_note_input').val().trim();

        // التحقق من إدخال البيانات المطلوبة قبل الإضافة
        if(name === '') {
            Swal.fire('تنبيه!', 'يرجى كتابة اسم التعديل أو الخدمة أولاً', 'warning');
            return;
        }
        if(isNaN(price) || price < 0) {
            Swal.fire('تنبيه!', 'يرجى كتابة سعر صحيح ومقبول', 'warning');
            return;
        }

        // بناء صف الجدول بالبيانات المكتوبة يدويًا
        let row = `
            <tr>
                <td>
                    ${name}
                    <input type="hidden" name="service_names[]" value="${name}">
                </td>
                <td>
                    <input type="number" name="prices[]" class="form-control item-price" value="${price.toFixed(2)}" step="0.01">
                </td>
                <td>
                    <input type="text" name="item_notes[]" class="form-control" value="${note}" placeholder="ملاحظات التعديل">
                </td>
                <td>
                    <button type="button" class="btn btn-danger btn-sm remove-row"><i class="fa fa-trash"></i></button>
                </td>
            </tr>`;

        // إدراج الصف بالجدول
        $('#services_table tbody').append(row);

        // إعادة حساب الإجمالي تلقائياً
        calculateTotal();

        // تفريغ حقول الإدخال لتجهيزها للتعديل القادم
        $('#service_name_input').val('');
        $('#service_price_input').val('');
        $('#service_note_input').val('');
    });

    // 3. حذف صف من الجدول
    $(document).on('click', '.remove-row', function() {
        $(this).closest('tr').remove();
        calculateTotal();
    });

    // 4. تحديث الحسابات عند تغيير السعر أو المدفوع
    $(document).on('input', '.item-price, #paid_amount', function() {
        calculateTotal();
    });

    // دالة حساب الإجمالي والمتبقي
    function calculateTotal() {
        let total = 0;
        $('.item-price').each(function() {
            total += parseFloat($(this).val()) || 0;
        });
        $('#total_amount').val(total.toFixed(2));

        let paid = parseFloat($('#paid_amount').val()) || 0;
        $('#remaining_amount').val((total - paid).toFixed(2));
    }

    // 5. حفظ العميل السريع عبر AJAX باستخدام Swal
    $('#btnSaveCustomer').on('click', function() {
        let name = $('#cust_name').val();
        let phone = $('#cust_phone').val();

        if(!name || !phone) {
            Swal.fire('عفواً!', 'الاسم ورقم الجوال مطلوبان', 'warning');
            return;
        }

        $.post("{{ route('external.edits.quickCustomer') }}", {
            _token: "{{ csrf_token() }}",
            name: name,
            phone: phone
        }, function(response) {
            if(response.success) {
                Swal.fire({
                    title: 'تم!',
                    text: 'تم إضافة العميل بنجاح',
                    icon: 'success',
                    timer: 1500,
                    showConfirmButton: false
                });

                let newOption = new Option(response.customer.name + ' - ' + response.customer.phone, response.customer.id, true, true);
                $('#customer_select').append(newOption).trigger('change');
                $('#quickAddCustomer').modal('hide');
                $('#cust_name, #cust_phone').val('');
            }
        }).fail(function(xhr) {
            let errorMsg = 'خطأ في إضافة العميل';
            if(xhr.responseJSON && xhr.responseJSON.errors) {
                errorMsg = Object.values(xhr.responseJSON.errors).flat().join('<br>');
            }
            Swal.fire('خطأ!', errorMsg, 'error');
        });
    });

    // 6. تأكيد الحفظ النهائي للطلب
    $('#externalEditForm').on('submit', function(e) {
        if ($('#services_table tbody tr').length === 0) {
            e.preventDefault();
            Swal.fire('تنبيه!', 'يجب إضافة خدمة واحدة على الأقل للطلب', 'warning');
        }
    });
});
</script>
@endsection