@extends('layouts.admin')

@section('page-title') Gestion des interventions @endsection
@section('page-subtitle') Vue d'ensemble des interventions @endsection



@section('styles')
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="{{ asset('css/layouts/admin.css') }}?v={{ time() }}" rel="stylesheet">
<link href="{{ asset('css/components/modals.css') }}?v={{ time() }}" rel="stylesheet">
<link href="{{ asset('css/pages/admin/components.css') }}?v={{ time() }}" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/pages/admin/interventions/index.css') }}?v={{ time() }}">
<link rel="stylesheet" href="{{ asset('css/pages/admin/interventions/comments.css') }}?v={{ time() }}">
<link rel="stylesheet" href="{{ asset('css/pages/admin/interventions/test-create-modal.css') }}?v={{ time() }}">
@endsection

@section('scripts')
<script type="module" src="{{ asset('js/pages/admin/interventions/index.js') }}?v={{ time() }}"></script>
<script src="{{ asset('js/pages/admin/interventions/comments-modal.js') }}?v={{ time() }}"></script>
@endsection

@section('content')
<div class="interventions-page">
    <div class="page-header-row">
        <div class="main-header-navigation">
            <div class="main-header-calendar">
                <button id="prev-month" class="main-header-calendar-btn">
                    <i class="fa-solid fa-chevron-left"></i>
                </button>
                <button type="button" id="current-month-display" class="main-header-calendar-current" data-bs-toggle="modal" data-bs-target="#month-year-modal">{{ ucfirst(trans('months.'.date('F'))).' '.date('Y') }}</button>
                <button id="next-month" class="main-header-calendar-btn">
                    <i class="fa-solid fa-chevron-right"></i>
                </button>
            </div>
        </div>
        <div class="main-header-actions">
            <button type="button" class="btn btn-warning test-create-btn" id="test-create-intervention-btn">
                <i class="fas fa-flask"></i>
                <span>TEST CREATE</span>
            </button>
            <button type="button" class="btn btn-primary" id="add-intervention-btn">
                <i class="fas fa-plus"></i>
                <span>Créer une intervention</span>
            </button>
        </div>
    </div>
    <div class="filters-card">
        <div class="filters-card-content">
            <!-- Barre de recherche -->
            <div class="search-box">
                <i class="fas fa-search search-box__icon"></i>
                <input type="text" class="search-box__input" placeholder="Rechercher une intervention..." id="search-input">
            </div>

            <!-- Filtres -->
            <div class="selectors-group">
                <!-- Filtre Assignation -->
                <select class="form-select" id="assigned-filter">
                    <option value="all">Tous les statuts</option>
                    <option value="assigned">Assigné</option>
                    <option value="unassigned">Non assigné</option>
                </select>

                <!-- Filtre Priorité -->
                <select class="form-select" id="priority-filter">
                    <option value="all">Toutes les priorités</option>
                    <option value="urgent">Urgent</option>
                    <option value="normal">Normal</option>
                </select>
            </div>
        </div>
    </div>

    <div class="status-cards">
        <div class="status-card status-card--new status-card--active" data-filter="new">
            <div class="status-card__icon">
                <i class="fas fa-plus-circle"></i>
            </div>
            <div class="status-card__content">
                <div class="status-card__label">Non attribuées</div>
                <div class="status-card__count">0</div>
            </div>
        </div>

        <div class="status-card status-card--in-progress" data-filter="in_progress">
            <div class="status-card__icon">
                <i class="fas fa-sync-alt"></i>
            </div>
            <div class="status-card__content">
                <div class="status-card__label">En cours</div>
                <div class="status-card__count">0</div>
            </div>
        </div>

        <div class="status-card status-card--late" data-filter="late">
            <div class="status-card__icon">
                <i class="fas fa-exclamation-triangle"></i>
            </div>
            <div class="status-card__content">
                <div class="status-card__label">En retard</div>
                <div class="status-card__count">0</div>
            </div>
        </div>

        <div class="status-card status-card--planned" data-filter="planned">
            <div class="status-card__icon">
                <i class="fas fa-calendar-alt"></i>
            </div>
            <div class="status-card__content">
                <div class="status-card__label">Planifiées</div>
                <div class="status-card__count">0</div>
            </div>
        </div>

        <div class="status-card status-card--completed" data-filter="completed">
            <div class="status-card__icon">
                <i class="fas fa-check-circle"></i>
            </div>
            <div class="status-card__content">
                <div class="status-card__label">Terminées</div>
                <div class="status-card__count">0</div>
            </div>
        </div>

        <div class="status-card status-card--total" data-filter="all">
            <div class="status-card__icon">
                <i class="fas fa-clipboard-list"></i>
            </div>
            <div class="status-card__content">
                <div class="status-card__label">Total du mois</div>
                <div class="status-card__count">0</div>
            </div>
        </div>

        <div class="status-card status-card--all-interventions" data-filter="all-interventions">
            <div class="status-card__icon">
                <i class="fas fa-globe"></i>
            </div>
            <div class="status-card__content">
                <div class="status-card__label">Toutes</div>
                <div class="status-card__count">0</div>
            </div>
        </div>
    </div>

    <!-- Liste des interventions -->
    <div class="interventions-grid">

        
        <!-- Affichage des interventions dynamiques si elles existent -->
        @if(isset($interventions) && $interventions->count() > 0)
            @foreach($interventions as $intervention)
                @php
                    $content = $intervention['content'] ?? [];
                    $assignedClass = $content['assignedClass'] ?? '';
                    $status = $content['status'] ?? 'new';
                    $taskId = $content['task_id'] ?? '';
                    $clientInfo = $content['client'] ?? [];
                    $clientName = $content['client_name'] ?? 'Client';
                    
                    // Utiliser directement les données de InterventionResource
                    $clientAddress = $content['client_address'] ?? 'Non connue';
                    $clientLogo = $clientInfo['client_logo'] ?? null;
                    $clientType = $clientInfo['client_type'] ?? 'particulier';
                    $clientFound = !empty($clientInfo) ? (object)$clientInfo : null;
                    // Récupérer la date d'intervention (déjà formatée par InterventionResource)
                    $interventionDate = $content['intervention_date'] ?? 'Non attribuée';
                    // La date est déjà formatée au format JJ/MM/AAAA par InterventionResource::formatDate()
                    // Pas besoin de re-formater pour éviter la confusion entre formats américain/français
                    
                    // Ajouter le jour de la semaine devant la date si elle est valide
                    $interventionDateWithDay = $interventionDate;
                    if ($interventionDate !== 'Non attribuée' && isset($content['intervention_date_raw'])) {
                        try {
                            $dateObj = new \DateTime($content['intervention_date_raw']);
                            $dayNames = ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'];
                            $dayOfWeek = $dayNames[$dateObj->format('w')];
                            $interventionDateWithDay = $dayOfWeek . ' ' . $interventionDate;
                        } catch (\Exception $e) {
                            // En cas d'erreur, garder la date originale
                            $interventionDateWithDay = $interventionDate;
                        }
                    }
                    $address = $content['address'] ?? 'Non connue';
                    $title = $content['title'] ?? 'Intervention';
                    $description = !empty($content['description']) ? $content['description'] : 'Aucune description disponible';
                    $priority = $content['priority'] ?? 'normal';
                    $priorityClass = $content['priorityClass'] ?? 'badge--normal';
                    $deadline = $content['deadline'] ?? 'Non définie';
                    $statusBadgeClass = $content['statusBadgeClass'] ?? 'badge--non-assignee';
                    $statusText = $content['statusText'] ?? 'Non assignée';
                    $workerCount = $content['workerCount'] ?? 0;
                    $workerName = $content['workerName'] ?? 'Aucun ouvrier';
                    $commentsCount = $content['commentsCount'] ?? 0;
                    $commentsText = $content['commentsText'] ?? 'aucun commentaire';
                    $photosCount = $content['photosCount'] ?? 0;
                    $photosText = $content['photosText'] ?? 'aucune photo';
                    $createdBy = $content['created_by'] ?? 'Admin';
                    $createdAt = $content['created_at'] ?? now();
                    if (is_string($createdAt)) {
                        $createdAt = new DateTime($createdAt);
                    }
                @endphp
                <article class="intervention-card {{ $assignedClass }}" data-status="{{ $status }}" data-client-id="{{ $clientFound ? $clientFound->client_id : '' }}" data-intervention-id="{{ $intervention['id'] }}" 
                    @if($status === \App\Enums\InterventionStatus::COMPLETED->value && isset($content['is_finished']) && $content['is_finished'] && isset($content['finished_at']))
                        data-finished-date="{{ \Carbon\Carbon::parse($content['finished_at'])->format('d/m/Y') }}"
                    @endif
                    id="intervention-{{ $intervention['id'] }}">
                    <div class="intervention-card__header">
                        <div class="intervention-number">Intervention n° {{ $taskId ?: $intervention['id'] }}</div>
                        <div class="client-header">
                            <div class="client-logo {{ $clientLogo ? 'client-logo--image' : 'client-logo--placeholder' }}">
                                @if($clientLogo)
                                    @php
                                        // Utiliser le logo fourni par le repository
                                        $logoPath = $clientLogo;
                                        $logoDebug = "Logo: " . ($logoPath ?? 'null');
                                        
                                        // Déterminer si le chemin commence déjà par /images ou /storage
                                        if (strpos($logoPath, '/images') === 0 || strpos($logoPath, 'images/') === 0) {
                                            // Chemin direct vers les images publiques
                                            $logoPath = ltrim($logoPath, '/');
                                            $logoUrl = asset($logoPath);
                                            $logoDebug .= " | Type: images publiques | URL finale: " . $logoUrl;
                                        } else {
                                            // Chemin vers storage
                                            $logoUrl = asset('storage/' . $logoPath);
                                            $logoDebug .= " | Type: storage | URL finale: " . $logoUrl;
                                        }
                                    @endphp
                                    <!-- Débogage logo: {{ $logoDebug }} -->
                                    <img src="{{ $logoUrl }}" alt="{{ $clientName }}" class="client-logo__img" title="{{ $clientName }}">
                                @else
                                    <i class="fas fa-building" title="{{ $clientName }}"></i>
                                @endif
                            </div>
                            <div class="intervention-card__meta">
                                <div class="intervention-date">
                                    <div class="intervention-date__label">Date d'intervention</div>
                                    <div class="intervention-date__value">{{ $interventionDateWithDay }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="intervention-client__name hidden">{{ $clientName }}</div>
                        <div class="client-address">
                            <i class="fas fa-map-marker-alt"></i>
                            {{ $clientAddress }}
                        </div>
                    </div>

                    <div class="intervention-card__body">
                        <div class="intervention-card__title">
                            <h3 class="title-text" data-full-title="{{ $title }}">{{ $title }}</h3>
                            <span class="text-muted title-info-icon custom-tooltip-trigger hidden" data-tooltip-text="{{ $title }}">
                                <i class="fas fa-info-circle"></i>
                            </span>
                        </div>

                        <div class="intervention-card__description">
                            <p class="description-text" data-full-description="{{ $description }}">{!! nl2br(e($description)) !!}</p>
                            <span class="text-muted description-info-icon custom-tooltip-trigger hidden" data-tooltip-text="{{ $description }}">
                                <i class="fas fa-info-circle"></i>
                            </span>
                        </div>
                    </div>
                    <div class="intervention-card__details">
                        <div class="detail-row">
                            <div class="priority-group detail-item">
                                <div class="detail-label">Priorité</div>
                                <div class="priority-badge {{ $priorityClass }}">
                                    <i class="fas {{ $priority === 'urgent' ? 'fa-exclamation-triangle' : 'fa-check-circle' }}"></i>
                                    {{ ucfirst($priority) }}
                                </div>
                            </div>
                            <div class="deadline-group detail-item">
                                <div class="detail-label">Deadline</div>
                                <div class="deadline-value">{{ $deadline }}</div>
                                @php
                                    $remainingDays = $content['remaining_days'] ?? null;
                                @endphp
                                @if($remainingDays && !in_array(strtolower($content['status'] ?? ''), ['completed', 'terminées', 'terminée']))
                                    <div class="deadline-remaining {{ $content['deadline_class'] ?? 'deadline-remaining--danger' }}">({{ $remainingDays }})</div>
                                @endif
                            </div>
                        </div>
                        <div class="detail-row">
                            <div class="assignment-status-group detail-item">
                                <div class="detail-label">Assignation</div>
                                <div class="assignment-status">{{ $statusText }}</div>
                            </div>
                            <div class="workers-count-group detail-item">
                                <div class="detail-label">Intervenants</div>
                                <div class="workers-count">
                                    {{ $workerName }}
                                    @php
                                        $assignedWorkers = $content['assigned_workers'] ?? [];
                                        $assignedNames = collect($assignedWorkers)->pluck('worker_name')->filter()->values()->all();
                                        if (count($assignedNames)) {
                                            $tooltipText = implode("\n", $assignedNames);
                                        } else {
                                            $tooltipText = 'Aucun intervenant assigné';
                                        }
                                    @endphp
                                    <span class="text-muted custom-tooltip-trigger" data-tooltip-text="{{ $tooltipText }}">
                                        <i class="fas fa-info-circle"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="intervention-card__media-info">
                        <div class="media-item">
                            <div class="media-label">Commentaires</div>
                            @if($commentsCount > 0)
                                <a href="#" class="media-count media-count-link" onclick="openCommentsModal({{ $intervention['id'] }}, event)">{{ $commentsText }}</a>
                            @else
                                <div class="media-count">{{ $commentsText }}</div>
                            @endif
                        </div>
                        <div class="media-item">
                            <div class="media-label">Photos</div>
                            <div class="media-count">{{ $photosText }}</div>
                        </div>
                    </div>
                    <div class="intervention-card__footer">
                        <div class="creator-info">
                            <div class="creator-info__details">
                                <div class="creator-info__created-by"><i class="fas fa-user-edit"></i>Créé par 
                                @php
                                    $creator = \App\Models\User::find($createdBy);
                                    echo $creator ? $creator->prenom . ' ' . $creator->nom : 'Utilisateur #' . $createdBy;
                                @endphp
                                </div>
                                <div class="creator-info__date"><i class="fas fa-calendar-alt"></i> Le {{ $createdAt->format('d/m/Y H:i') }}</div>
                            </div>
                        </div>
                        <a href="{{ route('admin.interventions.show', $intervention['id']) }}" class="button-details details-btn">
                            <i class="fas fa-eye"></i>
                            <span>Voir les détails</span>
                        </a>
                    </div>
                    
                    {{-- Affichage des informations de complétion pour les interventions terminées --}}
                    @if($status === \App\Enums\InterventionStatus::COMPLETED->value && isset($content['is_finished']) && $content['is_finished'] && isset($content['finished_at']) && isset($content['finished_by']))
                        <div class="intervention-completion-info">
                            <p class="completion-text">
                                <i class="fas fa-check-circle text-success"></i>
                                Intervention terminée le {{ $content['finished_date_formatted'] ?? 'Date inconnue' }} à {{ $content['finished_time_formatted'] ?? 'Heure inconnue' }}
                                @if($content['finished_signature'])
                                    par {{ $content['finished_signature'] }}
                                @else
                                    par Utilisateur #{{ $content['finished_by'] }}
                                @endif
                            </p>
                        </div>
                    @endif
                </article>
                        @endforeach
        @else
            <!-- Message pour aucune intervention disponible -->
            <!-- Message global pour aucune intervention -->
        @endif
        
        <!-- Conteneur unique pour toutes les cartes d'absence -->
        <div class="empty-card-container empty-states-container">
            <!-- Message de recherche sans résultat -->
            <div class="empty-intervention-card" id="no-results-message">
                <div class="empty-intervention-icon">
                    <i class="fas fa-filter"></i>
                </div>
                <h4>Aucun résultat</h4>
                <p>Aucune intervention ne correspond aux critères de filtrage</p>
                <button type="button" class="btn btn-outline-primary btn-sm reset-filters-btn">
                    <i class="fas fa-sync-alt"></i>
                    Réinitialiser les filtres
                </button>
            </div>
            
            <!-- Message spécifique pour recherche dans l'onglet "Toutes" -->
            <div class="empty-intervention-card" id="no-search-results-all">
                <div class="empty-intervention-icon">
                    <i class="fas fa-search"></i>
                </div>
                <h4>Aucun résultat trouvé</h4>
                <p>Aucune intervention ne correspond à votre recherche dans le nom du client, le titre ou la description</p>
                <button type="button" class="btn btn-outline-primary btn-sm clear-search-btn">
                    <i class="fas fa-times"></i>
                    Effacer la recherche
                </button>
            </div>
            
            <!-- Messages pour chaque statut -->
            <div class="empty-intervention-card status-empty-card debug-card" id="empty-new" data-status="new">
                <div class="empty-intervention-icon">
                    <i class="fas fa-plus-circle"></i>
                </div>
                <h4>Aucune intervention non attribuée</h4>
                <p>Aucune intervention avec le statut "Non attribuée" n'est disponible</p>
                <a href="{{ route('admin.interventions.create') }}" class="btn btn-primary btn-sm">
                    <i class="fas fa-plus"></i>
                    Créer une intervention
                </a>
            </div>
            
            <div class="empty-intervention-card status-empty-card debug-card" id="empty-in_progress" data-status="in_progress">
                <div class="empty-intervention-icon">
                    <i class="fas fa-sync-alt"></i>
                </div>
                <h4>Aucune intervention en cours</h4>
                <p>Aucune intervention avec le statut "En cours" n'est disponible</p>
            </div>
            
            <div class="empty-intervention-card status-empty-card debug-card" id="empty-late" data-status="late">
                <div class="empty-intervention-icon">
                    <i class="fas fa-exclamation-triangle"></i>
                </div>
                <h4>Aucune intervention en retard</h4>
                <p>Aucune intervention avec le statut "En retard" n'est disponible</p>
            </div>
            
            <div class="empty-intervention-card status-empty-card debug-card" id="empty-planned" data-status="planned">
                <div class="empty-intervention-icon">
                    <i class="fas fa-calendar-alt"></i>
                </div>
                <h4>Aucune intervention planifiée</h4>
                <p>Aucune intervention avec le statut "Planifiée" n'est disponible</p>
            </div>
            
            <div class="empty-intervention-card status-empty-card debug-card" id="empty-completed" data-status="completed">
                <div class="empty-intervention-icon">
                    <i class="fas fa-check-circle"></i>
                </div>
                <h4>Aucune intervention terminée</h4>
                <p>Aucune intervention avec le statut "Terminée" n'est disponible</p>
            </div>
            
            <div class="empty-intervention-card status-empty-card debug-card" id="empty-all" data-status="all">
                <div class="empty-intervention-icon">
                    <i class="fas fa-clipboard-list"></i>
                </div>
                <h4>Aucune intervention</h4>
                <p>Aucune intervention n'est disponible actuellement</p>
                <a href="{{ route('admin.interventions.create') }}" class="btn btn-primary btn-sm">
                    <i class="fas fa-plus"></i>
                    Créer une intervention
                </a>
            </div>
            
            @if(!isset($interventions) || $interventions->count() === 0)
                <!-- Message par défaut quand aucune intervention n'existe -->
                <div class="empty-intervention-card debug-card" id="empty-global">
                    <div class="empty-intervention-icon">
                        <i class="fas fa-clipboard-list"></i>
                    </div>
                    <h4>Aucune intervention</h4>
                    <p>Aucune intervention n'est disponible actuellement</p>
                    <a href="{{ route('admin.interventions.create') }}" class="btn btn-primary btn-sm">
                        <i class="fas fa-plus"></i>
                        Créer une intervention
                    </a>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Modal de sélection de période -->
<div class="modal fade" id="month-year-modal" tabindex="-1" aria-labelledby="month-year-modal-label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="month-year-modal-label">
                    <i class="fas fa-calendar me-2"></i>Sélectionner une période
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>
            <div class="modal-body">
                <form id="periodSelectorForm">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="month-select" class="form-label">Mois</label>
                            <div class="input-group">
                                <select id="month-select" class="form-select">
                                    <option value="1">Janvier</option>
                                    <option value="2">Février</option>
                                    <option value="3">Mars</option>
                                    <option value="4">Avril</option>
                                    <option value="5">Mai</option>
                                    <option value="6">Juin</option>
                                    <option value="7">Juillet</option>
                                    <option value="8">Août</option>
                                    <option value="9">Septembre</option>
                                    <option value="10">Octobre</option>
                                    <option value="11">Novembre</option>
                                    <option value="12">Décembre</option>
                                </select>
                                <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label for="year-select" class="form-label">Année</label>
                            <div class="input-group">
                                <select id="year-select" class="form-select">
                                    <!-- Les options seront générées par JavaScript -->
                                </select>
                                <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-2"></i>Annuler
                </button>
                <button type="button" class="btn btn-primary" id="apply-month-year">
                    <i class="fas fa-check me-2"></i>Appliquer
                </button>
            </div>
        </div>
    </div>
</div>


<!-- Modal Commentaires -->
<div class="modal-layer" data-modal-id="commentsModal">
    <div class="modal-backdrop"></div>
    <div class="modal-container">
        <div class="glass-form">
            <div class="glass-content">
                <div class="glass-header">
                    <h3 class="glass-title">
                        <i class="fas fa-comments"></i> Commentaires
                    </h3>
                    <button type="button" class="modal-close" data-modal-close>
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="glass-body" id="commentsModalBody">
                    <div class="comments-loading">
                        <div class="spinner"></div>
                        <span>Chargement...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection