@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto">
    <h1 class="text-2xl font-bold mb-6">Nouvel Abonnement pour {{ $client->prenom }} {{ $client->nom }}</h1>

    <form action="{{ route('abonnements.store', $client) }}" method="POST" enctype="multipart/form-data" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
        @csrf
        
        <!-- Section Informations de l'engin et GPS -->
        <div class="mb-6">
            <h2 class="text-lg font-semibold mb-3 text-blue-800">Informations de l'engin et GPS</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="engin_type">
                        Type d'engin *
                    </label>
                    <select class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="engin_type" name="engin_type" required onchange="toggleCustomEnginType()">
                        <option value="">Sélectionnez un type d'engin</option>
                        <option value="Voiture" {{ old('engin_type') == 'Voiture' ? 'selected' : '' }}>Voiture</option>
                        <option value="Moto" {{ old('engin_type') == 'Moto' ? 'selected' : '' }}>Moto</option>
                        <option value="Camion" {{ old('engin_type') == 'Camion' ? 'selected' : '' }}>Camion</option>
                        <option value="Bus" {{ old('engin_type') == 'Bus' ? 'selected' : '' }}>Bus</option>
                        <option value="Scooter" {{ old('engin_type') == 'Scooter' ? 'selected' : '' }}>Scooter</option>
                        <option value="Vélo" {{ old('engin_type') == 'Vélo' ? 'selected' : '' }}>Vélo</option>
                        <option value="Camionnette" {{ old('engin_type') == 'Camionnette' ? 'selected' : '' }}>Camionnette</option>
                        <option value="Tracteur" {{ old('engin_type') == 'Tracteur' ? 'selected' : '' }}>Tracteur</option>
                        <option value="Tricycle" {{ old('engin_type') == 'Tricycle' ? 'selected' : '' }}>Tricycle</option>
                        <option value="Autre" {{ old('engin_type') == 'Autre' ? 'selected' : '' }}>Autre</option>
                    </select>
                    
                    <div id="custom_engin_type_container" class="mt-3 hidden">
                        <label class="block text-gray-700 text-sm font-bold mb-2" for="custom_engin_type">
                            Précisez le type d'engin *
                        </label>
                        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="custom_engin_type" name="custom_engin_type" type="text" placeholder="Entrez le type d'engin" value="{{ old('custom_engin_type') }}">
                    </div>
                    
                    @error('engin_type') <p class="text-red-500 text-xs italic">{{ $message }}</p> @enderror
                    @error('custom_engin_type') <p class="text-red-500 text-xs italic">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="engin_immatriculation">
                        Immatriculation *
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="engin_immatriculation" name="engin_immatriculation" type="text" placeholder="Numéro d'immatriculation" required value="{{ old('engin_immatriculation') }}">
                    @error('engin_immatriculation') <p class="text-red-500 text-xs italic">{{ $message }}</p> @enderror
                </div>
                
                <div class="md:col-span-2">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="gps_numero">
                        Numéro GPS *
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="gps_numero" name="gps_numero" type="text" placeholder="Numéro de série du GPS" required value="{{ old('gps_numero') }}">
                    @error('gps_numero') <p class="text-red-500 text-xs italic">{{ $message }}</p> @enderror
                </div>
            </div>
        </div>
        
        <div class="mb-4">
            <h2 class="text-lg font-semibold mb-3 text-blue-800">Informations sur l'abonnement</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="type_abonnement">
                        Durée (mois) *
                    </label>
                    <select class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="type_abonnement" name="type_abonnement" required>
                        <option value="">Sélectionner la durée</option>
                        @for($i = 1; $i <= 12; $i++)
                        <option value="{{ $i }}" {{ old('type_abonnement') == $i ? 'selected' : '' }}>{{ $i }} mois - {{ number_format($i * 2000, 0, ',', ' ') }} FCFA</option>
                        @endfor
                    </select>
                    @error('type_abonnement') <p class="text-red-500 text-xs italic">{{ $message }}</p> @enderror
                </div>
                
                <div>
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="date_debut">
                        Date de début *
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="date_debut" name="date_debut" type="date" required value="{{ old('date_debut', date('Y-m-d')) }}">
                    @error('date_debut') <p class="text-red-500 text-xs italic">{{ $message }}</p> @enderror
                </div>
                
                
            </div>
        </div>
        
        <div class="flex items-center justify-between">
            <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
                Créer l'abonnement
            </button>
            <a class="inline-block align-baseline font-bold text-sm text-blue-600 hover:text-blue-800" href="{{ route('clients.show', $client) }}">
                Annuler
            </a>
        </div>
    </form>
</div>

<script>
    document.getElementById('type_abonnement').addEventListener('change', function() {
        const duree = this.value;
        if (duree) {
            const prix = duree * 2000;
            document.getElementById('prix').value = prix.toLocaleString('fr-FR') + ' FCFA';
        } else {
            document.getElementById('prix').value = '';
        }
    });

    function toggleCustomEnginType() {
        const enginType = document.getElementById('engin_type');
        const customContainer = document.getElementById('custom_engin_type_container');
        const customInput = document.getElementById('custom_engin_type');
        
        if (enginType.value === 'Autre') {
            customContainer.classList.remove('hidden');
            customInput.required = true;
        } else {
            customContainer.classList.add('hidden');
            customInput.required = false;
            customInput.value = '';
        }
    }

    // Initialiser l'état au chargement de la page
    document.addEventListener('DOMContentLoaded', function() {
        toggleCustomEnginType();
    });
</script>
@endsection