@extends('layouts.front')

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card shadow-sm">
                <div class="card-header bg-primary ">
                    <h4 class="mb-0 text-white">Suivi de votre plainte</h4>
                </div>
                <div class="card-body">

                    <div class="complaint-details">
                        <h5 class="text-primary mb-4">Détails de la plainte</h5>
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <tr>
                                    <th style="width: 40%;">Numéro de plainte</th>
                                    <td>{{ $plainte->numero }}</td>
                                </tr>
                                <tr>
                                    <th>Date de dépôt</th>
                                    <td>{{ $plainte->created_at->format('d/m/Y à H:i') }}</td>
                                </tr>
                                <tr>
                                    <th>Objet</th>
                                    <td>{{ $plainte->objet }}</td>
                                </tr>
                                <tr>
                                    <th>Statut actuel</th>
                                    <td>
                                        @php
                                            $statusClass = [
                                                'recu' => 'badge bg-primary',
                                                'en_examen' => 'badge bg-info',
                                                'recevable' => 'badge bg-success',
                                                'irrecevable' => 'badge bg-danger',
                                                'en_enquete' => 'badge bg-warning',
                                                'resolu' => 'badge bg-success',
                                                'en_appel' => 'badge bg-warning',
                                                'clos' => 'badge bg-secondary',
                                            ][$plainte->statut] ?? 'badge bg-secondary';
                                            
                                            $statusText = [
                                                'recu' => 'Reçu',
                                                'en_examen' => 'En examen',
                                                'recevable' => 'Recevable',
                                                'irrecevable' => 'Irrecevable',
                                                'en_enquete' => 'Enquête en cours',
                                                'resolu' => 'Résolu',
                                                'en_appel' => 'En appel',
                                                'clos' => 'Clôturé',
                                            ][$plainte->statut] ?? $plainte->statut;
                                        @endphp
                                        <span class="{{ $statusClass }}">{{ $statusText }}</span>
                                    </td>
                                </tr>
                                @if($plainte->date_decision)
                                <tr>
                                    <th>Date de décision</th>
                                    <td>{{ $plainte->date_decision->format('d/m/Y') }}</td>
                                </tr>
                                @endif
                                @if($plainte->decision)
                                <tr>
                                    <th>Décision</th>
                                    <td>{{ $plainte->decision }}</td>
                                </tr>
                                @endif
                            </table>
                        </div>
                    </div>
                    @if($plainte->lastResolution)
                                        <h5 class="text-primary my-4">Proposition de résolution</h5>
                    <div class="card mt-5">
                        <div class="card-body position-relative">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h6 class="mb-1">Etat de la proposition:</h6>
                                            <span class="badge bg-primary"> {{ $lastResolution->statut }}</span>
                                        </div>
                                        <div>
                                            <h6 class="mb-1">Proposé le:</h6>
                                            <small class="text-muted">
                                            {{ \Carbon\Carbon::parse($lastResolution->date_proposition)->format('d/m/Y H:i') }}
                                            </small>
                                        </div>
                                        @if($lastResolution->date_validation)
                                        <div>
                                            <p>Validé le:</p>
                                            <small class="text-muted">
                                            {{ \Carbon\Carbon::parse($lastResolution->date_validation)->format('d/m/Y H:i') }}
                                            </small>
                                        </div>
                                        @endif
                                    </div>
                                    <h6 class="mb-1 mt-3">Proposition de résolution:</h6>
                                    <p class="mb-2">{{ $lastResolution?->resolution}}</p>
                                    @if($lastResolution->commentaire)
                                    <h6 class="mb-1 mt-3">Commentaire:</h6>
                                    <p class="mb-2">{{ $lastResolution?->commentaire}}</p>
                                    @endif
                                    
                                    @if($lastResolution->media)
                                    <h6 class="mb-1 mt-3">Pièce jointe:</h6>
                                    @foreach ($lastResolution->media as $media)
                                        <p class="mb-2"><a target="_blank" href="{{ Storage::url($media->chemin)}}">{{ $media->nom}}</a></p>
                                    @endforeach
                                    @endif

                        </div>
                        @if($lastResolution->statut == 'en_attente')
                        <div class="card-footer text-end">
                            <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#acceptResolutionModal">
                                <i class="fas fa-check me-2"></i> Accepter la proposition
                            </button>
                            <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#refuseResolutionModal">
                                <i class="fas fa-times me-2"></i> Refuser la proposition
                            </button>
                        </div>
                        @endif

                    </div>
                    @endif

                    <div class="mt-4">
                        <a href="{{ route('home') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-left me-2"></i>Retour à l'accueil
                        </a>
                        
                        @if(!$plainte->est_anonyme && $plainte->plaignant->email)
                            <a href="mailto:{{ config('mail.from.address') }}?subject=Question concernant la plainte {{ $plainte->numero }}" 
                               class="btn btn-primary float-end">
                                <i class="fas fa-envelope me-2"></i>Nous contacter
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@if ($plainte->lastResolution)
<!--Popup pour accepter et refuser la proposition de résolution avec commentaire-->
<div class="modal fade" id="acceptResolutionModal" tabindex="-1" aria-labelledby="acceptResolutionModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="acceptResolutionModalLabel">Accepter la proposition de résolution</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Êtes-vous sûr de vouloir accepter la proposition de résolution ?</p>
                <form action="{{ route('resolutions.accept', $plainte->lastResolution->id) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="mb-3">
                        <label for="commentaire" class="form-label">Commentaire</label>
                        <textarea class="form-control" id="commentaire" name="commentaire" rows="3"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">Accepter</button>
                </form>
            </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">Accepter</button>
            </div>
        </div>
    </div>
