@extends('layouts.app')

@section('title', 'Asignar Columnas — Importar Productos')

@section('content')
<div class="animate-fadeIn">
    <div class="page-header">
        <div class="page-header-top">
            <h1 class="page-title">
                <i class="ph ph-table" style="color: var(--primary);"></i>
                Asignar Columnas de Importación
            </h1>
            <div class="d-flex gap-sm">
                <a href="{{ route('products.index') }}" class="btn btn-outline btn-sm">Cancelar</a>
            </div>
        </div>
        <p class="text-muted" style="margin-top: 10px;">Hemos leído tu archivo. Por favor, indícale al sistema qué información contiene cada columna para guardarla correctamente.</p>
    </div>

    <form action="{{ route('products.import_csv.process') }}" method="POST">
        @csrf
        <input type="hidden" name="file_path" value="{{ $path }}">
        <input type="hidden" name="delimiter" value="{{ $delimiter }}">

        <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 30px; align-items: start;">
            
            {{-- Formulario de Asignación --}}
            <div class="card" style="position: sticky; top: 20px;">
                <h3 style="margin-top: 0; margin-bottom: 20px; font-size: 1.1rem; border-bottom: 1px solid var(--border-color); padding-bottom: 10px;">
                    <i class="ph ph-arrows-merge" style="color: var(--primary);"></i> Emparejar Datos
                </h3>

                <div class="form-group" style="margin-bottom: 15px;">
                    <label class="form-label">ID del Producto (Opcional - Para Actualizar)</label>
                    <select name="mapping[id]" class="form-control">
                        <option value="">-- Ignorar (Creará nuevos si el nombre no existe) --</option>
                        @foreach($headers as $index => $header)
                            <option value="{{ $index }}" {{ strtolower(trim($header)) === 'id' ? 'selected' : '' }}>
                                Columna {{ $index + 1 }}: {{ $header ?: '(Sin encabezado)' }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group" style="margin-bottom: 15px;">
                    <label class="form-label">Nombre del Producto <span class="text-danger">*</span></label>
                    <select name="mapping[name]" class="form-control" required style="border-color: var(--primary);">
                        <option value="">-- Selecciona la columna --</option>
                        @foreach($headers as $index => $header)
                            <option value="{{ $index }}" {{ stripos($header, 'nombre') !== false || stripos($header, 'name') !== false || stripos($header, 'producto') !== false ? 'selected' : '' }}>
                                Columna {{ $index + 1 }}: {{ $header ?: '(Sin encabezado)' }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group" style="margin-bottom: 15px;">
                    <label class="form-label">Precio de Costo (Opcional)</label>
                    <select name="mapping[cost_price]" class="form-control">
                        <option value="">-- Ignorar --</option>
                        @foreach($headers as $index => $header)
                            <option value="{{ $index }}" {{ stripos($header, 'costo') !== false || stripos($header, 'cost price') !== false ? 'selected' : '' }}>
                                Columna {{ $index + 1 }}: {{ $header ?: '(Sin encabezado)' }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group" style="margin-bottom: 15px;">
                    <label class="form-label">Margen de Ganancia % (Opcional)</label>
                    <select name="mapping[markup_percentage]" class="form-control">
                        <option value="">-- Usar 45% por defecto --</option>
                        @foreach($headers as $index => $header)
                            <option value="{{ $index }}" {{ stripos($header, 'margen') !== false || stripos($header, 'markup') !== false ? 'selected' : '' }}>
                                Columna {{ $index + 1 }}: {{ $header ?: '(Sin encabezado)' }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group" style="margin-bottom: 15px;">
                    <label class="form-label">Categoría (Opcional)</label>
                    <select name="mapping[category_name]" class="form-control">
                        <option value="">-- Ignorar --</option>
                        @foreach($headers as $index => $header)
                            <option value="{{ $index }}" {{ stripos($header, 'categoría') !== false || stripos($header, 'categoria') !== false || stripos($header, 'category') !== false ? 'selected' : '' }}>
                                Columna {{ $index + 1 }}: {{ $header ?: '(Sin encabezado)' }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group" style="margin-bottom: 25px;">
                    <label class="form-label">URL de Imagen (Opcional)</label>
                    <select name="mapping[image_url]" class="form-control">
                        <option value="">-- Ignorar --</option>
                        @foreach($headers as $index => $header)
                            <option value="{{ $index }}" {{ stripos($header, 'imagen') !== false || stripos($header, 'image') !== false || stripos($header, 'foto') !== false ? 'selected' : '' }}>
                                Columna {{ $index + 1 }}: {{ $header ?: '(Sin encabezado)' }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <button type="submit" class="btn btn-primary" style="width: 100%; justify-content: center; font-size: 1.05rem;">
                    <i class="ph ph-check-circle"></i> Iniciar Importación
                </button>
            </div>

            {{-- Vista Previa --}}
            <div class="card" style="overflow: hidden; padding: 0;">
                <div style="padding: 15px 20px; background: rgba(0,0,0,0.02); border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center;">
                    <h3 style="margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 8px;">
                        <i class="ph ph-eye"></i> Vista Previa del Archivo
                    </h3>
                    <span class="badge" style="background: var(--primary-light); color: var(--primary);">Delimitador Detectado: "{{ $delimiter }}"</span>
                </div>
                
                <div style="overflow-x: auto;">
                    <table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem;">
                        <thead>
                            <tr style="background-color: var(--bg-body); border-bottom: 2px solid var(--border-color);">
                                @foreach($headers as $index => $header)
                                    <th style="padding: 12px 15px; font-weight: 600; color: var(--text-color); white-space: nowrap;">
                                        <div style="font-size: 0.75rem; color: var(--text-muted); font-weight: normal; margin-bottom: 2px;">Columna {{ $index + 1 }}</div>
                                        {{ $header ?: '(Vacío)' }}
                                    </th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>
                            @if(empty($previewRows))
                                <tr>
                                    <td colspan="{{ count($headers) }}" style="padding: 30px; text-align: center; color: var(--text-muted);">
                                        No se encontraron datos en el archivo o solo contenía cabeceras.
                                    </td>
                                </tr>
                            @else
                                @foreach($previewRows as $row)
                                    <tr style="border-bottom: 1px solid var(--border-color);">
                                        @foreach($headers as $index => $header)
                                            <td style="padding: 10px 15px; color: var(--text-secondary); max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                                                {{ $row[$index] ?? '' }}
                                            </td>
                                        @endforeach
                                    </tr>
                                @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
                <div style="padding: 15px 20px; background: rgba(0,0,0,0.02); border-top: 1px solid var(--border-color); font-size: 0.85rem; color: var(--text-muted);">
                    Mostrando solo las primeras filas como muestra. La importación procesará todo el archivo.
                </div>
            </div>

        </div>
    </form>
</div>
@endsection