{{-- resources/views/providers/create.blade.php --}}

@extends('layouts.app')

@section('content')

@php
    $mediosYTipos = [
        'ATL' => ['Espectacular', 'Radio', 'Pantallas'],
        'BTL' => ['Eventos', 'Activaciones', 'Centros Comerciales', 'Patrocinios'],
        'Material POP' => ['Volantes', 'Vinil', 'Lona', 'Banners', 'Otro'],
        'Digital' => ['Colaboracion de marca', 'Influencer', 'Produccion de foto y video']
    ];
@endphp

<div class="wizard-container">
    
    <div id="paso-1-medio">
        <h2>Paso 1: Selecciona el Medio del Proveedor</h2>
        <div class="card-container">
            @foreach ($mediosYTipos as $medio => $tipos)
                <div class="form-card" id="card-{{ str_replace(' ', '', $medio) }}" data-medio="{{ $medio }}">{{ $medio }}</div>
            @endforeach
        </div>
    </div>

    <div id="paso-2-tipo" style="display: none;">
        <h2>Paso 2: Selecciona el Tipo de <span id="medio-seleccionado-titulo"></span></h2>
        @foreach ($mediosYTipos as $medio => $tipos)
            @php $gridClass = (count($tipos) <= 4) ? 'grid-2-cols' : 'grid-3-cols'; @endphp
            <div id="tipos-{{ str_replace(' ', '', $medio) }}" class="tipo-container card-container {{ $gridClass }}" style="display: none;">
                @foreach ($tipos as $tipo)
                    <div class="form-card" data-tipo="{{ $tipo }}" data-medio="{{ $medio }}">{{ $tipo }}</div>
                @endforeach
            </div>
        @endforeach
    </div>

    <div id="paso-3-formulario" style="display: none;">
    <h2>Paso 3: Completa los Datos del Proveedor</h2>
    <h3><span id="medio-tipo-final"></span></h3>
    
    @if ($errors->any())
        <div class="error-message" style="margin-bottom: 15px;">
            <strong>¡Ups! Hubo algunos problemas con tu envío:</strong>
            <ul style="list-style-position: inside;">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

        <form action="{{ route('providers.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <input type="hidden" id="input-medio" name="medio">
            <input type="hidden" id="input-tipo" name="tipo">

            <h4>Datos Generales</h4>
            <div class="form-grid">
                <!-- VALORES DE PRUEBA AÑADIDOS -->
                <div class="form-group"><label>RFC / CURP (ID Único)</label><input type="text" name="id" required value="TEST-{{ rand(1000,9999) }}"></div>
                <div class="form-group"><label>Razón Social</label><input type="text" name="razonSocial" required value="Empresa de Prueba S.A. de C.V."></div>
                <div class="form-group"><label>Nombre Comercial</label><input type="text" name="nombre" required value="Proveedor Test {{ date('H:i') }}"></div>
                <div class="form-group"><label>Estado (Lugar)</label><input type="text" name="estado" required value="CDMX"></div>
                <div class="form-group"><label>Teléfono</label><input type="tel" name="telefono" value="5512345678"></div>
                <div class="form-group"><label>Correo Electrónico</label><input type="email" name="correo" value="test@empresa.com"></div>
                <div class="form-group">
                    <label>Agencia 1er Contacto</label>
                    <div class="custom-select-wrapper">
                        <select name="agenciaPrimerContacto">
                            <option value="">-- Seleccione una agencia --</option>
                            @foreach ($listaAgencias as $agencia)
                                {{-- Selecciona la primera opción automáticamente si existe --}}
                                <option value="{{ $agencia }}" {{ $loop->first ? 'selected' : '' }}>{{ $agencia }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <h4>Datos Específicos</h4>

<!-- ======================= CAMPOS PARA ATL ======================= -->

<div id="campos-Espectacular" class="campos-especificos" style="display: none;">
    <div class="form-grid">
        <div class="form-group"><label>Ubicación</label><input type="text" name="detalles[ubicacion]" value="Av. Reforma #123"></div>
        <div class="form-group"><label>Precio Pactado Mensual</label><input type="number" step="0.01" name="detalles[precio_pactado_mensual]" value="15000.00"></div>
    </div>
    <div class="form-group">
        <label>Fotos (Máx. 3)</label>
        <div class="image-grid">
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
        </div>
    </div>
</div>

<div id="campos-Radio" class="campos-especificos" style="display: none;">
    <div class="form-grid">
        <div class="form-group"><label>Paquete</label><textarea name="detalles[paquete]" rows="4">Paquete estándar de 20 spots diarios.</textarea></div>
        <div class="form-group"><label>Archivos MP3 (Máx. 2)</label><input type="file" name="archivos_mp3[]" multiple accept=".mp3"></div>
    </div>
    <div class="form-group"><label>Precio</label><input type="number" step="0.01" name="detalles[precio_pactado_mensual]" value="5000.50"></div>
</div>

<div id="campos-Pantallas" class="campos-especificos" style="display: none;">
    <div class="form-grid">
        <div class="form-group"><label>Ubicación</label><input type="text" name="detalles[ubicacion]" value="Centro Comercial Santa Fe"></div>
        <div class="form-group"><label>Paquete Mensual</label><textarea name="detalles[paquete_mensual]" rows="4">Rotación de 10 segundos cada 3 minutos.</textarea></div>
        <div class="form-group"><label>Precio Pactado Mensual</label><input type="number" step="0.01" name="detalles[precio_pactado_mensual]" value="8500.00"></div>
    </div>
    <div class="form-group">
        <label>Fotos (Máx. 3)</label>
        <div class="image-grid">
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
        </div>
    </div>
</div>

<!-- ======================= CAMPOS PARA BTL ======================= -->

<div id="campos-Eventos" class="campos-especificos" style="display: none;">
    <div class="form-group"><label>Paquete</label><textarea name="detalles[paquete]" rows="4">Organización completa de evento corporativo.</textarea></div>
    <div class="form-group"><label>Precio Pactado</label><input type="number" step="0.01" name="detalles[precio_pactado]" value="45000.00"></div>
    <div class="form-group"><label>Video (MP4, MOV)</label><input type="file" name="detalles[videos][]" accept=".mp4,.mov"></div>
    <div class="form-group">
        <label>Fotos (Máx. 3)</label>
        <div class="image-grid">
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
        </div>
    </div>
</div>

<div id="campos-Activaciones" class="campos-especificos" style="display: none;">
    <div class="form-group"><label>Paquete</label><textarea name="detalles[paquete]" rows="4">Activación en punto de venta con 2 promotores.</textarea></div>
    <div class="form-group"><label>Precio Pactado</label><input type="number" step="0.01" name="detalles[precio_pactado]" value="12000.00"></div>
    <div class="form-group"><label>Video (MP4, MOV)</label><input type="file" name="detalles[videos][]" accept=".mp4,.mov"></div>
    <div class="form-group">
        <label>Fotos (Máx. 3)</label>
        <div class="image-grid">
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
        </div>
    </div>
</div>

<div id="campos-CentrosComerciales" class="campos-especificos" style="display: none;">
    <div class="form-group"><label>Ubicación</label><input type="text" name="detalles[ubicacion]" value="Plaza Satélite, Planta Baja"></div>
    <div class="form-group"><label>Características</label><textarea name="detalles[caracteristicas]" rows="4">Espacio de 3x3 metros con toma de corriente.</textarea></div>
    <div class="form-group"><label>Precio</label><input type="number" step="0.01" name="detalles[costo]" value="25000.00"></div>
    <div class="form-grid">
        <div class="form-group"><label>Recibo (PDF, JPG, PNG)</label><input type="file" name="detalles[recibos][]" accept=".pdf,.jpg,.jpeg,.png"></div>
        <div class="form-group"><label>Video (MP4, MOV)</label><input type="file" name="detalles[videos][]" accept=".mp4,.mov"></div>
    </div>
    <div class="form-group">
        <label>Fotos (Máx. 3)</label>
        <div class="image-grid">
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
        </div>
    </div>
</div>

<div id="campos-Patrocinios" class="campos-especificos" style="display: none;">
    <div class="form-grid">
        <div class="form-group"><label>Marca / Evento</label><input type="text" name="detalles[marca_evento]" value="Maratón CDMX 2025"></div>
        <div class="form-group"><label>Costo</label><input type="number" step="0.01" name="detalles[costo]" value="50000.00"></div>
    </div>
    <div class="form-group"><label>Descripción</label><textarea name="detalles[descripcion]" rows="4">Patrocinio oro con presencia en playera.</textarea></div>
    <div class="form-group">
        <label>Fotos (Máx. 3)</label>
        <div class="image-grid">
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
        </div>
    </div>
</div>

<!-- ======================= CAMPOS PARA MATERIAL POP ======================= -->

<div id="campos-Volantes" class="campos-especificos" style="display: none;">
    <div class="form-grid">
        <div class="form-group"><label>Material / Especificar</label><input type="text" name="detalles[material_especificar]" value="Papel Couché 135g"></div>
        <div class="form-group"><label>Precio por Millar</label><input type="number" step="0.01" name="detalles[precio_por_millar]" value="800.00"></div>
    </div>
    <div class="form-group"><label>Video</label><input type="file" name="detalles[videos][]" accept=".mp4,.mov"></div>
    <div class="form-group">
        <label>Fotos (Máx. 3)</label>
        <div class="image-grid">
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
        </div>
    </div>
</div>

<div id="campos-Vinil" class="campos-especificos" style="display: none;">
    <div class="form-group"><label>Especificaciones</label><textarea name="detalles[especificaciones]" rows="4">Vinil autoadherible mate.</textarea></div>
    <div class="form-group"><label>Precio por M²</label><input type="number" step="0.01" name="detalles[precio_por_m2]" value="350.00"></div>
    <div class="form-group">
        <label>Fotos (Máx. 3)</label>
        <div class="image-grid">
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
        </div>
    </div>
</div>

<div id="campos-Lona" class="campos-especificos" style="display: none;">
    <div class="form-group"><label>Especificaciones</label><textarea name="detalles[especificaciones]" rows="4">Lona mesh con ojillos cada 50cm.</textarea></div>
    <div class="form-grid">
        <div class="form-group"><label>Cantidad Mínima</label><input type="number" name="detalles[cantidad_minima]" value="10"></div>
        <div class="form-group"><label>Precio</label><input type="number" step="0.01" name="detalles[precio]" value="150.00"></div>
    </div>
    <div class="form-group">
        <label>Fotos (Máx. 3)</label>
        <div class="image-grid">
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
        </div>
    </div>
</div>

<div id="campos-Banners" class="campos-especificos" style="display: none;">
    <div class="form-group"><label>Especificaciones</label><textarea name="detalles[especificaciones]" rows="4">Roll-up de 80x200cm con estructura.</textarea></div>
    <div class="form-grid">
        <div class="form-group"><label>Unidad</label><input type="text" name="detalles[unidad]" placeholder="Ej: pza, m2, etc." value="Pieza"></div>
        <div class="form-group"><label>Precio</label><input type="number" step="0.01" name="detalles[precio]" value="1200.00"></div>
    </div>
    <div class="form-group">
        <label>Fotos (Máx. 3)</label>
        <div class="image-grid">
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
        </div>
    </div>
</div>

<div id="campos-Otro" class="campos-especificos" style="display: none;">
    <div class="form-group"><label>Especificaciones</label><textarea name="detalles[especificaciones]" rows="4">Producto personalizado (gorras).</textarea></div>
    <div class="form-group"><label>Precio</label><input type="number" step="0.01" name="detalles[precio]" value="250.00"></div>
    <div class="form-group">
        <label>Fotos (Máx. 3)</label>
        <div class="image-grid">
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
        </div>
    </div>
</div>

<!-- ======================= CAMPOS PARA DIGITAL ======================= -->

<div id="campos-Colaboraciondemarca" class="campos-especificos" style="display: none;">
    <div class="form-grid">
        <div class="form-group"><label>Marca</label><input type="text" name="detalles[marca]" value="Marca Asociada"></div>
        <div class="form-group"><label>Página de IG/Facebook</label><input type="text" name="detalles[pagina_ig_facebook]" value="@marca_asociada"></div>
    </div>
    <div class="form-group"><label>Descripción</label><textarea name="detalles[descripcion]" rows="4">Colaboración para sorteo en redes.</textarea></div>
    <div class="form-group"><label>Precio</label><input type="number" step="0.01" name="detalles[precio]" value="0.00"></div>
    <div class="form-group">
        <label>Fotos (Máx. 3)</label>
        <div class="image-grid">
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
        </div>
    </div>
</div>

<div id="campos-Influencer" class="campos-especificos" style="display: none;">
    <div class="form-grid">
        <div class="form-group"><label>Página IG/Facebook/Tiktok</label><input type="text" name="detalles[pagina_redes_sociales]" value="@influencer_top"></div>
        <div class="form-group"><label>Precio</label><input type="number" step="0.01" name="detalles[precio]" value="10000.00"></div>
    </div>
    <div class="form-group"><label>Descripción</label><textarea name="detalles[descripcion]" rows="4">1 Reel y 3 Stories.</textarea></div>
    <div class="form-group">
        <label>Fotos (Máx. 3)</label>
        <div class="image-grid">
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
        </div>
    </div>
</div>

<div id="campos-Producciondefotoyvideo" class="campos-especificos" style="display: none;">
    <div class="form-group"><label>Descripción</label><textarea name="detalles[descripcion]" rows="4">Sesión fotográfica de producto.</textarea></div>
    <div class="form-group"><label>Precio</label><input type="number" step="0.01" name="detalles[precio]" value="8000.00"></div>
    <div class="form-group"><label>Video</label><input type="file" name="detalles[videos][]" accept=".mp4,.mov"></div>
    <div class="form-group">
        <label>Fotos (Máx. 3)</label>
        <div class="image-grid">
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
            <label class="image-slot"><span>+</span><input type="file" name="detalles[fotos][]" accept="image/*" onchange="previewImage(event, this)"></label>
        </div>
    </div>
</div>
            
            <div class="form-group">
                <label>Observaciones</label>
                <textarea name="detalles[observaciones]" rows="4">Proveedor de prueba creado para verificar conexión S3.</textarea>
            </div>
            <hr>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Registrar Proveedor</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Función para previsualizar imágenes (debe estar fuera del DOMContentLoaded)
    function previewImage(event, input) {
        const file = input.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const slot = input.closest('.image-slot');
                slot.innerHTML = `<img src="${e.target.result}" alt="Previsualización">`;
                slot.appendChild(input); 
            }
            reader.readAsDataURL(file);
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        // --- LÓGICA DEL WIZARD (ASISTENTE DE 3 PASOS) ---
        const paso1 = document.getElementById('paso-1-medio');
        const paso2 = document.getElementById('paso-2-tipo');
        const paso3 = document.getElementById('paso-3-formulario');
        const medioTitulo = document.getElementById('medio-seleccionado-titulo');
        const medioTipoFinal = document.getElementById('medio-tipo-final');

        document.querySelectorAll('#paso-1-medio .form-card').forEach(card => {
            card.addEventListener('click', () => {
                const medio = card.dataset.medio;
                paso1.style.display = 'none';
                paso2.style.display = 'block';
                medioTitulo.textContent = medio;
                document.getElementById(`tipos-${medio.replace(/ /g, '')}`).style.display = 'grid';
            });
        });

        document.querySelectorAll('#paso-2-tipo .form-card').forEach(card => {
            card.addEventListener('click', () => {
                const medio = card.dataset.medio;
                const tipo = card.dataset.tipo;

                paso2.style.display = 'none';
                paso3.style.display = 'block';
                
                document.getElementById('input-medio').value = medio;
                document.getElementById('input-tipo').value = tipo;
                medioTipoFinal.textContent = `Medio: ${medio} / Tipo: ${tipo}`;

                document.querySelectorAll('.campos-especificos').forEach(div => {
                    div.style.display = 'none';
                    div.querySelectorAll('input, textarea, select').forEach(input => {
                        input.disabled = true;
                    });
                });
                
                const camposDiv = document.getElementById(`campos-${tipo.replace(/\s+/g, '')}`);
                if (camposDiv) {
                    camposDiv.style.display = 'block';
                    camposDiv.querySelectorAll('input, textarea, select').forEach(input => {
                        input.disabled = false;
                    });
                }
            });
        });

        // --- SCRIPT DE VALIDACIÓN DE TAMAÑO DE ARCHIVO ---
        const providerForm = document.querySelector('#paso-3-formulario form');
        if (providerForm) {
            providerForm.addEventListener('submit', function(event) {
                const maxSizeInBytes = 5 * 1024 * 1024; // 5 MB
                const fileInputs = this.querySelectorAll('input[type="file"]:not(:disabled)');
                let largeFiles = [];

                fileInputs.forEach(input => {
                    for (const file of input.files) {
                        if (file.size > maxSizeInBytes) {
                            largeFiles.push(file.name);
                        }
                    }
                });

                if (largeFiles.length > 0) {
                    event.preventDefault();
                    alert(
                        "Error: Los siguientes archivos superan el límite de 5MB y no serán subidos:\n\n" + 
                        "- " + largeFiles.join("\n- ")
                    );
                }
            });
        }
    });
</script>
@endpush