@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">
                    <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 class="col-md-4">
                        {{-- إضافة خدمة (تعديل) --}}
                        <label>{{ __('home.add_service_edit') }}</label>
                        <select id="service_selector" class="form-control select2">
                            {{-- اختر التعديل المطلوب --}}
                            <option value="">--- {{ __('home.choose_required_edit') }} ---</option>

                            @foreach($services as $service)
                                <option value="{{ $service->id }}"
                                        data-price="{{ $service->purchasingـprice }}"
                                        data-name="{{ $service->product_name }}">
                                    {{ $service->product_name }}
                                    ({{ $service->purchasingـprice }} {{ __('home.currency_symbol') }})
                                </option>
                            @endforeach
                        </select>
                    </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() {
    $('#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. عند اختيار خدمة من القائمة
    $('#service_selector').on('change', function() {
        let option = $(this).find(':selected');
        let id = option.val();
        let name = option.data('name');
        let price = option.data('price');

        if(id) {
            let row = `
                <tr>
                    <td>
                        ${name}
                        <input type="hidden" name="services[]" value="${id}">
                        <input type="hidden" name="service_names[]" value="${name}">
                    </td>
                    <td>
                        <input type="number" name="prices[]" class="form-control item-price" value="${price}" step="0.01">
                    </td>
                    <td>
                        <input type="text" name="item_notes[]" class="form-control" placeholder="مثلاً: تضييق 2 سم">
                    </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();
            $(this).val('').trigger('change');
        }
    });

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