@extends('layouts.admin')

@section('head')
    <link href="https://fonts.googleapis.com/css2?family=Allura&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap" rel="stylesheet">
@endsection

@section('page-title') Détails de l'intervention @endsection
@section('page-subtitle') Informations complètes sur l'intervention @endsection

@section('styles')
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet" href="{{ asset('css/intervention.css') }}">
    <!-- Meta tags pour le JavaScript -->
    <meta name="intervention-id" content="{{ $intervention->id }}">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <!-- URL de base pour la suppression des commentaires -->
    <meta name="delete-comment-url" content="{{ route('admin.interventions.delete-comment', ['id' => $intervention->id, 'index' => '__INDEX__']) }}">
    <link href="{{ asset('css/layouts/admin.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('css/pages/admin/interventions/show.css') }}?v={{ time() }}">
    <!-- Styles pour la lightbox -->
    <link rel="stylesheet" href="{{ asset('css/pages/admin/interventions/lightbox.css') }}">
    <link rel="stylesheet" href="{{ asset('css/pages/admin/interventions/comments.css') }}">
    <link rel="stylesheet" href="{{ asset('css/pages/admin/interventions/timeline.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
<script src="{{ asset('js/utils/toast-utils.js') }}"></script>

<!-- IMPORTANT: Charger d'abord timeline-utils.js car il contient la fonction globale insertServerRenderedActivity -->
<script src="{{ asset('js/pages/admin/interventions/timeline-utils.js') }}"></script>

<!-- Scripts pour la timeline et les activités -->
<script src="{{ asset('js/pages/admin/interventions/timeline.js') }}"></script>
<script src="{{ asset('js/pages/admin/interventions/deadline-management.js') }}"></script>

<!-- Autres scripts qui dépendent de la fonction globale insertServerRenderedActivity -->
<script src="{{ asset('js/pages/admin/interventions/reload-assigned-workers.js') }}"></script>
<script src="{{ asset('js/pages/admin/interventions/worker-management.js') }}"></script>
<script src="{{ asset('js/pages/admin/interventions/show.js') }}"></script>
<script src="{{ asset('js/pages/admin/interventions/photo-management.js') }}"></script>
<script src="{{ asset('js/pages/admin/interventions/edit-intervention-details.js') }}"></script>
<script src="{{ asset('js/pages/admin/interventions/intervention-date-management.js') }}"></script>
<script src="{{ asset('js/pages/admin/interventions/priority-management.js') }}"></script>

<!-- Script pour la lightbox -->
<script src="{{ asset('js/pages/admin/interventions/lightbox.js') }}"></script>
<script src="{{ asset('js/pages/admin/interventions/comments.js') }}"></script>

<!-- Script pour la conversion des fichiers HEIC -->
<script src="{{ asset('js/utils/heic-converter.js') }}"></script>

<!-- Script pour terminer l'intervention -->
<script src="{{ asset('js/pages/admin/interventions/complete-intervention.js') }}"></script>

@endsection



