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

@extends('layouts.app')

@section('content')

@php
    $user_role = session('user')['rol'] ?? 'invitado';
    
    // Lógica para preparar datos para los filtros
    $unique_estados = [];
    $todos_los_conceptos_por_medio = [];
    if (!empty($providers)) {
        $all_estados = array_unique(array_map(fn($p) => $p->estado, $providers));
        sort($all_estados);
        $unique_estados = $all_estados;

        foreach ($providers as $provider) {
            if (!isset($todos_los_conceptos_por_medio[$provider->medio])) {
                $todos_los_conceptos_por_medio[$provider->medio] = [];
            }
            if (!in_array($provider->tipo, $todos_los_conceptos_por_medio[$provider->medio])) {
                $todos_los_conceptos_por_medio[$provider->medio][] = $provider->tipo;
            }
        }
    }
@endphp

<div class="page-header">
    <h2>Catálogo de Proveedores</h2>
    <a href="{{ route('providers.create') }}" class="btn btn-primary">Registrar Nuevo Proveedor</a>
</div>

<div class="filters-container">
    <input type="search" id="searchInput" placeholder="Buscar por RFC, Razón Social, Nombre...">
    <select id="conceptoFilter"><option value="todos">Todos los Conceptos</option></select>
    <select id="medioFilter">
        <option value="todos">Todos los Medios</option>
        <option value="ATL">ATL</option>
        <option value="BTL">BTL</option>
        <option value="Material POP">Material POP</option>
        <option value="Digital">Digital</option>
    </select>
    <select id="estadoLugarFilter">
        <option value="todos">Todos los Estados</option>
        @foreach ($unique_estados as $estado)
            <option value="{{ $estado }}">{{ $estado }}</option>
        @endforeach
    </select>
    <select id="vetoFilter">
        <option value="todos">Activos y Vetados</option>
        <option value="no">Solo Activos (No vetados)</option>
        <option value="si">Solo Vetados</option>
    </select>
</div>

@if (empty($providers))
    <p>No hay proveedores registrados todavía.</p>
@else
    <div class="table-container">
        <table class="providers-table">
            <thead>
                <tr>
                    <th>Medio</th><th>Concepto</th><th>Estado (Lugar)</th><th>Activo</th><th>Nombre</th><th>Precio</th><th>Observaciones</th><th>Acciones</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($providers as $provider)
                    @php
                        $displayPrice = 'N/A';
                        $priceKeys = ['precio', 'costo', 'precio_pactado_mensual', 'precio_pactado', 'precio_por_millar', 'precio_por_m2'];
                        if (isset($provider->detalles)) {
                            foreach ($priceKeys as $key) {
                                if (!empty($provider->detalles[$key])) {
                                    $displayPrice = '$' . number_format((float)$provider->detalles[$key], 2);
                                    break;
                                }
                            }
                        }
                        $observaciones = $provider->detalles['observaciones'] ?? '';
                        if (strlen($observaciones) > 50) $observaciones = substr($observaciones, 0, 50) . '...';
                    @endphp
                    <tr data-search-text="{{ strtolower($provider->razonSocial . ' ' . $provider->id) }}">
                        <td>{{ $provider->medio }}</td>
                        <td>{{ $provider->tipo }}</td>
                        <td>{{ $provider->estado }}</td>
                        <td>{{ !$provider->veto ? 'Sí' : 'No' }}</td>
                        <td>{{ $provider->nombre }}</td>
                        <td>{{ $displayPrice }}</td>
                        <td>{{ $observaciones }}</td>
                        <td class="actions">
                            <button class="btn btn-view" data-provider='{{ json_encode($provider) }}'>Ver</button>
                            @if ($user_role === 'admin')
                                <a href="#" class="btn btn-edit">Editar</a>
                                <form action="#" method="POST">
                                    @csrf
                                    <input type="hidden" name="id" value="{{ $provider->id }}">
                                    <button type="submit" class="btn {{ $provider->veto ? 'btn-unveto' : 'btn-veto' }}">
                                        {{ $provider->veto ? 'Quitar Veto' : 'Vetar' }}
                                    </button>
                                </form>
                            @endif
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endif

