@extends('layouts.master')

@section('title')
{{ __('home.external_edits') }}
@stop

@section('css')
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Select2 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" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
    /* ==========================================================
       Create External Edit Modern UI
       ========================================================== */
    body {
        background-color: #f1f5f9;
        font-family: 'Segoe UI', Tahoma, 'Inter', sans-serif;
    }

    /* كروت الأقسام */
    .create-edit-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
        margin-bottom: 22px;
        overflow: hidden;
    }

    .create-edit-card-header {
        background: #ffffff;
        border-bottom: 1.5px solid #f1f5f9;
        padding: 18px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* عناوين الحقول */
    .field-label {
        font-size: 13.5px;
        font-weight: 800;
        color: #334155;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* حقول الإدخال */
    .form-control-modern {
        border: 1.5px solid #cbd5e1 !important;
        border-radius: 9px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        padding: 9px 14px !important;
        color: #0f172a !important;
        transition: all 0.2s ease;
    }

    .form-control-modern:focus {
        border-color: #3b82f6 !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
        background: #ffffff !important;
    }

    /* جدول الخدمات */
    .table-create-services {
        margin-bottom: 0 !important;
        border-collapse: separate;
        border-spacing: 0;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid #e2e8f0 !important;
    }

    .table-create-services thead th {
        background: #0f172a !important;
        color: #ffffff !important;
        font-size: 13.5px !important;
        font-weight: 800 !important;
        padding: 13px 12px !important;
        border: none !important;
    }

    .table-create-services tbody td {
        vertical-align: middle !important;
        padding: 10px 10px !important;
        font-size: 14px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        color: #1e293b;
    }

    /* كارت الحسابات والملخص المالي */
    .financial-calc-box {
        background: #f8fafc;
        border: 1.5px solid #e2e8f0;
        border-radius: 12px;
        padding: 20px;
    }

    /* زر الحفظ والطباعة الرئيسي */
    .btn-save-print-order {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        border: none;
        color: #ffffff !important;
        font-size: 16px !important;
        font-weight: 900 !important;
        padding: 14px 45px !important;
        border-radius: 10px !important;
        box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all 0.25s ease;
        cursor: pointer;
    }

    .btn-save-print-order:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(16, 185, 129, 0.45);
    }

    /* تظبيط شكل الـ Select2 */
    .select2-container--bootstrap-5 .select2-selection {
        border: 1.5px solid #cbd5e1 !important;
        border-radius: 9px !important;
        min-height: 42px !important;
        padding: 6px 12px !important;
    }

    .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
    }
</style>
@endsection