@section('content')
<div class="intervention-details-page">
    <!-- En-tête avec actions -->
    <div class="page-header-row">
        <div class="main-header-navigation">
            <a href="{{ route('admin.interventions.index') }}" class="back-link">
                <i class="fas fa-arrow-left"></i>
                <span>Retour à la liste</span>
            </a>
        </div>
        <div class="main-header-actions">
            <button type="button" class="btn btn-primary" id="open-activity-history" title="Historique d'activité" data-bs-toggle="modal" data-bs-target="#activityHistoryModal">
                <i class="fas fa-history"></i>
                <span>Historique</span>
            </button>
            <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteInterventionModal">
                <i class="fas fa-trash-alt"></i>
                <span>Supprimer l'intervention</span>
            </button>
        </div>
    </div>

    <!-- Modal: Historique d'activité -->
    <div class="modal fade" id="activityHistoryModal" tabindex="-1" aria-labelledby="activityHistoryModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="activityHistoryModalLabel">
                        <i class="fas fa-history me-2"></i>Historique d'activité
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                </div>
                <div class="modal-body">
                    @include('admin.interventions.partials.activity_history')
                </div>
            </div>
        </div>
    </div>

    <!-- Contenu principal en deux colonnes -->
    <div class="row">
        <!-- Colonne secondaire (droite) - 4 colonnes pour l'historique d'activité -->
        <div class="col-md-4 order-md-2" id="timeline-column">
            <!-- Card d'historique d'activité -->
            <div class="profile-card mb-4">
                <div class="card-header">
                    <h3 class="card-title mb-0">
                        <i class="fas fa-history me-2 text-primary"></i>
                        Historique d'activité
                    </h3>
                </div>
                <div class="profile-card-body">
                    @include('admin.interventions.partials.activity_history')
                </div>
            </div>
        </div>
        
        <!-- Colonne principale (gauche) - 8 colonnes pour les informations générales -->
        <div class="col-md-8 order-md-1">
            <!-- Card Informations du client -->
            <div class="profile-card mb-4">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-user"></i>
                        Informations du client
                    </h3>

                </div>
                <div class="profile-card-body">
                    @php
                        // Default values in case $client is null
                        $clientDisplayName = 'Client inconnu';
                        $clientTypeIcon    = 'fa-user';
                        $clientTypeText    = 'Particulier';
                        $logoUrl           = null;

                        if ($client) {
                            // Use accessors from $client passed by the controller
                            $clientDisplayName = $client->client_display_name ?? ($client->client_name ?? 'Client inconnu');
                            $clientTypeIcon    = $client->type_icon ?? 'fa-user';
                            $clientTypeText    = $client->display_type ?? 'Particulier';
                            $logoUrl           = $client->logo_url; // Accessor handles path logic and asset()
                        }

                        $fullAddress = 'Adresse inconnue'; // Default
                        $floorInfo = null;
                        $sideInfo = null;

                        // PRIORITÉ : Utiliser l'adresse spécifique stockée dans l'intervention
                        if (!empty($intervention->address)) {
                            $fullAddress = $intervention->address;
                            
                            // Afficher l'étage et le côté depuis l'adresse client si disponible,
                            // même si l'address_id ne correspond pas (ex: adresse saisie manuellement)
                            if ($clientAddressObj) {
                                $floorInfo = $clientAddressObj->floor ?? null;
                                $sideInfo = $clientAddressObj->side ?? null;
                            }
                        } else {
                            // FALLBACK : Construire l'adresse à partir des composants du client seulement si pas d'adresse dans l'intervention
                            if ($clientAddressObj) {
                                $_addressParts = [];
                                if (!empty($clientAddressObj->street)) {
                                    $_addressParts[] = trim($clientAddressObj->street);
                                }
                                $_cityPostalParts = [];
                                if (!empty($clientAddressObj->postal_code)) {
                                    $_cityPostalParts[] = trim($clientAddressObj->postal_code);
                                }
                                if (!empty($clientAddressObj->city)) {
                                    $_cityPostalParts[] = trim($clientAddressObj->city);
                                }
                                if (!empty($_cityPostalParts)) {
                                    $_addressParts[] = implode(' ', $_cityPostalParts);
                                }

                                if (!empty($_addressParts)) {
                                    $fullAddress = implode(', ', $_addressParts);
                                } else {
                                    // If constructed address is empty, try client's full_address field as a fallback for client
                                    if (!empty($clientAddressObj->full_address)) {
                                        $fullAddress = $clientAddressObj->full_address;
                                    }
                                }

                                $floorInfo = $clientAddressObj->floor ?? null;
                                $sideInfo = $clientAddressObj->side ?? null;
                            }
                        }
                        
                        // Final check if address is effectively empty
                        if (empty(trim(str_replace(',', '', $fullAddress ?? '')))) {
                            $fullAddress = 'Adresse inconnue';
                        }
                    @endphp
                    <div class="client-info-wrapper">
                        <!-- Logo et type de client à gauche -->
                        <div class="client-info-column logo-column">
                            <div class="client-logo-container">
                                @if($logoUrl)
                                    <img src="{{ $logoUrl }}" alt="{{ $clientDisplayName }}" class="client-logo" title="{{ $clientDisplayName }}">
                                @else
                                    <div class="default-logo">
                                        <i class="fas fa-building" title="{{ $clientDisplayName }}"></i>
                                    </div>
                                @endif
                                
                                <!-- L'affichage de l'ID client a été supprimé -->
                                
                                <div class="client-type mt-1 text-center">
                                    <i class="fas {{ $clientTypeIcon }} me-1 text-primary"></i> {{ $clientTypeText }}
                                </div>
                            </div>
                        </div>
                        
                        <!-- Adresse à droite -->
                        <div class="client-info-column address-column">
                            <div class="address-details">
                                <div class="address-item">
                                    <i class="fas fa-map-marker-alt me-2 text-primary"></i>
                                    <span>{{ $fullAddress }}</span>
                                </div>
                                
                                @if(!empty($floorInfo))
                                <div class="address-item mt-2">
                                    <i class="fas fa-building me-2 text-primary"></i>
                                    <span>Étage : {{ $floorInfo }}</span>
                                </div>
                                @endif
                                
                                @if(!empty($sideInfo))
                                <div class="address-item mt-2">
                                    <i class="fas fa-door-open me-2 text-primary"></i>
                                    <span>Côté : {{ $sideInfo }}</span>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Card Informations de l'intervention -->
            <div class="profile-card mb-4">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-info-circle"></i>
                        Informations de l'intervention
                    </h3>
                </div>
                <div class="profile-card-body">
                    <div class="mb-4">
                        <div class="intervention-header mb-3">
                            <div class="intervention-id">
                                <span>Intervention n° @if(isset($intervention)) {{ !empty($intervention['task_id']) ? $intervention['task_id'] : $intervention['id'] }} @else 123 @endif</span>
                                @php
                                    // Utiliser directement le statut réel de l'intervention depuis la base de données
                                    $currentStatus = $intervention['status'] ?? 'new'; // Par défaut 'new' si non défini
                                    
                                    // Textes des statuts
                                    $statusTexts = [
                                        'new' => 'Non attribuée',
                                        'in_progress' => 'En cours',
                                        'late' => 'En retard',
                                        'planned' => 'Planifiée',
                                        'completed' => 'Terminée'
                                    ];
                                    $currentStatusText = $statusTexts[$currentStatus] ?? 'Non attribuée';
                                @endphp
                                <span class="show-status-badge show-status-badge--{{ $currentStatus }}">{{ $currentStatusText }}</span>
                            </div>
                        </div>
                        
                        <div class="four-column-grid">
                            <!-- Colonne 1: Priorité -->
                            <div class="grid-column priority-column">
                                <div class="detail-label">PRIORITÉ</div>
                                <div class="info-value">
                                    @php
                                        // Determine priority and ID from intervention data (assuming $intervention is an array)
                                        $intervention_priority = 'normal'; // Default
                                        if (isset($intervention['content']['priority']) && !empty($intervention['content']['priority'])) {
                                            $intervention_priority = $intervention['content']['priority'];
                                        } elseif (isset($intervention['priority']) && !empty($intervention['priority'])) {
                                            $intervention_priority = $intervention['priority'];
                                        }

                                        // Set display class and icon based on priority
                                        $priority_badge_class = ($intervention_priority === 'urgent') ? 'priority-badge--urgent' : 'priority-badge--normal';
                                        $priority_font_icon = ($intervention_priority === 'urgent') ? 'fa-exclamation-triangle' : 'fa-check-circle';
                                        
                                        // Get intervention ID (assuming $intervention is an array)
                                        $intervention_id = $intervention['id'] ?? null; 
                                    @endphp
                                    <div class="priority-editor d-inline-flex align-items-center">
                                        {{-- Badge de priorité --}}
                                        <span class="priority-badge {{ $priority_badge_class }} me-2" id="priority-badge-{{ $intervention_id }}">
                                            <i class="fas {{ $priority_font_icon }} me-1"></i>
                                            <span class="priority-text">{{ ucfirst($intervention_priority) }}</span>
                                        </span>
                                        
                                        {{-- Bouton de modification de priorité avec popover --}}
                                        <a href="#" 
                                           class="btn-icon edit-priority-trigger"
                                           id="edit-priority-trigger-{{ $intervention_id }}"
                                           data-bs-toggle="popover" 
                                           data-bs-placement="bottom"
                                           data-bs-html="true"
                                           data-bs-custom-class="priority-popover"
                                           title="Modifier la priorité"
                                           data-bs-content='@include("admin.interventions.partials.priority-options", ["intervention_id" => $intervention_id])'>
                                            <i class="fas fa-edit text-primary"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Colonne 2: Deadline -->
                            <div class="grid-column deadline-column">
                                <div class="detail-label">DEADLINE</div>
                                <div class="info-value" id="deadline-info-container">
                                        {{-- Structure HTML standardisée pour l'affichage de la deadline --}}
                                        @if(isset($intervention['formatted_deadline']) && $intervention['formatted_deadline'] != 'Non définie')
                                            @php
                                                $deadlineDisplay = $intervention['formatted_deadline'];
                                                // Ajouter le jour de la semaine si deadline_raw est disponible
                                                if (isset($intervention['deadline_raw']) && $intervention['deadline_raw']) {
                                                    try {
                                                        $deadlineObj = new \DateTime($intervention['deadline_raw']);
                                                        $dayNames = ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'];
                                                        $dayOfWeek = $dayNames[$deadlineObj->format('w')];
                                                        $deadlineDisplay = $dayOfWeek . ' ' . $intervention['formatted_deadline'];
                                                    } catch (\Exception $e) {
                                                        $deadlineDisplay = $intervention['formatted_deadline']; // Fallback
                                                    }
                                                }
                                            @endphp
                                            <div class="deadline-value">
                                                {{ $deadlineDisplay }}
                                                @if($intervention->days_remaining_text && !in_array(strtolower($intervention->status ?? ''), ['completed', 'terminées', 'terminée']))
                                                    <span class="deadline-remaining {{ $intervention->deadline_class }}">
                                                        {{ $intervention->days_remaining_text }}
                                                    </span>
                                                @endif
                                            </div>
                                            <div class="deadline-actions">
                                                <button class="btn-icon" title="Modifier la deadline" data-bs-toggle="modal" data-bs-target="#deadlineModal">
                                                    <i class="fas fa-edit text-primary"></i>
                                                </button>
                                                <button type="button" class="delete-btn" title="Supprimer la deadline" data-bs-toggle="modal" data-bs-target="#deleteDeadlineModal">
                                                    <i class="fas fa-trash text-danger"></i>
                                                </button>
                                            </div>
                                        @else
                                            <div id="no-deadline-message" class="d-flex align-items-center">
                                                <span class="text-muted me-2">Non définie</span>
                                                <button class="btn-icon" title="Ajouter une deadline" data-bs-toggle="modal" data-bs-target="#deadlineModal">
                                                    <i class="fas fa-plus text-primary"></i>
                                                </button>
                                            </div>
                                        @endif
                                </div>
                            </div>
                            
                            <!-- Colonne 3: Date d'intervention -->
                            <div class="grid-column intervention-date-column">
                                <div class="detail-label">DATE D'INTERVENTION</div>
                                <div class="info-value" id="intervention-date-dynamic-content">
                                    <template id="intervention-date-set-template">
                                        <div class="intervention-date-display d-flex align-items-center">
                                            <span data-template-target="intervention-date-text" class="date-text"></span>
                                            <div class="intervention-date-actions">
                                                <button class="btn-icon" title="Modifier la date d'intervention" data-bs-toggle="modal" data-bs-target="#interventionDateModal">
                                                    <i class="fas fa-edit text-primary"></i>
                                                </button>
                                                <button type="button" class="delete-btn" title="Supprimer la date d'intervention" data-bs-toggle="modal" data-bs-target="#deleteInterventionDateModal">
                                                    <i class="fas fa-trash text-danger"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </template>
                                    <template id="intervention-date-not-set-template">
                                        <div class="intervention-date-display d-flex align-items-center">
                                            <span class="text-muted me-2">Non définie</span>
                                            <button class="btn-icon" title="Ajouter une date d'intervention" data-bs-toggle="modal" data-bs-target="#interventionDateModal">
                                                <i class="fas fa-plus text-primary"></i>
                                            </button>
                                        </div>
                                    </template>
                                    @php
                                        $interventionDateFromController = $intervention['intervention_date'] ?? null;
                                        // A date is considered set if it's not null, not an empty string, 
                                        // and not the specific placeholder string 'Non programmée'.
                                        $hasInterventionDate = ($interventionDateFromController !== null && $interventionDateFromController !== '' && $interventionDateFromController !== 'Non programmée');
                                    @endphp

                                    @if($hasInterventionDate)
                                        @php
                                            $formattedDateDisplay = $interventionDateFromController;
                                            $formattedDateWithDay = $interventionDateFromController;
                                            try {
                                                if (strtotime($interventionDateFromController)) { 
                                                    $dateObj = new DateTime($interventionDateFromController);
                                                    $formattedDateDisplay = $dateObj->format('d/m/Y');
                                                    
                                                    // Ajouter le jour de la semaine
                                                    $dayNames = ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'];
                                                    $dayOfWeek = $dayNames[$dateObj->format('w')];
                                                    $formattedDateWithDay = $dayOfWeek . ' ' . $formattedDateDisplay;
                                                }
                                            } catch (\Exception $e) {
                                                // Log::error('Date formatting error: ' . $e->getMessage());
                                                $formattedDateWithDay = $formattedDateDisplay; // Fallback
                                            }
                                        @endphp
                                        <div class="intervention-date-display d-flex align-items-center">
                                            <span data-template-target="intervention-date-text" class="date-text">{{ $formattedDateWithDay }}</span>
                                            <div class="intervention-date-actions ms-2 d-inline-flex">
                                                <button class="btn-icon" title="Modifier la date d'intervention" data-bs-toggle="modal" data-bs-target="#interventionDateModal">
                                                    <i class="fas fa-edit text-primary"></i>
                                                </button>
                                                <button type="button" class="delete-btn" title="Supprimer la date d'intervention" data-bs-toggle="modal" data-bs-target="#deleteInterventionDateModal">
                                                    <i class="fas fa-trash text-danger"></i>
                                                </button>
                                            </div>
                                        </div>
                                    @else
                                        <span class="text-muted me-2">Non définie</span>
                                        <button class="btn-icon" title="Ajouter une date d'intervention" data-bs-toggle="modal" data-bs-target="#interventionDateModal">
                                            <i class="fas fa-plus text-primary"></i>
                                        </button>
                                    @endif
                                </div>
                            </div>
                            
                            <!-- Colonne 4: Date d'intervention terminée -->
                            <div class="grid-column finished-intervention-date-column">
                                <div class="detail-label">DATE DE FIN D'INTERVENTION</div>
                                <div class="info-value">
                                    @if(isset($intervention['is_finished']) && $intervention['is_finished'])
                                        <div class="completion-info-admin">
                                            <div class="completed-by-label">Terminée par :</div>
                                            <div class="admin-signature">
                                                @if(isset($intervention['finished_by']))
                                                    @php
                                                        $finishedByUser = \App\Models\User::find($intervention['finished_by']);
                                                    @endphp
                                                    {{ $finishedByUser ? $finishedByUser->prenom . ' ' . $finishedByUser->nom : 'Utilisateur inconnu' }}
                                                @else
                                                    Utilisateur inconnu
                                                @endif
                                            </div>
                                            <div class="admin-completion-date">
                                                @php
                                                    $finishedAtDisplay = 'Date inconnue';
                                                    if (isset($intervention['finished_at'])) {
                                                        try {
                                                            $finishedAtObj = \Carbon\Carbon::parse($intervention['finished_at']);
                                                            $dayNames = ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'];
                                                            $dayOfWeek = $dayNames[$finishedAtObj->format('w')];
                                                            $finishedAtDisplay = $dayOfWeek . ' ' . $finishedAtObj->format('d/m/Y H:i');
                                                        } catch (\Exception $e) {
                                                            $finishedAtDisplay = \Carbon\Carbon::parse($intervention['finished_at'])->format('d/m/Y H:i');
                                                        }
                                                    }
                                                @endphp
                                                {{ $finishedAtDisplay }}
                                            </div>
                                        </div>
                                    @else
                                        <span class="text-muted">Non terminée</span>
                                    @endif
                                </div>
                                
                                {{-- Bouton Terminer l'intervention --}}
                                @if(!isset($intervention['is_finished']) || !$intervention['is_finished'])
                                <div class="mt-2">
                                    <button type="button" class="btn btn-success" data-modal-open="completeInterventionModal">
                                        <i class="fas fa-check-circle"></i>
                                        <span>Terminer l'intervention</span>
                                    </button>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    
                    <div class="info-section">
                        <h3 class="section-title d-flex align-items-center">
                            <span>
                                <i class="fas fa-clipboard-list"></i>
                                Objet
                            </span>
                            <button class="btn-icon ms-1" id="edit-title-btn" title="Modifier l'objet">
                                <i class="fas fa-edit text-primary"></i>
                            </button>
                        </h3>
                        <p class="intervention-title mb-3">{{ $intervention['title'] ?? 'Réparation plomberie' }}</p>
                    </div>
                    
                    <div class="info-section">
                        <h3 class="section-title d-flex align-items-center">
                            <span>
                                <i class="fas fa-align-left"></i>
                                Description
                            </span>
                            <button class="btn-icon ms-1" id="edit-description-btn" title="Modifier la description">
                                <i class="fas fa-edit text-primary"></i>
                            </button>
                        </h3>
                        <div class="description-content">
                            <p>{{ $intervention['description'] ?: 'Aucune description disponible' }}</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Card des intervenants assignés -->
            <div class="profile-card mb-4">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-hard-hat"></i>
                        Intervenant(s) assigné(s)
                    </h3>
                    <button class="btn-icon" title="Assigner un intervenant" data-bs-toggle="modal" data-bs-target="#assignWorkerModal">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
                <div class="profile-card-body">
                    <div id="assigned-workers-container" class="workers-list">
                        <!-- Affichage des cards des ouvriers -->
                        
                        <!-- Template pour le message "aucun intervenant assigné" (caché par défaut) -->
                        <template id="no-workers-template">
                            <div class="no-workers-assigned w-100">
                                <div class="text-center empty-state">
                                    <i class="fas fa-users-slash empty-icon"></i>
                                    <p>Aucun intervenant assigné</p>
                                    <p class="text-muted">Cliquez sur le bouton + pour assigner des intervenants</p>
                                </div>
                            </div>
                        </template>
                        @include('admin.interventions.partials._assigned_workers_list', ['intervention' => $intervention])
                    </div>
                </div>
            </div>
            <div class="profile-card mb-4">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-camera-retro me-2"></i> <!-- Icône modifiée pour être cohérente -->
                        Médias(s) de l'intervention
                    </h3>
                    <button class="btn-icon" title="Ajouter des fichiers (Photos/Vidéos)" data-bs-toggle="modal" data-bs-target="#uploadPhotoModal">
                        <i class="fas fa-plus"></i>
                    </button>

                </div>
                <div class="profile-card-body">
                    <div class="photos-gallery">
                        {{-- La grille de photos ne s'affiche que s'il y a des photos --}}
                        <div id="administrative-photos-container" class="photo-grid row {{ (!isset($intervention_photos_admin) || $intervention_photos_admin->count() == 0) ? 'd-none' : '' }}">
                            @if(isset($intervention_photos_admin) && $intervention_photos_admin->count() > 0)
                                @foreach($intervention_photos_admin as $photo)
                                        <div class="photo-card">
                                            <button class="delete-btn" data-photo-id="{{ $photo->id }}" title="Supprimer">
                                                <i class="fas fa-times"></i>
                                            </button>
                                            @if(in_array($photo->file_type, ['img', 'png', 'gif']) || strpos($photo->file_type, 'img') === 0)
                                                <a href="{{ asset('storage/' . $photo->file_path) }}" class="admin-photo-link" data-caption="{{ $photo->original_name ?: $photo->file_name }}{{ $photo->description ? ' - ' . $photo->description : '' }}">
                                                    <img src="{{ asset('storage/' . $photo->file_path) }}" alt="{{ htmlspecialchars($photo->original_name ?: $photo->file_name, ENT_QUOTES, 'UTF-8') }}" class="card-img-top admin-photo-image">
                                                </a>
                                            @elseif(in_array($photo->file_type, ['mp4', 'mov', 'vid']) || strpos($photo->file_type, 'vid') === 0 || in_array(strtolower(pathinfo($photo->file_path, PATHINFO_EXTENSION)), ['mp4', 'mov', 'avi', 'webm', 'mkv', 'm4v', '3gp', 'flv', 'wmv']))
                                                <a href="{{ asset('storage/' . $photo->file_path) }}" class="admin-photo-link" data-caption="{{ $photo->original_name ?: $photo->file_name }}{{ $photo->description ? ' - ' . $photo->description : '' }}" data-type="video">
                                                    <div class="video-thumbnail-container">
                                                        <div class="video-thumbnail-placeholder">
                                                            <i class="fas fa-play-circle video-play-icon"></i>
                                                            <i class="fas fa-video video-icon"></i>
                                                        </div>
                                                        <div class="video-filename">{{ Str::limit($photo->original_name ?: $photo->file_name, 15) }}</div>
                                                    </div>
                                                </a>
                                            @else
                                                <a href="{{ asset('storage/' . $photo->file_path) }}" class="admin-photo-link" data-caption="{{ $photo->original_name ?: $photo->file_name }}{{ $photo->description ? ' - ' . $photo->description : '' }}">
                                                    <div class="file-thumbnail">
                                                        <i class="fas fa-file fa-3x text-muted"></i>
                                                        <small class="text-muted mt-2">{{ Str::limit($photo->original_name ?: $photo->file_name, 18) }}</small>
                                                    </div>
                                                </a>
                                            @endif
                                            <div class="card-body">
                                                <div class="description-container">
                                                    <h6 class="card-subtitle text-muted m-0">Description</h6>
                                                    <button class="btn-icon  ms-1" data-photo-id="{{ $photo->id }}" title="Modifier la description">
                                                        <i class="fas fa-edit text-primary"></i>
                                                    </button>
                                                </div>
                                                @if($photo->description)
                                                    <p class="card-text small mb-2 photo-description" title="{{ $photo->description }}">{{ $photo->description }}</p>
                                                @else
                                                    <p class="card-text small fst-italic text-muted mb-2 text-center photo-description">Pas de description</p>
                                                @endif
                                            </div>

                                        </div>
                                @endforeach
                            @endif
                        </div>

                        {{-- Message si aucun média pour cette intervention --}}
                        <div class="no-admin-photos-message {{ (isset($intervention_photos_admin) && $intervention_photos_admin->count() > 0) ? 'd-none' : '' }} w-100">
                            <div class="text-center empty-state">
                                <i class="fas fa-camera-retro"></i>
                                <p>Aucun média pour cette intervention</p>
                                <p class="text-muted">Cliquez sur le bouton + pour ajouter des médias.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Card des photos de l'ouvrier -->
            <div class="profile-card mb-4">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-hard-hat me-2"></i>
                        Média(s) de fin d'intervention
                    </h3>
                </div>
                <div class="profile-card-body">
                    <div class="photos-gallery">
                        {{-- La grille de photos ne s'affiche que s'il y a des photos --}}
                        <div id="worker-photos-container" class="photo-grid {{ (!isset($intervention_photos_worker) || $intervention_photos_worker->count() == 0) ? 'd-none' : '' }}">
                            @if(isset($intervention_photos_worker) && $intervention_photos_worker->count() > 0)
                                @foreach($intervention_photos_worker as $photo)
                                    <div class="photo-card">
                                        @if(in_array($photo->file_type, ['img', 'png', 'gif', 'jpg', 'jpeg']) || strpos($photo->file_type, 'img') === 0 || in_array(strtolower(pathinfo($photo->file_path, PATHINFO_EXTENSION)), ['jpg', 'jpeg', 'png', 'gif']))
                                            <a href="{{ asset('storage/' . $photo->file_path) }}" class="worker-photo-link" data-bs-toggle="lightbox" data-gallery="worker-photos" data-caption="{{ $photo->original_name ?: $photo->file_name }}{{ $photo->description ? ' - ' . $photo->description : '' }}">
                                                <img src="{{ asset('storage/' . $photo->file_path) }}" alt="{{ htmlspecialchars($photo->original_name ?: $photo->file_name, ENT_QUOTES, 'UTF-8') }}" class="card-img-top worker-photo-image">
                                            </a>
                                        @elseif(in_array($photo->file_type, ['mp4', 'mov', 'vid']) || strpos($photo->file_type, 'vid') === 0 || in_array(strtolower(pathinfo($photo->file_path, PATHINFO_EXTENSION)), ['mp4', 'mov', 'avi', 'webm', 'mkv', 'm4v', '3gp', 'flv', 'wmv']))
                                            <a href="{{ asset('storage/' . $photo->file_path) }}" class="worker-photo-link" data-bs-toggle="lightbox" data-gallery="worker-photos" data-caption="{{ $photo->original_name ?: $photo->file_name }}{{ $photo->description ? ' - ' . $photo->description : '' }}" data-type="video">
                                                <div class="video-thumbnail-container">
                                                    <div class="video-thumbnail-placeholder">
                                                        <i class="fas fa-play-circle video-play-icon"></i>
                                                        <i class="fas fa-video video-icon"></i>
                                                    </div>
                                                    <div class="video-filename">{{ Str::limit($photo->original_name ?: $photo->file_name, 15) }}</div>
                                                </div>
                                            </a>
                                        @else
                                            <a href="{{ asset('storage/' . $photo->file_path) }}" class="worker-photo-link" data-caption="{{ $photo->original_name ?: $photo->file_name }}{{ $photo->description ? ' - ' . $photo->description : '' }}">
                                                <div class="file-thumbnail">
                                                    <i class="fas fa-file fa-3x text-muted"></i>
                                                    <small class="text-muted mt-2">{{ Str::limit($photo->original_name ?: $photo->file_name, 18) }}</small>
                                                </div>
                                            </a>
                                        @endif
                                        <div class="card-body">
                                            <div class="description-container">
                                                <h6 class="card-subtitle text-muted m-0">Description</h6>
                                            </div>
                                            @if($photo->description)
                                                <p class="card-text small mb-2 photo-description" title="{{ $photo->description }}">{{ $photo->description }}</p>
                                            @else
                                                <p class="card-text small fst-italic text-muted mb-2 text-center photo-description">Pas de description</p>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>

                        {{-- Message si aucun média pour cette intervention --}}
                        <div class="no-worker-photos-message {{ (isset($intervention_photos_worker) && $intervention_photos_worker->count() > 0) ? 'd-none' : '' }} w-100">
                            <div class="text-center empty-state">
                                <i class="fas fa-camera fa-3x text-muted mb-3"></i>
                                <p>Aucun média de fin d'intervention</p>
                                <p class="text-muted">Les photos prises par les intervenants s'afficheront ici.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Card des commentaires -->
            <div class="profile-card mb-4">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-comments"></i>
                        Commentaires
                    </h3>
                </div>
                <div class="profile-card-body">
                    @php
                        // Décoder les commentaires JSON
                        $comments = [];
                        if (isset($intervention->comments) && !empty($intervention->comments)) {
                            try {
                                if (is_string($intervention->comments)) {
                                    $comments = json_decode($intervention->comments, true) ?? [];
                                } elseif (is_array($intervention->comments)) {
                                    $comments = $intervention->comments;
                                }
                            } catch (\Exception $e) {
                                // En cas d'erreur de décodage, laisser $comments comme un tableau vide
                            }
                        }
                        
                        // Trier les commentaires par date (plus anciens d'abord)
                        usort($comments, function($a, $b) {
                            $dateA = isset($a['date']) ? strtotime($a['date']) : 0;
                            $dateB = isset($b['date']) ? strtotime($b['date']) : 0;
                            return $dateA - $dateB; // Ordre croissant
                        });
                        
                        // Fonction pour formater les dates de manière conviviale
                        function formatFriendlyDate($dateString) {
                            $date = new DateTime($dateString);
                            $now = new DateTime();
                            $yesterday = new DateTime('yesterday');
                            
                            if ($date->format('Y-m-d') === $now->format('Y-m-d')) {
                                return 'Aujourd\'hui à ' . $date->format('H:i');
                            } elseif ($date->format('Y-m-d') === $yesterday->format('Y-m-d')) {
                                return 'Hier à ' . $date->format('H:i');
                            } else {
                                return $date->format('d/m/Y H:i');
                            }
                        }
                    @endphp
                    
                    <div class="comments-tools">
                        <div class="comments-count">
                            <i class="fas fa-comment-dots me-2"></i>
                            <span>{{ count($comments) }} commentaire(s)</span>
                        </div>
                    </div>
                    
                    <div class="comments-list" id="comments-container">
                        @if(count($comments) > 0)
                            @foreach($comments as $index => $comment)
                                @php
                                    $isWorkerComment = isset($comment['author_type']) && $comment['author_type'] === 'worker';
                                    $commentClass = $isWorkerComment ? 'worker-comment' : 'admin-comment';
                                    $avatarColor = $isWorkerComment ? '#1976d2' : '#f57c00';
                                    
                                    // Extraire les initiales du nom
                                    $authorName = $comment['author'] ?? 'Utilisateur';
                                    $initials = '';
                                    $nameParts = explode(' ', trim($authorName));
                                    foreach($nameParts as $part) {
                                        if (!empty($part)) {
                                            $initials .= strtoupper(substr($part, 0, 1));
                                        }
                                    }
                                    if (empty($initials)) {
                                        $initials = 'U';
                                    }
                                @endphp
                                <div class="comment-item {{ $commentClass }}" data-index="{{ $index }}">
                                    <div class="comment-avatar">
                                        <span class="avatar-initials">{{ $initials }}</span>
                                    </div>
                                    <div class="comment-content">
                                        <div class="comment-header">
                                            <span class="comment-author">{{ $authorName }}</span>
                                            <span class="comment-role">{{ $isWorkerComment ? 'Intervenant' : 'Admin' }}</span>
                                            <span class="comment-time">{{ isset($comment['date']) ? formatFriendlyDate($comment['date']) : date('d/m/Y H:i') }}</span>
                                            <!-- Bouton de suppression -->
                                            <button type="button" class="delete-btn delete-comment" 
                                                    data-index="{{ $index }}" 
                                                    data-intervention-id="{{ $intervention->id }}"
                                                    title="Supprimer ce commentaire">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                        <div class="comment-text">{{ $comment['text'] ?? '' }}</div>
                                    </div>
                                </div>
                            @endforeach
                        @else
                            <div class="empty-state text-center py-4">
                                <i class="fas fa-comments"></i>
                                <p>Aucun commentaire pour cette intervention</p>
                            </div>
                        @endif
                    </div>
                    
                    <!-- Template HTML pour les commentaires vides (utilisé par JS) -->
                    <template id="empty-comments-template">
                        <div class="empty-state text-center py-4">
                            <i class="fas fa-comments"></i>
                            <p>Aucun commentaire pour cette intervention</p>
                        </div>
                    </template>
                    
                    <!-- Template HTML pour un élément de commentaire (utilisé par JS) -->
                    <template id="comment-item-template">
                        <div class="comment-item" data-comment-id="">
                            <div class="comment-avatar">
                                <span class="avatar-initials"></span>
                            </div>
                            <div class="comment-content">
                                <div class="comment-header">
                                    <span class="comment-author"></span>
                                    <span class="comment-role"></span>
                                    <span class="comment-time"></span>
                                    <!-- Bouton de suppression -->
                                    <button type="button" class="delete-btn delete-comment" 
                                            data-index="" 
                                            data-intervention-id="{{ $intervention->id }}"
                                            title="Supprimer ce commentaire">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                                <div class="comment-text"></div>
                            </div>
                        </div>
                    </template>
                    
                    <div class="add-comment-form mt-4">
                        <form id="commentForm" method="POST" action="{{ route('admin.interventions.add-comment', $intervention->id) }}">
                            @csrf
                            <div class="form-group mb-3">
                                <textarea class="form-control" id="commentText" name="comment_text" rows="3" placeholder="Ajouter un commentaire..."></textarea>
                            </div>
                            <div class="text-end">
                                <button type="submit" class="btn btn-primary" id="submitComment">
                                    <i class="fas fa-paper-plane me-2"></i>
                                    <span>Envoyer</span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Confirmation Suppression Ouvrier Assigné -->
<div class="modal fade" id="confirmRemoveWorkerModal" tabindex="-1" aria-labelledby="confirmRemoveWorkerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmRemoveWorkerModalLabel">Confirmer la suppression</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Êtes-vous sûr de vouloir retirer <strong id="workerNameToRemove"></strong> de cette intervention ? Cette action est irréversible.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-danger" id="confirmRemoveWorkerButton">Oui, supprimer</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour sélectionner une date d'intervention -->
<div class="modal fade" id="interventionDateModal" tabindex="-1" aria-labelledby="interventionDateModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="interventionDateModalLabel">
                    <i class="fas fa-calendar-alt me-2"></i>{{ (isset($intervention['intervention_date']) && $intervention['intervention_date'] != 'Non programmée') ? 'Modifier la date d\'intervention' : 'Ajouter une date d\'intervention' }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>
            <div class="modal-body">
                <form id="interventionDateForm" action="{{ route('admin.interventions.update.intervention-date', $intervention['id']) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="mb-3">
                        <label for="intervention_date" class="form-label">Date d'intervention</label>
                        @php
                            $interventionDateValue = '';
                            if (isset($intervention['intervention_date']) && $intervention['intervention_date'] != 'Non programmée') {
                                try {
                                    // Essayer d'abord le format d/m/Y
                                    if (preg_match('/^\d{2}\/\d{2}\/\d{4}$/', $intervention['intervention_date'])) {
                                        $interventionDateValue = \Carbon\Carbon::createFromFormat('d/m/Y', $intervention['intervention_date'])->format('Y-m-d');
                                    }
                                    // Essayer ensuite le format Y-m-d
                                    elseif (preg_match('/^\d{4}-\d{2}-\d{2}$/', $intervention['intervention_date'])) {
                                        $interventionDateValue = $intervention['intervention_date'];
                                    }
                                    // Si c'est un objet DateTime ou Carbon
                                    elseif ($intervention['intervention_date'] instanceof \DateTime) {
                                        $interventionDateValue = $intervention['intervention_date']->format('Y-m-d');
                                    }
                                    // Sinon, essayer de parser la date
                                    else {
                                        $interventionDateValue = date('Y-m-d', strtotime($intervention['intervention_date']));
                                    }
                                } catch (\Exception $e) {
                                    // En cas d'erreur, laisser vide
                                    $interventionDateValue = '';
                                }
                            }
                            // Utiliser intervention_date_raw si disponible
                            if (isset($intervention['intervention_date_raw'])) {
                                $interventionDateValue = $intervention['intervention_date_raw'];
                            }
                        @endphp
                        <input type="date" class="form-control" id="intervention_date" name="intervention_date" value="{{ $interventionDateValue }}" required>
                    </div>
                    <div class="d-flex justify-content-end">
                        <button type="button" class="btn btn-secondary me-2" data-bs-dismiss="modal">Annuler</button>
                        <button type="submit" class="btn btn-primary">Enregistrer</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Nouveau Modal d'ajout d'intervenant -->
<!-- Modal pour assigner un intervenant -->
<div class="modal fade" id="assignWorkerModal" tabindex="-1" aria-labelledby="assignWorkerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-light">
                <h5 class="modal-title" id="assignWorkerModalLabel">
                    <i class="fas fa-hard-hat me-2"></i>Ajouter un intervenant
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>
            <div class="modal-body">
              <!-- Barre de recherche et filtres -->
              <div class="filters-card">
                    <div class="filters-card-content">
                        <div class="search-box">
                            <i class="fas fa-search search-box__icon"></i>
                            <input type="text" class="search-box__input" id="worker-search-input-assign" placeholder="Rechercher un ouvrier..." autocomplete="off" autofocus>
                        </div>
                        <div class="selectors-group">
                            <select class="form-select" id="specialty-filter-assign">
                                <option value="">Toutes les spécialités</option>
                                {{-- Check if the specialty list is available and not empty --}} @if(isset($allSpecialtiesForDropdown) && $allSpecialtiesForDropdown->count() > 0) @foreach($allSpecialtiesForDropdown as $specialty_option) <option value="{{ $specialty_option->id }}">{{ $specialty_option->name }}</option> @endforeach @else <option value="" disabled>Aucune spécialité disponible</option> @endif
                            </select>
                        </div>
                    </div>
                    </div>


                <!-- Conteneur pour les filtres actifs -->
                <div id="active-filters-container-assign" class="mb-2">
                    {{-- Les badges de filtres actifs seront injectés ici par JavaScript --}}
                </div>

                <!-- État de chargement -->
                <div id="loading-state-assign" class="loading-state d-none">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Chargement...</span>
                    </div>
                    <p class="mt-3">Chargement des ouvriers disponibles...</p>
                </div>

                <!-- État d'erreur -->
                <div id="error-state-assign" class="error-state text-danger d-none">
                    <i class="fas fa-exclamation-triangle fs-1 mb-3"></i>
                    <p id="error-message-assign-text">Message d'erreur par défaut.</p>
                </div>

                <!-- Message "aucun résultat" -->
                <div id="no-results-message-assign" class="text-center d-none">
                    <div class="empty-icon"><i class="fa-solid fa-users fa-3x"></i></div>
                    <p class="empty-description">Aucun ouvrier ne correspond à votre recherche.</p>
                </div>

                <!-- Liste des ouvriers -->
                <div id="workers-container-assign" class="modal-scroll-container is-populated">
                    {{-- Les cartes d'ouvriers seront injectées ici par JavaScript --}}
                </div>

                <!-- Template pour un item ouvrier -->
                <div class="hidden">
                    <script type="text/html" id="worker-item-template-assign">
                        <div class="add-worker-modal__worker-item" data-worker-id="%WORKER_ID%" data-worker-name="%WORKER_FULL_NAME_LOWERCASE%" data-specialties='%SPECIALTIES_JSON%'>
                            <div class="add-worker-modal__worker-item-header">
                                <div class="add-worker-modal__worker-item-avatar">
                                    %WORKER_INITIALS%
                                </div>
                                <div class="add-worker-modal__worker-item-name">
                                    %WORKER_FULL_NAME%
                                </div>
                                <input type="checkbox" class="form-check-input worker-checkbox-assign hidden" value="%WORKER_ID%" id="worker-checkbox-assign-%WORKER_ID%">
                                <div class="add-worker-modal__worker-item-select-indicator">
                                    <i class="fas fa-check"></i>
                                </div>
                            </div>
                            <div class="add-worker-modal__worker-item-body">
                                <div class="add-worker-modal__worker-item-specialties">
                                    <!-- Les spécialités seront insérées dynamiquement ici par JavaScript -->
                                </div>
                                <p class="add-worker-modal__no-specialties hidden"><small>Aucune spécialité</small></p>
                            </div>
                        </div>
                    </script>
                </div>
                
                <!-- Template pour une spécialité -->
                <div class="hidden">
                    <script type="text/html" id="specialty-tag-template">
                        <span class="trade-tag specialty-tag specialty-tag-%SPECIALTY_ID%">
                            %ICON% %SPECIALTY_NAME%
                        </span>
                    </script>
                </div>
            </div>
            <div class="modal-footer bg-light">
                <div class="selected-count me-auto d-flex align-items-center">
                    <strong id="selected-count-assign" class="bg-primary-subtle text-primary-emphasis p-1 rounded me-2">0</strong>
                    <small class="text-muted">ouvrier(s) sélectionné(s)</small>
                </div>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-primary" id="do-assign-workers-button">
                    <i class="fas fa-save me-1"></i>
                    <span>Mettre à jour</span>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal de confirmation de suppression d'un intervenant assigné -->
<div class="modal fade" id="deleteWorkerAssignmentModal" tabindex="-1" aria-labelledby="deleteWorkerAssignmentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteWorkerAssignmentModalLabel"><i class="fas fa-user-minus me-2"></i>Retirer l'intervenant</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>
            <div class="modal-body">
                <p>Êtes-vous sûr de vouloir retirer <strong id="worker-name-to-delete">cet intervenant</strong> de cette intervention ?</p>
                <div class="alert alert-warning mt-3">
                    <small><i class="fas fa-info-circle me-1"></i>Cette action ne supprime pas l'intervenant de la base de données, elle le désassigne uniquement de cette intervention.</small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-danger" id="confirm-delete-worker-btn">
                    <i class="fas fa-trash-alt me-2"></i>Confirmer la suppression
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal de confirmation de suppression -->
<div class="modal fade" id="deleteInterventionModal" tabindex="-1" aria-labelledby="deleteInterventionModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteInterventionModalLabel">Confirmer la suppression</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-danger mb-4">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    Cette action est irréversible
                </div>
                <p>Êtes-vous sûr de vouloir supprimer définitivement l'intervention @if(isset($intervention)) {{ !empty($intervention['task_id']) ? $intervention['task_id'] : 'AD_' . $intervention['id'] }} @else AD_123 @endif ?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <form action="{{ route('admin.interventions.destroy', $intervention['id'] ?? 123) }}" method="POST" class="d-inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-trash-alt me-2"></i>Supprimer définitivement
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour sélectionner une deadline -->
<div class="modal fade" id="deadlineModal" tabindex="-1" aria-labelledby="deadlineModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deadlineModalLabel">
                    <i class="fas fa-calendar-alt me-2"></i>{{ isset($intervention['deadline']) && $intervention['deadline'] != 'Non définie' ? 'Modifier la deadline' : 'Ajouter une deadline' }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>
            <div class="modal-body">
                <form id="deadlineForm" action="{{ route('admin.interventions.update.deadline', $intervention['id']) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="mb-3">
                        <label for="deadline" class="form-label">Date limite</label>
                        @php
                            $deadlineValue = '';
                            if (isset($intervention['deadline']) && $intervention['deadline'] != 'Non définie') {
                                try {
                                    // Essayer d'abord le format d/m/Y
                                    if (preg_match('/^\d{2}\/\d{2}\/\d{4}$/', $intervention['deadline'])) {
                                        $deadlineValue = \Carbon\Carbon::createFromFormat('d/m/Y', $intervention['deadline'])->format('Y-m-d');
                                    }
                                    // Essayer ensuite le format Y-m-d
                                    elseif (preg_match('/^\d{4}-\d{2}-\d{2}$/', $intervention['deadline'])) {
                                        $deadlineValue = $intervention['deadline'];
                                    }
                                    // Si c'est un objet DateTime ou Carbon
                                    elseif ($intervention['deadline'] instanceof \DateTime) {
                                        $deadlineValue = $intervention['deadline']->format('Y-m-d');
                                    }
                                    // Sinon, essayer de parser la date
                                    else {
                                        $deadlineValue = date('Y-m-d', strtotime($intervention['deadline']));
                                    }
                                } catch (\Exception $e) {
                                    // En cas d'erreur, laisser vide
                                    $deadlineValue = '';
                                }
                            }
                        @endphp
                        <input type="date" class="form-control" id="deadline" name="deadline" value="{{ $deadlineValue }}" required>
                    </div>
                    <div class="d-flex justify-content-end">
                        <button type="button" class="btn btn-secondary me-2" data-bs-dismiss="modal">Annuler</button>
                        <button type="submit" class="btn btn-primary">Enregistrer</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal de confirmation de suppression de la deadline -->
<div class="modal fade" id="deleteDeadlineModal" tabindex="-1" aria-labelledby="deleteDeadlineModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteDeadlineModalLabel">Confirmation de suppression</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Êtes-vous sûr de vouloir supprimer la deadline de cette intervention ?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <form id="removeDeadlineForm" action="{{ route('admin.interventions.remove.deadline', $intervention['id']) }}" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Supprimer</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal de confirmation pour terminer l'intervention -->
<div class="modal fade" id="finishInterventionModal" tabindex="-1" aria-labelledby="finishInterventionModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="finishInterventionModalLabel">Terminer l'intervention</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Êtes-vous sûr de vouloir marquer cette intervention comme terminée ?
                <p class="text-muted mt-2">La date et l'heure actuelles seront enregistrées comme date de fin d'intervention.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <form action="{{ route('admin.interventions.finish', $intervention['id']) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <button type="submit" class="btn btn-success">Terminer l'intervention</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal de confirmation pour annuler la finalisation -->
<div class="modal fade" id="cancelFinishModal" tabindex="-1" aria-labelledby="cancelFinishModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="cancelFinishModalLabel">Annuler la finalisation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Êtes-vous sûr de vouloir annuler la finalisation de cette intervention ?
                <p class="text-muted mt-2">La date de fin d'intervention sera supprimée et le statut de l'intervention sera recalculé en fonction de sa date d'intervention.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <form action="{{ route('admin.interventions.cancel-finish', $intervention['id']) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <button type="submit" class="btn btn-warning">Annuler la finalisation</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal de confirmation de suppression de la date d'intervention -->
<div class="modal fade" id="deleteInterventionDateModal" tabindex="-1" aria-labelledby="deleteInterventionDateModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteInterventionDateModalLabel">
                    <i class="fas fa-calendar-times me-2"></i>Supprimer la date d'intervention
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning mb-4">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    Attention
                </div>
                <p>Êtes-vous sûr de vouloir supprimer la date d'intervention ?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <form action="{{ route('admin.interventions.remove.intervention-date', $intervention['id']) }}" method="POST" class="d-inline" id="deleteInterventionDateForm">
                    @csrf
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-trash me-2"></i>Supprimer
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour éditer le titre -->
<div class="modal fade" id="editTitleModal" tabindex="-1" aria-labelledby="editTitleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editTitleModalLabel">Modifier l'objet</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="intervention-title" class="form-label">Objet de l'intervention</label>
                    <input type="text" class="form-control" id="intervention-title" value="{{ $intervention['title'] }}">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-primary" id="save-title-btn">Enregistrer</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour éditer la description -->
<div class="modal fade" id="editDescriptionModal" tabindex="-1" aria-labelledby="editDescriptionModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editDescriptionModalLabel">Modifier la description</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="intervention-description" class="form-label">Description de l'intervention</label>
                    <textarea class="form-control" id="intervention-description" rows="5">{{ $intervention['description'] }}</textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-primary" id="save-description-btn">Enregistrer</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour l'upload de photos administratives -->
<div class="modal fade" id="uploadPhotoModal" tabindex="-1" aria-labelledby="uploadPhotoModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="uploadPhotoModalLabel"><i class="fas fa-file-upload me-2"></i>Ajouter des Fichiers (Photos/Vidéos)</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>
            <div class="modal-body">
                <form id="uploadPhotoForm" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="intervention_id" value="{{ $intervention['id'] }}">

                    <!-- Zone de Drag & Drop -->
                    <div id="dropZone" class="mb-3 p-4 border rounded text-center">
                        <input type="file" id="interventionPhotosInput" name="photos[]" multiple 
                               accept="image/*,video/mp4,video/quicktime,video/x-msvideo,video/webm,video/x-matroska,.mkv,.heic,.heif">
                        <i class="fas fa-cloud-upload-alt fa-3x text-secondary mb-3"></i>
                        <p class="mb-0 lead text-muted">Glissez-déposez des fichiers ici ou <span class="text-primary fw-bold">cliquez pour sélectionner</span>.</p>
                        <small class="form-text text-muted mt-2">Formats supportés : Images (JPG, PNG, GIF, WEBP, HEIC) et Vidéos (MP4, MOV, AVI, WEBM, MKV).<br>Taille maximale par fichier : 50MB.</small>
                    </div>

                    <!-- Conteneur pour les prévisualisations -->
                    <div id="filePreviewContainer" class="mt-3 row g-2">
                        <!-- Les prévisualisations des fichiers (images/vidéos) et les boutons de suppression apparaîtront ici -->
                        {{-- 
                        Exemple de structure pour un item de prévisualisation (généré par JS) :
                        <div class="col-md-4 file-preview-item mb-2">
                            <div class="card h-100">
                                <img src="[data_url_ou_icone]" class="card-img-top" alt="Aperçu">
                            </div>
                        </div>
                        --}}
                    </div>

                    <div id="upload-progress-container" class="mt-3">
                        <div class="progress">
                            <div id="upload-progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                    </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-primary" id="uploadPhotosBtn"><i class="fas fa-upload me-2"></i>Uploader les photos</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Confirmation de Suppression de Photo -->
<div class="modal fade" id="deletePhotoConfirmationModal" tabindex="-1" aria-labelledby="deletePhotoConfirmationModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deletePhotoConfirmationModalLabel"><i class="fas fa-exclamation-triangle text-danger me-2"></i>Confirmer la Suppression</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Êtes-vous sûr de vouloir supprimer cette photo ? Cette action est irréversible.</p>
                <!-- Input caché pour stocker l'ID de la photo à supprimer -->
                <input type="hidden" id="photoIdToDelete" value="">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-danger" id="confirmDeletePhotoButton"><i class="fas fa-trash-alt me-2"></i>Supprimer</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour Modifier la Description de la Photo -->
<div class="modal fade" id="editPhotoDescriptionModal" tabindex="-1" aria-labelledby="editPhotoDescriptionModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editPhotoDescriptionModalLabel"><i class="fas fa-edit me-2"></i>Modifier la Description de la Photo</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editPhotoDescriptionForm">
                    <input type="hidden" id="editPhotoId" name="photo_id">
                    <div class="mb-3">
                        <label for="editPhotoDescriptionTextarea" class="form-label">Description</label>
                        <textarea class="form-control" id="editPhotoDescriptionTextarea" name="description" rows="4" placeholder="Entrez la nouvelle description..." maxlength="255"></textarea>
                        <div id="descriptionCharCount" class="form-text text-end">0 / 255</div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-primary" id="savePhotoDescriptionButton">Enregistrer les modifications</button>
            </div>
        </div>
    </div>
</div>

<!-- Toast Container for notifications -->
<div class="toast-container position-fixed top-0 end-0 p-3">
    <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <strong class="me-auto" id="toastTitle">Notification</strong>
            <small id="toastTimestamp">À l'instant</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body" id="toastBodyContent">
            <!-- Message will be inserted here by JavaScript -->
        </div>
    </div>
</div>

<!-- Template pour les cartes de photos (utilisé par JavaScript) -->
<template id="photo-card-template">
    <div class="photo-card">
        <button class="delete-btn" data-photo-id="__PHOTO_ID__" title="Supprimer">
            <i class="fas fa-times"></i>
        </button>
        <a href="__PHOTO_URL__" class="admin-photo-link" data-caption="__PHOTO_CAPTION__" data-is-video="__IS_VIDEO__">
            __MEDIA_ELEMENT__
        </a>
        <div class="card-body">
            <div class="description-container">
                <h6 class="card-subtitle text-muted m-0">Description</h6>
                <button class="btn-icon" data-photo-id="__PHOTO_ID__" title="Modifier la description">
                    <i class="fas fa-edit text-primary"></i>
                </button>
            </div>
            <p class="card-text small mb-2 photo-description __DESCRIPTION_CLASS__" title="__DESCRIPTION_TITLE__">__DESCRIPTION_TEXT__</p>
        </div>
    </div>
</template>

<!-- Modal Confirmation Suppression Commentaire -->
<div class="modal fade" id="confirmDeleteCommentModal" tabindex="-1" aria-labelledby="confirmDeleteCommentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmDeleteCommentModalLabel">Confirmer la suppression</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Êtes-vous sûr de vouloir supprimer ce commentaire ? Cette action est irréversible.</p>
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    Le commentaire sera définitivement supprimé et ne pourra pas être récupéré.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteCommentButton">
                    <i class="fas fa-trash me-2"></i>Oui, supprimer
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal Terminer l'intervention --}}
<div class="modal-layer" data-modal-id="completeInterventionModal" aria-hidden="true">
    <div class="modal-backdrop" data-modal-close></div>
    <div class="modal-container glass-modal" role="dialog" aria-modal="true" aria-labelledby="completeInterventionModalTitle" tabindex="-1">
        <div class="glass-form">
            <div class="glass-filter"></div>
            <div class="glass-overlay"></div>
            <div class="glass-specular"></div>
            <div class="glass-content">
                <div class="glass-header">
                    <h2 class="glass-title" id="completeInterventionModalTitle">
                        <i class="fas fa-check-circle"></i>
                        <span>Terminer l'intervention</span>
                    </h2>
                    <button class="modal-close" data-modal-close aria-label="Fermer">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                
                <form id="completeInterventionForm" class="glass-form-fields">
                    <div class="glass-field">
                        <label for="finishedByWorker">Intervenant ayant terminé la tâche</label>
                        <div class="glass-input glass-input-select">
                            <i class="fas fa-user"></i>
                            <select id="finishedByWorker" name="finished_by" required>
                                <option value="">Sélectionner un intervenant</option>
                                @foreach($assignedWorkers ?? [] as $worker)
                                    <option value="{{ $worker->id }}">{{ $worker->prenom }} {{ $worker->nom }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    
                    <div class="glass-field">
                        <label for="finishedAtDate">Date de fin</label>
                        <div class="glass-input">
                            <i class="fas fa-calendar"></i>
                            <input type="datetime-local" id="finishedAtDate" name="finished_at" required>
                        </div>
                    </div>
                    
                    <div class="glass-actions">
                        <button type="button" class="button button-secondary" data-modal-close>
                            Annuler
                        </button>
                        <button type="button" class="button button-primary" id="saveCompleteIntervention">
                            <i class="fas fa-save"></i>
                            <span>Enregistrer</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection