@extends('layouts.app')

@section('title', 'Rapport d\'intervention')

@section('content')
<div class="container mx-auto px-4 py-8 max-w-4xl">
    <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">
            <div class="flex justify-between items-center">
                
                <div>
                    <h1 class="text-2xl md:text-3xl font-bold text-center">Rapport d'intervention</h1>
                    <p class="text-center text-blue-100">Filtration Eau de Pluie</p>
                </div>

                
                <div class="w-24"></div> 
                <a href="{{ route('dashboard') }}" class="inline-flex items-center px-3 py-2 bg-blue-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-900 active:bg-blue-900 focus:outline-none focus:border-blue-900 focus:ring focus:ring-blue-300 disabled:opacity-25 transition">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 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>
                    Retour
                </a>
            </div>
        </div>
        <form id="intervention-form" action="{{ route('interventions.store') }}" method="POST" class="p-6 space-y-8">
            @csrf
            <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" 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" 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" 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" 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" 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="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                    </svg>
                    Technicien
                </h2>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="technician_last_name" class="block text-sm font-medium text-gray-700 mb-1">Nom du technicien</label>
                        <input type="text" id="technician_last_name" name="technician_last_name" value="{{ auth()->user()->name ?? auth()->user()->last_name ?? '' }}" readonly
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-gray-100">
                    </div>
                    <div>
                        <label for="technician_first_name" class="block text-sm font-medium text-gray-700 mb-1">Prénom du technicien</label>
                        <input type="text" id="technician_first_name" name="technician_first_name" value="{{ auth()->user()->firstname ?? auth()->user()->first_name ?? 'Technicien' }}" readonly
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-gray-100">
                    </div>
                    <input type="hidden" name="technician_id" value="{{ auth()->id() }}">
                </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">
                    <label class="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-blue-100 transition-colors cursor-pointer">
                        <input type="radio" name="pack" value="standard" required class="h-5 w-5 text-blue-600 focus:ring-blue-500">
                        <span class="ml-3 text-gray-800">
                            <span class="font-medium">Pack Filtration Standard</span>
                            <span class="ml-2 text-blue-600 font-semibold">89 € TTC</span>
                        </span>
                    </label>
                    
                    <label class="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-blue-100 transition-colors cursor-pointer">
                        <input type="radio" name="pack" value="uv" class="h-5 w-5 text-blue-600 focus:ring-blue-500">
                        <span class="ml-3 text-gray-800">
                            <span class="font-medium">Pack Filtration UV</span>
                            <span class="ml-2 text-blue-600 font-semibold">149 € TTC</span>
                        </span>
                    </label>
                </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-3">
                    <label class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-blue-100 transition-colors cursor-pointer">
                        <input type="checkbox" name="tasks[]" value="Remplacement filtre charbon" class="h-5 w-5 text-blue-600 focus:ring-blue-500">
                        <span class="ml-3 text-gray-800">Remplacement du filtre à charbon</span>
                    </label>
                    
                    <label class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-blue-100 transition-colors cursor-pointer">
                        <input type="checkbox" name="tasks[]" value="Nettoyage porte-filtre" class="h-5 w-5 text-blue-600 focus:ring-blue-500">
                        <span class="ml-3 text-gray-800">Nettoyage du porte-filtre</span>
                    </label>
                    
                    <label class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-blue-100 transition-colors cursor-pointer">
                        <input type="checkbox" name="tasks[]" value="Contrôle pression débit" class="h-5 w-5 text-blue-600 focus:ring-blue-500">
                        <span class="ml-3 text-gray-800">Contrôle de la pression / débit</span>
                    </label>
                    
                    <label class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-blue-100 transition-colors cursor-pointer">
                        <input type="checkbox" name="tasks[]" value="Contrôle lampe UV" class="h-5 w-5 text-blue-600 focus:ring-blue-500">
                        <span class="ml-3 text-gray-800">Contrôle visuel de la lampe UV</span>
                    </label>
                    
                    <label class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-blue-100 transition-colors cursor-pointer">
                        <input type="checkbox" name="tasks[]" value="Nettoyage manchon quartz" class="h-5 w-5 text-blue-600 focus:ring-blue-500">
                        <span class="ml-3 text-gray-800">Nettoyage du manchon quartz</span>
                    </label>
                    
                    <label class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-blue-100 transition-colors cursor-pointer">
                        <input type="checkbox" name="tasks[]" value="Remplacement lampe UV" class="h-5 w-5 text-blue-600 focus:ring-blue-500">
                        <span class="ml-3 text-gray-800">Remplacement de la lampe UV</span>
                    </label>
                    
                    <label class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-blue-100 transition-colors cursor-pointer md:col-span-2">
                        <input type="checkbox" name="tasks[]" value="Contrôle boîtier UV" class="h-5 w-5 text-blue-600 focus:ring-blue-500">
                        <span class="ml-3 text-gray-800">Contrôle du boîtier UV</span>
                    </label>
                </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>
                
                <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"></textarea>
            </div>
            
        
            <div class="flex justify-center pt-4">
                <button type="submit" id="submit-btn" class="px-8 py-4 bg-gradient-to-r from-blue-600 to-blue-800 text-white font-semibold rounded-lg shadow-lg hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transform transition hover:scale-105">
                    Enregistrer et envoyer le rapport
                </button>
            </div>
        </form>
        
        
        <div class="bg-gray-100 p-4 text-center text-gray-600 text-sm">
            © {{ date('Y') }} Filtration Eau de Pluie - Tous droits réservés
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('intervention-form');
        const submitBtn = document.getElementById('submit-btn');
        
        // Create notification container
        const notificationContainer = document.createElement('div');
        notificationContainer.className = 'fixed top-4 right-4 z-50 flex flex-col gap-2';
        document.body.appendChild(notificationContainer);
        
        // Function to show notification
        function showNotification(message, type = 'success') {
            const notification = document.createElement('div');
            notification.className = `p-4 rounded-lg shadow-lg transform transition-all duration-300 flex items-center ${
                type === 'success' ? 'bg-green-500 text-white' : 'bg-red-500 text-white'
            }`;
            
            const icon = document.createElement('span');
            icon.className = 'mr-2';
            icon.innerHTML = type === 'success' 
                ? '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>'
                : '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>';
            
            const text = document.createElement('span');
            text.textContent = message;
            
            notification.appendChild(icon);
            notification.appendChild(text);
            notificationContainer.appendChild(notification);
            
            // Auto remove after 5 seconds
            setTimeout(() => {
                notification.classList.add('opacity-0', 'translate-x-full');
                setTimeout(() => {
                    notification.remove();
                }, 300);
            }, 5000);
        }
        
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Disable button to prevent multiple submissions
            submitBtn.disabled = true;
            submitBtn.innerText = 'Envoi en cours...';
            
            // Check required fields
            const requiredFields = form.querySelectorAll('[required]');
            let hasError = false;
            
            requiredFields.forEach(field => {
                if (!field.value.trim()) {
                    hasError = true;
                    field.classList.add('border-red-500');
                    
                    // Add error message if it doesn't exist
                    let errorMsg = field.parentNode.querySelector('.error-message');
                    if (!errorMsg) {
                        errorMsg = document.createElement('p');
                        errorMsg.className = 'text-red-500 text-sm mt-1 error-message';
                        errorMsg.innerText = 'Ce champ est obligatoire';
                        field.parentNode.appendChild(errorMsg);
                    }
                } else {
                    field.classList.remove('border-red-500');
                    const errorMsg = field.parentNode.querySelector('.error-message');
                    if (errorMsg) {
                        errorMsg.remove();
                    }
                }
            });
            
            // Check if at least one pack is selected
            const packSelected = form.querySelector('input[name="pack"]:checked');
            if (!packSelected) {
                hasError = true;
                showNotification('Veuillez sélectionner un pack', 'error');
            }
            
            if (hasError) {
                submitBtn.disabled = false;
                submitBtn.innerText = 'Enregistrer et envoyer le rapport';
                return;
            }
            
            // Submit the form using traditional form submission
            form.submit();
        });
        
        // Clear error styling when user types in a field
        form.querySelectorAll('input, textarea, select').forEach(field => {
            field.addEventListener('input', function() {
                this.classList.remove('border-red-500');
                const errorMsg = this.parentNode.querySelector('.error-message');
                if (errorMsg) {
                    errorMsg.remove();
                }
            });
        });
    });
</script>
@endsection