@extends('layouts.master')

@section('title')
{{ __('home.edit_external_edit') }}
@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>
    /* ==========================================================
       Edit External Edit Modern UI
       ========================================================== */
    body {
        background-color: #f1f5f9;
        font-family: 'Segoe UI', Tahoma, 'Inter', sans-serif;
    }

    /* كروت الأقسام */
    .edit-external-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;
    }

    .edit-external-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-edit-services {
        margin-bottom: 0 !important;
        border-collapse: separate;
        border-spacing: 0;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid #e2e8f0 !important;
    }

    .table-edit-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-edit-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-update-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-update-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-edit" style="font-size: 18px;"></i>
            </div>
            <div>
                <h4 class="mb-0 font-weight-bold text-dark">{{ __('home.edit_external_edit') }} #{{ $request->id }}</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="edit-external-card">

                <div class="card-body p-4">
                    <form action="{{ route('external.edits.update', $request->id) }}" 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>
                                <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 }}"
                                            @selected($request->customer_id == $customer->id)
                                            data-phone="{{ $customer->phone }}">
                                            {{ $customer->name }} | {{ $customer->phone }}
                                        </option>
                                    @endforeach
                                </select>
                            </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="{{ $request->delivery_date ? $request->delivery_date->format('Y-m-d') : 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-edit-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>
                                    {{-- عرض الخدمات المحفوظة أصلاً في الطلب --}}
                                    @foreach($request->items as $detail)
                                    <tr>
                                        <td class="text-right pr-4 font-weight-bold text-dark">
                                            <i class="fa fa-check text-primary ml-1 small"></i>
                                            {{ $detail->service_name }}
                                            <input type="hidden" name="services[]" value="{{ $detail->service_id }}">
                                            <input type="hidden" name="service_names[]" value="{{ $detail->service_name }}">
                                        </td>
                                        <td>
                                            <input type="number" name="prices[]" class="form-control form-control-sm form-control-modern text-center item-price font-weight-bold" value="{{ $detail->price }}" step="0.01">
                                        </td>
                                        <td>
                                            <input type="text" name="item_notes[]" class="form-control form-control-sm form-control-modern" value="{{ $detail->notes }}" placeholder="الملاحظات...">
                                        </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>
                                    @endforeach
                                </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="{{ $request->total_amount }}">
                                        <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="{{ $request->paid_amount }}" 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="{{ $request->remaining_amount }}">
                                        <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" {{ $request->payment_method == 'credit' ? 'selected' : '' }}>{{ __('sales.credit_method') }} (آجل)</option>
                                        <option value="cash" {{ $request->payment_method == 'cash' ? 'selected' : '' }}>{{ __('home.cash') }} (نقدي)</option>
                                        <option value="network" {{ $request->payment_method == 'network' ? 'selected' : '' }}>{{ __('home.network') }} (شبكة)</option>
                                    </select>
                                </div>

                            </div>
                        </div>

                        {{-- 4. زر التحديث النهائي --}}
                        <div class="text-center">
                            <button type="submit" class="btn-update-order">
                                <i class="fa fa-save"></i>
                                <span>{{ __('home.update_request') }}</span>
                            </button>
                        </div>

                    </form>
                </div>

            </div>
        </div>
    </div>
</div>
@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. عند اختيار خدمة من القائمة
    $('#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 font-weight-bold" value="${price}" step="0.01">
                    </td>
                    <td>
                        <input type="text" name="item_notes[]" class="form-control form-control-sm form-control-modern" placeholder="الملاحظات...">
                    </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');
        }
    });

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

    // 3. تحديث الحسابات عند تغيير السعر أو المدفوع
    $(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));
    }

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