@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-signature text-teal me-2"></i>Notas de Entrega
                </h1>
                <h2 class="fs-base lh-base fw-medium text-muted mb-0">
                    Gestión y control de entrega de documentos oficiales.
                </h2>
            </div>
            <div class="flex-shrink-0 mt-3 mt-sm-0 ms-sm-3">
                @if(in_array(auth()->user()->tipo, [1,4]))
                    <a href="{{ route('notas.create') }}" class="btn btn-alt-teal">
                        <i class="fa fa-plus-circle me-1"></i> Nueva Nota
                    </a>
                @endif
            </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>
            <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
        </div>
    @endif

    {{-- ── Último registro ── --}}
    @if($ultimaNota)
    <div class="block block-rounded border border-teal mb-4" style="border-color: #1ba87e !important;">
        <div class="block-content py-3 px-4">
            <div class="d-flex align-items-center gap-3">
                <div class="flex-shrink-0">
                    <span class="fs-1 text-teal opacity-50"><i class="fa fa-clock-rotate-left"></i></span>
                </div>
                <div class="flex-grow-1">
                    <div class="fs-xs text-uppercase fw-bold text-muted mb-1">Último registro creado</div>
                    <div class="d-flex flex-wrap gap-4 align-items-center">
                        <div>
                            <span class="badge bg-teal fs-sm px-3 py-2">#{{ $ultimaNota->id }}</span>
                        </div>
                        <div>
                            <span class="fs-xs text-muted">Fecha:</span>
                            <span class="fw-semibold fs-sm ms-1">{{ \App\Helpers\FechaHelper::bdToLocal($ultimaNota->fecha) }}</span>
                        </div>
                        <div>
                            <span class="fs-xs text-muted">Cliente:</span>
                            <span class="fw-semibold fs-sm ms-1 text-teal-dark">{{ $ultimaNota->nom_cliente ?? '—' }}</span>
                        </div>
                        <div>
                            <span class="fs-xs text-muted">Entregado a:</span>
                            <span class="fw-semibold fs-sm ms-1">{{ $ultimaNota->entregado }}</span>
                        </div>
                        <div class="ms-auto">
                            <a href="{{ route('notas.show', $ultimaNota->id) }}" class="btn btn-sm btn-alt-teal">
                                <i class="fa fa-eye me-1"></i> Ver detalle
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    {{-- Buscador Avanzado --}}
    <div class="block block-rounded block-bordered">
        <div class="block-content block-content-full bg-body-light">
            <form method="GET" action="{{ route('notas.index') }}" id="form-buscar">
                <div class="row g-3 align-items-end">
                    <div class="col-md-5">
                        <label class="form-label fs-xs text-uppercase fw-bold text-muted mb-2">Criterio de Búsqueda</label>
                        <div class="d-flex flex-wrap gap-3 p-2 bg-white rounded border">
                            @foreach(['nota'=>'N° Nota','contrato'=>'Contrato','cliente'=>'Cliente','lote'=>'Lote'] as $v=>$l)
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="buscax"
                                           value="{{ $v }}" id="bx_{{ $v }}"
                                           {{ request('buscax','nota') === $v ? 'checked' : '' }}>
                                    <label class="form-check-label fs-sm fw-medium" for="bx_{{ $v }}">{{ $l }}</label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fs-xs text-uppercase fw-bold text-muted mb-2">Valor a buscar</label>
                        <div class="input-group">
                            {{-- Input dinámico: texto para cliente, número para el resto --}}
                            <input type="text" name="buscar" id="input-buscar"
                                   class="form-control form-control-alt"
                                   placeholder="Ingrese valor..."
                                   value="{{ request('buscar') }}">
                            <button type="submit" class="btn btn-teal">
                                <i class="fa fa-search me-1"></i>
                            </button>
                        </div>
                        <div id="hint-cliente" class="fs-xs text-muted mt-1" style="display:none;">
                            <i class="fa fa-info-circle me-1"></i> Escriba parte del nombre del cliente
                        </div>
                    </div>
                    <div class="col-md-3">
                        <a href="{{ route('notas.index') }}" class="btn btn-alt-secondary w-100">
                            <i class="fa fa-sync-alt me-1"></i> Limpiar Filtros
                        </a>
                    </div>
                </div>
                <div class="mt-2 text-muted fs-xs">
                    <i class="fa fa-info-circle me-1"></i> {{ $notas->total() }} registros encontrados
                </div>
            </form>
        </div>
    </div>

    {{-- Tabla de Resultados --}}
    <div class="block block-rounded shadow-sm">
        <div class="block-header block-header-default border-bottom">
            <h3 class="block-title text-teal fw-bold">Listado de Notas</h3>
        </div>
        <div class="block-content p-0">
            <div class="table-responsive">
                <table class="table table-vcenter table-hover table-striped mb-0 fs-sm">
                    <thead class="bg-body-dark text-uppercase fs-xs">
                        <tr>
                            <th class="text-center" style="width: 100px;">N° Nota</th>
                            <th class="text-center" style="width: 140px;">Fecha</th>
                            <th>Cliente</th>
                            <th>Entregado a</th>
                            <th class="text-center" style="width: 80px;">Acción</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($notas as $n)
                        <tr>
                            <td class="text-center fw-bold">
                                <span class="nav-main-link-badge badge bg-teal">#{{ $n->id }}</span>
                            </td>
                            <td class="text-center">
                                <span class="text-dark">{{ \App\Helpers\FechaHelper::bdToLocal($n->fecha) }}</span>
                            </td>
                            <td>
                                <div class="fw-semibold text-teal-dark">{{ $n->nom_cliente ?? '—' }}</div>
                                <div class="text-muted fs-xs">ID Cliente: {{ $n->idcliente }}</div>
                            </td>
                            <td>
                                <span class="fw-medium">{{ $n->entregado }}</span>
                            </td>
                            <td class="text-center">
                                <a href="{{ route('notas.show', $n->id) }}"
                                   class="btn btn-sm btn-alt-teal" data-bs-toggle="tooltip" title="Ver Detalle">
                                    <i class="fa fa-eye"></i>
                                </a>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center py-5 text-muted">
                                <i class="fa fa-folder-open fa-3x mb-3 opacity-25"></i>
                                <p class="mb-0">No se encontraron notas de entrega con los criterios seleccionados.</p>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if($notas->hasPages())
            <div class="block-content block-content-full block-content-sm bg-body-light border-top">
                {{ $notas->links() }}
            </div>
        @endif
    </div>
</div>

<style>
    .btn-teal { background-color: #20c997; color: #fff; }
    .btn-teal:hover { background-color: #1ba87e; color: #fff; }
    .btn-alt-teal { background-color: #e6f9f4; color: #1ba87e; }
    .text-teal { color: #1ba87e !important; }
    .text-teal-dark { color: #13795b; }
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const radios     = document.querySelectorAll('input[name="buscax"]');
    const input      = document.getElementById('input-buscar');
    const hintCliente = document.getElementById('hint-cliente');

    function actualizarInput() {
        const seleccionado = document.querySelector('input[name="buscax"]:checked')?.value;
        if (seleccionado === 'cliente') {
            input.setAttribute('type', 'text');
            input.setAttribute('placeholder', 'Nombre del cliente...');
            hintCliente.style.display = 'block';
        } else {
            input.setAttribute('type', 'number');
            input.setAttribute('placeholder', 'Ingrese código...');
            hintCliente.style.display = 'none';
        }
    }

    radios.forEach(r => r.addEventListener('change', actualizarInput));
    actualizarInput(); // ejecutar al cargar
});
</script>
@endsection