@extends('layouts.worker')

@section('title', \App\Helpers\TranslationHelper::getUserTranslations()['translations']['intervention_details']['title'] ?? 'Détails de l\'intervention')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/pages/worker/intervention_details.css') }}?v={{ config('app.asset_version') }}">
@endpush

@section('content')
<!-- Template de la lightbox -->
<div id="media-lightbox-overlay" class="media-lightbox-overlay" style="display: none;">
    <div class="media-lightbox-container">
        <img id="media-lightbox-image" class="media-lightbox-image" src="" alt="{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['enlarged_image'] ?? 'Image agrandie' }}" style="display: none;">
        <video id="media-lightbox-video" class="media-lightbox-video" controls style="display: none;">
            <source id="media-lightbox-video-source" src="" type="">
            {{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['browser_video_unsupported'] ?? 'Votre navigateur ne supporte pas la lecture vidéo.' }}
        </video>
        <div id="media-lightbox-title" class="media-lightbox-title"></div>
        <button id="media-lightbox-close" class="media-lightbox-close">&times;</button>
    </div>
</div>

<div class="main-container">
    {{-- Bouton de retour --}}
    <div class="back-button-intervention">
        <a href="{{ route('worker.interventions') }}" class="btn btn-outline-primary">
            <i class="fas fa-arrow-left me-2"></i>{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['back_to_interventions'] ?? 'Retour aux interventions' }}
        </a>
    </div>

    {{-- En-tête avec numéro d'intervention, logo client, nom client et date --}}

            <div class="intervention-card position-relative">
                <div class="card-header-container">
                    <div class="header-top">
                        <div class="intervention-number">
                            <span class="intervention-label">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['intervention_details']['intervention_number'] ?? 'INTERVENTION Nº' }}{{ $intervention->id }}</span>
                        </div>
                        <div class="client-container">
                            <div class="client-logo">
                                @if($intervention->client && $intervention->client->logo_url)
                                    <img src="{{ $intervention->client->logo_url }}" alt="Logo {{ $intervention->client_name }}" class="client-logo-img">
                                @else
                                    <div class="client-logo-placeholder">
                                        <i class="fas fa-building"></i>
                                    </div>
                                @endif
                            </div>
                            <span class="client-name">{{ $intervention->client_name }}</span>
                        </div>
                    </div>
                    <div class="intervention-date-header">
                        <div class="date-label">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['intervention_details']['intervention_date'] ?? 'Date d\'intervention' }}</div>
                        <div class="date-value">
                            @if($intervention->intervention_date)
                                {{ $intervention->intervention_date->locale('fr')->isoFormat('dddd D/MM/YYYY') }}
                                @php
                                    $today = \Carbon\Carbon::today();
                                    $interventionDate = \Carbon\Carbon::parse($intervention->intervention_date)->startOfDay();
                                    $diffInDays = $today->diffInDays($interventionDate, false);
                                    $status = $intervention->status;
                                @endphp
                                
                                @if($status === \App\Enums\InterventionStatus::COMPLETED->value)
                                    <span id="days-remaining-display" class="days-remaining--completed">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['status_completed'] ?? '(terminée)' }}</span>
                                @elseif($status === \App\Enums\InterventionStatus::IN_PROGRESS->value)
                                    <span id="days-remaining-display" class="days-remaining--today">({{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['today'] ?? 'aujourd\'hui' }})</span>
                                @elseif($diffInDays === 0)
                                    <span id="days-remaining-display" class="days-remaining--today">({{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['today'] ?? 'aujourd\'hui' }})</span>
                                @elseif($diffInDays < 0)
                                    @php
                                        $daysLate = abs($diffInDays);
                                        $pluralS = $daysLate > 1 ? 's' : '';
                                        $lateTpl = \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['days_ago'] ?? '%days% jour%s% en retard';
                                        $lateText = str_replace(['%days%', '%s%'], [$daysLate, $pluralS], $lateTpl);
                                    @endphp
                                    <span id="days-remaining-display" class="days-remaining--past">({{ $lateText }})</span>
                                @elseif($diffInDays > 0)
                                    @php
                                        $daysFuture = $diffInDays;
                                        $pluralS = $daysFuture > 1 ? 's' : '';
                                        $futureTpl = \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['in_days'] ?? 'dans %days% jour%s%';
                                        $futureText = str_replace(['%days%', '%s%'], [$daysFuture, $pluralS], $futureTpl);
                                    @endphp
                                    <span id="days-remaining-display" class="days-remaining--future">({{ $futureText }})</span>
                                @endif
                            @else
                                <span class="text-muted">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['intervention_details']['not_defined'] ?? 'Non définie' }}</span>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="card-body-container">
                    {{-- Adresse --}}
                    <div class="address-container">
                        <p class="address-label">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['intervention_address'] ?? 'Adresse d\'intervention' }}</p>
                        <p class="address-line"><i class="fas fa-map-marker-alt icon-spacing"></i> {{ $intervention->address ?? \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['address_not_provided'] ?? 'Adresse non renseignée' }}</p>
                        @if($intervention->client && $intervention->client->primaryAddress)
                        <p class="location-details">
                            @if($intervention->client->primaryAddress->floor)<span class="location-item"><i class="fas fa-level-up-alt icon-spacing"></i> {{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['floor_label'] ?? 'Étage' }}: {{ $intervention->client->primaryAddress->floor }}</span>@endif
                            @if($intervention->client->primaryAddress->side)<span><i class="fas fa-compass icon-spacing"></i> {{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['side_label'] ?? 'Côté' }}: {{ $intervention->client->primaryAddress->side }}</span>@endif
                        </p>
                        @endif
                    </div>
                    
                    {{-- Séparateur horizontal --}}
                    <hr class="card-separator">
                    
                    <!-- Nouveau container pour priority et status -->
                    <div class="priority-status-container">
                        <!-- Priority container -->
                        <div class="priority-container">
                            <div class="section-label">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['priority_label'] ?? 'Priorité' }}</div>
                            @php
                                // Utiliser directement la valeur de priorité depuis la base de données
                                $dbPriority = $intervention->priority;
                                
                                // Déterminer la classe CSS, le texte et l'icône en fonction de la priorité
                                $priorityClass = match($dbPriority) {
                                    'urgent' => 'priority-badge--urgent',
                                    'normal', 'low' => 'priority-badge--normal',
                                    default => 'priority-badge--normal'
                                };
                                
                                $priorityText = match($dbPriority) {
                                    'urgent' => \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['priority_urgent'] ?? 'Urgent',
                                    'normal' => \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['priority_normal'] ?? 'Normal',
                                    'low' => \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['priority_low'] ?? 'Faible',
                                    default => \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['priority_normal'] ?? 'Normal'
                                };
                                
                                $priorityIcon = match($dbPriority) {
                                    'urgent' => 'fa-exclamation-triangle',
                                    'normal' => 'fa-check-circle',
                                    'low' => 'fa-arrow-down',
                                    default => 'fa-check-circle'
                                };
                            @endphp
                            <span class="priority-badge {{ $priorityClass }}">
                                <i class="fas {{ $priorityIcon }} icon-spacing"></i>
                                <span class="priority-text">{{ $priorityText }}</span>
                            </span>
                        </div>
                        
                        <!-- Status container -->
                        <div class="status-container">
                            <div class="section-label">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['status'] ?? 'Statut' }}</div>
                            @php
                                $status = $intervention->status;
                                $statusClass = match($status) {
                                    \App\Enums\InterventionStatus::IN_PROGRESS->value => 'status-badge--in_progress',
                                    \App\Enums\InterventionStatus::PLANNED->value => 'status-badge--planned',
                                    \App\Enums\InterventionStatus::COMPLETED->value => 'status-badge--completed',
                                    \App\Enums\InterventionStatus::LATE->value => 'status-badge--late',
                                    default => 'status-badge--planned'
                                };
                                
                                $statusText = match($status) {
                                    \App\Enums\InterventionStatus::IN_PROGRESS->value => \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['status_in_progress'] ?? 'En cours',
                                    \App\Enums\InterventionStatus::PLANNED->value => \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['status_planned'] ?? 'Planifiée',
                                    \App\Enums\InterventionStatus::LATE->value => \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['status_late'] ?? 'En retard',
                                    \App\Enums\InterventionStatus::COMPLETED->value => \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['status_completed'] ?? 'Terminée',
                                    default => \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['status_planned'] ?? 'Planifiée'
                                };
                                
                                $statusIcon = match($status) {
                                    \App\Enums\InterventionStatus::IN_PROGRESS->value => 'fa-clock',
                                    \App\Enums\InterventionStatus::PLANNED->value => 'fa-calendar-days',
                                    \App\Enums\InterventionStatus::COMPLETED->value => 'fa-check',
                                    \App\Enums\InterventionStatus::LATE->value => 'fa-exclamation-triangle',
                                    default => 'fa-calendar-days'
                                };
                            @endphp
                            <span id="status-badge" class="status-badge {{ $statusClass }}">
                                <i class="fas {{ $statusIcon }} icon-spacing"></i>
                                <span class="status-text">{{ $statusText }}</span>
                            </span>
                        </div>
                    </div>
                    
                    <div class="title-container-details">
                        <div class="title-label">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['intervention_title'] ?? 'Titre de l\'intervention' }}</div>
                        <div class="intervention-title">{{ $intervention->title }}</div>
                    </div>
                    
                    <div class="description-container">
                        <div class="description-label">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['intervention_description'] ?? 'Description de l\'intervention' }}</div>
                        <div class="intervention-description">{{ $intervention->description ?? \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['no_description_available'] ?? 'Aucune description disponible' }}</div>
                    </div>
                    
                    {{-- Bouton de traduction --}}
                    <div class="translate-container">
                        <button type="button" id="translate-btn" class="translate-button">
                            <i class="fas fa-language me-2"></i>
                            <span class="translate-text">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['translate_button'] ?? 'Traduire' }}</span>
                        </button>
                        <div id="translate-loading" class="translate-loading" style="display: none;">
                            <i class="fas fa-spinner fa-spin me-2"></i>
                            <span>{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['translating'] ?? 'Traduction en cours...' }}</span>
                        </div>
                    </div>
                </div>
            </div>

    


            {{-- Carte de l'équipe --}}
            <div class="intervention-card position-relative">
                <div class="card-header-container">
                    <h5 class="section-title">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['assigned_team'] ?? 'Équipe assignée' }}</h5>
                </div>
                <div class="card-body-container">
                    @if($intervention->workers && $intervention->workers->count() > 0)
                        <div class="workers-list">
                            @foreach($intervention->workers as $worker)
                                <div class="worker-item">
                                    <div class="worker-avatar">
                                        <span>{{ strtoupper(substr($worker->first_name ?? '', 0, 1) . substr($worker->last_name ?? '', 0, 1)) }}</span>
                                    </div>
                                    <div class="worker-name">{{ $worker->first_name ?? '' }} {{ $worker->last_name ?? '' }}</div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="empty-state">
                            <i class="fas fa-users text-muted"></i>
                            <p>{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['no_workers_assigned'] ?? 'Aucun intervenant assigné à cette intervention.' }}</p>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Carte des médias --}}
            <div class="intervention-card position-relative">
                <div class="card-header-container media-header">
                    <h5 class="section-title">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['media']['title'] ?? 'Médias' }}</h5>
                </div>
                <div class="card-body-container">
                    {{-- Photos de l'administrateur --}}
                    <div class="media-section">
                        <div class="media-section-header">
                            <h6 class="media-section-title">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['media']['admin_photos'] ?? 'Photos de l\'administrateur' }}</h6>
                        </div>
                        @if($adminPhotos->count() > 0)
                            <div class="media-grid">
                                @foreach($adminPhotos as $photo)
                                    @php
                                        $fileExtension = strtolower(pathinfo($photo->file_path, PATHINFO_EXTENSION));
                                        $isVideo = in_array($fileExtension, ['mp4', 'mov', 'avi', 'webm', 'mkv', 'm4v', '3gp', 'flv', 'wmv']);
                                    @endphp
                                    <div class="media-item">
                                        <a href="{{ asset('storage/' . $photo->file_path) }}" class="media-lightbox" data-title="{{ $photo->description ?: (\App\Helpers\TranslationHelper::getUserTranslations()['translations']['media']['admin_photo_description'] ?? 'Photo de l\'administrateur') }}">
                                            @if($isVideo)
                                                <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>
                                            @else
                                                <img src="{{ asset('storage/' . $photo->file_path) }}" alt="{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['media']['admin_photo_alt'] ?? 'Photo de l\'administrateur' }}" class="media-thumbnail">
                                            @endif
                                        </a>
                                        @if($photo->description)
                                            <div class="media-description">{{ $photo->description }}</div>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="empty-state">
                                <i class="fas fa-images text-muted"></i>
                                <p>{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['media']['no_admin_media'] ?? 'Aucun média de l\'administrateur.' }}</p>
                            </div>
                        @endif
                    </div>
                    
                    <hr class="media-separator">

                    {{-- Photos du worker --}}
                    <div class="media-section">
                        <div class="media-section-header">
                            <h6 class="media-section-title">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['media']['worker_photos'] ?? 'Vos photos' }}</h6>
                        </div>
                        <form id="uploadPhotosForm" action="{{ route('worker.interventions.upload-photos', $intervention->id) }}" method="POST" enctype="multipart/form-data" style="display: inline;">
                            @csrf
                            <input type="file" id="photoInputFile" name="photos[]" multiple accept="image/*,video/*" style="display: none;">
                            <input type="file" id="photoInputCamera" name="photos[]" accept="image/*" capture="environment" style="display: none;">
                            <div class="media-add-dropdown">
                                <button type="button" class="media-add-btn" id="uploadPhotosBtn">
                                    <div class="media-add-icon">
                                        <i class="fas fa-plus"></i>
                                    </div>
                                    <span>{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['media']['add_media'] ?? 'Ajouter un média' }}</span>
                                </button>
                                <div class="media-add-dropdown-content" id="mediaDropdownContent">
                                    <button type="button" class="media-option-btn" id="takePictureBtn">
                                        <i class="fas fa-camera me-2"></i>{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['media']['take_photo'] ?? 'Prendre une photo' }}
                                    </button>
                                    <button type="button" class="media-option-btn" id="chooseFileBtn">
                                        <i class="fas fa-folder-open me-2"></i>{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['media']['choose_file'] ?? 'Choisir un fichier' }}
                                    </button>
                                </div>
                            </div>
                        </form>
                        @if($workerPhotos->count() > 0)
                            <div class="media-grid">
                                @foreach($workerPhotos as $photo)
                                    @php
                                        $fileExtension = strtolower(pathinfo($photo->file_path, PATHINFO_EXTENSION));
                                        $isVideo = in_array($fileExtension, ['mp4', 'mov', 'avi', 'webm', 'mkv', 'm4v', '3gp', 'flv', 'wmv']);
                                    @endphp
                                    <div class="media-item">
                                        <form action="{{ route('worker.interventions.delete-photo', ['intervention' => $intervention->id, 'photo' => $photo->id]) }}" method="POST" class="delete-photo-form">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn-icon delete-btn" title="{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['media']['delete_media'] ?? 'Supprimer ce média' }}">
                                                <i class="fas fa-times text-danger"></i>
                                            </button>
                                        </form>
                                        <a href="{{ asset('storage/' . $photo->file_path) }}" class="media-lightbox" data-title="{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['media']['worker_photo'] ?? 'Photo du worker' }}">
                                            @if($isVideo)
                                                <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>
                                            @else
                                                <img src="{{ asset('storage/' . $photo->file_path) }}" alt="{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['media']['worker_photo_alt'] ?? 'Votre photo' }}" class="media-thumbnail">
                                            @endif
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="empty-state">
                                <i class="fas fa-camera text-muted"></i>
                                <p>{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['media']['no_worker_media'] ?? 'Vous n\'avez pas encore ajouté de média.' }}</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Carte des commentaires --}}
            <div class="intervention-card position-relative">
                <div class="card-header-container">
                    <h5 class="section-title">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['comments']['title'] ?? 'Commentaires' }}</h5>
                </div>
                <div class="card-body-container">
                    <div class="comments-section">
                        {{-- Liste des commentaires existants --}}
                        <div class="comments-thread" id="commentsThread">
                            @php
                                // Décoder manuellement le JSON si nécessaire
                                $comments = $intervention->comments;
                                if (is_string($comments)) {
                                    $comments = json_decode($comments, true);
                                }
                                if (!is_array($comments)) {
                                    $comments = [];
                                }
                            @endphp
                            
                            @if(count($comments) > 0)
                                @foreach($comments as $comment)
                                    @php
                                        // Vérifications de sécurité pour les champs manquants
                                        $authorType = $comment['author_type'] ?? 'worker';
                                        $author = $comment['author'] ?? \App\Helpers\TranslationHelper::getUserTranslations()['translations']['comments']['unknown_user'] ?? 'Utilisateur inconnu';
                                        $authorId = $comment['author_id'] ?? null;
                                        $commentId = $comment['id'] ?? '';
                                        $commentText = $comment['text'] ?? '';
                                        $commentDate = $comment['date'] ?? $comment['created_at'] ?? null;
                                    @endphp
                                    
                                    <div class="comment-item {{ $authorType === 'worker' ? 'worker-comment' : 'admin-comment' }}" data-comment-id="{{ $commentId }}">
                                        <div class="comment-avatar">
                                            @if($authorType === 'worker')
                                                @php
                                                    // Extraire les initiales du nom de l'auteur
                                                    $nameParts = explode(' ', $author);
                                                    $initials = '';
                                                    foreach ($nameParts as $part) {
                                                        if (!empty($part)) {
                                                            $initials .= mb_substr($part, 0, 1, 'UTF-8');
                                                        }
                                                    }
                                                    // Limiter à 2 caractères maximum
                                                    $initials = mb_substr($initials, 0, 2, 'UTF-8');
                                                @endphp
                                                <span class="avatar-initials">{{ $initials }}</span>
                                            @else
                                                <i class="fas fa-user-tie"></i>
                                            @endif
                                        </div>
                                        <div class="comment-content">
                                            <div class="comment-header">
                                                <span class="comment-author">{{ $author }}</span>
                                                <span class="comment-role">
                                                    {{ $authorType === 'worker' ? \App\Helpers\TranslationHelper::getUserTranslations()['translations']['comments']['worker_role'] ?? 'Intervenant' : \App\Helpers\TranslationHelper::getUserTranslations()['translations']['comments']['admin_role'] ?? 'Administrateur' }}
                                                </span>
                                                <span class="comment-time">
                                                    @if($commentDate)
                                                        {{ \Carbon\Carbon::parse($commentDate)->locale('fr')->format('d/m/Y H:i') }}
                                                    @endif
                                                </span>
                                            </div>
                                            <div class="comment-text">{{ $commentText }}</div>
                                            @if($authorType === 'worker' && $authorId && $authorId == Auth::user()->id)
                                                <button type="button" class="btn-icon delete-btn btn-delete-comment" data-comment-id="{{ $commentId }}" title="{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['comments']['delete_comment'] ?? 'Supprimer ce commentaire' }}">
                                                    <i class="fas fa-times text-danger"></i>
                                                </button>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <div class="empty-comments-state">
                                    <i class="fas fa-comments text-muted"></i>
                                    <p>{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['comments']['no_comments_yet'] ?? 'Aucun commentaire pour le moment. Commencez la conversation !' }}</p>
                                </div>
                            @endif

                    </div>
                </div>
            </div>

            {{-- Formulaire d'ajout de commentaire (toujours visible, HORS de la structure existante) --}}
            <div class="full-width-comment-form">
                <form id="addCommentForm" action="{{ route('worker.interventions.update-comment', $intervention->id) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="comment-form-wrapper">
                        <div class="comment-form-avatar">
                            @php
                                // Extraire les initiales du nom de l'utilisateur connecté
                                $userName = auth()->user()->prenom . ' ' . auth()->user()->nom;
                                $nameParts = explode(' ', $userName);
                                $initials = '';
                                foreach ($nameParts as $part) {
                                    if (!empty($part)) {
                                        $initials .= mb_substr($part, 0, 1, 'UTF-8');
                                    }
                                }
                                // Limiter à 2 caractères maximum
                                $initials = mb_substr($initials, 0, 2, 'UTF-8');
                            @endphp
                            <span class="avatar-initials">{{ $initials }}</span>
                        </div>
                        <div class="comment-form-content">
                            <div class="comment-input-group">
                                <textarea 
                                    name="comment" 
                                    id="commentInput" 
                                    class="comment-form-textarea" 
                                    placeholder="{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['comments']['comment_placeholder'] ?? 'Écrivez votre commentaire ou réponse...' }}"
                                    rows="2"
                                    maxlength="1000"></textarea>
                                <button type="submit" class="comment-form-button" disabled>
                                    <i class="fas fa-paper-plane"></i>
                                    <span>{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['comments']['send_comment'] ?? 'Envoyer' }}</span>
                                </button>
                            </div>
                            <div class="comment-form-footer">
                                <div class="comment-form-counter">
                                    <span id="charCount">0</span>{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['comments']['character_limit'] ?? '/1000' }}
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                </div>
            </div>

            {{-- Carte des actions --}}
            <div class="intervention-card position-relative">
                <div class="card-header-container">
                    <h5 class="section-title">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['actions_title'] ?? 'Actions' }}</h5>
                </div>
                <div class="card-body-container">
                    <div class="actions-container">
                        <div id="intervention-actions-container">
                            <!-- Affichage quand l'intervention est terminée (toujours présent, visibilité contrôlée) -->
                            <div id="completion-display" class="intervention-completed-info @if(!$intervention->is_finished) d-none @endif">
                                <div class="completed-by-text" data-translate="interventions.completed_by_label">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['completed_by_label'] ?? 'Intervention terminée par :' }}</div>
                                <div class="signature">
                                    @if($intervention->finished_by)
                                        @php
                                            $finishedByUser = \App\Models\User::find($intervention->finished_by);
                                        @endphp
                                        {{ $finishedByUser ? $finishedByUser->prenom . ' ' . $finishedByUser->nom : (\App\Helpers\TranslationHelper::getUserTranslations()['translations']['comments']['unknown_user'] ?? 'Utilisateur inconnu') }}
                                    @endif
                                </div>
                                <div class="completion-date">{{ $intervention->finished_at ? \Carbon\Carbon::parse($intervention->finished_at)->format('d/m/Y H:i') : '' }}</div>
                                <button type="button" id="revert-completion-btn" class="text-button mt-3 @if(!$intervention->is_finished) d-none @endif">
                                    <i class="fas fa-undo me-1"></i>{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['revert_completion'] ?? 'Revenir à l\'intervention' }}
                                </button>
                            </div>

                            <!-- Bouton terminer l'intervention (toujours présent, visibilité contrôlée) -->
                            <div id="complete-button-container" class="@if($intervention->is_finished) d-none @endif">
                                <button type="button" id="complete-intervention-btn" class="action-button action-button--success">
                                    <i class="fas fa-check-circle me-2"></i>{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['complete_intervention'] ?? 'Terminer l\'intervention' }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal de confirmation pour terminer l'intervention -->
            <div class="modal fade" id="completeInterventionModal" tabindex="-1" aria-labelledby="completeInterventionModalLabel" aria-hidden="true" data-bs-backdrop="false" data-bs-keyboard="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="completeInterventionModalLabel">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['confirmation_title'] ?? 'Confirmation' }}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['close'] ?? 'Fermer' }}" style="touch-action: manipulation;"></button>
                        </div>
                        <div class="modal-body">
                            <p>{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['confirmation_message'] ?? 'Êtes-vous sûr de vouloir terminer cette intervention ?' }}</p>
                            <p class="text-muted small">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['confirmation_note'] ?? 'Cette action marquera l\'intervention comme terminée.' }}</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" style="touch-action: manipulation;">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['cancel'] ?? 'Annuler' }}</button>
                            <button type="button" id="confirm-completion-btn" class="btn btn-success" style="touch-action: manipulation;">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['confirm_completion'] ?? 'Confirmer' }}</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Overlay personnalisé pour le modal (iOS compatible) -->
            <div id="custom-modal-backdrop" class="custom-modal-backdrop" style="display: none;"></div>

@endsection

@push('scripts')
    <script>
        // Définir l'ID de l'intervention pour le JavaScript
        window.interventionId = {{ $intervention->id }};
        window.userName = "{{ Auth::user()->prenom }} {{ Auth::user()->nom }}";
        window.userLanguage = "{{ Auth::user()->language ?? 'fr' }}";
        
        // Traductions pour le JavaScript
        window.translations = {
            translateButton: "{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['translate_button'] ?? 'Traduire' }}",
            originalText: "{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['interventions']['original_text'] ?? 'Texte original' }}"
        };
    </script>
    <script src="{{ asset('js/utils/heic-converter.js') }}?v={{ config('app.asset_version') }}"></script>
    <script src="{{ asset('js/pages/worker/intervention_details.js') }}?v={{ config('app.asset_version') }}"></script>
@endpush