@extends('layouts.app')

@section('title', 'Dashboard - Créer un Véhicule')

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    :root {
        --primary-color: #020548;
        --secondary-color: #3b5de7;
        --accent-color: #ff6b6b;
        --light-bg: #f8f9fa;
    }

    .form-container {
        max-width: 800px;
        margin: 0 auto;
        padding: 2rem;
    }

    .form-header {
        background-color: var(--primary-color);
        color: white;
        padding: 1.5rem;
        border-radius: 10px 10px 0 0;
        margin-bottom: 0;
    }

    .form-card {
        border: none;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(2, 5, 72, 0.1);
        overflow: hidden;
    }

    .form-body {
        padding: 2rem;
        background-color: white;
    }

    .form-label {
        font-weight: 600;
        color: var(--primary-color);
        margin-bottom: 0.5rem;
    }

    .form-control, .form-select {
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        padding: 12px 15px;
        transition: all 0.3s;
    }

    .form-control:focus, .form-select:focus {
        border-color: var(--secondary-color);
        box-shadow: 0 0 0 3px rgba(59, 93, 231, 0.1);
    }

    .input-group-text {
        background-color: var(--light-bg);
        color: var(--primary-color);
        font-weight: 500;
    }

    .form-check-input {
        width: 1.2em;
        height: 1.2em;
        margin-top: 0.2em;
    }

    .form-check-label {
        margin-left: 0.5rem;
    }

    .form-switch .form-check-input {
        width: 2.5em;
    }

    .btn-submit {
        background-color: var(--primary-color);
        border: none;
        padding: 12px 30px;
        font-weight: 600;
        letter-spacing: 0.5px;
        transition: all 0.3s;
    }

    .btn-submit:hover {
        background-color: var(--secondary-color);
        transform: translateY(-2px);
    }

    /* Style amélioré pour le champ fichier */
    .file-upload-wrapper {
        position: relative;
        margin-bottom: 1.5rem;
    }

    .file-upload-label {
        display: block;
        padding: 12px;
        border: 2px dashed #e0e0e0;
        border-radius: 8px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s;
    }

    .file-upload-label:hover {
        border-color: var(--secondary-color);
        background-color: rgba(59, 93, 231, 0.05);
    }

    .file-upload-input {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    .file-upload-icon {
        font-size: 2rem;
        color: var(--secondary-color);
        margin-bottom: 0.5rem;
    }

    .file-upload-text {
        color: var(--primary-color);
        font-weight: 500;
    }

    .file-upload-hint {
        color: #6c757d;
        font-size: 0.85rem;
    }

    /* Preview des images */
    .image-preview-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 15px;
    }

    .image-preview-item {
        position: relative;
        width: 100px;
        height: 100px;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid #e0e0e0;
    }

    .image-preview-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Breadcrumb personnalisé */
    .custom-breadcrumb {
        background-color: transparent;
        padding: 0;
    }

    .custom-breadcrumb .breadcrumb-item a {
        color: var(--secondary-color);
        text-decoration: none;
    }

    .custom-breadcrumb .breadcrumb-item.active {
        color: var(--primary-color);
        font-weight: 500;
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <!-- En-tête de page -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h2 class="fw-bold mb-0" style="color: var(--primary-color);">
                    <i class="fas fa-car me-2"></i>Création de Véhicule
                </h2>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb custom-breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Nouveau Véhicule</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <!-- Carte de formulaire -->
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="form-card">
                <h4 class="form-header">
                    <i class="fas fa-plus-circle me-2"></i>Ajouter un nouveau véhicule
                </h4>

                <div class="form-body">
                    <form action="{{ route('formVehicule.submit') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <!-- 1. Nom du véhicule -->
                        <div class="mb-4">
                            <label for="name" class="form-label">Nom du véhicule <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="name" name="name" placeholder="Ex: Toyota RAV4" required>
                        </div>

                        <!-- 2. Image du véhicule -->
                        <div class="mb-4">
                            <label class="form-label">Images du véhicule <span class="text-danger">*</span></label>
                            <div class="file-upload-wrapper">
                                <label for="images" class="file-upload-label">
                                    <div class="file-upload-icon">
                                        <i class="fas fa-cloud-upload-alt"></i>
                                    </div>
                                    <div class="file-upload-text">Glissez-déposez vos fichiers ou cliquez pour parcourir</div>
                                    <div class="file-upload-hint">Formats acceptés : JPG, PNG (Max 2MB par fichier)</div>
                                </label>
                                <input type="file" id="images" name="images[]" multiple accept="image/*" class="file-upload-input">
                            </div>

                            <!-- Aperçu des images -->
                            <div class="image-preview-container" id="imagePreview"></div>

                            @error('images')
                                <div class="text-danger mt-2">{{ $message }}</div>
                            @enderror
                            @error('images.*')
                                <div class="text-danger mt-2">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- 3. Capacités -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label for="luggage" class="form-label">Nombre de bagages <span class="text-danger">*</span></label>
                                <select class="form-select" id="luggage" name="luggage" required>
                                    <option value="" selected disabled>Choisir...</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4+">4+</option>
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label for="number_of_seats" class="form-label">Nombre de sièges <span class="text-danger">*</span></label>
                                <select class="form-select" id="number_of_seats" name="number_of_seats" required>
                                    <option value="" selected disabled>Choisir...</option>
                                    <option value="2">2</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                </select>
                            </div>
                        </div>

                        <!-- 4. Climatisation -->
                        <div class="mb-4">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="air_conditioning" name="air_conditioning" value="1">
                                <label class="form-check-label" for="air_conditioning">Climatisation disponible</label>
                            </div>
                        </div>

                        <!-- 5. Prix -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label for="price_economy" class="form-label">Prix économique (FCFA/jour) <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="number" class="form-control" id="price_economy" name="price_economy" placeholder="Ex: 25000" required>
                                    <span class="input-group-text">FCFA</span>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <label for="price_business" class="form-label">Prix affaire (FCFA/jour) <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="number" class="form-control" id="price_business" name="price_business" placeholder="Ex: 35000" required>
                                    <span class="input-group-text">FCFA</span>
                                </div>
                            </div>
                        </div>

                        <!-- Bouton de soumission -->
                        <div class="d-flex justify-content-center mt-5">
                            <button type="submit" class="btn btn-submit">
                                <i class="fas fa-save me-2"></i>Enregistrer le véhicule
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        // Initialiser Select2 pour les selects
        $('.form-select').select2({
            minimumResultsForSearch: Infinity,
            width: '100%'
        });

        // Aperçu des images avant upload
        $('#images').change(function() {
            $('#imagePreview').empty();
            if (this.files) {
                $.each(this.files, function(i, file) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#imagePreview').append(
                            '<div class="image-preview-item">' +
                                '<img src="' + e.target.result + '" alt="Preview">' +
                            '</div>'
                        );
                    }
                    reader.readAsDataURL(file);
                });
            }
        });

        // Animation des champs au focus
        $('.form-control, .form-select').focus(function() {
            $(this).parent().find('.form-label').css('color', '#3b5de7');
        }).blur(function() {
            $(this).parent().find('.form-label').css('color', '#020548');
        });
    });
</script>
@endpush
