{{-- 2. Modal Importación Masiva (Excel Copy-Paste) --}}
<div x-data="{ 
    open: false, 
    importData: '', 
    previewData: [],
    parseData() {
        if(!this.importData) { this.previewData = []; return; }
        // Split by lines, then by tabs. Filter empty lines.
        this.previewData = this.importData.trim().split('\n')
            .map(line => line.split('\t'))
            .filter(cols => cols.length >= 3); // Minimal validation
    }
}" @open-import.window="open = true; importData = ''; previewData = []">
    <template x-teleport="body">
        <div x-show="open" class="fixed inset-0 z-[100] overflow-y-auto" x-cloak>
            <div class="fixed inset-0 bg-slate-900/75 backdrop-blur-sm transition-opacity"></div>
            <div class="flex min-h-screen items-center justify-center p-4">
                <div class="bg-white dark:bg-slate-800 w-full max-w-4xl relative flex flex-col rounded-2xl shadow-2xl border border-white/20 dark:border-slate-700/50 max-h-[90vh]"
                    @click.stop>
                    <form action="{{ route('inventario.import') }}" method="POST">
                        @csrf
                        <div class="bg-emerald-600 p-6 text-white relative overflow-hidden shrink-0 rounded-t-xl">
                            <div class="absolute top-0 right-0 p-4 opacity-10 pointer-events-none">
                                <svg class="w-24 h-24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12">
                                    </path>
                                </svg>
                            </div>
                            <h3 class="text-xl font-bold relative z-10">Importar Inventario (Copiar y Pegar)</h3>
                            <p class="text-emerald-100 text-sm mt-1 mb-0 relative z-10">
                                Copia las celdas de Excel y pégalas aquí. <br>
                                <span class="opacity-80 text-xs">Orden esperado (* requeridos): <strong>Cod* | Icon |
                                        Nombre* |
                                        Gramos* | Precio* | Categoría</strong></span>
                            </p>
                            <button type="button" @click="open = false"
                                class="absolute top-4 right-4 z-20 text-white/70 hover:text-white transition-colors bg-white/10 hover:bg-white/20 rounded-lg p-1">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                            </button>
                        </div>

                        <div class="p-6 overflow-y-auto flex-1">
                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 h-full">
                                <!-- Input Area -->
                                <div class="flex flex-col h-full">
                                    <div class="flex justify-between items-center mb-2">
                                        <label for="import_data"
                                            class="block text-sm font-bold text-slate-700 dark:text-slate-300">
                                            Pegar datos de Excel <span
                                                class="text-red-500 text-lg leading-none">*</span>
                                        </label>
                                        <a href="{{ route('inventario.import.template') }}"
                                            class="text-xs flex items-center gap-1 bg-white hover:bg-emerald-50 text-emerald-600 border border-emerald-200 px-2 py-1 rounded-lg transition-colors font-bold">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4">
                                                </path>
                                            </svg>
                                            Descargar Ejemplo
                                        </a>
                                    </div>
                                    <textarea name="data" id="import_data" x-model="importData" @input="parseData()"
                                        required
                                        class="w-full h-64 p-4 font-mono text-[10px] bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 resize-none custom-scrollbar"
                                        placeholder="T1	📦	Caja	500	15000	Hogar	UNIDAD	No	No..."></textarea>

                                    <!-- Aesthetic Instructions (Emerald Theme) -->
                                    <div
                                        class="mt-3 p-3 bg-emerald-50 dark:bg-slate-700 rounded-xl border border-emerald-100 dark:border-slate-600">
                                        <p
                                            class="text-[10px] font-bold text-emerald-800 dark:text-emerald-300 uppercase tracking-wider mb-1">
                                            Estructura de Columnas
                                        </p>
                                        <div
                                            class="flex flex-wrap gap-1 text-[10px] items-center text-slate-600 dark:text-slate-400 font-mono">
                                            <span
                                                class="px-1.5 py-0.5 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded">Cod</span>
                                            <span class="text-slate-300">|</span>
                                            <span
                                                class="px-1.5 py-0.5 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded">Icon</span>
                                            <span class="text-slate-300">|</span>
                                            <span
                                                class="px-1.5 py-0.5 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded">Nombre*</span>
                                            <span class="text-slate-300">|</span>
                                            <span
                                                class="px-1.5 py-0.5 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded">Gr</span>
                                            <span class="text-slate-300">|</span>
                                            <span
                                                class="px-1.5 py-0.5 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded">Precio*</span>
                                            <span class="text-slate-300">|</span>
                                            <span class="opacity-70">Cat</span>
                                            <span class="text-slate-300">|</span>
                                            <span class="opacity-70">Und</span>
                                            <span class="text-slate-300">|</span>
                                            <span class="opacity-70">Corp</span>
                                            <span class="text-slate-300">|</span>
                                            <span class="opacity-70">Alta</span>
                                        </div>
                                    </div>
                                </div>

                                <!-- Preview Area -->
                                <div
                                    class="flex flex-col max-h-[500px] overflow-hidden bg-slate-50 dark:bg-slate-900/50 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm">
                                    <div
                                        class="p-3 bg-slate-100 dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 font-bold text-xs uppercase text-slate-500 flex justify-between items-center">
                                        <span>Vista Previa</span>
                                        <span x-show="previewData.length > 0" x-text="previewData.length + ' filas'"
                                            class="bg-emerald-100 text-emerald-700 px-2 py-0.5 rounded-full text-[10px]"></span>
                                    </div>
                                    <div class="overflow-auto flex-1 p-2 custom-scrollbar">
                                        <table class="w-full text-left border-collapse text-[10px]">
                                            <thead class="sticky top-0 bg-slate-100 dark:bg-slate-800 z-10 shadow-sm">
                                                <tr
                                                    class="text-slate-500 border-b border-slate-200 dark:border-slate-700">
                                                    <th class="p-2 whitespace-nowrap">Cod</th>
                                                    <th class="p-2 whitespace-nowrap">Icon</th>
                                                    <th class="p-2 whitespace-nowrap">Nombre</th>
                                                    <th class="p-2 whitespace-nowrap text-right">Gr</th>
                                                    <th class="p-2 whitespace-nowrap text-right">$</th>
                                                    <th class="p-2 whitespace-nowrap">Cat</th>
                                                    <th class="p-2 whitespace-nowrap">Und</th>
                                                    <th class="p-2 whitespace-nowrap text-center">Corp</th>
                                                    <th class="p-2 whitespace-nowrap text-center">Alta</th>
                                                </tr>
                                            </thead>
                                            <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
                                                <template x-for="(row, i) in previewData" :key="i">
                                                    <tr
                                                        class="hover:bg-white dark:hover:bg-slate-800 transition-colors group">
                                                        <td class="p-2 font-mono text-slate-600 dark:text-slate-400"
                                                            x-text="row[0] || '-'"></td>
                                                        <td class="p-1.5 text-center text-lg leading-none"
                                                            x-text="row[1] || '📦'"></td>
                                                        <td class="p-2 font-bold text-slate-800 dark:text-slate-200 truncate max-w-[120px]"
                                                            x-text="row[2] || '-'" :title="row[2]"></td>
                                                        <td class="p-2 text-right text-slate-600"
                                                            x-text="row[3] || '0'"></td>
                                                        <td class="p-2 text-right text-emerald-600 font-bold"
                                                            x-text="row[4] ? Math.round(row[4]) : '0'"></td>
                                                        <td class="p-2 text-slate-500 truncate max-w-[80px]"
                                                            x-text="row[5] || '-'"></td>
                                                        <td class="p-2 text-slate-500 badge badge-sm"
                                                            x-text="row[6] || 'UNIDAD'"></td>
                                                        <td class="p-2 text-center">
                                                            <span
                                                                x-show="row[7] && (row[7].toLowerCase().includes('si') || row[7] == '1')"
                                                                class="text-purple-600 font-bold text-xs">Corp</span>
                                                        </td>
                                                        <td class="p-2 text-center">
                                                            <span
                                                                x-show="row[8] && (row[8].toLowerCase().includes('si') || row[8] == '1')"
                                                                class="text-orange-600 font-bold text-xs">🔥</span>
                                                        </td>
                                                    </tr>
                                                </template>
                                                <tr x-show="previewData.length === 0">
                                                    <td colspan="9" class="p-8 text-center text-slate-400 italic">
                                                        Nada para previsualizar...
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div
                            class="p-6 bg-slate-50 dark:bg-slate-800/50 border-t border-slate-100 dark:border-slate-700/50 flex justify-end gap-3 rounded-b-xl">
                            <button type="button" @click="open = false"
                                class="px-6 py-2.5 text-red-600 font-bold hover:bg-red-50 rounded-xl transition">Cancelar</button>
                            <button type="submit" :disabled="previewData.length === 0"
                                class="px-8 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded-xl shadow-lg shadow-emerald-500/30 transition transform hover:scale-105 disabled:opacity-50 disabled:transform-none">
                                Importar <span
                                    x-text="previewData.length > 0 ? previewData.length + ' Items' : ''"></span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </template>
</div>