@extends('dashboard.layouts.app')

@section('title', $activite->titre . ' - PTA - UAC eservices')

@section('page-title', 'Feuille de route PTA')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('pta.activites.index') }}">PTA</a></li>
    <li class="breadcrumb-item active" aria-current="page">{{ Str::limit($activite->titre, 30) }}</li>
@endsection

@section('content')
<!-- -------------------------------------------------------------- -->
<!-- Start Page Content -->
<!-- -------------------------------------------------------------- -->
<div class="row">
    <!-- Informations de l'activité -->
    <div class="col-lg-8">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start mb-4">
                    <div>
                        <h4 class="card-title">{{ $activite->titre }}</h4>
                        <p class="text-muted">{{ $activite->description }}</p>
                    </div>
                    <span class="badge fs-6
                        @if($activite->statut === 'Planifié') bg-secondary
                        @elseif($activite->statut === 'En cours') bg-primary
                        @elseif($activite->statut === 'Terminé') bg-success
                        @elseif($activite->statut === 'En retard') bg-danger
                        @elseif($activite->statut === 'En retard mais terminé') bg-warning
                        @endif">
                        {{ $activite->statut }}
                    </span>
                </div>

                <div class="row mb-4">
                    <div class="col-md-6">
                        <div class="border rounded p-3">
                            <div class="d-flex align-items-center">
                                <div class="btn btn-light-info text-info btn-circle me-3">
                                    <i class="mdi mdi-calendar-check"></i>
                                </div>
                                <div>
                                    <h6 class="mb-0">Date de début prévue</h6>
                                    <span class="text-muted">{{ $activite->date_debut_prevue->format('d/m/Y') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="border rounded p-3">
                            <div class="d-flex align-items-center">
                                <div class="btn btn-light-success text-success btn-circle me-3">
                                    <i class="mdi mdi-calendar-clock"></i>
                                </div>
                                <div>
                                    <h6 class="mb-0">Date de fin prévue</h6>
                                    <span class="text-muted">{{ $activite->date_fin_prevue->format('d/m/Y') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mb-4">
                    <div class="d-flex align-items-center">
                        <div class="btn btn-light-primary text-primary btn-circle me-3">
                            <i class="mdi mdi-account"></i>
                        </div>
                        <div>
                            <h6 class="mb-0">Créé par</h6>
                            <span class="text-muted">{{ $activite->createur->name }}</span>
                        </div>
                    </div>
                </div>

                <!-- Indicateurs de Performance -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h5 class="mb-3">Indicateurs de Performance</h5>

                        @php
                            $performanceService = app(\App\Services\PtaPerformanceService::class);
                            $indicateurs = $performanceService->getIndicateursPerformance($activite);
                        @endphp

                        <div class="row">
                            <!-- TEP - Taux d'Exécution Physique -->
                            <div class="col-md-4 mb-3">
                                <div class="card border-primary">
                                    <div class="card-body text-center">
                                        <h6 class="text-primary mb-2">TEP - Taux d'Exécution Physique</h6>
                                        <h3 class="text-primary mb-0">{{ $indicateurs['tep'] }}%</h3>
                                        <small class="text-muted">
                                            {{ $indicateurs['ponderation_terminee'] }}/{{ $indicateurs['total_ponderation'] }} points
                                        </small>
                                        <div class="progress mt-2" style="height: 8px;">
                                            <div class="progress-bar bg-primary" style="width: {{ $indicateurs['tep'] }}%"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- TEF - Taux d'Exécution Financière -->
                            <div class="col-md-4 mb-3">
                                <div class="card border-success">
                                    <div class="card-body text-center">
                                        <h6 class="text-success mb-2">TEF - Taux d'Exécution Financière</h6>
                                        @if($indicateurs['tef'] !== null)
                                            <h3 class="text-success mb-0">{{ $indicateurs['tef'] }}%</h3>
                                            <small class="text-muted">
                                                {{ number_format($indicateurs['total_depenses'], 0, ',', ' ') }} /
                                                {{ number_format($indicateurs['budget_alloue'], 0, ',', ' ') }} XOF
                                            </small>
                                            <div class="progress mt-2" style="height: 8px;">
                                                <div class="progress-bar bg-success" style="width: {{ min(100, $indicateurs['tef']) }}%"></div>
                                            </div>
                                        @else
                                            <h3 class="text-muted mb-0">N/A</h3>
                                            <small class="text-muted">Budget non défini</small>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <!-- Graphique TEF -->
                            @if($indicateurs['tef'] !== null)
                            <div class="col-md-4 mb-3">
                                <div class="card border-info">
                                    <div class="card-body text-center">
                                        <h6 class="text-info mb-2">Répartition Budgétaire</h6>
                                        <div style="max-width: 150px; margin: 0 auto;">
                                            <canvas id="tefChart" width="150" height="100"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endif
                        </div>

                        @if($indicateurs['tef'] !== null)
                        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
                        <script>
                            @php
                                $chartData = $performanceService->getDonneesGraphiqueTEF($activite);
                            @endphp
                            const ctx = document.getElementById('tefChart').getContext('2d');
                            new Chart(ctx, {
                                type: 'doughnut',
                                data: {
                                    labels: {!! json_encode($chartData['labels']) !!},
                                    datasets: [{
                                        data: {!! json_encode($chartData['data']) !!},
                                        backgroundColor: {!! json_encode($chartData['colors']) !!},
                                        borderWidth: 1
                                    }]
                                },
                                options: {
                                    responsive: true,
                                    plugins: {
                                        legend: {
                                            position: 'bottom',
                                        }
                                    }
                                }
                            });
                        </script>
                        @endif
                    </div>
                </div>

                <!-- Statistiques des tâches -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h5 class="mb-3">Progression des tâches</h5>
                        @php
                            $totalTaches = $activite->taches->count();
                            $tachesTerminees = $activite->taches->where('statut', 'Terminé')->count();
                            $pourcentage = $totalTaches > 0 ? ($tachesTerminees / $totalTaches) * 100 : 0;
                        @endphp

                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span>Progression globale (simple)</span>
                                <span class="fw-bold">{{ number_format($pourcentage, 1) }}%</span>
                            </div>
                            <div class="progress" style="height: 8px;">
                                <div class="progress-bar bg-success" style="width: {{ $pourcentage }}%"></div>
                            </div>
                        </div>

                        <div class="row text-center">
                            <div class="col-4">
                                <div class="p-2 border rounded">
                                    <h4 class="text-primary mb-0">{{ $totalTaches }}</h4>
                                    <small class="text-muted">Total</small>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="p-2 border rounded">
                                    <h4 class="text-warning mb-0">{{ $activite->taches->where('statut', 'En cours')->count() }}</h4>
                                    <small class="text-muted">En cours</small>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="p-2 border rounded">
                                    <h4 class="text-success mb-0">{{ $tachesTerminees }}</h4>
                                    <small class="text-muted">Terminées</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Actions rapides -->
    <div class="col-lg-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Actions</h5>

                <div class="d-grid gap-2">
                    <a href="{{ route('pta.activites.index') }}" class="btn btn-outline-secondary">
                        <i class="mdi mdi-arrow-left"></i> Retour à la liste
                    </a>

                    @can('update', $activite)
                        <a href="{{ route('pta.activites.edit', $activite) }}" class="btn btn-outline-primary me-2">
                            <i class="mdi mdi-pencil"></i> Modifier l'activité
                        </a>
                        <a href="{{ route('pta.depenses.index', $activite) }}" class="btn btn-outline-success me-2">
                            <i class="mdi mdi-cash-multiple"></i> Gérer les dépenses
                        </a>
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addTaskModal">
                            <i class="mdi mdi-plus"></i> Ajouter une tâche
                        </button>
                    @endcan
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Liste des tâches -->
<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title mb-4">Liste des tâches</h5>

                @if($activite->taches->count() > 0)
                    <div class="row">
                        @foreach($activite->taches as $tache)
                            <div class="col-lg-6 mb-4">
                                <div class="card h-100 border">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-start mb-3">
                                            <div class="flex-grow-1">
                                                <p class="mb-2">{{ $tache->description }}</p>
                                                <div class="d-flex align-items-center mb-2">
                                                    <i class="mdi mdi-account text-muted me-1"></i>
                                                    <small class="text-muted">{{ $tache->responsable->name }}</small>
                                                </div>
                                                <div class="d-flex align-items-center">
                                                    <i class="mdi mdi-calendar text-muted me-1"></i>
                                                    <small class="text-muted">Échéance: {{ $tache->date_limite->format('d/m/Y') }}</small>
                                                </div>
                                            </div>
                                            <span class="badge
                                                @if($tache->statut === 'À faire') bg-secondary
                                                @elseif($tache->statut === 'En cours') bg-warning
                                                @elseif($tache->statut === 'Terminé') bg-success
                                                @endif">
                                                {{ $tache->statut }}
                                            </span>
                                        </div>

                                        @if($tache->responsable_id === auth()->id())
                                            <form action="{{ route('pta.taches.update', $tache) }}" method="POST" class="d-inline">
                                                @csrf
                                                @method('PATCH')
                                                <select name="statut" class="form-select form-select-sm" onchange="this.form.submit()">
                                                    <option value="À faire" {{ $tache->statut === 'À faire' ? 'selected' : '' }}>À faire</option>
                                                    <option value="En cours" {{ $tache->statut === 'En cours' ? 'selected' : '' }}>En cours</option>
                                                    <option value="Terminé" {{ $tache->statut === 'Terminé' ? 'selected' : '' }}>Terminé</option>
                                                </select>
                                            </form>
                                        @else
                                            <small class="text-muted">Seul le responsable peut modifier le statut</small>
                                        @endif

                                        @can('update', $activite)
                                            <div class="mt-2">
                                                <a href="{{ route('pta.taches.edit', $tache) }}" class="btn btn-sm btn-outline-primary">
                                                    <i class="mdi mdi-pencil"></i> Modifier
                                                </a>
                                            </div>
                                        @endcan
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-4">
                        <i class="mdi mdi-clipboard-list-outline fs-1 text-muted"></i>
                        <h6 class="mt-3 text-muted">Aucune tâche définie</h6>
                        @can('update', $activite)
                            <p class="text-muted">Cliquez sur "Ajouter une tâche" pour commencer.</p>
                        @endcan
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Modal d'ajout de tâche -->
@can('update', $activite)
<div class="modal fade" id="addTaskModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Ajouter une tâche</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('pta.taches.store', $activite) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="description" class="form-label">Description de la tâche <span class="text-danger">*</span></label>
                        <textarea class="form-control @error('description') is-invalid @enderror"
                                id="description" name="description" rows="3" required>{{ old('description') }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="responsable_id" class="form-label">Responsable <span class="text-danger">*</span></label>
                        <select class="form-select @error('responsable_id') is-invalid @enderror"
                                id="responsable_id" name="responsable_id" required>
                            <option value="">Sélectionner un responsable</option>
                            @foreach(\App\Models\User::whereHas('role', function ($query) {
                                $query->whereNotIn('nom', ['Administrateur']);
                            })->get() as $user)
                                <option value="{{ $user->id }}" {{ old('responsable_id') == $user->id ? 'selected' : '' }}>
                                    {{ $user->name }} ({{ $user->role->nom }})
                                </option>
                            @endforeach
                        </select>
                        @error('responsable_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="date_limite" class="form-label">Date limite <span class="text-danger">*</span></label>
                        <input type="date" class="form-control @error('date_limite') is-invalid @enderror"
                            id="date_limite" name="date_limite" value="{{ old('date_limite') }}" required>
                        @error('date_limite')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="ponderation" class="form-label">Pondération <span class="text-danger">*</span></label>
                        <input type="number" class="form-control @error('ponderation') is-invalid @enderror"
                            id="ponderation" name="ponderation" value="{{ old('ponderation', 1) }}" min="1" required>
                        <small class="form-text text-muted">Poids de la tâche dans le calcul du TEP (Taux d'Exécution Physique)</small>
                        @error('ponderation')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn btn-primary">Ajouter la tâche</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endcan

<!-- -------------------------------------------------------------- -->
<!-- End PAge Content -->
<!-- -------------------------------------------------------------- -->
@endsection