@extends('layouts.app')

@section('title', 'Productos y Servicios — ' . \App\Models\Setting::get('app_name', 'TI Manager'))

@section('content')
<div class="animate-fadeIn" x-data="{ viewMode: localStorage.getItem('viewMode_products') || 'list', selectedIds: [], selectAll: false, allIds: [{{ $products->pluck('id')->join(',') }}] }" x-init="$watch('selectAll', value => selectedIds = value ? [...allIds] : [])">
    
    <div class="page-header" style="display: flex; flex-direction: column; gap: 15px;">
        <div style="display: flex; justify-content: space-between; align-items: center; width: 100%; flex-wrap: wrap; gap: 10px;">
            <h1 class="page-title" style="margin-bottom: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;">
                <i class="ph ph-shopping-bag" style="color: var(--primary);"></i>
                <span>Productos y Servicios</span>
                <span class="count" style="font-size: 0.9rem; font-weight: normal; white-space: nowrap;">({{ $products->total() }} registros)</span>
            </h1>
            
            <div class="view-toggle-group">
                <button @click="viewMode = 'list'; localStorage.setItem('viewMode_products', 'list')"
                        :class="{'active': viewMode === 'list'}"
                        class="view-toggle-btn"
                        title="Vista de Lista">
                    <i class="ph ph-list"></i>
                </button>
                <button @click="viewMode = 'card'; localStorage.setItem('viewMode_products', 'card')"
                        :class="{'active': viewMode === 'card'}"
                        class="view-toggle-btn"
                        title="Vista de Tarjetas">
                    <i class="ph ph-grid-four"></i>
                </button>
            </div>
        </div>

        <div style="display: flex; flex-direction: column; gap: 12px; width: 100%;">
            <div class="d-flex gap-sm" style="align-items: center; flex-wrap: wrap;">
                <a href="{{ route('stores.index') }}" class="btn btn-outline btn-sm" style="color: var(--primary); border-color: var(--primary);">
                    <i class="ph ph-storefront"></i>
                    <span class="desktop-only">Gestionar Tiendas</span>
                </a>
                <button type="button" class="btn btn-outline btn-sm" onclick="document.getElementById('importStoreModal').style.display='flex'" style="color: var(--primary); border-color: var(--primary);">
                    <i class="ph ph-cloud-arrow-down"></i>
                    <span class="desktop-only">Importar Tienda</span>
                </button>
                <button type="button" class="btn btn-outline btn-sm" onclick="document.getElementById('importModal').style.display='flex'">
                    <i class="ph ph-file-csv"></i>
                    <span class="desktop-only">Importar CSV</span>
                </button>
                <button type="button" class="btn btn-outline btn-sm" onclick="document.getElementById('exportModal').style.display='flex'" style="color: var(--secondary); border-color: var(--secondary);">
                    <i class="ph ph-export"></i>
                    <span class="desktop-only">Exportar CSV</span>
                </button>
                <a href="{{ route('products.create') }}" class="btn btn-primary btn-sm">
                    <i class="ph ph-plus"></i>
                    <span class="desktop-only">Nuevo</span>
                </a>
            </div>

            <form action="{{ route('products.index') }}" method="GET" style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center; width: 100%;">
                <div style="position: relative; flex: 1; min-width: 200px;">
                    <i class="ph ph-magnifying-glass" style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted);"></i>
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="Buscar..." class="form-control" style="padding: 6px 16px 6px 36px; width: 100%; min-height: 36px; height: 36px; border-radius: var(--radius-sm);">
                </div>
                
                <select name="category_id" class="form-control" onchange="this.form.submit()" style="min-height: 36px; height: 36px; padding: 6px 30px 6px 12px; border-radius: var(--radius-sm); color: var(--text-secondary); width: max-content;">
                    <option value="">Categorías</option>
                    @foreach($categories as $category)
                        <option value="{{ $category->id }}" {{ request('category_id') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                    @endforeach
                </select>

                <select name="store_domain" class="form-control" onchange="this.form.submit()" style="min-height: 36px; height: 36px; padding: 6px 30px 6px 12px; border-radius: var(--radius-sm); color: var(--text-secondary); width: max-content;">
                    <option value="">Origen</option>
                    <option value="manual" {{ request('store_domain') == 'manual' ? 'selected' : '' }}>Manual</option>
                    @foreach($stores as $store)
                        <option value="{{ $store }}" {{ request('store_domain') == $store ? 'selected' : '' }}>{{ $store }}</option>
                    @endforeach
                </select>
                
                @if(request('search') || request('category_id') || request('store_domain'))
                    <a href="{{ route('products.index') }}" class="btn btn-outline btn-sm" style="padding: 0 16px;" title="Limpiar filtros">
                        <i class="ph ph-x"></i>
                    </a>
                @endif
            </form>
        </div>
    </div>

    @if($products->count() > 0)
        <div>
            {{-- Barra de Acciones Múltiples --}}
            <div x-show="selectedIds.length > 0" x-cloak style="background: var(--danger-light); border: 1px solid rgba(239, 68, 68, 0.2); border-radius: var(--radius-md); padding: 12px 20px; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; animation: slideDown 0.2s ease-out;">
                <div style="color: var(--danger); font-weight: 600; display: flex; align-items: center; gap: 8px;">
                    <i class="ph ph-check-square-offset" style="font-size: 1.2rem;"></i> 
                    <span><span x-text="selectedIds.length"></span> productos seleccionados</span>
                </div>
                <form action="{{ route('products.bulk_delete') }}" method="POST" onsubmit="event.preventDefault(); Swal.fire({title: '¿Eliminar productos?', text: '¿Estás seguro de que deseas eliminar los productos seleccionados? Esta acción no se puede deshacer.', icon: 'warning', showCancelButton: true, confirmButtonColor: '#ef4444', confirmButtonText: 'Sí, eliminar', cancelButtonText: 'Cancelar'}).then((result) => { if (result.isConfirmed) this.submit(); });" style="margin: 0;">
                    @csrf
                    <input type="hidden" name="ids" x-bind:value="selectedIds.join(',')">
                    <button type="submit" class="btn btn-primary btn-sm" style="background: var(--danger); border-color: var(--danger);">
                        <i class="ph ph-trash"></i> Eliminar Seleccionados
                    </button>
                </form>
            </div>

            <div class="card-glass" style="padding: 0; overflow: hidden;" x-show="viewMode === 'list'" x-cloak>
                <div style="overflow-x: auto;">
                    <table style="width: 100%; border-collapse: collapse; text-align: left;">
                        <thead>
                            <tr style="border-bottom: 2px solid rgba(0,0,0,0.05); background: rgba(0,0,0,0.02);">
                                <th style="padding: 16px; width: 40px; text-align: center;">
                                    <input type="checkbox" x-model="selectAll" style="accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer;">
                                </th>
                            <th style="padding: 16px; font-weight: 600; color: var(--text-secondary); font-size: 0.85rem; text-transform: uppercase; min-width: 250px; width: 35%;">Producto</th>
                            <th style="padding: 16px; font-weight: 600; color: var(--text-secondary); font-size: 0.85rem; text-transform: uppercase; min-width: 100px; width: 12%;">Costo</th>
                            <th style="padding: 16px; font-weight: 600; color: var(--text-secondary); font-size: 0.85rem; text-transform: uppercase; min-width: 100px; width: 13%;">Margen</th>
                            <th style="padding: 16px; font-weight: 600; color: var(--text-secondary); font-size: 0.85rem; text-transform: uppercase; min-width: 120px; width: 15%;">Precio Venta</th>
                            <th style="padding: 16px; font-weight: 600; color: var(--text-secondary); font-size: 0.85rem; text-transform: uppercase; min-width: 100px; width: 10%;">Última Sync</th>
                            <th style="padding: 16px; font-weight: 600; color: var(--text-secondary); font-size: 0.85rem; text-transform: uppercase; text-align: right; min-width: 120px; width: 15%;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($products as $product)
                        <tr style="border-bottom: 1px solid rgba(0,0,0,0.05); transition: var(--transition-fast);" onmouseover="this.style.backgroundColor='rgba(0,0,0,0.01)'" onmouseout="this.style.backgroundColor='transparent'" x-bind:style="selectedIds.includes({{ $product->id }}) ? 'background-color: rgba(132, 204, 22, 0.05);' : ''">
                            <td style="padding: 16px; text-align: center;">
                                <input type="checkbox" value="{{ $product->id }}" x-model="selectedIds" x-on:change="if (!selectedIds.includes({{ $product->id }})) selectAll = false" style="accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer;">
                            </td>
                            <td style="padding: 16px;">
                                <div style="display: flex; gap: 12px; align-items: center;">
                                    @if($product->image_url)
                                        <img src="{{ $product->image_url }}" alt="{{ $product->name }}" style="width: 48px; height: 48px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border-color);" onerror="this.outerHTML='<div style=\'width: 48px; height: 48px; border-radius: 8px; background: rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 1.5rem; flex-shrink: 0;\'><i class=\'ph ph-image-broken\'></i></div>'">
                                    @else
                                        <div style="width: 48px; height: 48px; border-radius: 8px; background: rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 1.5rem; flex-shrink: 0;">
                                            <i class="ph ph-image"></i>
                                        </div>
                                    @endif
                                    <div>
                                        <div style="font-weight: 600; color: var(--text-primary);">{{ $product->name }}</div>
                                        <div style="display: flex; gap: 8px; align-items: center; margin-top: 4px; flex-wrap: wrap;">
                                            @if($product->category)
                                                <span style="font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; background: color-mix(in srgb, {{ $product->category->color }} 15%, transparent); color: {{ $product->category->color }}; font-weight: 600; display: inline-flex; align-items: center; gap: 4px;">
                                                    <i class="ph {{ $product->category->icon }}"></i> {{ $product->category->name }}
                                                </span>
                                            @endif
                                            @if($product->source_url)
                                                <div style="font-size: 0.8rem; color: var(--text-muted);">
                                                    <a href="{{ $product->source_url }}" target="_blank" style="color: var(--primary); text-decoration: none; display: inline-flex; align-items: center; gap: 4px;">
                                                        <i class="ph ph-link"></i> Tienda
                                                    </a>
                                                </div>
                                            @else
                                                <div style="font-size: 0.8rem; color: var(--text-muted);">Manual</div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td style="padding: 16px; font-weight: 500; white-space: nowrap;">
                                ${{ number_format($product->cost_price, 2) }}
                            </td>
                            <td style="padding: 16px; white-space: nowrap;">
                                <span style="display: inline-block; padding: 4px 8px; border-radius: 4px; background: var(--primary-light); color: var(--primary); font-size: 0.8rem; font-weight: 600;">
                                    +{{ $product->markup_percentage }}%
                                </span>
                            </td>
                            <td style="padding: 16px; font-weight: 700; font-size: 1.05rem; color: var(--success); white-space: nowrap;">
                                ${{ number_format($product->price, 2) }}
                            </td>
                            <td style="padding: 16px; color: var(--text-muted); font-size: 0.85rem; white-space: nowrap;">
                                {{ $product->last_sync_at ? $product->last_sync_at->diffForHumans() : 'Nunca' }}
                            </td>
                            <td style="padding: 16px; text-align: right; white-space: nowrap;">
                                <div style="display: flex; gap: 8px; justify-content: flex-end;">
                                    @if($product->source_url)
                                    <form action="{{ route('products.sync', $product) }}" method="POST" style="display: inline;">
                                        @csrf
                                        <button class="btn btn-sm btn-ghost text-primary" title="Sincronizar Precio" style="padding: 6px;">
                                            <i class="ph ph-arrows-clockwise" style="font-size: 1.1rem;"></i>
                                        </button>
                                    </form>
                                    @endif
                                    <a href="{{ route('products.edit', $product) }}" class="btn btn-sm btn-ghost text-primary" title="Editar" style="padding: 6px;">
                                        <i class="ph ph-pencil-simple" style="font-size: 1.1rem;"></i>
                                    </a>
                                    <form action="{{ route('products.destroy', $product) }}" method="POST" style="display: inline;" onsubmit="confirmDelete(event, '¿Eliminar este producto?')">
                                        @csrf @method('DELETE')
                                        <button class="btn btn-sm btn-ghost text-danger" title="Eliminar" style="padding: 6px;">
                                            <i class="ph ph-trash" style="font-size: 1.1rem;"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                </div>
            </div>

            {{-- VISTA TARJETAS: Grid responsivo --}}
            <div class="card-grid-container" x-show="viewMode === 'card'" x-cloak>
                @foreach($products as $product)
                    <div class="mobile-card" x-bind:style="selectedIds.includes({{ $product->id }}) ? 'border-color: var(--primary); background-color: rgba(132, 204, 22, 0.05);' : ''">
                        <div class="mobile-card-header" style="padding-bottom: 12px; margin-bottom: 12px;">
                            <div class="d-flex align-center gap-sm">
                                <input type="checkbox" value="{{ $product->id }}" x-model="selectedIds" x-on:change="if (!selectedIds.includes({{ $product->id }})) selectAll = false" style="accent-color: var(--primary); width: 18px; height: 18px; cursor: pointer; margin-right: 10px;">
                                @if($product->image_url)
                                    <img src="{{ $product->image_url }}" alt="{{ $product->name }}" style="width: 40px; height: 40px; border-radius: 6px; object-fit: cover; border: 1px solid var(--border-color);" onerror="this.outerHTML='<div style=\'width: 40px; height: 40px; border-radius: 6px; background: rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; color: var(--text-muted); flex-shrink: 0;\'><i class=\'ph ph-image-broken\'></i></div>'">
                                @else
                                    <div style="width: 40px; height: 40px; border-radius: 6px; background: rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; color: var(--text-muted); flex-shrink: 0;">
                                        <i class="ph ph-image"></i>
                                    </div>
                                @endif
                                <div style="display: flex; flex-direction: column;">
                                    <span style="font-weight: 700; color: var(--text-primary); font-size: 1rem; line-height: 1.2;">{{ Str::limit($product->name, 40) }}</span>
                                    @if($product->category)
                                        <span style="font-size: 0.7rem; color: {{ $product->category->color }}; font-weight: 600; margin-top: 4px;">
                                            <i class="ph {{ $product->category->icon }}"></i> {{ $product->category->name }}
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="mobile-card-body">
                            <div class="mobile-card-row" style="flex-direction: row; justify-content: space-between; align-items: center;">
                                <span class="mobile-card-label">Costo</span>
                                <span class="mobile-card-value">${{ number_format($product->cost_price, 2) }}</span>
                            </div>
                            <div class="mobile-card-row" style="flex-direction: row; justify-content: space-between; align-items: center;">
                                <span class="mobile-card-label">Margen</span>
                                <span class="mobile-card-value"><span style="padding: 2px 6px; border-radius: 4px; background: var(--primary-light); color: var(--primary); font-size: 0.75rem; font-weight: 600;">+{{ $product->markup_percentage }}%</span></span>
                            </div>
                            <div class="mobile-card-row" style="margin-bottom: 8px; flex-direction: row; justify-content: space-between; align-items: center;">
                                <span class="mobile-card-label">Precio Venta</span>
                                <span class="mobile-card-value" style="font-weight: 700; font-size: 1.1rem; color: var(--success);">${{ number_format($product->price, 2) }}</span>
                            </div>
                            @if($product->source_url)
                            <div class="mobile-card-row" style="flex-direction: row; justify-content: space-between; align-items: center;">
                                <span class="mobile-card-label">Origen</span>
                                <span class="mobile-card-value" style="font-size: 0.85rem;"><a href="{{ $product->source_url }}" target="_blank" style="color: var(--primary);"><i class="ph ph-link"></i> Tienda Externa</a></span>
                            </div>
                            @endif
                        </div>

                        <div class="mobile-card-actions" style="margin-top: 16px; padding-top: 16px;">
                            @if($product->source_url)
                            <form action="{{ route('products.sync', $product) }}" method="POST" style="flex: 1; display: flex;">
                                @csrf
                                <button class="btn btn-outline btn-sm" style="flex: 1; width: 100%; color: var(--primary); border-color: var(--primary);" title="Sincronizar Precio">
                                    <i class="ph ph-arrows-clockwise"></i>
                                </button>
                            </form>
                            @endif
                            <a href="{{ route('products.edit', $product) }}" class="btn btn-outline btn-sm" style="flex: 1;">
                                <i class="ph ph-pencil-simple"></i> Editar
                            </a>
                            <form action="{{ route('products.destroy', $product) }}" method="POST" style="flex: 1; display: flex;" onsubmit="confirmDelete(event, '¿Eliminar este producto?')">
                                @csrf @method('DELETE')
                                <button class="btn btn-danger btn-sm" style="flex: 1; width: 100%;">
                                    <i class="ph ph-trash"></i>
                                </button>
                            </form>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        @if($products->hasPages() || request('per_page'))
        <div style="padding: 16px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;">
            <div>
                {{ $products->links() }}
            </div>
            <form action="{{ route('products.index') }}" method="GET" style="display: flex; align-items: center; gap: 10px;">
                @if(request('search'))
                    <input type="hidden" name="search" value="{{ request('search') }}">
                @endif
                @if(request('category_id'))
                    <input type="hidden" name="category_id" value="{{ request('category_id') }}">
                @endif
                @if(request('store_domain'))
                    <input type="hidden" name="store_domain" value="{{ request('store_domain') }}">
                @endif
                <span style="font-size: 0.85rem; color: var(--text-muted);">Mostrar:</span>
                <select name="per_page" class="form-control" onchange="this.form.submit()" style="min-height: 34px; height: 34px; padding: 4px 30px 4px 12px; border-radius: var(--radius-sm); color: var(--text-secondary); width: max-content; font-size: 0.85rem; cursor: pointer; appearance: auto;">
                    <option value="10" {{ request('per_page') == 10 ? 'selected' : '' }}>10 por página</option>
                    <option value="20" {{ request('per_page', 20) == 20 ? 'selected' : '' }}>20 por página</option>
                    <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50 por página</option>
                    <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100 por página</option>
                    <option value="500" {{ request('per_page') == 500 ? 'selected' : '' }}>500 por página</option>
                </select>
            </form>
        </div>
        @endif
    @else
        <div class="card">
            <div class="empty-state" style="padding: 40px 20px; text-align: center; color: var(--text-muted);">
                <i class="ph ph-shopping-bag" style="font-size: 3rem; opacity: 0.5; margin-bottom: 10px; display: block;"></i>
                <h3 style="margin-bottom: var(--space-sm); color: var(--text-secondary);">No hay productos registrados</h3>
                <p style="margin-bottom: var(--space-lg);">Aún no tienes productos o servicios en el catálogo.</p>
                <div class="d-flex justify-content-center gap-sm">
                    <button type="button" class="btn btn-outline" onclick="document.getElementById('importModal').style.display='flex'">
                        <i class="ph ph-file-csv"></i> Importar CSV
                    </button>
                    <button type="button" class="btn btn-outline" onclick="document.getElementById('exportModal').style.display='flex'" style="color: var(--secondary); border-color: var(--secondary);">
                        <i class="ph ph-export"></i> Exportar CSV
                    </button>
                    <a href="{{ route('products.create') }}" class="btn btn-primary">
                        <i class="ph ph-plus"></i> Crear Producto
                    </a>
                </div>
            </div>
        </div>
    @endif

</div>

<!-- Modal Import CSV -->
<div id="importModal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(4px);">
    <div class="card animate-slideInUp" style="width: 100%; max-width: 500px; padding: 0;">
        <div style="padding: 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center;">
            <h3 style="margin: 0; font-size: 1.2rem; font-weight: 600;">Importar Productos</h3>
            <button type="button" onclick="document.getElementById('importModal').style.display='none'" style="background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-muted);">&times;</button>
        </div>
        <div style="padding: 20px;">
            <p style="margin-bottom: 15px; font-size: 0.9rem; color: var(--text-muted);">
                Sube tu archivo Excel o CSV. En el siguiente paso podrás elegir qué columna corresponde a cada dato (Nombre, Precio, Categoría, etc).
            </p>
            <form action="{{ route('products.import_csv.upload') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="form-group" x-data="{ fileName: '' }">
                    <div 
                        x-bind:style="`position: relative; width: 100%; padding: 40px 20px; border: 2px dashed #84cc16; border-radius: 8px; text-align: center; transition: all 0.2s; background-color: ${fileName ? 'rgba(132, 204, 22, 0.05)' : 'transparent'};`"
                    >
                        <input 
                            type="file" 
                            id="csv_file"
                            name="csv_file" 
                            accept=".csv,.txt,.xlsx,.xls" 
                            required 
                            style="position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 10;"
                            x-on:change="fileName = $event.target.files[0] ? $event.target.files[0].name : ''"
                        >
                        
                        <div x-show="!fileName" style="pointer-events: none;">
                            <div style="margin-bottom: 12px;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#84cc16" viewBox="0 0 256 256" style="display: inline-block;"><path d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216ZM144,136v48a8,8,0,0,1-16,0V155.31l-18.34,18.35a8,8,0,0,1-11.32-11.32l32-32a8,8,0,0,1,11.32,0l32,32a8,8,0,0,1-11.32,11.32L144,155.31Z"></path></svg>
                            </div>
                            <div style="font-weight: 600; color: #1f2937; font-size: 1.05rem; margin-bottom: 6px;">Subir Archivo Excel o CSV</div>
                            <div style="font-size: 0.85rem; color: #9ca3af;">Haz clic aquí para buscar el archivo desde tu dispositivo</div>
                        </div>
                        
                        <div x-show="fileName" style="pointer-events: none;" x-cloak>
                            <div style="margin-bottom: 12px;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#84cc16" viewBox="0 0 256 256" style="display: inline-block;"><path d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Z"></path></svg>
                            </div>
                            <div style="font-weight: 600; color: #84cc16; font-size: 1.05rem;" x-text="fileName"></div>
                            <div style="font-size: 0.85rem; color: #9ca3af; margin-top: 6px;">Haz clic aquí si deseas cambiar el archivo</div>
                        </div>
                    </div>
                </div>
                <div style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;">
                    <button type="button" class="btn btn-outline" onclick="document.getElementById('importModal').style.display='none'">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Continuar al Mapeo <i class="ph ph-arrow-right"></i></button>
                </div>
            </form>
        </div>
    </div>
</div>

@include('products.partials.import_store_modal')
@include('products.partials.export_modal')
@endsection