@extends('user.layout')

@section('content')
    <div class="page-header">
        <h4 class="page-title">{{ __('Create Vehicle Request') }}</h4>
        <ul class="breadcrumbs">
            <li class="nav-home">
                <a href="{{ route('user-dashboard') }}">
                    <i class="flaticon-home"></i>
                </a>
            </li>
            <li class="separator">
                <i class="flaticon-right-arrow"></i>
            </li>
            <li class="nav-item">
                <a href="#">{{ __('Purchase Options') }}</a>
            </li>
            <li class="separator">
                <i class="flaticon-right-arrow"></i>
            </li>
            <li class="nav-item">
                <a href="{{ route('user.vehicle_requests.index') }}">{{ __('Vehicle Requests') }}</a>
            </li>
            <li class="separator">
                <i class="flaticon-right-arrow"></i>
            </li>
            <li class="nav-item">
                <a href="#">{{ __('Create Request') }}</a>
            </li>
        </ul>
    </div>

    <div class="row">
        <div class="col-md-12">
            @if ($errors->any())
                <div class="alert alert-danger pb-1">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>
    </div>

    <form action="{{ route('user.vehicle_requests.store') }}" method="POST">
        @csrf

        <div class="card">
            <div class="card-header">
                <div class="card-title">{{ __('Request Filters') }}</div>
            </div>

            <div class="card-body">
                <div class="row">
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label>{{ __('Car Type') }}</label>
                            <select name="car_type" class="form-control">
                                <option value="">{{ __('Select') }}</option>
                                <option value="car" {{ old('car_type') == 'car' ? 'selected' : '' }}>{{ __('Car') }}</option>
                                <option value="truck" {{ old('car_type') == 'truck' ? 'selected' : '' }}>{{ __('Truck') }}</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-lg-3">
                        <div class="form-group">
                            <label>{{ __('Brand') }}</label>
                            <select name="brand_id" id="brand_id" class="form-control">
                                <option value="">{{ __('Select Brand') }}</option>
                                @foreach ($brands as $brand)
                                    <option value="{{ $brand->id }}" {{ old('brand_id') == $brand->id ? 'selected' : '' }}>
                                        {{ $brand->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-lg-3">
                        <div class="form-group">
                            <label>{{ __('Model') }}</label>
                            <select name="model_id" id="model_id" class="form-control">
                                <option value="">{{ __('Select Model') }}</option>
                                @foreach ($models as $model)
                                    <option value="{{ $model->id }}" {{ old('model_id') == $model->id ? 'selected' : '' }}>
                                        {{ $model->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-lg-3">
                        <div class="form-group">
                            <label>{{ __('Version') }}</label>
                            <select name="version_id" id="version_id" class="form-control">
                                <option value="">{{ __('Select Version') }}</option>
                                @foreach ($versions as $version)
                                    <option value="{{ $version->id }}" {{ old('version_id') == $version->id ? 'selected' : '' }}>
                                        {{ $version->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-lg-3">
                        <div class="form-group">
                            <label>{{ __('Category') }}</label>
                            <select name="category_id" class="form-control">
                                <option value="">{{ __('Select Category') }}</option>
                                @foreach ($categories as $category)
                                    @php
                                        $categoryName = method_exists($category, 'categoryContents')
                                            ? optional($category->categoryContents()->first())->name
                                            : ($category->name ?? $category->title ?? null);
                                    @endphp
                                    <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                        {{ $categoryName ?? ('Category #' . $category->id) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    {{-- Department --}}
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label>{{ __('Department') }}</label>
                            <select name="country_id" id="country_id" class="form-control">
                                <option value="">{{ __('Select Department') }}</option>
                                @foreach ($countries as $country)
                                    @php
                                        $countryName = method_exists($country, 'contents')
                                            ? optional($country->contents()->first())->name
                                            : ($country->name ?? $country->title ?? null);
                                    @endphp
                                    <option value="{{ $country->id }}" {{ old('country_id') == $country->id ? 'selected' : '' }}>
                                        {{ $countryName ?? ('Department #' . $country->id) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    {{-- City --}}
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label>{{ __('City') }}</label>
                            <select name="state_id" id="state_id" class="form-control">
                                <option value="">{{ __('Select City') }}</option>
                                @foreach ($states as $state)
                                    @php
                                        $stateName = method_exists($state, 'contents')
                                            ? optional($state->contents()->first())->name
                                            : ($state->name ?? $state->title ?? null);
                                    @endphp
                                    <option value="{{ $state->id }}" {{ old('state_id') == $state->id ? 'selected' : '' }}>
                                        {{ $stateName ?? ('City #' . $state->id) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    {{-- Zone --}}
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label>{{ __('Zone') }}</label>
                            <select name="city_id" id="city_id" class="form-control">
                                <option value="">{{ __('Select Zone') }}</option>
                                @foreach ($cities as $city)
                                    @php
                                        $cityName = method_exists($city, 'contents')
                                            ? optional($city->contents()->first())->name
                                            : ($city->name ?? $city->title ?? null);
                                    @endphp
                                    <option value="{{ $city->id }}" {{ old('city_id') == $city->id ? 'selected' : '' }}>
                                        {{ $cityName ?? ('Zone #' . $city->id) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-lg-3">
                        <div class="form-group">
                            <label>{{ __('Motor') }}</label>
                            <input type="text" name="motor" class="form-control" value="{{ old('motor') }}" placeholder="{{ __('Enter Motor') }}">
                        </div>
                    </div>

                    <div class="col-lg-3">
                        <div class="form-group">
                            <label>{{ __('Fuel Type') }}</label>
                            <select name="fuel_type" class="form-control">
                                <option value="">{{ __('Select Fuel Type') }}</option>
                                <option value="Nafta" {{ old('fuel_type') == 'Nafta' ? 'selected' : '' }}>Nafta</option>
                                <option value="Diesel" {{ old('fuel_type') == 'Diesel' ? 'selected' : '' }}>Diésel</option>
                                <option value="Electrico" {{ old('fuel_type') == 'Electrico' ? 'selected' : '' }}>Eléctrico</option>
                                <option value="Hibrido" {{ old('fuel_type') == 'Hibrido' ? 'selected' : '' }}>Híbrido</option>
                                <option value="Hibrido/Diesel" {{ old('fuel_type') == 'Hibrido/Diesel' ? 'selected' : '' }}>Híbrido/Diesel</option>
                                <option value="Nafta/GNC" {{ old('fuel_type') == 'Nafta/GNC' ? 'selected' : '' }}>Nafta/GNC</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-lg-3">
                        <div class="form-group">
                            <label>{{ __('Transmission') }}</label>
                            <select name="transmision" class="form-control">
                                <option value="">{{ __('Select Transmission') }}</option>
                                <option value="Manual" {{ old('transmision') == 'Manual' ? 'selected' : '' }}>{{ __('Manual') }}</option>
                                <option value="Automática" {{ old('transmision') == 'Automática' ? 'selected' : '' }}>{{ __('Automatic') }}</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-lg-2">
                        <div class="form-group">
                            <label>{{ __('Year Min') }}</label>
                            <input type="number" name="year_min" class="form-control" value="{{ old('year_min') }}" placeholder="{{ __('From') }}">
                        </div>
                    </div>

                    <div class="col-lg-2">
                        <div class="form-group">
                            <label>{{ __('Year Max') }}</label>
                            <input type="number" name="year_max" class="form-control" value="{{ old('year_max') }}" placeholder="{{ __('To') }}">
                        </div>
                    </div>

                    <div class="col-lg-2">
                        <div class="form-group">
                            <label>{{ __('Price Min') }}</label>
                            <input type="number" step="0.01" name="price_min" class="form-control" value="{{ old('price_min') }}" placeholder="{{ __('From') }}">
                        </div>
                    </div>

                    <div class="col-lg-2">
                        <div class="form-group">
                            <label>{{ __('Price Max') }}</label>
                            <input type="number" step="0.01" name="price_max" class="form-control" value="{{ old('price_max') }}" placeholder="{{ __('To') }}">
                        </div>
                    </div>

                    <div class="col-lg-2">
                        <div class="form-group">
                            <label>{{ __('KM Min') }}</label>
                            <input type="number" name="km_min" class="form-control" value="{{ old('km_min') }}" placeholder="{{ __('From') }}">
                        </div>
                    </div>

                    <div class="col-lg-2">
                        <div class="form-group">
                            <label>{{ __('KM Max') }}</label>
                            <input type="number" name="km_max" class="form-control" value="{{ old('km_max') }}" placeholder="{{ __('To') }}">
                        </div>
                    </div>
                </div>
            </div>

            <div class="card-footer text-center">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i> {{ __('Save Request') }}
                </button>

                <a href="{{ route('user.vehicle_requests.index') }}" class="btn btn-secondary">
                    {{ __('Cancel') }}
                </a>
            </div>
        </div>
    </form>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const brandSelect = document.getElementById('brand_id');
            const modelSelect = document.getElementById('model_id');
            const versionSelect = document.getElementById('version_id');

            const countrySelect = document.getElementById('country_id');
            const stateSelect = document.getElementById('state_id');
            const citySelect = document.getElementById('city_id');

            if (brandSelect) {
                brandSelect.addEventListener('change', function () {
                    const brandId = this.value;

                    modelSelect.innerHTML = '<option value="">{{ __("Select Model") }}</option>';
                    versionSelect.innerHTML = '<option value="">{{ __("Select Version") }}</option>';

                    if (!brandId) return;

                    fetch("{{ route('user.private_seller_marketplace.get_models') }}?brand_id=" + brandId)
                        .then(response => response.json())
                        .then(data => {
                            if (data.models) {
                                data.models.forEach(function (item) {
                                    const option = document.createElement('option');
                                    option.value = item.id;
                                    option.textContent = item.name;
                                    if ("{{ old('model_id') }}" == item.id) {
                                        option.selected = true;
                                    }
                                    modelSelect.appendChild(option);
                                });

                                if ("{{ old('model_id') }}") {
                                    modelSelect.dispatchEvent(new Event('change'));
                                }
                            }
                        });
                });

                if (brandSelect.value) {
                    brandSelect.dispatchEvent(new Event('change'));
                }
            }

            if (modelSelect) {
                modelSelect.addEventListener('change', function () {
                    const modelId = this.value;

                    versionSelect.innerHTML = '<option value="">{{ __("Select Version") }}</option>';

                    if (!modelId) return;

                    fetch("{{ route('user.private_seller_marketplace.get_versions') }}?model_id=" + modelId)
                        .then(response => response.json())
                        .then(data => {
                            if (data.versions) {
                                data.versions.forEach(function (item) {
                                    const option = document.createElement('option');
                                    option.value = item.id;
                                    option.textContent = item.name;
                                    if ("{{ old('version_id') }}" == item.id) {
                                        option.selected = true;
                                    }
                                    versionSelect.appendChild(option);
                                });
                            }
                        });
                });
            }

           if (countrySelect) {
    countrySelect.addEventListener('change', function () {
        const countryId = this.value;

        stateSelect.innerHTML = '<option value="">{{ __("Select City") }}</option>';
        citySelect.innerHTML = '<option value="">{{ __("Select Zone") }}</option>';

        if (!countryId) return;

        fetch("{{ route('user.private_seller_marketplace.get_states') }}?country_id=" + countryId)
            .then(response => response.json())
            .then(response => {
                if (response.states) {
                    response.states.forEach(function (item) {
                        const option = document.createElement('option');
                        option.value = item.id;
                        option.textContent = item.name ?? ('City #' + item.id);

                        if ("{{ old('state_id') }}" == item.id) {
                            option.selected = true;
                        }

                        stateSelect.appendChild(option);
                    });

                    if ("{{ old('state_id') }}") {
                        stateSelect.dispatchEvent(new Event('change'));
                    }
                }
            })
            .catch(error => {
                console.error('Error loading states:', error);
            });
    });

    if (countrySelect.value) {
        countrySelect.dispatchEvent(new Event('change'));
    }
}

            if (stateSelect) {
                stateSelect.addEventListener('change', function () {
                    const stateId = this.value;

                    citySelect.innerHTML = '<option value="">{{ __("Select Zone") }}</option>';

                    if (!stateId) return;

                    fetch("{{ route('user.private_seller_marketplace.get_cities') }}?state_id=" + stateId)
                        .then(response => response.json())
                        .then(data => {
                            if (data.cities) {
                                data.cities.forEach(function (item) {
                                    const option = document.createElement('option');
                                    option.value = item.id;
                                    option.textContent = item.name ?? item.title ?? ('Zone #' + item.id);
                                    if ("{{ old('city_id') }}" == item.id) {
                                        option.selected = true;
                                    }
                                    citySelect.appendChild(option);
                                });
                            }
                        });
                });
            }
        });
    </script>
@endsection