@extends('layouts.admin')

@section('title', 'Demandes d\'audience au rectorat UAC')

<style>
  #appointmentsTable {
    border-collapse: separate;
    border-spacing: 0;
  }

  #appointmentsTable thead th {
    background-color: transparent;
    border-bottom: 2px solid var(--border-light);
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
  }

  #appointmentsTable tbody td {
    border-bottom: 1px solid var(--border-light);
    padding-top: 1rem;
    padding-bottom: 1rem;
    vertical-align: middle;
  }

  #appointmentsTable tbody tr:last-child td {
    border-bottom: none;
  }

  #appointmentsTable tbody tr:hover {
    background-color: rgba(14, 165, 233, 0.04) !important;
  }

  .avatar-xs {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .avatar-xs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .badge {
    padding: 0.35rem 0.75rem;
    font-weight: 500;
    border-radius: 50px;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
  }

  .dropdown-menu {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-light);
    padding: 0.5rem;
  }

  .dropdown-item {
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    margin: 0.125rem 0;
    transition: all var(--transition-fast);
  }

  .dropdown-item:hover {
    background-color: var(--primary-50);
    color: var(--primary-700);
  }

  @media (max-width: 768px) {
    #appointmentsTable {
      font-size: 0.875rem;
    }

    .stats-header h1 {
      font-size: 1.5rem;
    }
  }
</style>
<style>
  /* Styles spécifiques pour le modal */
  .modal-content {
    border: none;
    box-shadow: var(--shadow-xl);
  }

  .modal-header {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.05), rgba(14, 165, 233, 0.02));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
  }

  .action-icon-container {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(14, 165, 233, 0.1);
    border-radius: var(--radius-md);
  }

  .form-label {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
  }

  .input-group-text {
    background-color: var(--bg-secondary);
    border-color: var(--border-light);
    color: var(--text-muted);
  }

  .form-control,
  .form-select {
    border-color: var(--border-light);
    background-color: var(--bg-surface);
    color: var(--text-primary);
    transition: all var(--transition-fast);
  }

  .form-control:focus,
  .form-select:focus {
    border-color: var(--primary-400);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
    background-color: var(--bg-surface);
  }

  .alert {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    background-color: var(--bg-secondary);
  }

  /* Responsive */
  @media (max-width: 576px) {
    .modal-dialog {
      margin: 0.5rem;
    }

    .modal-header .d-flex {
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem;
    }

    .action-icon-container {
      align-self: flex-start;
    }
  }
</style>
<style>
  /* Styles spécifiques pour le modal de vue */
  .avatar-large {
    position: relative;
  }

  .avatar-large img {
    width: 56px;
    height: 56px;
    object-fit: cover;
  }

  .icon-container {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
  }

  .card-header-modern {
    padding: 0;
  }

  .card-body-modern {
    padding: 0;
  }

  .info-group {
    margin-bottom: 1rem;
  }

  .info-label {
    margin-bottom: 0.25rem;
  }

  .info-label i {
    width: 16px;
  }

  .info-value {
    color: var(--text-primary);
    line-height: 1.4;
  }

  .message-content {
    font-size: 0.95rem;
    line-height: 1.6;
    border-left: 3px solid var(--primary-400);
    background: var(--bg-secondary) !important;
  }

  .admin-note {
    border-left: 3px solid var(--warning);
    background: var(--warning-bg, rgba(245, 158, 11, 0.1)) !important;
  }

  .file-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    background: var(--bg-secondary) !important;
  }

  /* Scrollbar personnalisée pour le message */
  .message-content::-webkit-scrollbar {
    width: 6px;
  }

  .message-content::-webkit-scrollbar-track {
    background: transparent;
  }

  .message-content::-webkit-scrollbar-thumb {
    background: var(--primary-300);
    border-radius: 3px;
  }

  .message-content::-webkit-scrollbar-thumb:hover {
    background: var(--primary-400);
  }

  /* Responsive */
  @media (max-width: 768px) {
    .modal-dialog {
      margin: 0.5rem;
    }

    .avatar-large img {
      width: 48px;
      height: 48px;
    }

    .icon-container {
      width: 36px;
      height: 36px;
    }

    .modal-footer .d-flex {
      flex-direction: column;
    }

    .modal-footer .btn {
      width: 100%;
    }
  }

  /* Animation d'entrée pour les éléments */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .card-modern {
    animation: fadeIn 0.3s ease-out;
  }

  .info-group {
    animation: fadeIn 0.4s ease-out;
  }
