@extends('layouts.app')

@section('title', 'Autorizaciones de Acceso - Ojo de Águila')
@section('header_title', 'Módulo de Autorizaciones')

@section('content')
<div class="card">
    <div class="card-header">
        <h3 class="card-title">🔑 Solicitudes de autorización remota</h3>
    </div>
    
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>Fecha / Hora</th>
                    <th>Visitante</th>
                    <th>Destino Solicitado</th>
                    <th>Autorizador Residente</th>
                    <th>Estado</th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tbody>
                @forelse($requests as $req)
                    @php
                        $statusClass = $req->status === 'approved' ? 'badge-success' : ($req->status === 'rejected' ? 'badge-danger' : 'badge-warning');
                        $statusLabel = $req->status === 'approved' ? 'Aprobada' : ($req->status === 'rejected' ? 'Rechazada' : 'Pendiente');
                    @endphp
                    <tr>
                        <td style="font-weight: 600;">
                            {{ $req->created_at instanceof \Carbon\Carbon ? $req->created_at->format('H:i A') : \Carbon\Carbon::parse($req->created_at)->format('H:i A') }}
                        </td>
                        <td>
                            <div style="display: flex; flex-direction: column;">
                                <span style="font-weight: 700; color: var(--text-primary);">{{ $req->accessLog->visitor->full_name }}</span>
                                <span style="font-size: 11px; color: var(--text-secondary);">{{ $req->accessLog->visitor->rut }}</span>
                            </div>
                        </td>
                        <td style="font-weight: 600; color: var(--text-secondary);">
                            {{ $req->accessLog->zone->name }}
                        </td>
                        <td style="font-weight: 700; color: var(--text-primary);">
                            {{ $req->requested_to_name }}
                        </td>
                        <td>
                            <span class="badge {{ $statusClass }}">
                                {{ $statusLabel }}
                            </span>
                        </td>
                        <td>
                            @if($req->status === 'pending')
                                <div style="display: flex; gap: 8px;">
                                    <form action="{{ route('authorizations.update', [$req->id, 'approved']) }}" method="POST">
                                        @csrf
                                        <button type="submit" class="btn btn-primary" style="font-size: 11px; padding: 6px 12px; background-color: var(--success-color); border-color: var(--success-color);">
                                            Autorizar
                                        </button>
                                    </form>
                                    <form action="{{ route('authorizations.update', [$req->id, 'rejected']) }}" method="POST">
                                        @csrf
                                        <button type="submit" class="btn btn-danger" style="font-size: 11px; padding: 6px 12px;">
                                            Rechazar
                                        </button>
                                    </form>
                                </div>
                            @else
                                <div style="font-size: 11px; color: var(--text-light); font-weight: 600;">
                                    Respondido a las {{ $req->responded_at instanceof \Carbon\Carbon ? $req->responded_at->format('H:i A') : \Carbon\Carbon::parse($req->responded_at)->format('H:i A') }}
                                </div>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" style="text-align: center; color: var(--text-light); padding: 40px;">
                            No hay solicitudes registradas.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection