@extends('admin.layout.master')
@section('title', __('admin.add_car'))

@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row">
            <div class="col-md-12">
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">{{ __('admin.add_car') }}</h5>
                        <div>
                            <a href="{{ route('admin.cars.index') }}" class="btn btn-secondary mb-3">
                                {{ __('admin.back_to_car') }}
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('admin.cars.update', $car->id) }}" method="POST"
                            enctype="multipart/form-data">
                            @csrf
                            @method('POST')
                            <div class="modal-body">
                                <div class="row">
                                    <div class="mb-3 col-md-6">
                                        <label for="name_ar" class="form-label">{{ __('admin.name_ar') }}</label>
                                        <input type="text" class="form-control" id="name_ar" name="name_ar"
                                            value="{{ old('name_ar', $car->getTranslation('name', 'ar')) }}"
                                            placeholder="{{ __('admin.name') }}">
                                        @error('name_ar')
                                            <div class="alert alert-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="mb-3 col-md-6">
                                        <label for="name_en" class="form-label">{{ __('admin.name_en') }}</label>
                                        <input type="text" class="form-control" id="name_en" name="name_en"
                                            value="{{ old('name_en', $car->getTranslation('name', 'en')) }}"
                                            placeholder="{{ __('admin.name') }}">
                                        @error('name_en')
                                            <div class="alert alert-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="mb-3 col-md-6">
                                        <label for="features_ar" class="form-label">{{ __('admin.features_ar') }}</label>
                                        <input type="text" class="form-control" id="features_ar" name="features_ar"
                                               value="{{ old('features_ar', $car->getTranslation('features', 'ar')) }}"
                                               placeholder="{{ __('admin.features_ar') }}">
                                        @error('features_ar')
                                        <div class="alert alert-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="mb-3 col-md-6">
                                        <label for="features_en" class="form-label">{{ __('admin.features_en') }}</label>
                                        <input type="text" class="form-control" id="features_en" name="features_en"
                                               value="{{ old('features_en', $car->getTranslation('features', 'en')) }}"
                                               placeholder="{{ __('admin.features_en') }}">
                                        @error('features_en')
                                        <div class="alert alert-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="mb-3 col-md-6">
                                        <label for="model_year" class="form-label">{{ __('admin.model_year') }}</label>

                                        <select name="model_year" class="form-control" required>
                                            <option value="" disabled selected>Select Model Year</option>
                                            @for ($year = 1950; $year <= now()->year; $year++)
                                                <option value="{{ $year }}"
                                                    {{ old('model_year', $car->model_year) == $year ? 'selected' : '' }}>
                                                    {{ $year }}</option>
                                            @endfor
                                        </select>
                                        @error('model_year')
                                            <div class="alert alert-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="mb-3 col-md-6">
                                        <label for="transmission" class="form-label">{{ __('admin.transmission') }}</label>
                                        <select name="transmission" id="transmission" class="form-control" required>
                                            <option value="" disabled selected>Choose Transmission</option>
                                            <option value="automatic"
                                                {{ old('transmission', $car->transmission) == 'automatic' ? 'selected' : '' }}>
                                                Automatic</option>
                                            <option value="manual"
                                                {{ old('transmission', $car->transmission) == 'manual' ? 'selected' : '' }}>
                                                Manual</option>
                                        </select>
                                        @error('transmission')
                                            <div class="alert alert-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group mb-3 col-md-6">
                                        <label for="brand_id">Select Brand</label>
                                        <select name="brand_id" id="brand_id" class="form-control" required>
                                            <option value="" disabled selected>Choose a brand</option>
                                            @foreach ($brands as $brand)
                                                <option value="{{ $brand->id }}"
                                                    {{ old('brand_id', $car->brand_id) == $brand->id ? 'selected' : '' }}>
                                                    {{ $brand->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="category_id">Select Category</label>
                                        <select name="category_id" id="category_id" class="form-control" required>
                                            <option value="" disabled selected>Choose a category</option>
                                            @foreach ($categories as $category)
                                                <option value="{{ $category->id }}"
                                                    {{ old('category_id', $car->category_id) == $category->id ? 'selected' : '' }}>
                                                    {{ $category->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="mb-3 col-md-6">
                                        <label for="fuel_type" class="form-label">{{ __('admin.fuel_type') }}</label>
                                        <select name="fuel_type" id="fuel_type" class="form-control" required>
                                            <option value="" disabled selected>Choose Fuel Type</option>
                                            <option value="diesel"
                                                {{ old('fuel_type', $car->fuel_type) == 'diesel' ? 'selected' : '' }}>
                                                Diesel</option>
                                            <option value="electric"
                                                {{ old('fuel_type', $car->fuel_type) == 'electric' ? 'selected' : '' }}>
                                                Electric</option>
                                            <option value="hybrid"
                                                {{ old('fuel_type', $car->fuel_type) == 'hybrid' ? 'selected' : '' }}>
                                                Hybrid</option>
                                            <option value="gasoline"
                                                {{ old('fuel_type', $car->fuel_type) == 'gasoline' ? 'selected' : '' }}>
                                                Gasoline</option>
                                        </select>
                                        @error('fuel_type')
                                            <div class="alert alert-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="mb-3 col-md-6">
                                        <label for="status" class="form-label">{{ __('admin.status') }}</label>
                                        <select name="status" id="status" class="form-select" required>
                                            <option value="available"
                                                {{ old('status', $car->status) === 'available' ? 'selected' : '' }}>
                                                {{ __('admin.available') }}
                                            </option>
                                            <option value="unavailable"
                                                {{ old('status', $car->status) === 'unavailable' ? 'selected' : '' }}>
                                                {{ __('admin.unavailable') }}
                                            </option>
                                        </select>
                                        @error('status')
                                            <div class="text-danger small mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="row">
                                        <div class="mb-3 col-md-4">
                                            <label for="seats" class="form-label">{{ __('admin.seats') }}</label>
                                            <input type="number" name="seats" id="seats" class="form-control"
                                                value="{{ old('seats', $car->seats) }}" required>
                                            @error('seats')
                                                <div class="text-danger small mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="mb-3 col-md-4">
                                            <label for="doors" class="form-label">{{ __('admin.doors') }}</label>
                                            <input type="number" name="doors" id="doors" class="form-control"
                                                value="{{ old('doors', $car->doors) }}" required>
                                            @error('doors')
                                                <div class="text-danger small mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="mb-3 col-md-4">
                                            <label for="luggage" class="form-label">{{ __('admin.luggage') }}</label>
                                            <input type="number" name="luggage" id="luggage" class="form-control"
                                                value="{{ old('luggage', $car->luggage) }}" required>
                                            @error('luggage')
                                                <div class="text-danger small mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        {{-- <label for="image" class="form-label">{{ __('admin.image') }}</label>
                                        <input type="file" class="form-control" id="image" name="image"
                                            onchange="previewImage(event)"> --}}

                                        <div class="mb-3">
                                    <label for="image" class="form-label">{{ __('admin.image') }}</label>
                                    <input type="file" class="form-control" id="image" name="image"
                                        onchange="previewImage(event)">
                                    <div class="image-container mt-2">
                                        <img id="imagePreview" class="rounded-circle" src="{{ $car->image_url }}"
                                            style="max-width: 100%; height: auto;" />
                                    </div>
                                    @error('image')
                                        <div class="alert alert-danger">{{ $message }}</div>
                                    @enderror
                                </div>

                                        <div class="image-container mt-2" style="display: none;">
                                            <img id="imagePreview" class="rounded-circle"
                                                style="max-width: 100%; height: auto;" />
                                        </div>

                                        @error('image')
                                            <div class="text-danger small mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>


                                    <div class="modal-footer">
                                        <button class="btn btn-primary" type="submit">{{ __('admin.save') }}</button>
                                    </div>
                                </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

<script>
    function previewImage(event) {
        const reader = new FileReader();
        reader.onload = function() {
            const output = document.getElementById('imagePreview');
            output.src = reader.result;
            document.querySelector('.image-container').style.display = 'block';
        };
        reader.readAsDataURL(event.target.files[0]);
    }
</script>