@extends('layouts.app')

@section('content')
<div class="container" style="max-width: 600px;">
<h2 class="text-xl font-bold text-black mb-4 tracking-wide">
  Gestión de Viáticos - Buscar Cédula
</h2>




    {{-- Mensajes de éxito/error --}}
    @if(session('error'))
        <div class="bg-red-600 text-white p-2 rounded mb-4 text-center" id="msg-error">
            {{ session('error') }}
        </div>
    @endif
    @if(session('success'))
        <div class="bg-green-600 text-white p-2 rounded mb-4 text-center" id="msg-success">
            {{ session('success') }}
        </div>
    @endif

    {{-- Formulario de búsqueda --}}
    <form method="POST" action="{{ route('buscar.cedula.post') }}" class="mb-8 flex flex-row items-center gap-3">
        @csrf
        <input
            type="text"
            name="cedula"
            class="rounded-lg border-gray-300 dark:border-gray-300 dark:bg-gray-100 dark:text-black px-3 py-2 focus:outline-none focus:ring-2 focus:border-blue-400 transition-all"
            placeholder="Ingrese la cédula"
            required
            style="max-width: 230px;"
            value="{{ old('cedula') }}"
        >

        <button type="submit" class="px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold shadow transition">
            Buscar
        </button>
    </form>
    @error('cedula')
        <div class="text-red-500 mb-2">{{ $message }}</div>
    @enderror

    {{-- Recuperar $info de la sesión o variable --}}
    @php
        if (session()->has('info')) {
            $info = session('info');
            if (is_array($info)) {
                $info = (object) $info;
            }
        } elseif (!isset($info)) {
            $info = null;
        }
    @endphp

    {{-- Si hay info, mostrar datos y formulario de carga --}}
    @if($info)
        <div class="bg-white dark:bg-gray-100
 shadow rounded-lg mb-4 p-4">
            <ul>
                <li><strong>Radicado:</strong> {{ $info->radicado ?? '' }}</li>
                <li><strong>Cédula:</strong> {{ $info->cedula ?? '' }}</li>
                <li><strong>Región:</strong> {{ $info->region ?? '' }}</li>
                <li><strong>Lote:</strong> {{ $info->lote ?? '' }}</li>
            </ul>
        </div>

        <div class="bg-white dark:bg-gray-100
 shadow rounded-lg p-6">
            <h5 class="font-semibold mb-4">Subir archivo de viáticos</h5>
            <form method="POST" action="{{ route('subir.archivos') }}" enctype="multipart/form-data" class="flex flex-col gap-4" id="form-subir-archivos">
                @csrf
                <input type="hidden" name="cedula" value="{{ $info->cedula ?? '' }}">
                <input type="hidden" name="region_id" value="{{ $info->region_id ?? '' }}">
                <input type="hidden" name="radicado" value="{{ $info->radicado ?? '' }}">
                <input type="hidden" name="departamento" value="{{ $info->departamento ?? '' }}">

                <div id="inputs-archivos" class="flex flex-col gap-3">
                    <input
                        type="file"
                        name="archivo[]"
                        class="rounded border border-gray-300 bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-white p-2"
                        required
                    >
                </div>

                <button
                    type="button"
                    id="btn-agregar-archivo"
                    class="w-10 h-10 mt-2 mb-4 text-white bg-blue-600 rounded-full hover:bg-blue-700 flex items-center justify-center font-bold text-xl"
                    title="Agregar otro archivo"
                >
                    +
                </button>

                @error('archivo')
                    <div class="text-red-500">{{ $message }}</div>
                @enderror

                <button
                    type="submit"
                    class="px-6 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg font-semibold shadow transition"
                >
                    Subir archivos
                </button>
            </form>
        </div>
    @endif
</div>

{{-- Script para agregar inputs de archivo --}}
<script>
    document.getElementById('btn-agregar-archivo').addEventListener('click', function() {
        const container = document.getElementById('inputs-archivos');
        const input = document.createElement('input');
        input.type = 'file';
        input.name = 'archivo[]';
        input.required = true;
        input.className = 'rounded border border-gray-300 bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-white p-2 mt-2';
        container.appendChild(input);
    });

    // Ocultar mensajes después de 4 segundos
    setTimeout(function() {
        var err = document.getElementById('msg-error');
        var ok = document.getElementById('msg-success');
        if (err) { err.style.display = 'none'; }
        if (ok) { ok.style.display = 'none'; }
    }, 4000);
</script>
@endsection