@extends('layouts.app')

@section('title', 'Interventions')

@section('content')
<div class="container mx-auto p-6">

    <div id="deleteModal" class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full transform transition-all duration-300 scale-100">
            <div class="p-6">
                <div class="flex items-center justify-center mb-4">
                    <div class="bg-red-100 rounded-full p-3">
                        <svg class="w-8 h-8 text-red-600" 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                        </svg>
                    </div>
                </div>
                <h3 class="text-xl font-bold text-center text-gray-900 mb-2">Confirmer la suppression</h3>
                <p class="text-center text-gray-600 mb-6">Êtes-vous sûr de vouloir supprimer cette intervention ? Cette action est irréversible.</p>
                <div class="flex justify-center space-x-4">
                    <button id="cancelDelete" class="px-4 py-2 bg-gray-300 text-gray-800 rounded-lg hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 transition-colors">
                        Annuler
                    </button>
                    <button id="confirmDelete" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 transition-colors">
                        Supprimer
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-semibold">Mes Interventions</h1>
        <a href="{{ route('dashboard') }}" class="inline-flex items-center px-4 py-2 bg-gray-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring focus:ring-gray-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 class="bg-white rounded-lg shadow-md p-4 mb-6">
        <form id="intervention-filters-form" action="{{ route('interventions.index') }}" method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-4">
           
            <div>
                <label for="search" class="block text-sm font-medium text-gray-700 mb-1">Recherche</label>
                <input
                    type="text"
                    id="search"
                    name="search"
                    value="{{ request('search') }}"
                    placeholder="Rechercher par nom, adresse..."
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
            </div>
            
       
            <div>
                <label for="date" class="block text-sm font-medium text-gray-700 mb-1">Date</label>
                <input
                    type="date"
                    id="date"
                    name="date"
                    value="{{ request('date') }}"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
            </div>
            
            
            <div>
                <label for="pack" class="block text-sm font-medium text-gray-700 mb-1">Pack</label>
                <select
                    id="pack"
                    name="pack"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                >
                    <option value="">Tous les packs</option>
                    <option value="standard" {{ request('pack') == 'standard' ? 'selected' : '' }}>Pack Standard</option>
                    <option value="uv" {{ request('pack') == 'uv' ? 'selected' : '' }}>Pack UV</option>
                </select>
            </div>
            
     
            <div class="flex items-end space-x-2">
                <button type="submit" class="px-4 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
                    Filtrer
                </button>
                <a href="{{ route('interventions.index') }}" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500">
                    Réinitialiser
                </a>
            </div>
        </form>
    </div>
    
    <div class="flex justify-start mb-6">
        <a href="{{ route('welcome') }}" class="inline-flex items-center px-4 py-2 bg-green-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-green-700 active:bg-green-900 focus:outline-none focus:border-green-900 focus:ring focus:ring-green-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="M12 6v6m0 0v6m0-6h6m-6 0H6" />
            </svg>
            Nouvelle intervention
        </a>
    </div>
    
    @if(count($interventions) > 0)
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach($interventions as $intervention)
            @if($intervention->technician_id == Auth::id())
                <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-4">
                            <h2 class="text-xl font-semibold">{{ $intervention->last_name }} {{ $intervention->first_name }}</h2>
                            <span class="px-2 py-1 rounded-full text-xs font-medium {{ $intervention->pack === 'standard' ? 'bg-blue-100 text-blue-800' : 'bg-purple-100 text-purple-800' }}">
                                Pack {{ $intervention->pack === 'standard' ? 'Standard' : 'UV' }}
                            </span>
                        </div>
                        
                        <div class="space-y-2 mb-4">
                            <p class="flex items-center text-gray-700">
                                <svg class="w-4 h-4 mr-2" 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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                </svg>
                                {{ \Carbon\Carbon::parse($intervention->date)->format('d F Y') }}
                            </p>
                            <p class="flex items-center text-gray-700">
                                <svg class="w-4 h-4 mr-2" 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="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path>
                                </svg>
                                {{ $intervention->email }}
                            </p>
                            <p class="flex items-center text-gray-700">
                                <svg class="w-4 h-4 mr-2" 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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                </svg>
                                {{ $intervention->address }}
                            </p>
                            <p class="flex items-center text-gray-700">
                                <svg class="w-4 h-4 mr-2" 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                </svg>
                                {{ $intervention->technician_name }}
                            </p>
                        </div>
                        
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500">
                                {{ \Carbon\Carbon::parse($intervention->created_at)->diffForHumans() }}
                            </span>

                            <div class="flex space-x-2">
                                <a href="{{ route('interventions.show', $intervention->id) }}" 
                                   class="inline-flex items-center px-3 py-1 bg-blue-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-700 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" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                    </svg>
                                </a>
                                
                                <a href="{{ route('interventions.edit', $intervention->id) }}" 
                                   class="inline-flex items-center px-3 py-1 bg-yellow-500 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-yellow-600 active:bg-yellow-800 focus:outline-none focus:border-yellow-800 focus:ring focus:ring-yellow-300 disabled:opacity-25 transition">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                    </svg>
                                </a>
                                
                                <button type="button" 
                                   class="delete-btn inline-flex items-center px-3 py-1 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-700 active:bg-red-900 focus:outline-none focus:border-red-900 focus:ring focus:ring-red-300 disabled:opacity-25 transition"
                                   data-id="{{ $intervention->id }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                    </svg>
                                </button>
                                
                                <form id="delete-form-{{ $intervention->id }}" action="{{ route('interventions.destroy', $intervention->id) }}" method="POST" class="hidden">
                                    @csrf
                                    @method('DELETE')
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                @endif
            @endforeach
        </div>
        
        <div class="mt-6">
            {{ $interventions->links() }}
        </div>
    @else
        <div class="bg-white rounded-lg shadow-md p-6 text-center">
            <p class="text-gray-600">Aucune intervention ne correspond à vos critères de recherche.</p>
        </div>
    @endif
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Modal elements
        const deleteModal = document.getElementById('deleteModal');
        const cancelDelete = document.getElementById('cancelDelete');
        const confirmDelete = document.getElementById('confirmDelete');
        let currentInterventionId = null;
        
        // Show modal when delete button is clicked
        document.querySelectorAll('.delete-btn').forEach(button => {
            button.addEventListener('click', function() {
                currentInterventionId = this.dataset.id;
                deleteModal.classList.remove('hidden');
                // Add animation
                setTimeout(() => {
                    deleteModal.querySelector('div').classList.add('scale-100');
                    deleteModal.querySelector('div').classList.remove('scale-95');
                }, 10);
            });
        });
        
        // Hide modal when cancel button is clicked
        cancelDelete.addEventListener('click', function() {
            closeModal();
        });
        
        // Submit form when confirm button is clicked
        confirmDelete.addEventListener('click', function() {
            if (currentInterventionId) {
                document.getElementById('delete-form-' + currentInterventionId).submit();
            }
        });
        
        // Close modal when clicking outside
        deleteModal.addEventListener('click', function(e) {
            if (e.target === deleteModal) {
                closeModal();
            }
        });
        
        // Close modal function
        function closeModal() {
            deleteModal.querySelector('div').classList.add('scale-95');
            deleteModal.querySelector('div').classList.remove('scale-100');
            setTimeout(() => {
                deleteModal.classList.add('hidden');
            }, 300);
        }
        
        // Escape key to close modal
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && !deleteModal.classList.contains('hidden')) {
                closeModal();
            }
        });
        
        // Détection et suppression des formulaires en double
        const filterForms = document.querySelectorAll('form[action="{{ route('interventions.index') }}"]');
        if (filterForms.length > 1) {
            console.warn('Plusieurs formulaires de filtres détectés. Suppression du premier doublon.');
            // Supprime le premier formulaire au lieu des suivants
            filterForms[0].parentNode.removeChild(filterForms[0]);
            
            // Masquer les messages "Aucune intervention" en double
            const noInterventionsMessages = document.querySelectorAll('.bg-white.rounded-lg.shadow-md.p-6.text-center');
            if (noInterventionsMessages.length > 1) {
                noInterventionsMessages[0].style.display = 'none';
            }
            
            // Masquer les boutons "Nouvelle intervention" en double
            const newInterventionButtons = document.querySelectorAll('a[href="{{ route("welcome") }}"]');
            if (newInterventionButtons.length > 1) {
                newInterventionButtons[0].parentNode.style.display = 'none';
            }
            
            // Masquer les conteneurs de filtres vides
            const emptyFilterContainers = document.querySelectorAll('.bg-white.rounded-lg.shadow-md.p-4.mb-6');
            emptyFilterContainers.forEach(container => {
                if (container.children.length === 0) {
                    container.style.display = 'none';
                }
            });
        }
    });
</script>
@endsection