</style>
@section('content')
  <div class="container-fluid py-4">
    <div class="">
      <div class="stats-header mb-4">
        <div class="row align-items-center">
          <div class="col-12 col-md-8">
            <h1 class="display-6 text-white fw-bold mb-2">
              Compte-rendus d’audience
            </h1>

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


      <div class="card-modern">
        <div class="card-body p-0">
          <table class="table table-hover datatable mb-0" id="reportsTable">
            <thead class="table-light">
              <tr>
                <th class="ps-4">Date audience</th>
                <th>Requérant</th>
                <th>Email</th>
                <th>Service</th>
                <th>Statut</th>
                <th class="text-end pe-4">Actions</th>
              </tr>
            </thead>

            <tbody>
              @foreach ($reports as $key => $report)
                @php
                  $appointment = $report->appointment;
                  $service = $appointment?->service;
                  $role = auth()->user()->role;
                @endphp

                <tr class="align-middle">
                  {{-- Date audience --}}
                  <td class="ps-4">
                    @if($appointment?->scheduled_at)
                      <div class="fw-semibold">
                        {{ \Carbon\Carbon::parse($appointment->scheduled_at)->format('d/m/Y') }}
                      </div>
                      <small class="text-muted">
                        {{ \Carbon\Carbon::parse($appointment->scheduled_at)->format('H:i') }}
                      </small>
                    @else
                      <span class="text-muted">—</span>
                    @endif
                  </td>

                  {{-- Nom --}}
                  <td>
                    <div class="fw-semibold">
                      {{ $appointment->first_name ?? '—' }}
                      {{ $appointment->last_name ?? '' }}
                    </div>
                  </td>

                  {{-- Email --}}
                  <td>
                    <span class="text-muted">
                      {{ $appointment->email ?? '—' }}
                    </span>
                  </td>

                  {{-- Service --}}
                  <td>
                    @if($service)
                      <span class="badge bg-info text-white">
                        {{ $service->name }}
                      </span>
                    @else
                      <span class="text-muted">Non défini</span>
                    @endif
                  </td>

                  {{-- Statut report --}}
                  <td>
                    @php
                      $statusClass = match ($report->status) {
                        'pending' => 'bg-warning text-dark',
                        'confirmed' => 'bg-success text-white',
                        'rejected' => 'bg-danger text-white',
                        default => 'bg-secondary text-white',
                      };
                    @endphp

                    <span class="badge {{ $statusClass }}">
                      {{ ucfirst(demandStatus($report->status)) }}
                    </span>
                  </td>

                  {{-- Actions --}}
                  <td class="text-end pe-4">
                    <div class="dropdown d-inline-block">
                      <button class="btn btn-sm btn-outline-secondary rounded-circle d-flex align-items-center justify-content-center" data-bs-toggle="dropdown" style="width: 36px; height: 36px;">
                        <i class="bi bi-three-dots"></i>
                      </button>

                      <ul class="dropdown-menu dropdown-menu-end shadow border-0">

                        {{-- Voir --}}
                        <li>
                          <a href="{{ route('admin.reports.show', $report) }}" class="dropdown-item">
                            <i class="bi bi-eye text-primary"></i>
                            Voir le rapport
                          </a>
                        </li>

                        @if ($role === 'secretaire' && in_array($report->status, ['pending', 'rejected']))
                          <li>
                            <a href="{{ route('admin.reports.edit', $report) }}" class="dropdown-item">
                              <i class="bi-pencil-square text-primary"></i>
                              Modifier le rapport
                            </a>
                          </li>
                        @endif
                        @if($report->status === 'confirmed')
                          <li>
                            <a href="{{ route('admin.reports.download', $report) }}" class="dropdown-item">
                              <i class="bi bi-download text-secondary"></i>
                              Télécharger
                            </a>
                          </li>
                        @endif

                        {{-- Validation / Déclinaison --}}
                        @if(in_array($role, ['vr-aa', 'chef-institution']))
                          <li>
                            <hr class="dropdown-divider">
                          </li>

                          @if($report->status === 'pending')
                          <li>
                            <form action="{{ route('admin.reports.approve', $report) }}"
                                  method="POST"
                                  style="display:inline">

                              @csrf
                              @method('PATCH')

                              <button type="submit" class="dropdown-item text-success">
                                <i class="bi bi-check-circle"></i>
                                Valider
                              </button>
                            </form>
                          </li>

                            <li>
                              <form action="{{ route('admin.reports.reject', $report) }}"
                                  method="POST"
                                  style="display:inline">

                              @csrf
                              @method('PATCH')

                              <button type="submit" class="dropdown-item text-danger">
                                <i class="bi bi-x-circle"></i>
                                Décliner
                              </button>
                            </form>
                            </li>
                          @endif
                        @endif
                      </ul>
                    </div>
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
@endsection