@extends('microsip_auth.layout')

@section('title', 'Detalle solicitud #' . $authorization->id)
@section('breadcrumb', 'Microsip / Bitácora de autorizaciones / Detalle')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0">
        Solicitud #{{ $authorization->id }}
        <span class="ms-2 badge badge-{{ $authorization->estatus }}">{{ $authorization->estatus }}</span>
    </h4>
    <a href="{{ route('microsip.authorizations.index') }}" class="btn btn-outline-secondary btn-sm">
        <i class="fa fa-arrow-left me-1"></i> Volver
    </a>
</div>

<div class="row g-3">
    <div class="col-md-7">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white fw-semibold">Datos de la solicitud</div>
            <div class="card-body">
                <dl class="row mb-0">
                    <dt class="col-sm-4 text-muted">UUID</dt>
                    <dd class="col-sm-8"><code class="small">{{ $authorization->solicitud_uuid }}</code></dd>

                    <dt class="col-sm-4 text-muted">Usuario Windows</dt>
                    <dd class="col-sm-8">{{ $authorization->usuario_windows }}</dd>

                    <dt class="col-sm-4 text-muted">Equipo</dt>
                    <dd class="col-sm-8"><code>{{ $authorization->equipo }}</code></dd>

                    <dt class="col-sm-4 text-muted">Comentario</dt>
                    <dd class="col-sm-8">{{ $authorization->comentario ?? '—' }}</dd>

                    <dt class="col-sm-4 text-muted">Estatus</dt>
                    <dd class="col-sm-8">
                        <span class="badge badge-{{ $authorization->estatus }}">{{ $authorization->estatus }}</span>
                    </dd>

                    <dt class="col-sm-4 text-muted">Autorizador</dt>
                    <dd class="col-sm-8">{{ $authorization->authorizer?->nombre ?? '—' }}</dd>

                    <dt class="col-sm-4 text-muted">Autorizado por</dt>
                    <dd class="col-sm-8">{{ $authorization->autorizado_por ?? '—' }}</dd>

                    <dt class="col-sm-4 text-muted">Mensaje respuesta</dt>
                    <dd class="col-sm-8">{{ $authorization->mensaje_respuesta ?? '—' }}</dd>

                    <dt class="col-sm-4 text-muted">Fecha solicitud</dt>
                    <dd class="col-sm-8">{{ $authorization->fecha_solicitud->format('d/m/Y H:i:s') }}</dd>

                    <dt class="col-sm-4 text-muted">Fecha respuesta</dt>
                    <dd class="col-sm-8">{{ $authorization->fecha_respuesta?->format('d/m/Y H:i:s') ?? '—' }}</dd>

                    <dt class="col-sm-4 text-muted">IP origen</dt>
                    <dd class="col-sm-8">{{ $authorization->ip_origen ?? '—' }}</dd>

                    <dt class="col-sm-4 text-muted">User Agent</dt>
                    <dd class="col-sm-8 text-break small text-muted">{{ $authorization->user_agent ?? '—' }}</dd>
                </dl>
            </div>
        </div>
    </div>

    <div class="col-md-5">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white fw-semibold">Evidencia (screenshot)</div>
            <div class="card-body text-center">
                @if ($authorization->screenshot_path)
                    <img src="{{ asset('storage/' . $authorization->screenshot_path) }}"
                         alt="Screenshot de evidencia"
                         class="img-fluid rounded border"
                         style="max-height: 420px; object-fit: contain;">
                    <div class="mt-2">
                        <a href="{{ asset('storage/' . $authorization->screenshot_path) }}"
                           target="_blank" class="btn btn-outline-secondary btn-sm">
                            <i class="fa fa-expand me-1"></i> Ver en tamaño completo
                        </a>
                    </div>
                @else
                    <div class="text-muted py-5">
                        <i class="fa fa-image fa-2x mb-2 d-block"></i>
                        Sin evidencia adjunta
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection