@extends('layouts.app')

@section('title', 'Registros de Acceso - Ojo de Águila')
@section('header_title', 'Registros Históricos')

@section('content')
<div class="card">
    <div class="card-header">
        <h3 class="card-title">📝 Lista de accesos registrados</h3>
    </div>
    
    <!-- Filtros -->
    <div style="padding: 20px; border-bottom: 1px solid var(--border-color); background-color: #F8FAFC;">
        <form action="{{ route('access.index') }}" method="GET" style="display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end;">
            <div style="flex: 1; min-width: 160px;">
                <label class="form-label" style="font-size: 11px;">Tipo de Acceso</label>
                <select name="type" class="form-control" style="padding: 8px 12px; font-size: 13px;">
                    <option value="">Todos</option>
                    <option value="person" {{ request('type') === 'person' ? 'selected' : '' }}>Peatonal</option>
                    <option value="vehicle" {{ request('type') === 'vehicle' ? 'selected' : '' }}>Vehicular</option>
                    <option value="delivery" {{ request('type') === 'delivery' ? 'selected' : '' }}>Delivery</option>
                </select>
            </div>
            
            <div style="flex: 1; min-width: 160px;">
                <label class="form-label" style="font-size: 11px;">Estado</label>
                <select name="status" class="form-control" style="padding: 8px 12px; font-size: 13px;">
                    <option value="">Todos</option>
                    <option value="authorized" {{ request('status') === 'authorized' ? 'selected' : '' }}>Autorizado</option>
                    <option value="rejected" {{ request('status') === 'rejected' ? 'selected' : '' }}>Rechazado</option>
                    <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pendiente</option>
                </select>
            </div>

            <div style="flex: 1; min-width: 160px;">
                <label class="form-label" style="font-size: 11px;">Fecha</label>
                <input type="date" name="date" class="form-control" style="padding: 8px 12px; font-size: 13px;" value="{{ request('date', date('Y-m-d')) }}">
            </div>

            <button type="submit" class="btn btn-primary" style="padding: 9px 16px; font-size: 13px; height: 38px;">
                🔍 Filtrar
            </button>
            <a href="{{ route('access.index') }}" class="btn btn-secondary" style="padding: 9px 16px; font-size: 13px; height: 38px; display: inline-flex; align-items: center; justify-content: center;">
                Limpiar
            </a>
        </form>
    </div>

    <!-- Tabla -->
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>Ingreso / Salida</th>
                    <th>Tipo</th>
                    <th>Visitante / RUT</th>
                    <th>Vehículo / Estacionamiento</th>
                    <th>Destino</th>
                    <th>Guardia</th>
                    <th>Estado</th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tbody>
                @forelse($logs as $log)
                    <tr>
                        <td>
                            <div style="display: flex; flex-direction: column; font-size: 13px;">
                                <span style="font-weight: 700; color: var(--text-primary);">
                                    📥 {{ $log->entered_at instanceof \Carbon\Carbon ? $log->entered_at->format('H:i A') : \Carbon\Carbon::parse($log->entered_at)->format('H:i A') }}
                                </span>
                                @if($log->exited_at)
                                    <span style="font-weight: 500; color: var(--text-secondary); margin-top: 4px;">
                                        📤 {{ $log->exited_at instanceof \Carbon\Carbon ? $log->exited_at->format('H:i A') : \Carbon\Carbon::parse($log->exited_at)->format('H:i A') }}
                                    </span>
                                @else
                                    <span style="font-weight: 600; color: var(--success-color); margin-top: 4px;">
                                        🟢 Adentro del recinto
                                    </span>
                                @endif
                            </div>
                        </td>
                        <td>
                            <span class="badge {{ $log->type->value === 'person' ? 'badge-info' : ($log->type->value === 'vehicle' ? 'badge-success' : 'badge-warning') }}" style="font-size: 11px;">
                                {{ $log->type->label() }}
                            </span>
                        </td>
                        <td>
                            <div style="display: flex; flex-direction: column;">
                                <span style="font-weight: 700; color: var(--text-primary);">{{ $log->visitor->full_name }}</span>
                                <span style="font-size: 11px; color: var(--text-secondary);">RUT: {{ $log->visitor->rut }}</span>
                            </div>
                        </td>
                        <td>
                            @if($log->type->value === 'vehicle' && isset($log->vehicle))
                                <div style="display: flex; flex-direction: column;">
                                    <span style="font-weight: 700; color: var(--text-primary);">🚘 Patente: {{ $log->vehicle->plate }}</span>
                                    @if($log->parkingAssignment)
                                        <span style="font-size: 11px; color: var(--text-secondary);">🅿️ {{ $log->parkingAssignment->parkingSpace->number }}</span>
                                    @endif
                                </div>
                            @elseif($log->type->value === 'delivery' && $log->delivery)
                                <div style="display: flex; flex-direction: column;">
                                    <span style="font-weight: 700; color: var(--text-primary);">📦 {{ $log->delivery->company }}</span>
                                    <span style="font-size: 11px; color: var(--text-secondary);">Recibe: {{ $log->delivery->recipient_name ?? 'Recepción' }}</span>
                                </div>
                            @else
                                <span style="color: var(--text-light); font-style: italic;">N/A</span>
                            @endif
                        </td>
                        <td style="font-weight: 600; color: var(--text-secondary);">{{ $log->zone->name }}</td>
                        <td style="font-weight: 500;">{{ $log->guardUser->name }}</td>
                        <td>
                            <span class="badge badge-success">{{ $log->status->label() }}</span>
                        </td>
                        <td>
                            @if(!$log->exited_at && $log->status === \App\Enums\AccessStatus::AUTHORIZED)
                                <form action="{{ route('access.exit', $log->id) }}" method="POST" onsubmit="return confirm('¿Registrar salida de esta persona?')">
                                    @csrf
                                    <button type="submit" class="btn btn-danger" style="font-size: 11px; padding: 6px 10px;">
                                        Registrar Salida
                                    </button>
                                </form>
                            @else
                                <span style="font-size: 12px; color: var(--text-light); font-weight: 600;">Completado</span>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" style="text-align: center; color: var(--text-light); padding: 40px;">
                            No se encontraron registros para la fecha/filtros seleccionados.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection