@extends('web.layouts.app')

@section('title', 'سياراتي')
@section('page_heading', 'إدارة سياراتك')

@section('content')
    <div class="content">
        <div class="user-info-page">
            <div class="container">
                <div class="row">
                    @include('web.layouts.inc.user_sidebar')

                    <div class="col-lg-9">
                        <div class="user-info-content">


                            <div class="section-header">
                                <div class="section-header-info">
                                    <h3>أضف سيارتك</h3>
                                    <p>أضف سيارتك لتلقي أحدث العروض والخصومات</p>
                                </div>
                            </div>

                            <div class="add-car-card">
                                <h3>أضف سيارتك</h3>
                                <img src="{{ asset('web_assets') }}/assets/images/add-car.svg" alt="add car">

                                <div class="header-search-container">
                                    <div class="header-serach">
                                        <form action="{{ route('user-cars.store') }}" method="POST">
                                            @csrf
                                            <div class="header-search-select">
                                                <div class="form-group">
                                                    <label for="brand_id">الماركة:</label>
                                                    <select name="brand_id" id="brand_id" class="form-control">
                                                        <option value="">اختر الماركة</option>
                                                        @foreach ($brands as $brand)
                                                            <option value="{{ $brand->id }}">{{ $brand->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="form-group">
                                                    <label for="car_model_id">الموديل:</label>
                                                    <select name="car_model_id" id="car_model_id" class="form-control" disabled>
                                                        <option value="">اختر الموديل</option>
                                                        {{-- سيتم ملء هذا الحقل باستخدام جافا سكريبت --}}
                                                    </select>
                                                </div>
                                                <div class="form-group">
                                                    <label for="engine_id">المحرك:</label>
                                                    <select name="engine_id" id="engine_id" class="form-control" disabled>
                                                        <option value="">اختر المحرك</option>
                                                        {{-- سيتم ملء هذا الحقل باستخدام جافا سكريبت --}}
                                                    </select>
                                                </div>
                                                <div class="form-group">
                                                    <label for="year">سنة الصنع:</label>
                                                    <input type="number" name="year" id="year" class="form-control" min="1900" max="{{ date('Y') }}" value="{{ old('year') }}">
                                                </div>
                                            </div>
                                            <div class="header-search-icon">
                                                <button type="submit" class="serach-icon">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                                                        <path d="M11 11V7H13V11H17V13H13V17H11V13H7V11H11ZM12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z"></path>
                                                    </svg>
                                                    <span>أضف</span>
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>

                            {{-- عرض السيارات المُضافة --}}
                            <div class="user-cars-list">
                                <h2>سياراتي</h2>
                                @if ($userCars->isNotEmpty())
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>الماركة</th>
                                                <th>الموديل</th>
                                                <th>المحرك</th>
                                                <th>سنة الصنع</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($userCars as $car)
                                                <tr>
                                                    <td>{{ $car->carModel->brand->name }}</td>
                                                    <td>{{ $car->carModel->name }}</td>
                                                    <td>{{ $car->engine ? $car->engine->name : 'N/A' }}</td>
                                                    <td>{{ $car->year ?? 'N/A' }}</td>
                                                    <td>
                                                        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editCarModal-{{ $car->id }}">تعديل</button>

                                                        <form action="{{ route('user-cars.destroy', $car->id) }}" method="POST" style="display: inline-block;">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="btn btn-danger" onclick="return confirm('هل أنت متأكد من حذف هذه السيارة؟')">حذف</button>
                                                        </form>
                                                    </td>
                                                </tr>

                                                {{-- Modal for editing each car --}}
                                                <div class="modal fade" id="editCarModal-{{ $car->id }}" tabindex="-1" aria-labelledby="editCarModalLabel-{{ $car->id }}" aria-hidden="true">
                                                    <div class="modal-dialog">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h5 class="modal-title" id="editCarModalLabel-{{ $car->id }}">تعديل السيارة</h5>
                                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                            </div>
                                                            <form action="{{ route('user-cars.update', $car->id) }}" method="POST">
                                                                @csrf
                                                                @method('PUT')
                                                                <div class="modal-body">
                                                                    <div class="form-group">
                                                                        <label for="brand_id-{{ $car->id }}">الماركة:</label>
                                                                        <select name="brand_id" id="brand_id-{{ $car->id }}" class="form-control brand-select" data-car-id="{{ $car->id }}">
                                                                            @foreach ($brands as $brand)
                                                                                <option value="{{ $brand->id }}" @if($car->carModel->brand_id == $brand->id) selected @endif>{{ $brand->name }}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>
                                                                    <div class="form-group">
                                                                        <label for="car_model_id-{{ $car->id }}">الموديل:</label>
                                                                        <select name="car_model_id" id="car_model_id-{{ $car->id }}" class="form-control car-model-select" data-car-id="{{ $car->id }}">
                                                                            {{-- يتم ملء هذا الحقل عند تحميل الصفحة --}}
                                                                            @foreach ($car->carModel->brand->models as $model)
                                                                                <option value="{{ $model->id }}" @if($car->car_model_id == $model->id) selected @endif>{{ $model->name }}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>
                                                                    <div class="form-group">
                                                                        <label for="engine_id-{{ $car->id }}">المحرك:</label>
                                                                        <select name="engine_id" id="engine_id-{{ $car->id }}" class="form-control engine-select" data-car-id="{{ $car->id }}">
                                                                            <option value="">اختر المحرك</option>
                                                                            {{-- يتم ملء هذا الحقل عند تحميل الصفحة --}}
                                                                            @if ($car->engine)
                                                                                <option value="{{ $car->engine->id }}" selected>{{ $car->engine->name }}</option>
                                                                            @endif
                                                                        </select>
                                                                    </div>
                                                                    <div class="form-group">
                                                                        <label for="year-{{ $car->id }}">سنة الصنع:</label>
                                                                        <input type="number" name="year" id="year-{{ $car->id }}" class="form-control" min="1900" max="{{ date('Y') }}" value="{{ old('year', $car->year) }}">
                                                                    </div>
                                                                </div>
                                                                <div class="modal-footer">
                                                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
                                                                    <button type="submit" class="btn btn-primary">حفظ التعديلات</button>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </tbody>
                                    </table>
                                @else
                                    <p>لا توجد سيارات مضافة.</p>
                                @endif
                            </div>

                        </div>
                    </div>

                </div>

            </div>
        </div>

    </div>

@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        // تعبئة الموديلات عند تحميل الصفحة
        $('.brand-select').each(function() {
            var brandId = $(this).val();
            var carId = $(this).data('car-id');
            populateCarModels(brandId, carId);
        });

        // تعبئة المحركات عند تحميل الصفحة
        $('.car-model-select').each(function() {
            var carModelId = $(this).val();
            var carId = $(this).data('car-id');
            if (carModelId) {
                populateEngines(carModelId, carId);
            }
        });

        // عند تغيير العلامة التجارية في فورم الاضافة
        $('#brand_id').change(function() {
            var brandId = $(this).val();
            populateCarModels(brandId, null);
        });

        // عند تغيير العلامة التجارية في فورم التعديل
        $(document).on('change', '.brand-select', function() {
            var brandId = $(this).val();
            var carId = $(this).data('car-id');
            populateCarModels(brandId, carId);
        });

        // عند تغيير الموديل في فورم الاضافة
        $('#car_model_id').change(function() {
            var carModelId = $(this).val();
            populateEngines(carModelId, null);
        });

        // عند تغيير الموديل في فورم التعديل
        $(document).on('change', '.car-model-select', function() {
            var carModelId = $(this).val();
            var carId = $(this).data('car-id');
            populateEngines(carModelId, carId);
        });

        function populateCarModels(brandId, carId = null) {
            // الحصول على حقل الموديل وحقل المحرك
            var carModelSelect = $('#car_model_id');
            var engineSelect = $('#engine_id');

            // اذا كان هناك carId
            if (carId) {
                carModelSelect = $('#car_model_id-' + carId);
                engineSelect = $('#engine_id-' + carId);
            }

            carModelSelect.prop('disabled', true).empty().append('<option value="">اختر الموديل</option>');
            engineSelect.prop('disabled', true).empty().append('<option value="">اختر المحرك</option>');

            if (brandId) {
                $.ajax({
                    url: "{{ route('get.car.models') }}",
                    type: "GET",
                    data: { brand: brandId },
                    success: function(data) {
                        carModelSelect.prop('disabled', false);
                        $.each(data, function(key, value) {
                            carModelSelect.append('<option value="' + value.id + '">' + value.name + '</option>');
                        });

                        // قم بملء حقل المحرك إذا كان هناك carId
                        if (carId) {
                            var selectedCarModel = carModelSelect.val();
                            if (selectedCarModel) {
                                populateEngines(selectedCarModel, carId);
                            }
                        }
                    }
                });
            }
        }

        function populateEngines(carModelId, carId = null) {
            // الحصول على حقل المحرك
            var engineSelect = carId ? $('#engine_id-' + carId) : $('#engine_id');
            engineSelect.prop('disabled', true).empty().append('<option value="">اختر المحرك</option>');

            if (carModelId) {
                $.ajax({
                    url: "{{ route('get.engines') }}",
                    type: "GET",
                    data: { carModel: carModelId },
                    success: function(data) {
                        engineSelect.prop('disabled', false);
                        $.each(data, function(key, value) {
                            engineSelect.append('<option value="' + value.id + '">' + value.name + '</option>');
                        });
                    }
                });
            }
        }
    });
</script>

@endsection