@extends('layouts.master')
@section('css')
<meta name="csrf-token" content="{{ csrf_token() }}">
<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.edit_external_edit') }}
@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.edit_external_edit') }} #{{ $request->id }}</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.update', $request->id) }}" method="POST" id="externalEditForm">
                    @csrf
                    {{-- إذا كنت تستخدم PUT في الروت غيرها هنا، لكن يفضل POST للتوافق مع فورم الكريت --}}

                    <div class="row">
                      <div class="col-md-4">
                            <label class="form-label font-weight-bold">{{ __('home.customer') }} <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <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>

                       <div class="col-md-4">
                            <label>{{ __('home.delivery_date') }}</label>
                            {{-- استخدمنا format لضمان عرض التاريخ بشكل صحيح في المتصفح --}}
                            <input type="date" name="delivery_date" class="form-control"
                                value="{{ $request->delivery_date ? $request->delivery_date->format('Y-m-d') : 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>
                                {{-- هنا بنعرض الخدمات اللي كانت متسجلة أصلاً في الطلب --}}
                                @foreach($request->items as $detail)
                                <tr>
                                    <td>
                                        {{ $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 item-price" value="{{ $detail->price }}" step="0.01">
                                    </td>
                                    <td>
                                        <input type="text" name="item_notes[]" class="form-control" value="{{ $detail->notes }}">
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-danger btn-sm remove-row"><i class="fa fa-trash"></i></button>
                                    </td>
                                </tr>
                                @endforeach
                            </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="{{ $request->total_amount }}">
                        </div>
                        <div class="col-md-3">
                            <label>{{ __('home.paid') }}</label>
                            <input type="number" name="paid_amount" id="paid_amount" class="form-control" value="{{ $request->paid_amount }}" 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="{{ $request->remaining_amount }}">
                        </div>
                        <div class="col-md-3">
                            <label>{{ __('home.payment_method') }}</label>
                            <select name="payment_method" class="form-control">
                                <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 class="text-center mt-4">
                        <button type="submit" class="btn btn-success btn-lg px-5">
                            <i class="fa fa-save"></i> {{ __('home.update_request') }}
                        </button>
                    </div>
                </form>
            </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,
        selectionCssClass: 'select2--small', // اختياري لو عايز الحجم أصغر
        dropdownCssClass: 'select2--small',
    });
});
</script>
<script>
$(document).ready(function() {
    // استخدم نفس السكريبت بتاع صفحة الكريت للحسابات الديناميكية
    $('#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"></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');
        }
    });

    $(document).on('click', '.remove-row', function() {
        $(this).closest('tr').remove();
        calculateTotal();
    });

    $(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));
    }
});
</script>
@endsection