<div id="viewModal" class="modal">
    <div class="modal-content">
        <span class="close-button">&times;</span>
        <h2>Datos del Proveedor</h2>
        <div id="modal-body"><!-- Contenido generado por JS --></div>
    </div>
</div>

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    const BASE_URL = '{{ url('/') }}/';
    const conceptosPorMedio = @json($todos_los_conceptos_por_medio);
    
    // ... (Tu mapa inverso 'medioPorConcepto' va aquí)

    // --- SECCIÓN 1: LÓGICA DE LA MODAL (VERSIÓN FINAL CON S3) ---
    function setupModal() {
        const modal = document.getElementById('viewModal');
        const modalBody = document.getElementById('modal-body');
        const closeButton = document.querySelector('.close-button');
        const tableContainer = document.querySelector('.table-container');

        if (!modal || !modalBody || !closeButton || !tableContainer) return;

        const closeModal = () => modal.style.display = 'none';
        closeButton.onclick = closeModal;
        window.onclick = (event) => { if (event.target == modal) closeModal(); };

        const formatKey = (key) => key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());

        tableContainer.addEventListener('click', (event) => {
            const viewButton = event.target.closest('button.btn-view');
            if (viewButton) {
                event.preventDefault();
                const providerData = JSON.parse(viewButton.dataset.provider);
                modalBody.innerHTML = 'Cargando...'; // Mensaje de carga inicial
                modal.style.display = 'block';

                // --- Construcción del HTML ---
                let column1Html = `<div class="modal-column"> ... </div>`; // (Tu HTML de columna 1, que ya estaba bien)
                let column2Html = `<div class="modal-column"><h4>Archivos Adjuntos</h4></div>`;
                
                // Unimos el HTML base
                modalBody.innerHTML = `<div class="modal-body-grid">${column1Html}${column2Html}</div>`;
                
                // Ahora, de forma asíncrona, cargamos los archivos
                const mediaContainer = modalBody.querySelector('.modal-column:last-child');
                let hasMedia = false;

                const renderFile = (fileKey, container, type) => {
                    fetch(`${BASE_URL}files/get-url?key=${encodeURIComponent(fileKey)}`)
                        .then(response => response.json())
                        .then(data => {
                            if (data.url) {
                                if (type === 'foto') {
                                    container.innerHTML += `<a href="${data.url}" target="_blank"><img src="${data.url}"></a>`;
                                } else if (type === 'video') {
                                    container.innerHTML += `<video controls src="${data.url}" style="width:100%;"></video>`;
                                }
                            }
                        });
                };

                if (providerData.detalles && Object.keys(providerData.detalles).length > 0) {
                    if (providerData.detalles.fotos && providerData.detalles.fotos.length > 0) {
                        hasMedia = true;
                        const gallery = document.createElement('div');
                        gallery.className = 'modal-image-gallery';
                        mediaContainer.appendChild(gallery);
                        providerData.detalles.fotos.forEach(key => renderFile(key, gallery, 'foto'));
                    }
                    if (providerData.detalles.videos && providerData.detalles.videos.length > 0) {
                        hasMedia = true;
                        const videoContainer = document.createElement('div');
                        mediaContainer.appendChild(videoContainer);
                        providerData.detalles.videos.forEach(key => renderFile(key, videoContainer, 'video'));
                    }
                }
                
                if (!hasMedia) {
                    mediaContainer.innerHTML += '<p>No hay archivos adjuntos.</p>';
                }
            }
        });
    }

    // --- SECCIÓN 2: LÓGICA DE FILTROS ---
    function setupFilters() {
        // ... (Tu lógica de filtros, que ya estaba bien, va aquí)
    }

    // --- SECCIÓN 3: EJECUTAR TODO ---
    setupModal();
    setupFilters();
});
</script>
@endpush