@extends('layouts.app', ['activePage' => 'importacion', 'menuParent' => 'importacion', 'titlePage' => ''])
@section('content')
@include('includes.tailwind')

<div class="content">
    <div class="container-fluid mt-4">
        <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-4">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-4">
                <div>
                    <h4 class="text-xl font-semibold text-slate-900 mb-1">Documentos sueltos de expediente fiscal</h4>
                    <p class="text-sm text-slate-500 mb-0">Espacio para cargar documentos sueltos con nombre y descripcion corta.</p>
                </div>
            </div>

            @include('expediente.partials.importacion-nav-data', [
                'routePrefix' => 'expediente-fiscal.importacion.',
                'activeTab' => 'sueltos',
            ])

            @php 
            $navigationTabs = [
                ['route' => 'expediente-fiscal.importacion.index', 'label' => 'Documentos por periodo', 'active' => false],
                ['route' => 'expediente-fiscal.importacion.archivos-sueltos', 'label' => 'Documentos sueltos', 'active' => true],
                ['route' => 'expediente-fiscal.importacion.declaraciones-anuales', 'label' => 'Documentos de declaraciones anuales', 'active' => false],
            ]; 
            @endphp
            @include('expediente.partials.importacion-nav', ['navigationTabs' => $navigationTabs])

            @if ($errors->any())
                <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
                    <p class="font-semibold mb-1">No se pudo completar la carga:</p>
                    <ul class="list-disc pl-5 mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @if (session('success'))
                <div class="mb-4 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-700">
                    {{ session('success') }}
                </div>
            @endif

            <section class="bg-slate-50 border border-slate-200 rounded-lg p-4 mb-4">
                <form method="POST" action="{{ route('expediente-fiscal.importacion.store-archivo-suelto') }}" enctype="multipart/form-data" class="m-0 p-0">
                    @csrf
                    <div class="grid grid-cols-1 lg:grid-cols-12 gap-3">
                        <div class="lg:col-span-3">
                            <label for="nombre" class="block text-xs font-medium text-slate-700 mb-1">Nombre</label>
                            <input type="text" id="nombre" name="nombre" value="{{ old('nombre') }}" maxlength="180" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" placeholder="Ejemplo: Alta patronal 2026">
                        </div>
                        <div class="lg:col-span-4">
                            <label for="descripcion_corta" class="block text-xs font-medium text-slate-700 mb-1">Descripcion corta</label>
                            <input type="text" id="descripcion_corta" name="descripcion_corta" value="{{ old('descripcion_corta') }}" maxlength="300" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" placeholder="Breve referencia del documento">
                        </div>
                        <div class="lg:col-span-3">
                            <label for="archivo" class="block text-xs font-medium text-slate-700 mb-1">Archivo</label>
                            <input type="file" id="archivo" name="archivo" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" accept="application/pdf,.pdf,application/vnd.ms-excel,.xls,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,.xlsx">
                        </div>
                        <div class="lg:col-span-2">
                            <button type="submit" class="inline-flex items-center gap-2 rounded-lg  mt-4 bg-[#0A415F] px-3 py-2 text-xs font-semibold text-white hover:bg-[#083549] transition-colors">
                                Guardar archivo suelto
                            </button>
                        </div>
                    </div>
                </form>
            </section>

            <section class="bg-white border border-slate-200 rounded-lg overflow-hidden">
                <div class="px-4 py-3 border-b border-slate-200 bg-slate-50">
                    <h6 class="text-base font-semibold text-slate-900 mb-0">Consulta de Documentos sueltos</h6>
                </div>

                <div class="px-4 py-3 border-b border-slate-200 bg-white">
                    <form method="GET" action="{{ route('expediente-fiscal.importacion.archivos-sueltos') }}" class="grid grid-cols-1 md:grid-cols-12 gap-2">
                        <div class="md:col-span-2">
                            <label for="q" class="block text-[11px] font-semibold text-slate-600 mb-1">Buscar</label>
                            <input type="text" id="q" name="q" value="{{ $filters['q'] ?? '' }}" class="w-full rounded-md border border-slate-300 px-2 py-1.5 text-xs" placeholder="Nombre, descripcion o archivo">
                        </div>

                        <div class="md:col-span-2">
                            <label for="usuario_id" class="block text-[11px] font-semibold text-slate-600 mb-1">Usuario</label>
                            <select id="usuario_id" name="usuario_id" class="w-full rounded-md border border-slate-300 px-2 py-1.5 text-xs">
                                <option value="0">Todos</option>
                                @foreach(($usuarios ?? collect()) as $usuario)
                                    <option value="{{ (int) ($usuario['id'] ?? 0) }}" {{ (int) ($filters['usuario_id'] ?? 0) === (int) ($usuario['id'] ?? 0) ? 'selected' : '' }}>{{ $usuario['name'] ?? '-' }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="md:col-span-2">
                            <label for="fecha_desde" class="block text-[11px] font-semibold text-slate-600 mb-1">Desde</label>
                            <input type="date" id="fecha_desde" name="fecha_desde" value="{{ $filters['fecha_desde'] ?? '' }}" class="w-full rounded-md border border-slate-300 px-2 py-1.5 text-xs">
                        </div>

                        <div class="md:col-span-2">
                            <label for="fecha_hasta" class="block text-[11px] font-semibold text-slate-600 mb-1">Hasta</label>
                            <input type="date" id="fecha_hasta" name="fecha_hasta" value="{{ $filters['fecha_hasta'] ?? '' }}" class="w-full rounded-md border border-slate-300 px-2 py-1.5 text-xs">
                        </div>

                        <div class="md:col-span-2">
                            <label for="orden" class="block text-[11px] font-semibold text-slate-600 mb-1">Orden</label>
                            <select id="orden" name="orden" class="w-full rounded-md border border-slate-300 px-2 py-1.5 text-xs">
                                <option value="reciente" {{ ($filters['orden'] ?? 'reciente') === 'reciente' ? 'selected' : '' }}>Mas recientes</option>
                                <option value="antiguo" {{ ($filters['orden'] ?? 'reciente') === 'antiguo' ? 'selected' : '' }}>Mas antiguos</option>
                            </select>
                        </div>

                        <div class="md:col-span-2 flex flex-wrap items-end gap-2">
                            <button type="submit" class="inline-flex items-center rounded-md bg-[#0A415F] px-3 py-1.5 text-xs font-semibold text-white hover:bg-[#083549] transition-colors">Aplicar filtros</button>
                            <a href="{{ route('expediente-fiscal.importacion.archivos-sueltos') }}" class="inline-flex items-center rounded-md border border-slate-300 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-50 transition-colors">Limpiar</a>
                        </div>
                    </form>
                </div>

                <div class="overflow-x-auto">
                    <table class="min-w-full text-xs text-slate-700">
                        <thead class="bg-slate-50">
                            <tr>
                                <th class="px-3 py-2">ID</th>
                                <th class="px-3 py-2">Nombre</th>
                                <th class="px-3 py-2">Descripcion</th>
                                <th class="px-3 py-2">Archivo original</th>
                                <th class="px-3 py-2">Tamano</th>
                                <th class="px-3 py-2">Fecha de carga</th>
                                <th class="px-3 py-2">Usuario</th>
                                <th class="px-3 py-2">Accion</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @forelse ($archivosSueltos as $archivo)
                                @php
                                    $bytes = (int) ($archivo->tamano_bytes ?? 0);
                                    if ($bytes <= 0) {
                                        $sizeLabel = '-';
                                    } elseif ($bytes < 1024) {
                                        $sizeLabel = $bytes . ' B';
                                    } elseif ($bytes < 1048576) {
                                        $sizeLabel = number_format($bytes / 1024, 2) . ' KB';
                                    } elseif ($bytes < 1073741824) {
                                        $sizeLabel = number_format($bytes / 1048576, 2) . ' MB';
                                    } else {
                                        $sizeLabel = number_format($bytes / 1073741824, 2) . ' GB';
                                    }
                                @endphp
                                <tr>
                                    <td class="px-3 py-2">{{ (int) $archivo->id }}</td>
                                    <td class="px-3 py-2 font-medium text-slate-900">{{ $archivo->nombre }}</td>
                                    <td class="px-3 py-2">{{ $archivo->descripcion_corta ?: '-' }}</td>
                                    <td class="px-3 py-2">{{ $archivo->nombre_original }}</td>
                                    <td class="px-3 py-2">{{ $sizeLabel }}</td>
                                    <td class="px-3 py-2">{{ optional($archivo->created_at)->format('d/m/Y H:i') ?: '-' }}</td>
                                    <td class="px-3 py-2">{{ optional($archivo->usuario)->name ?: '-' }}</td>
                                    <td class="px-3 py-2 text-center">
                                        <div class="inline-flex items-center gap-1.5">
                                            <a href="{{ route('expediente-fiscal.importacion.download-archivo-suelto', ['id' => $archivo->id]) }}" class="inline-flex items-center rounded-md bg-slate-900 px-2.5 py-1.5 text-[11px] font-semibold text-white hover:bg-slate-800 transition-colors">
                                                <span class="material-icons text-xs leading-none">download</span>
                                                <span>Descargar</span>
                                            </a>
                                            <form method="POST" action="{{ route('expediente-fiscal.importacion.delete-archivo-suelto', ['id' => $archivo->id]) }}" class="js-swal-delete-form" data-confirm-title="Eliminar documento suelto" data-confirm-message="Se eliminara este documento suelto. Esta accion no se puede deshacer.">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class=" mt-3 inline-flex items-center rounded-md border border-rose-300 bg-rose-50 px-2.5 py-1.5 text-[11px] font-semibold text-rose-700 hover:bg-rose-100 transition-colors">
                                                    <span class="material-icons text-xs leading-none">delete</span>
                                                    <span>Eliminar</span>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="px-3 py-6 text-center text-slate-500">Aun no hay Documentos sueltos cargados.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="px-4 py-3 border-t border-slate-200 bg-slate-50">
                    {{ $archivosSueltos->links() }}
                </div>
            </section>
        </div>
    </div>
</div>

@push('js')
<script>
    (function() {
        function confirmWithSwal(options) {
            const title = String(options && options.title ? options.title : 'Confirmar accion');
            const message = String(options && options.message ? options.message : 'Confirma para continuar.');

            if (typeof Swal !== 'undefined') {
                return Swal.fire({
                    icon: 'warning',
                    title: title,
                    text: message,
                    showCancelButton: true,
                    confirmButtonText: 'Si, eliminar',
                    cancelButtonText: 'Cancelar',
                    reverseButtons: true,
                }).then(function(result) {
                    return !!(result && result.isConfirmed);
                });
            }

            return Promise.resolve(window.confirm(message));
        }

        $(document).on('submit', '.js-swal-delete-form', function(event) {
            event.preventDefault();
            const form = this;
            const $form = $(form);

            confirmWithSwal({
                title: String($form.attr('data-confirm-title') || 'Eliminar registro'),
                message: String($form.attr('data-confirm-message') || 'Esta accion no se puede deshacer.')
            }).then(function(isConfirmed) {
                if (isConfirmed) {
                    form.submit();
                }
            });
        });
    })();
</script>
@endpush
@endsection