@extends('layouts.app')

@section('title', 'Importación Masiva')

@section('contenido')
<div class="max-w-3xl mx-auto py-8 px-4">

    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-800">📥 Importación Masiva de Cartera</h1>
        <p class="text-gray-500 mt-1">Carga el Excel de Yber con los casos de cartera prejudicial.</p>
    </div>

    {{-- Mensaje de éxito --}}
    @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-800 px-4 py-3 rounded mb-4">
            {{ session('success') }}
        </div>
    @endif

    {{-- Errores de validación --}}
    @if(session('error'))
        <div class="bg-red-100 border border-red-400 text-red-800 px-4 py-3 rounded mb-4">
            {{ session('error') }}
        </div>
    @endif

    {{-- Filas con error --}}
    @if(session('errores_importacion') && count(session('errores_importacion')) > 0)
        <div class="bg-yellow-50 border border-yellow-300 text-yellow-800 px-4 py-3 rounded mb-4">
            <p class="font-bold mb-2">⚠️ Filas que no se pudieron importar:</p>
            <ul class="list-disc list-inside text-sm">
                @foreach(session('errores_importacion') as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    {{-- Formulario de carga --}}
    <div class="bg-white rounded-lg shadow p-6">
        <h2 class="text-lg font-semibold text-gray-700 mb-4">📂 Cargar Excel de Cartera Prejudicial</h2>

        <form action="{{ route('importacion.cartera') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-600 mb-1">
                    Selecciona el archivo Excel de Yber
                </label>
                <input
                    type="file"
                    name="archivo"
                    accept=".xlsx,.xls"
                    class="block w-full text-sm text-gray-500
                           file:mr-4 file:py-2 file:px-4
                           file:rounded file:border-0
                           file:text-sm file:font-semibold
                           file:bg-blue-600 file:text-white
                           hover:file:bg-blue-700 cursor-pointer"
                >
                @error('archivo')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="bg-blue-50 border border-blue-200 rounded p-3 mb-4 text-sm text-blue-700">
                <p class="font-semibold mb-1">📋 Instrucciones:</p>
                <ul class="list-disc list-inside space-y-1">
                    <li>El archivo debe tener las hojas: <strong>COLSUBSIDIO, MEGALINEA, BBTA, COLPATRIA</strong></li>
                    <li>Los encabezados deben estar en la <strong>fila 2</strong></li>
                    <li>Formato permitido: <strong>.xlsx o .xls</strong></li>
                    <li>Tamaño máximo: <strong>10MB</strong></li>
                    <li>Los registros duplicados (misma cédula/radicado) <strong>no se duplican</strong></li>
                </ul>
            </div>

            <button
                type="submit"
                class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded transition">
                ⬆️ Importar Excel
            </button>
        </form>
    </div>

    <div class="mt-4 text-center">
        <a href="{{ route('dashboard') }}" class="text-gray-500 hover:underline text-sm">← Volver al Dashboard</a>
    </div>

</div>
@endsection