@extends('layouts.app')

@section('title', 'Detalle del Documento')

@section('content')
<div class="card">
    <div class="card-body">
        <h4 class="header-title mb-4"><i class="mdi mdi-file-document-outline text-primary"></i> Detalle del Documento</h4>

        <div class="row g-3">
            <div class="col-md-6">
                <p><strong>N° de Expediente:</strong> {{ $documento->numero_expediente }}</p>
                <p><strong>Asunto:</strong> {{ $documento->asunto }}</p>
                <p><strong>Observaciones:</strong> {{ $documento->observaciones ?? '—' }}</p>
                <p><strong>Tipo de Documento:</strong> {{ $documento->tipoDocumento->nombre ?? '—' }}</p>
            </div>
            <div class="col-md-6">
                <p><strong>Área de Destino:</strong> {{ $documento->areaDestino->nombre ?? '—' }}</p>
                <p><strong>Fecha de Respuesta:</strong> {{ $documento->fecha_respuesta ?? '—' }}</p>
                <p><strong>Número de Folios:</strong> {{ $documento->numero_folios }}</p>
                <p>
                    <strong>Estado:</strong>
                    <span class="badge bg-{{ 
                        $documento->estado == 'pendiente' ? 'warning' : 
                        ($documento->estado == 'derivado' ? 'info' : 
                        ($documento->estado == 'finalizado' ? 'success' : 'secondary')) }}">
                        {{ ucfirst($documento->estado) }}
                    </span>
                </p>
            </div>
        </div>

        <hr>

        {{-- Documento principal firmado --}}
        @if($documento->archivo)
            <div class="mb-4">
                <strong> Documento principal firmado:</strong><br>
                <a href="{{ asset('storage/' . $documento->archivo) }}" 
                   target="_blank" class="btn btn-outline-primary btn-sm mt-2">
                    Ver documento
                </a>
            </div>
        @endif

        {{-- Historial de movimientos --}}
        @if($documento->seguimientos->count())
            <h5 class="mt-4"><i class="mdi mdi-history text-info"></i> Historial de movimientos</h5>
            <ul class="list-group mt-2">
                @foreach($documento->seguimientos as $seg)
                    <li class="list-group-item">
                        <strong>{{ $seg->created_at->format('d/m/Y H:i') }}</strong> — 
                        Derivado por <strong>{{ $seg->usuario->name }}</strong> desde 
                        <strong>{{ $seg->areaOrigen->nombre }}</strong> hacia 
                        <strong>{{ $seg->areaDestino->nombre }}</strong>.
                        <br>
                        <em>{{ $seg->observacion ?? 'Sin observación' }}</em>

                        @if($seg->archivo_adjunto)
                            <br>
                            <a href="{{ asset('storage/' . $seg->archivo_adjunto) }}" 
                               target="_blank" class="btn btn-sm btn-outline-dark mt-2">
                                📎 Ver archivo adjunto
                            </a>
                        @endif
                    </li>
                @endforeach
            </ul>
        @endif

        <hr>

        {{-- Botones de acción --}}
        <div class="d-flex flex-wrap gap-2 mt-3">
            @if(auth()->user()->area_id == $documento->area_destino_id && $documento->estado == 'pendiente')
                <form action="{{ route('documentos.firmar', $documento->id) }}" method="POST">
                    @csrf
                    <button class="btn btn-success"> Firmar Documento</button>
                </form>
            @endif

		{{-- Botón de Derivar (solo si el documento no está finalizado) --}}
		@if(auth()->user()->area_id == $documento->area_destino_id && $documento->archivo && $documento->estado != 'finalizado')
			<a href="{{ route('documentos.derivar.form', $documento->id) }}" class="btn btn-primary">
				Derivar Documento
			</a>
		@endif


            <a href="{{ route('documentos.index') }}" class="btn btn-secondary ms-auto">← Volver</a>
        </div>

    </div>
</div>
@endsection