</div>
<!--Popup pour refuser la proposition de résolution avec commentaire-->
<div class="modal fade" id="refuseResolutionModal" tabindex="-1" aria-labelledby="refuseResolutionModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form class="modal-content" action="{{ route('resolutions.reject', $plainte->lastResolution->id) }}" method="POST">
            <div class="modal-header">
                <h5 class="modal-title" id="refuseResolutionModalLabel">Refuser la proposition de résolution</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Êtes-vous sûr de vouloir refuser la proposition de résolution ?</p>
                    @csrf
                    @method('PUT')
                    <div class="mb-3">
                        <label for="commentaire" class="form-label">Commentaire</label>
                        <textarea class="form-control" id="commentaire" name="commentaire" rows="3"></textarea>
                    </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">Refuser</button>
            </div>
        </form>
    </div>
</div>
@endif
@endsection
@push('scripts')
@if(session('success'))
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            Swal.fire({
                icon: 'success',
                title: 'Succès !',
                text: '{{ session('success') }}',
                confirmButtonColor: '#018d37',
                confirmButtonText: 'OK'
            });
        });
    </script>
@endif
@endpush

@if(session('error'))
    @push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            Swal.fire({
                icon: 'error',
                title: 'Erreur',
                text: '{{ session('error') }}',
                confirmButtonColor: '#dc3545',
                confirmButtonText: 'OK'
            });
        });
    </script>
    @endpush
@endif
@push('styles')
<style>
    .timeline {
        position: relative;
        padding-left: 2rem;
    }
    
    .timeline::before {
        content: '';
        position: absolute;
        left: 0.5rem;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #e9ecef;
    }
    
    .timeline-step {
        position: relative;
        padding-bottom: 1.5rem;
        padding-left: 2rem;
    }
    
    .timeline-step:last-child {
        padding-bottom: 0;
    }
    
    .timeline-step::before {
        content: '';
        position: absolute;
        left: -1.5rem;
        top: 0.25rem;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        background: #0d6efd;
        border: 2px solid #fff;
        z-index: 1;
    }
    
    .timeline-content {
        background: #f8f9fa;
        padding: 1rem;
        border-radius: 0.5rem;
        border: 1px solid #e9ecef;
    }
    
    .complaint-details th {
        background-color: #f8f9fa;
    }
</style>
@endpush