@extends('layouts.app')

@section('content')
<div class="bg-body-light">
    <div class="content content-full">
        <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2">
            <div class="flex-grow-1">
                <h1 class="h3 fw-bold mb-2">
                    <i class="fa fa-file-invoice text-teal me-2"></i>Nota de Entrega #{{ $nota->id }}
                </h1>
                <nav class="breadcrumb mb-0">
                    <a class="breadcrumb-item" href="{{ route('notas.index') }}">Notas de Entrega</a>
                    <span class="breadcrumb-item active">Ver Detalle</span>
                </nav>
            </div>
            <div class="flex-shrink-0 mt-3 mt-sm-0 ms-sm-3">
                <a href="{{ route('notas.index') }}" class="btn btn-alt-secondary">
                    <i class="fa fa-arrow-left me-1"></i> Volver al listado
                </a>
            </div>
        </div>
    </div>
</div>

<div class="content">
    {{-- Notificaciones --}}
    @if(session('success'))
        <div class="alert alert-success d-flex align-items-center mb-4" role="alert">
            <i class="fa fa-check-circle me-2"></i>
            <p class="mb-0">{{ session('success') }}</p>
        </div>
    @endif

    <div class="row justify-content-center">
        <div class="col-xl-10">
            <div class="block block-rounded block-bordered shadow-sm">
                <div class="block-header block-header-default border-bottom">
                    <h3 class="block-title">Resumen de Documentación</h3>
                    <div class="block-options">
                        <span class="nav-main-link-badge badge bg-{{ $nota->anul ? 'danger' : 'success' }} px-3 py-2 fs-sm">
                            <i class="fa {{ $nota->anul ? 'fa-ban' : 'fa-check' }} me-1"></i>
                            {{ $nota->anul ? 'ANULADA' : 'VIGENTE' }}
                        </span>
                    </div>
                </div>
                
                <div class="block-content">
                    <div class="row items-push">
                        {{-- Columna 1: Datos Generales --}}
                        <div class="col-md-7 border-sm-end">
                            <h4 class="fw-bold border-bottom pb-2 mb-3 fs-sm text-uppercase text-muted">
                                <i class="fa fa-info-circle me-1 text-teal"></i> Información General
                            </h4>
                            <div class="row mb-2">
                                <div class="col-4 text-muted fs-sm fw-semibold">Fecha:</div>
                                <div class="col-8 fs-sm fw-bold">{{ \App\Helpers\FechaHelper::bdToLocal($nota->fecha) }}</div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-4 text-muted fs-sm fw-semibold">Urbanización:</div>
                                <div class="col-8 fs-sm text-dark fw-medium">{{ $urb->nombre ?? $nota->urbanizacion }}</div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-4 text-muted fs-sm fw-semibold">Distrito:</div>
                                <div class="col-8 fs-sm">{{ $dis->nombre ?? $nota->distrito }}</div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-4 text-muted fs-sm fw-semibold">Código Lote:</div>
                                <div class="col-8 fs-sm fw-bold text-teal">#{{ $nota->idlote }}</div>
                            </div>
                            <div class="row mb-2 border-top pt-2">
                                <div class="col-4 text-muted fs-sm fw-semibold">Cliente:</div>
                                <div class="col-8 fs-sm fw-bold text-dark">{{ $cliente->nombre ?? '—' }}</div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-4 text-muted fs-sm fw-semibold">Entregado a:</div>
                                <div class="col-8 fs-sm fw-medium">{{ $nota->entregado }}</div>
                            </div>
                            <div class="row mt-3 bg-body-light p-2 rounded">
                                <div class="col-12">
                                    <label class="fs-xs text-uppercase fw-bold text-muted">Observaciones:</label>
                                    <p class="mb-0 fs-sm italic text-muted">{{ $nota->observaciones ?: 'Sin observaciones adicionales.' }}</p>
                                </div>
                            </div>
                        </div>

                        {{-- Columna 2: Check-list de Documentos --}}
                        <div class="col-md-5">
                            <h4 class="fw-bold border-bottom pb-2 mb-3 fs-sm text-uppercase text-muted text-center">
                                <i class="fa fa-tasks me-1 text-teal"></i> Documentos Entregados
                            </h4>
                            @php
                                $items = [
                                    'tramite'       => 'Elaboración de Minuta',
                                    'transferencia' => 'Pago de Impuestos Transferencia',
                                    'protocolo'     => 'Elaboración de Protocolo',
                                    'planolote'     => 'Plano de Lote',
                                    'visado'        => 'Visado de Lote',
                                    'minuta'        => 'Minuta de Datos Técnicos',
                                    'ddrr'          => 'Ingreso a Derechos Reales',
                                ];
                            @endphp
                            <div class="list-group list-group-flush border rounded overflow-hidden">
                                @foreach($items as $campo => $label)
                                    <div class="list-group-item d-flex align-items-center justify-content-between py-2 px-3 {{ $nota->$campo == 1 ? 'bg-success-light' : 'bg-body' }}">
                                        <span class="fs-sm {{ $nota->$campo == 1 ? 'fw-bold text-success' : 'text-muted' }}">
                                            {{ $label }}
                                        </span>
                                        @if($nota->$campo == 1)
                                            <span class="nav-main-link-badge badge bg-success">
                                                <i class="fa fa-check"></i>
                                            </span>
                                        @else
                                            <i class="fa fa-circle-xmark text-muted opacity-25"></i>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Acciones del Pie --}}
                <div class="block-content block-content-full block-content-sm bg-body-light border-top d-flex flex-wrap gap-2">
                    <a href="{{ route('notas.pdf', $nota->id) }}" class="btn btn-dark px-4" target="_blank">
                        <i class="fa fa-print me-1"></i> Imprimir PDF
                    </a>
                    
                    {{-- <div class="ms-auto d-flex gap-2">
                        @if(in_array(auth()->user()->tipo, [1,4]) && !$nota->anul)
                            <form method="POST" action="{{ route('notas.anular', $nota->id) }}"
                                  onsubmit="return confirm('¿Está seguro de ANULAR la nota #{{ $nota->id }}?')">
                                @csrf
                                <button type="submit" class="btn btn-alt-danger">
                                    <i class="fa fa-ban me-1"></i> Anular Documento
                                </button>
                            </form>
                        @endif
                    </div> --}}
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .text-teal { color: #1ba87e !important; }
    .bg-success-light { background-color: rgba(28, 190, 150, 0.05) !important; }
</style>
@endsection