@extends('layouts.app')

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

@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, .form-check-input {
        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);
    }

    .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 de l'image */
    .image-preview-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 15px;
    }

    .image-preview-item {
        position: relative;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        overflow: hidden;
        border: 3px 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;
    }

    /* Section options */
    .option-section {
        padding: 1.5rem;
        border-radius: 8px;
        background-color: var(--light-bg);
        margin-bottom: 1.5rem;
    }

    .option-title {
        color: var(--primary-color);
        font-weight: 600;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
    }

    .option-title i {
        margin-right: 10px;
        font-size: 1.2rem;
    }

    /* Disponibilité */
    .availability-section {
        padding: 1rem;
        border-radius: 8px;
        background-color: var(--light-bg);
        margin-bottom: 1.5rem;
    }
</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-id-card-alt me-2"></i>Création de Conducteur
                </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 Conducteur</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <!-- Carte de formulaire -->
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="form-card">
                <h4 class="form-header">
                    <i class="fas fa-user-plus me-2"></i>Ajouter un nouveau conducteur
                </h4>

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

                        <!-- 1. Informations de base -->
                        <div class="mb-4">
                            <label for="name" class="form-label">Nom complet <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="name" name="name" value="{{ old('name') }}" placeholder="Ex: Jean Dupont" required>
                            @error('name')
                                <div class="text-danger mt-2">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- 2. Photo -->
                        <div class="mb-4">
                            <label class="form-label">Photo du conducteur <span class="text-danger">*</span></label>
                            <div class="file-upload-wrapper">
                                <label for="image_urlc" class="file-upload-label">
                                    <div class="file-upload-icon">
                                        <i class="fas fa-camera"></i>
                                    </div>
                                    <div class="file-upload-text">Cliquez pour sélectionner une photo</div>
                                    <div class="file-upload-hint">Formats acceptés : JPG, PNG (Max 2MB)</div>
                                </label>
                                <input type="file" id="image_urlc" name="image_urlc" accept="image/*" class="file-upload-input" required>
                            </div>

                            <!-- Aperçu de l'image -->
                            <div class="image-preview-container" id="imagePreview"></div>

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

                        <!-- 3. Coordonnées -->
                        <div class="option-section">
                            <h5 class="option-title"><i class="fas fa-phone-alt"></i> Coordonnées</h5>

                            <div class="mb-3">
                                <label for="telephone" class="form-label">Téléphone <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="telephone" name="telephone" value="{{ old('telephone') }}" placeholder="Ex: +225 07 00 00 00 00" required>
                                @error('telephone')
                                    <div class="text-danger mt-2">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- 4. Disponibilité -->
                        {{-- <div class="availability-section">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="disponible" name="disponible" value="1" {{ old('disponible', 1) ? 'checked' : '' }}>
                                <label class="form-check-label" for="disponible">Disponible immédiatement</label>
                                <small class="text-muted d-block mt-1">Décochez si le conducteur n'est pas disponible pour le moment</small>
                            </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 conducteur
                            </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() {
        // Aperçu de l'image avant upload
        $('#image_urlc').change(function() {
            $('#imagePreview').empty();
            if (this.files && this.files[0]) {
                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(this.files[0]);
            }
        });

        // Formatage du numéro de téléphone
        $('#telephone').on('input', function() {
            var phone = $(this).val().replace(/\D/g, '');
            if (phone.length > 0) {
                phone = phone.match(/(\d{0,2})(\d{0,2})(\d{0,2})(\d{0,2})(\d{0,2})/);
                $(this).val(phone[1] + ' ' + phone[2] + ' ' + phone[3] + ' ' + phone[4] + ' ' + phone[5]);
            }
        });
    });
</script>
@endpush
