@extends('layouts.app')

@section('title', 'Modifier l\'intervention')

@section('content')
<div class="container mx-auto px-4 py-8 max-w-4xl">
   
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-2xl md:text-3xl font-bold text-blue-800">Modifier l'intervention</h1>
            <p class="text-gray-600">Intervention #{{ $intervention->id }}</p>
        </div>
        <div>
            <a href="{{ route('interventions.show', $intervention->id) }}" class="px-4 py-2 bg-gray-600 text-white font-medium rounded-lg hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                </svg>
                Annuler
            </a>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-xl overflow-hidden">
       
        <div class="bg-gradient-to-r from-blue-600 to-blue-800 p-6 text-white">
            <h1 class="text-2xl md:text-3xl font-bold text-center">Modifier le rapport d'intervention</h1>
            <p class="text-center text-blue-100">Filtration Eau de Pluie</p>
        </div>
        
        <form action="{{ route('interventions.update', $intervention->id) }}" method="POST" class="p-6 space-y-8">
            @csrf
            @method('PUT')
            
            
            <div class="bg-blue-50 rounded-lg p-6 shadow-sm">
                <h2 class="text-xl font-semibold text-blue-800 mb-4 flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                    </svg>
                    Informations client
                </h2>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="last_name" class="block text-sm font-medium text-gray-700 mb-1">Nom</label>
                        <input type="text" id="last_name" name="last_name" value="{{ $intervention->last_name }}" required 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                    </div>
                    
                    <div>
                        <label for="first_name" class="block text-sm font-medium text-gray-700 mb-1">Prénom</label>
                        <input type="text" id="first_name" name="first_name" value="{{ $intervention->first_name }}" required 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                    </div>
                    
                    <div class="md:col-span-2">
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Adresse email</label>
                        <input type="email" id="email" name="email" value="{{ $intervention->email }}" required 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                    </div>
                    
                    <div class="md:col-span-2">
                        <label for="address" class="block text-sm font-medium text-gray-700 mb-1">Adresse de l'intervention</label>
                        <input type="text" id="address" name="address" value="{{ $intervention->address }}" required 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                    </div>
                    
                    <div>
                        <label for="date" class="block text-sm font-medium text-gray-700 mb-1">Date de l'intervention</label>
                        <input type="date" id="date" name="date" value="{{ $intervention->date }}" required 
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                    </div>
                </div>
            </div>
            
           
            <div class="bg-blue-50 rounded-lg p-6 shadow-sm">
                <h2 class="text-xl font-semibold text-blue-800 mb-4 flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
                    </svg>
                    Pack choisi
                </h2>
                
                <div class="space-y-4">
                    <div class="flex items-center">
                        <input type="radio" id="pack_standard" name="pack" value="standard" {{ $intervention->pack === 'standard' ? 'checked' : '' }} 
                            class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300">
                        <label for="pack_standard" class="ml-3 block text-gray-700">
                            <span class="font-medium">Pack Filtration Standard</span>
                            <span class="ml-2 text-blue-600 font-semibold">89 € TTC</span>
                        </label>
                    </div>
                    
                    <div class="flex items-center">
                        <input type="radio" id="pack_uv" name="pack" value="uv" {{ $intervention->pack === 'uv' ? 'checked' : '' }} 
                            class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300">
                        <label for="pack_uv" class="ml-3 block text-gray-700">
                            <span class="font-medium">Pack Filtration UV</span>
                            <span class="ml-2 text-blue-600 font-semibold">149 € TTC</span>
                        </label>
                    </div>
                </div>
            </div>
            
            
            <div class="bg-blue-50 rounded-lg p-6 shadow-sm">
                <h2 class="text-xl font-semibold text-blue-800 mb-4 flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
                    </svg>
                    Tâches effectuées
                </h2>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    @php
                        $tasks = json_decode($intervention->tasks) ?? [];
                    @endphp
                    
                    <div class="flex items-center">
                        <input type="checkbox" id="task_charbon" name="tasks[]" value="Remplacement filtre charbon" 
                            {{ in_array('Remplacement filtre charbon', $tasks) ? 'checked' : '' }}
                            class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="task_charbon" class="ml-3 block text-gray-700">
                            Remplacement du filtre à charbon
                        </label>
                    </div>
                    
                    <div class="flex items-center">
                        <input type="checkbox" id="task_porte_filtre" name="tasks[]" value="Nettoyage porte-filtre" 
                            {{ in_array('Nettoyage porte-filtre', $tasks) ? 'checked' : '' }}
                            class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="task_porte_filtre" class="ml-3 block text-gray-700">
                            Nettoyage du porte-filtre
                        </label>
                    </div>
                    
                    <div class="flex items-center">
                        <input type="checkbox" id="task_pression" name="tasks[]" value="Contrôle pression débit" 
                            {{ in_array('Contrôle pression débit', $tasks) ? 'checked' : '' }}
                            class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="task_pression" class="ml-3 block text-gray-700">
                            Contrôle de la pression / débit
                        </label>
                    </div>
                    
                    <div class="flex items-center">
                        <input type="checkbox" id="task_lampe_uv" name="tasks[]" value="Contrôle lampe UV" 
                            {{ in_array('Contrôle lampe UV', $tasks) ? 'checked' : '' }}
                            class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="task_lampe_uv" class="ml-3 block text-gray-700">
                            Contrôle visuel de la lampe UV
                        </label>
                    </div>
                    
                    <div class="flex items-center">
                        <input type="checkbox" id="task_manchon" name="tasks[]" value="Nettoyage manchon quartz" 
                            {{ in_array('Nettoyage manchon quartz', $tasks) ? 'checked' : '' }}
                            class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="task_manchon" class="ml-3 block text-gray-700">
                            Nettoyage du manchon quartz
                        </label>
                    </div>
                    
                    <div class="flex items-center">
                        <input type="checkbox" id="task_remplacement_uv" name="tasks[]" value="Remplacement lampe UV" 
                            {{ in_array('Remplacement lampe UV', $tasks) ? 'checked' : '' }}
                            class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="task_remplacement_uv" class="ml-3 block text-gray-700">
                            Remplacement de la lampe UV
                        </label>
                    </div>
                    
                    <div class="flex items-center">
                        <input type="checkbox" id="task_boitier_uv" name="tasks[]" value="Contrôle boîtier UV" 
                            {{ in_array('Contrôle boîtier UV', $tasks) ? 'checked' : '' }}
                            class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="task_boitier_uv" class="ml-3 block text-gray-700">
                            Contrôle du boîtier UV
                        </label>
                    </div>
                </div>
            </div>
            
          
            <div class="bg-blue-50 rounded-lg p-6 shadow-sm">
                <h2 class="text-xl font-semibold text-blue-800 mb-4 flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
                    </svg>
                    Commentaires / Observations
                </h2>
                
                <div>
                    <textarea id="notes" name="notes" rows="4" 
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">{{ $intervention->notes }}</textarea>
                    <p class="text-sm text-gray-500 mt-1">Ajoutez ici toute information complémentaire sur l'intervention.</p>
                </div>
            </div>
            
         
            <div class="flex justify-end space-x-4">
                <a href="{{ route('interventions.show', $intervention->id) }}" class="px-6 py-3 bg-gray-500 text-white font-medium rounded-lg hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50 transition-colors">
                    Annuler
                </a>
                <button type="submit" class="px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-800 text-white font-medium rounded-lg hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors">
                    Enregistrer les modifications
                </button>
            </div>
        </form>
    </div>
</div>
@endsection