@extends('layouts.worker')

@section('title', __("interventions.title"))
@section('page-title', __("interventions.title"))
@section('page-subtitle', __("interventions.subtitle"))

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

@section('content')
<div class="interventions-container">
    <!-- En-tête avec filtres -->
    <div class="row mb-3">
        <div class="col-12">
            <div class="filters-card collapsed">
                <div class="filters-header">
                    <div class="filters-title-section">
                        <h5 class="filters-title">
                            <i class="fas fa-filter me-2"></i>
                            <span class="title-text">
                                <span class="title-full" data-translate="interventions.filter_title_full">Filtrer mes interventions</span>
                                <span class="title-compact" data-translate="interventions.filter_title_compact">Filtrer mes<br>interventions</span>
                            </span>
                        </h5>
                        
                        <!-- Boutons filtres compacts (visibles en mode réduit) -->
                        <div class="compact-filters">
                            <button class="compact-filter-btn compact-filter-btn--in-progress" data-filter="in-progress" title="{{ __("interventions.status_in_progress") }}">
                                <i class="fas fa-play-circle"></i>
                                <span class="compact-count">{{ count($inProgressInterventions) }}</span>
                            </button>
                            <button class="compact-filter-btn compact-filter-btn--upcoming" data-filter="upcoming" title="{{ __("interventions.status_planned") }}">
                                <i class="fas fa-calendar-alt"></i>
                                <span class="compact-count">{{ count($upcomingInterventions) }}</span>
                            </button>
                            <button class="compact-filter-btn compact-filter-btn--completed" data-filter="completed" title="{{ __("interventions.status_completed") }}">
                                <i class="fas fa-check-circle"></i>
                                <span class="compact-count">{{ count($completedInterventions) }}</span>
                            </button>
                        </div>
                        
                        <button id="toggle-filters" class="btn-toggle-filters" title="{{ __("interventions.toggle_filters") }}">
                            <i class="fas fa-chevron-up"></i>
                        </button>
                    </div>
                    
                    <!-- Navigation des mois - toujours visible -->
                    <div class="filters-controls">
                        <div class="month-navigation">
                            <button id="prev-month" class="btn-month-nav" title="{{ __("interventions.previous_month") }}">
                                <i class="fas fa-chevron-left"></i>
                            </button>
                            <span id="current-month-display" class="current-month">{{ date('F Y') }}</span>
                            <button id="next-month" class="btn-month-nav" title="{{ __("interventions.next_month") }}">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                            <input type="hidden" id="month-filter" value="6">
                            <input type="hidden" id="year-filter" value="2025">
                        </div>
                    </div>
                </div>
                
                <!-- Onglets de statut (masqués en mode réduit) -->
                <div class="status-filters collapsed" id="status-filters">
                    <div class="filter-tab filter-tab--in-progress active" data-filter="in-progress">
                        <div class="filter-tab__icon">
                            <i class="fas fa-play-circle"></i>
                        </div>
                        <div class="filter-tab__content">
                            <span class="filter-tab__label" data-translate="interventions.status_in_progress">En cours</span>
                            <span class="filter-tab__count">{{ count($inProgressInterventions) }}</span>
                        </div>
                    </div>
                    
                    <div class="filter-tab filter-tab--upcoming" data-filter="upcoming">
                        <div class="filter-tab__icon">
                            <i class="fas fa-calendar-alt"></i>
                        </div>
                        <div class="filter-tab__content">
                            <span class="filter-tab__label" data-translate="interventions.status_planned">Planifiées</span>
                            <span class="filter-tab__count">{{ count($upcomingInterventions) }}</span>
                        </div>
                    </div>
                    
                    <div class="filter-tab filter-tab--completed" data-filter="completed">
                        <div class="filter-tab__icon">
                            <i class="fas fa-check-circle"></i>
                        </div>
                        <div class="filter-tab__content">
                            <span class="filter-tab__label" data-translate="interventions.status_completed">Terminées</span>
                            <span class="filter-tab__count">{{ count($completedInterventions) }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if(isset($maintenance) && $maintenance)
    <!-- Message de maintenance -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-body text-center py-4">
                    <div class="maintenance-icon mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="currentColor" class="bi bi-tools text-warning" viewBox="0 0 16 16">
                            <path d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.27 3.27a.997.997 0 0 1 1.414 0l1.586-1.586a.997.997 0 0 1 0-1.414l-3.27-3.27a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0Zm9.646 10.646a.5.5 0 0 1 .708 0l2.914 2.915a.5.5 0 0 1-.707.707l-2.915-2.914a.5.5 0 0 1 0-.708ZM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 11Z"/>
                        </svg>
                    </div>
                    <h3 class="text-warning mb-3" data-translate="interventions.maintenance_title">Module temporairement indisponible</h3>
                    <p class="lead mb-4" data-translate="interventions.maintenance_message">Le module des interventions est actuellement en maintenance.</p>
                    <p class="mb-4" data-translate="interventions.maintenance_info">Nous travaillons à améliorer cette fonctionnalité et elle sera bientôt disponible.</p>
                    <a href="{{ route('worker.dashboard') }}" class="btn btn-primary">
                        <i class="fas fa-arrow-left me-2"></i><span data-translate="interventions.back_to_dashboard">Retour au tableau de bord</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    @elseif(isset($error))
    <!-- Message d'erreur -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-body text-center py-4">
                    <div class="error-icon mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="80" height="80" fill="currentColor" class="bi bi-exclamation-triangle text-danger">
                            <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/>
                            <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/>
                        </svg>
                    </div>
                    <h3 class="text-danger mb-3" data-translate="interventions.error_title">Erreur</h3>
                    <p class="lead mb-4">{{ $error }}</p>
                    <a href="{{ route('worker.dashboard') }}" class="btn btn-primary">
                        <i class="fas fa-arrow-left me-2"></i><span data-translate="interventions.back_to_dashboard">Retour au tableau de bord</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    @else
    <!-- Liste des interventions -->
    <div class="interventions-list">
        <!-- Conteneur des interventions en cours -->
        <div class="interventions-section" id="in-progress-container">
            <h3 class="section-title" data-translate="interventions.interventions_du_jour">
                Interventions du jour
            </h3>
            <div class="interventions-grid">
                @foreach($inProgressInterventions as $intervention)
                    <div class="interventions-grid__item" data-status="in-progress" data-date="{{ $intervention->intervention_date }}">
                        @include('worker.partials.intervention_card', ['intervention' => $intervention, 'status' => 'in-progress'])
                    </div>
                @endforeach
            </div>
            <!-- État vide pour les interventions en cours (toujours présent, masqué par défaut) -->
            <div class="empty-state d-none">
                <div class="card shadow-sm mb-4">
                    <div class="card-body text-center py-4">
                        <div class="empty-icon mb-3">
                            <i class="empty-state__icon fas fa-play-circle fa-3x text-warning"></i>
                        </div>
                        <p class="empty-state__message mb-0" data-translate="interventions.no_interventions_in_progress">Aucune intervention en cours aujourd'hui.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Conteneur des interventions planifiées -->
        <div class="interventions-section" id="upcoming-container">
            <h3 class="section-title" data-translate="interventions.upcoming_interventions">
                Interventions à venir
            </h3>
            <div class="interventions-grid">
                @foreach($upcomingInterventions as $intervention)
                    <div class="interventions-grid__item" data-status="upcoming" data-date="{{ $intervention->intervention_date }}">
                        @include('worker.partials.intervention_card', ['intervention' => $intervention, 'status' => 'upcoming'])
                    </div>
                @endforeach
            </div>
            <!-- État vide pour les interventions planifiées (toujours présent, masqué par défaut) -->
            <div class="empty-state d-none">
                <div class="card shadow-sm mb-4">
                    <div class="card-body text-center py-4">
                        <div class="empty-icon mb-3">
                            <i class="empty-state__icon fas fa-calendar-alt fa-3x text-info"></i>
                        </div>
                        <p class="empty-state__message mb-0" data-translate="interventions.no_upcoming_interventions">Aucune intervention planifiée à venir.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Section des interventions terminées -->
        <div id="completed-container" class="interventions-section mb-4">
            <h3 class="section-title" data-translate="interventions.completed_interventions">
                Interventions complétées
            </h3>
            <div class="interventions-grid">
                @foreach($completedInterventions as $intervention)
                    <div class="interventions-grid__item" data-status="completed" data-date="{{ $intervention->intervention_date }}">
                        @include('worker.partials.intervention_card', ['intervention' => $intervention, 'status' => 'completed'])
                    </div>
                @endforeach
            </div>
            <!-- État vide pour les interventions terminées (toujours présent, masqué par défaut) -->
            <div class="empty-state d-none">
                <div class="card shadow-sm mb-4">
                    <div class="card-body text-center py-4">
                        <div class="empty-icon mb-3">
                            <i class="empty-state__icon fas fa-check-circle fa-3x text-success"></i>
                        </div>
                        <p class="empty-state__message mb-0" data-translate="interventions.no_completed_interventions_for_month">Aucune intervention terminée.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>

<!-- Template pour une carte d'intervention -->
<template id="intervention-card-template">
    <div class="card mb-4 intervention-card">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <div class="header-left">
                    <div class="address-wrapper">
                        <div class="client-logo-container me-2">
                            <img class="client-logo" src="" alt="Logo client">
                        </div>
                        <div class="address">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="14" height="14" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                <path d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"/>
                            </svg> <span class="address-name"></span>
                        </div>
                    </div>
                </div>
                <div class="header-right">
                    <div class="date-intervention">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="14" height="14" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                            <path d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h436c6.6 0 12-5.4 12-12z"/>
                        </svg> <span class="intervention-date"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-8">
                    <!-- Détails de l'intervention -->
                    <div class="interventions-container mb-4">
                        <!-- Les lignes d'intervention seront ajoutées ici -->
                    </div>
                    
                    <!-- Liste des ouvriers -->
                    <div class="workers-section mb-4">
                        <h6 class="card-subtitle mb-2" data-translate="interventions.team">Équipe</h6>
                        <div class="workers-list-container">
                            <div class="workers-list d-flex flex-wrap">
                                <!-- Les ouvriers seront ajoutés ici -->
                            </div>
                        </div>
                    </div>
                    
                    <!-- Actions -->
                    <div class="action-buttons">
                        <button class="btn btn-primary start-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="14" height="14" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                <path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" fill="currentColor"/>
                            </svg> <span data-translate="interventions.start">Démarrer</span>
                        </button>
                        <button class="btn btn-success complete-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="14" height="14" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204 0z" fill="currentColor"/>
                            </svg> <span data-translate="interventions.complete">Terminer</span>
                        </button>
                        <button class="btn btn-warning pause-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="14" height="14" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                <path d="M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48h-96c-26.5 0-48-21.5-48-48z" fill="currentColor"/>
                            </svg> <span data-translate="interventions.pause">Mettre en pause</span>
                        </button>
                        <button class="btn btn-info add-photo-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="14" height="14" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                <path d="M512 144v288c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V144c0-26.5 21.5-48 48-48h88l12.3-32.9c7-18.7 24.9-31.1 44.9-31.1h125.5c20 0 37.9 12.4 44.9 31.1L376 96h88c26.5 0 48 21.5 48 48zM376 288c0-66.2-53.8-120-120-120s-120 53.8-120 120 53.8 120 120 120 120-53.8 120-120zm-32 0c0 48.5-39.5 88-88 88s-88-39.5-88-88 39.5-88 88-88 88 39.5 88 88z" fill="currentColor"/>
                            </svg> <span data-translate="interventions.add_photo">Ajouter photo</span>
                        </button>
                    </div>
                </div>
                <div class="col-md-4">
                    <!-- Photos -->
                    <div class="photo-container">
                        <div class="admin-photos-section mb-3">
                            <h6 class="card-subtitle mb-2" data-translate="interventions.admin_photos">Photos admin</h6>
                            <div class="admin-photos-container">
                                <!-- Les photos admin seront ajoutées ici -->
                            </div>
                        </div>
                        <div class="worker-photos-section">
                            <h6 class="card-subtitle mb-2" data-translate="interventions.worker_photos">Mes photos</h6>
                            <div class="worker-photos-container">
                                <!-- Les photos de l'ouvrier seront ajoutées ici -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<!-- Modale pour ajouter une photo -->
<div class="modal fade" id="add-photo-modal" tabindex="-1" aria-labelledby="add-photo-title" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="add-photo-title" data-translate="interventions.add_photo">Ajouter une photo</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __("interventions.close") }}"></button>
            </div>
            <div class="modal-body">
                <form id="add-photo-form">
                    <div class="mb-3">
                        <label for="photo-file" class="form-label" data-translate="interventions.select_image">Sélectionner une image</label>
                        <input type="file" class="form-control" id="photo-file" name="photo" accept="image/*,.heic,.heif" capture="camera">
                    </div>
                    <div class="mb-3">
                        <label for="photo-description" class="form-label" data-translate="interventions.description_optional">Description (optionnelle)</label>
                        <textarea class="form-control" id="photo-description" name="description" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="photo-before" name="is_before">
                            <label class="form-check-label" for="photo-before" data-translate="interventions.photo_before">
                                Photo avant intervention
                            </label>
                        </div>
                    </div>
                    <div class="photo-preview-container d-none mb-3">
                        <label class="form-label" data-translate="interventions.preview">Aperçu</label>
                        <img id="photo-preview" class="img-fluid rounded" src="" alt="{{ __("interventions.photo_preview") }}">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-translate="interventions.cancel">Annuler</button>
                <button type="button" id="submit-photo-btn" class="btn btn-primary" data-translate="interventions.send">Envoyer</button>
            </div>
        </div>
    </div>
</div>

<!-- Modale pour visualiser une photo -->
<div class="modal fade" id="view-photo-modal" tabindex="-1" aria-labelledby="view-photo-title" 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="view-photo-title" data-translate="interventions.photo">Photo</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __("interventions.close") }}"></button>
            </div>
            <div class="modal-body text-center">
                <img id="photo-full" class="img-fluid" src="" alt="{{ __("interventions.intervention_photo") }}">
                <p id="photo-description-view" class="mt-3"></p>
                <p id="photo-metadata" class="text-muted small"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-translate="interventions.close">Fermer</button>
                <button type="button" id="delete-photo-btn" class="btn btn-danger" data-translate="interventions.delete">Supprimer</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('js/translation.js') }}?v={{ config('app.asset_version') }}"></script>
<script src="{{ asset('js/pages/worker/interventions.init.js') }}?v={{ config('app.asset_version') }}" defer></script>
<script src="{{ asset('js/pages/worker/interventions.js') }}?v={{ config('app.asset_version') }}" defer></script>
<!-- Script pour la conversion des fichiers HEIC -->
<script src="{{ asset('js/utils/heic-converter.js') }}?v={{ config('app.asset_version') }}"></script>
@endpush