@extends('layouts.app')

@section('title', 'Détails de 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">Détails de l'intervention</h1>
            <p class="text-gray-600">Intervention du {{ \Carbon\Carbon::parse($intervention->date)->format('d/m/Y') }}</p>
        </div>
        <div class="flex space-x-3">
            <a href="{{ route('interventions.edit', $intervention->id) }}" class="px-4 py-2 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-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="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>
                Modifier
            </a>
            <a href="{{ route('interventions.index') }}" 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>
                Retour
            </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">
            <h2 class="text-2xl font-bold text-center">Rapport d'intervention #{{ $intervention->id }}</h2>
            <p class="text-center text-blue-100">Filtration Eau de Pluie</p>
        </div>
        
        <div class="p-6 space-y-8">
            
            <div class="bg-blue-50 rounded-lg p-6 shadow-sm">
                <h3 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
                </h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <p class="text-sm font-medium text-gray-500">Nom</p>
                        <p class="text-lg font-medium">{{ $intervention->last_name }}</p>
                    </div>
                    
                    <div>
                        <p class="text-sm font-medium text-gray-500">Prénom</p>
                        <p class="text-lg font-medium">{{ $intervention->first_name }}</p>
                    </div>
                    
                    <div class="md:col-span-2">
                        <p class="text-sm font-medium text-gray-500">Adresse email</p>
                        <p class="text-lg font-medium">{{ $intervention->email }}</p>
                    </div>
                    
                    <div class="md:col-span-2">
                        <p class="text-sm font-medium text-gray-500">Adresse de l'intervention</p>
                        <p class="text-lg font-medium">{{ $intervention->address }}</p>
                    </div>
                    
                    <div>
                        <p class="text-sm font-medium text-gray-500">Date de l'intervention</p>
                        <p class="text-lg font-medium">{{ \Carbon\Carbon::parse($intervention->date)->format('d/m/Y') }}</p>
                    </div>
                </div>
            </div>
            
            
            <div class="bg-blue-50 rounded-lg p-6 shadow-sm">
                <h3 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
                </h3>
                
                <div>
                    <p class="text-sm font-medium text-gray-500">Nom du technicien</p>
                    <p class="text-lg font-medium">{{ $intervention->technician_name }}</p>
                </div>
            </div>
            
            
            <div class="bg-blue-50 rounded-lg p-6 shadow-sm">
                <h3 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
                </h3>
                
                <div class="p-4 border border-gray-200 rounded-lg bg-white">
                    <div class="flex items-center">
                        <div class="h-5 w-5 rounded-full {{ $intervention->pack === 'standard' ? 'bg-blue-600' : 'bg-purple-600' }} mr-3 flex items-center justify-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
                            </svg>
                        </div>
                        <span class="text-gray-800">
                            <span class="font-medium">{{ $intervention->pack === 'standard' ? 'Pack Filtration Standard' : 'Pack Filtration UV' }}</span>
                            <span class="ml-2 text-blue-600 font-semibold">{{ $intervention->pack === 'standard' ? '89 € TTC' : '149 € TTC' }}</span>
                        </span>
                    </div>
                </div>
            </div>
            
           
            <div class="bg-blue-50 rounded-lg p-6 shadow-sm">
                <h3 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
                </h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    @php
                        $tasks = json_decode($intervention->tasks) ?? [];
                        $allTasks = [
                            'Remplacement filtre charbon' => 'Remplacement du filtre à charbon',
                            'Nettoyage porte-filtre' => 'Nettoyage du porte-filtre',
                            'Contrôle pression débit' => 'Contrôle de la pression / débit',
                            'Contrôle lampe UV' => 'Contrôle visuel de la lampe UV',
                            'Nettoyage manchon quartz' => 'Nettoyage du manchon quartz',
                            'Remplacement lampe UV' => 'Remplacement de la lampe UV',
                            'Contrôle boîtier UV' => 'Contrôle du boîtier UV'
                        ];
                    @endphp
                    
                    @foreach($allTasks as $key => $label)
                        <div class="p-3 border border-gray-200 rounded-lg {{ in_array($key, $tasks) ? 'bg-green-50 border-green-200' : 'bg-gray-50' }}">
                            <div class="flex items-center">
                                <div class="h-5 w-5 rounded {{ in_array($key, $tasks) ? 'bg-green-500' : 'bg-gray-300' }} mr-3 flex items-center justify-center">
                                    @if(in_array($key, $tasks))
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
                                        </svg>
                                    @endif
                                </div>
                                <span class="text-gray-800 {{ in_array($key, $tasks) ? 'font-medium' : '' }}">{{ $label }}</span>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            
     
            @if($intervention->notes)
            <div class="bg-blue-50 rounded-lg p-6 shadow-sm">
                <h3 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
                </h3>
                
                <div class="p-4 bg-white border border-gray-200 rounded-lg">
                    <p class="whitespace-pre-line">{{ $intervention->notes }}</p>
                </div>
            </div>
            @endif
            
         
            <div class="bg-gray-50 rounded-lg p-6 shadow-sm">
                <h3 class="text-xl font-semibold text-gray-700 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    Informations supplémentaires
                </h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <p class="text-sm font-medium text-gray-500">Créé le</p>
                        <p class="text-gray-700">{{ $intervention->created_at->format('d/m/Y à H:i') }}</p>
                    </div>
                    
                    <div>
                        <p class="text-sm font-medium text-gray-500">Dernière modification</p>
                        <p class="text-gray-700">{{ $intervention->updated_at->format('d/m/Y à H:i') }}</p>
                    </div>
                    
                    <div>
                        <p class="text-sm font-medium text-gray-500">Identifiant</p>
                        <p class="text-gray-700">#{{ $intervention->id }}</p>
                    </div>
                </div>
            </div>
        </div>
        
        <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