@section('content')
<div class="container-fluid p-2 mt-2">

    {{-- رأس الصفحة وأزرار التنقل --}}
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
        <div class="d-flex align-items-center">
            <div class="bg-primary text-white rounded d-flex align-items-center justify-content-center mr-2" style="width: 38px; height: 38px;">
                <i class="fa fa-plus-circle" style="font-size: 18px;"></i>
            </div>
            <div>
                <h4 class="mb-0 font-weight-bold text-dark">{{ __('home.add_new_external_edit') }}</h4>
                <span class="text-muted tx-13 font-weight-bold">تسجيل طلب تعديل خارجي جديد وتحديد الخدمات والأسعار</span>
            </div>
        </div>

        <div>
            <a href="{{ route('external.edits.index') }}" class="btn btn-outline-secondary font-weight-bold px-3 py-2" style="border-radius: 8px;">
                <i class="fa fa-list-ul ml-1"></i> {{ __('home.all_requests') ?? 'قائمة الطلبات' }}
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="create-edit-card">

                <div class="card-body p-4">
                    <form action="{{ route('external.edits.store') }}" method="POST" id="externalEditForm">
                        @csrf

                        {{-- 1. سكشن العميل والتاريخ والخدمة --}}
                        <div class="row mb-4">

                            {{-- اختيار العميل --}}
                            <div class="col-lg-4 col-md-6 mb-3 mb-lg-0">
                                <label class="field-label">
                                    <i class="fa fa-user text-primary"></i> {{ __('home.customer') }} <span class="text-danger">*</span>
                                </label>
                                <div class="d-flex align-items-center gap-2">
                                    <div class="flex-grow-1">
                                        <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>
                                    </div>
                                    <button type="button" class="btn btn-success font-weight-bold px-3 py-2" style="border-radius: 8px;" data-toggle="modal" data-target="#quickAddCustomer" title="إضافة عميل سريع">
                                        <i class="fa fa-plus"></i>
                                    </button>
                                </div>
                            </div>

                            {{-- تاريخ التسليم --}}
                            <div class="col-lg-4 col-md-6 mb-3 mb-lg-0">
                                <label class="field-label">
                                    <i class="fa fa-calendar text-success"></i> {{ __('home.delivery_date') }}
                                </label>
                                <input type="date" name="delivery_date" class="form-control form-control-modern" value="{{ date('Y-m-d') }}">
                            </div>

                            {{-- اختيار التعديل المطلوب وإضافته --}}
                            <div class="col-lg-4 col-md-12">
                                <label class="field-label">
                                    <i class="fa fa-scissors text-warning"></i> {{ __('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>

                        <hr style="border-top: 1px dashed #cbd5e1;" class="my-4">

                        {{-- 2. جدول الخدمات والتعديلات المضافة --}}
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h6 class="font-weight-bold text-dark mb-0">
                                <i class="fa fa-list-alt text-primary ml-1"></i> قائمة الخدمات والتعديلات المضافة للطلب:
                            </h6>
                            <small class="text-muted font-weight-bold">* يمكنك تعديل الأسعار والملاحظات لكل بند مباشرة من الجدول</small>
                        </div>

                        <div class="table-responsive mb-4">
                            <table class="table table-hover text-center table-create-services" id="services_table" width="100%">
                                <thead>
                                    <tr>
                                        <th width="30%" class="text-right pr-4">{{ __('home.service') }}</th>
                                        <th width="20%">{{ __('home.price') }}</th>
                                        <th width="40%" class="text-right pr-3">{{ __('home.notes') }}</th>
                                        <th width="10%">{{ __('home.delete') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>

                        {{-- 3. صندوق الحسابات والملخص المالي --}}
                        <div class="financial-calc-box mb-4">
                            <div class="row align-items-center">

                                {{-- الإجمالي --}}
                                <div class="col-lg-3 col-md-6 mb-3 mb-lg-0">
                                    <label class="field-label"><i class="fa fa-calculator text-primary"></i> {{ __('home.total') }}</label>
                                    <div class="input-group">
                                        <input type="number" name="total_amount" id="total_amount" class="form-control form-control-modern bg-white text-center font-weight-bold" readonly value="0">
                                        <div class="input-group-append">
                                            <span class="input-group-text bg-light text-muted font-weight-bold">ريال</span>
                                        </div>
                                    </div>
                                </div>

                                {{-- المدفوع --}}
                                <div class="col-lg-3 col-md-6 mb-3 mb-lg-0">
                                    <label class="field-label text-success"><i class="fa fa-money text-success"></i> {{ __('home.paid') }}</label>
                                    <div class="input-group">
                                        <input type="number" name="paid_amount" id="paid_amount" class="form-control form-control-modern border-success text-center font-weight-bold" value="0" step="0.01">
                                        <div class="input-group-append">
                                            <span class="input-group-text bg-success text-white font-weight-bold">ريال</span>
                                        </div>
                                    </div>
                                </div>

                                {{-- المتبقي --}}
                                <div class="col-lg-3 col-md-6 mb-3 mb-lg-0">
                                    <label class="field-label text-danger"><i class="fa fa-clock-o text-danger"></i> {{ __('home.remaining') }}</label>
                                    <div class="input-group">
                                        <input type="number" name="remaining_amount" id="remaining_amount" class="form-control form-control-modern border-danger text-center font-weight-bold text-danger" readonly value="0">
                                        <div class="input-group-append">
                                            <span class="input-group-text bg-danger text-white font-weight-bold">ريال</span>
                                        </div>
                                    </div>
                                </div>

                                {{-- طريقة الدفع --}}
                                <div class="col-lg-3 col-md-6">
                                    <label class="field-label"><i class="fa fa-credit-card text-info"></i> {{ __('home.payment_method') }}</label>
                                    <select name="payment_method" class="form-control form-control-modern font-weight-bold">
                                        <option value="credit">{{ __('sales.credit_method') }} (آجل)</option>
                                        <option value="cash">{{ __('home.cash') }} (نقدي)</option>
                                        <option value="network">{{ __('home.network') }} (شبكة)</option>
                                    </select>
                                </div>

                            </div>
                        </div>

                        {{-- 4. زر الحفظ والطباعة --}}
                        <div class="text-center">
                            <button type="submit" class="row-print btn-save-print-order">
                                <i class="fa fa-print"></i>
                                <span>{{ __('home.save_and_print_invoice') }}</span>
                            </button>
                        </div>

                    </form>
                </div>

            </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,
    });
});
</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 class="text-right pr-4 font-weight-bold text-dark">
                        <i class="fa fa-check text-primary ml-1 small"></i>
                        ${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 form-control-sm form-control-modern text-center item-price" value="${price}" step="0.01">
                    </td>
                    <td>
                        <input type="text" name="item_notes[]" class="form-control form-control-sm form-control-modern" placeholder="مثلاً: تضييق 2 سم">
                    </td>
                    <td>
                        <button type="button" class="btn btn-outline-danger btn-sm remove-row" style="border-radius: 6px;" title="حذف">
                            <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
    $('#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