@extends('layouts.app')

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

    <form action="{{ route('abonnements.update', $abonnement) }}" method="POST" enctype="multipart/form-data" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
        @csrf
        @method('PUT')
        
        <!-- 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', $abonnement->engin_type) == 'Voiture') ? 'selected' : '' }}>Voiture</option>
                        <option value="Moto" {{ (old('engin_type', $abonnement->engin_type) == 'Moto') ? 'selected' : '' }}>Moto</option>
                        <option value="Camion" {{ (old('engin_type', $abonnement->engin_type) == 'Camion') ? 'selected' : '' }}>Camion</option>
                        <option value="Bus" {{ (old('engin_type', $abonnement->engin_type) == 'Bus') ? 'selected' : '' }}>Bus</option>
                        <option value="Scooter" {{ (old('engin_type', $abonnement->engin_type) == 'Scooter') ? 'selected' : '' }}>Scooter</option>
                        <option value="Vélo" {{ (old('engin_type', $abonnement->engin_type) == 'Vélo') ? 'selected' : '' }}>Vélo</option>
                        <option value="Camionnette" {{ (old('engin_type', $abonnement->engin_type) == 'Camionnette') ? 'selected' : '' }}>Camionnette</option>
                        <option value="Tracteur" {{ (old('engin_type', $abonnement->engin_type) == 'Tracteur') ? 'selected' : '' }}>Tracteur</option>
                        <option value="Tricycle" {{ (old('engin_type', $abonnement->engin_type) == 'Tricycle') ? 'selected' : '' }}>Tricycle</option>
                        <option value="Autre" {{ (in_array(old('engin_type', $abonnement->engin_type), ['Voiture', 'Moto', 'Camion', 'Bus', 'Scooter', 'Vélo', 'Camionnette', 'Tracteur', 'Tricycle'])) ? '' : (old('engin_type', $abonnement->engin_type) == 'Autre' ? 'selected' : (in_array($abonnement->engin_type, ['Voiture', 'Moto', 'Camion', 'Bus', 'Scooter', 'Vélo', 'Camionnette', 'Tracteur', 'Tricycle']) ? '' : 'selected')) }}>Autre</option>
                    </select>
                    
                    @php
                        $isCustomEngin = !in_array($abonnement->engin_type, ['Voiture', 'Moto', 'Camion', 'Bus', 'Scooter', 'Vélo', 'Camionnette', 'Tracteur', 'Tricycle']);
                    @endphp
                    
                    <div id="custom_engin_type_container" class="mt-3 {{ $isCustomEngin ? '' : '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', $isCustomEngin ? $abonnement->engin_type : '') }}"
                               {{ $isCustomEngin ? 'required' : '' }}>
                    </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', $abonnement->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', $abonnement->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', $abonnement->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', $abonnement->date_debut->format('Y-m-d')) }}">
                    @error('date_debut') <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="statut">
                        Statut *
                    </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="statut" name="statut" required>
                        <option value="Actif" {{ (old('statut', $abonnement->statut) == 'Actif') ? 'selected' : '' }}>Actif</option>
                        <option value="En attente" {{ (old('statut', $abonnement->statut) == 'En attente') ? 'selected' : '' }}>En attente</option>
                        <option value="Expiré" {{ (old('statut', $abonnement->statut) == 'Expiré') ? 'selected' : '' }}>Expiré</option>
                        <option value="Résilié" {{ (old('statut', $abonnement->statut) == 'Résilié') ? 'selected' : '' }}>Résilié</option>
                    </select>
                    @error('statut') <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="facture">
                        Facture (laisser vide pour conserver l'actuelle)
                    </label>
                    @if($abonnement->facture_path)
                    <div class="mb-2">
                        <a href="{{ asset('storage/' . $abonnement->facture_path) }}" target="_blank" class="text-blue-600 hover:text-blue-800 text-sm">
                            <i class="fas fa-file-image"></i> Voir la facture actuelle
                        </a>
                    </div>
                    @endif
                    <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="facture" 
                           name="facture" 
                           type="file" 
                           accept="image/*">
                    @error('facture') <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 disabled:opacity-50 disabled:cursor-not-allowed" type="submit" onclick="this.disabled=true; this.classList.add('opacity-50'); this.innerHTML='<i class=\'fas fa-spinner fa-spin\'></i> Traitement en cours...'; this.closest('form').submit();">
                Mettre à jour l'abonnement
            </button>
            <a class="inline-block align-baseline font-bold text-sm text-blue-600 hover:text-blue-800" href="{{ route('abonnements.show', $abonnement) }}">
                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');
        
        const predefinedTypes = ['Voiture', 'Moto', 'Camion', 'Bus', 'Scooter', 'Vélo', 'Camionnette', 'Tracteur', 'Tricycle'];
        
        if (!predefinedTypes.includes(enginType.value) || 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