@extends('front.layouts.main')
@section('contenido')
<style>
    .contactos .table>:not(caption)>*>* {
        background: transparent;
        color: #000;
    }
    .tiendas_i {
        height: 130px;
    }
    .accordion-button:not(.collapsed) {
        color: var(--bs-accordion-active-color);
        background-color: rgba(255, 86, 0, 0.3);
        box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
    }
    .accordion-button:focus {
        z-index: 3;
        border-color: #FF5600;
        outline: 0;
        box-shadow: none;
    }
    .side {
        width: 20%; 
        float: left;
    }
    .content {
        width: 75%;
    }
    .link_categoria {
        color: #101010;
        cursor: pointer;
    }
    .categoria-activa {
        color: #FF5600;
    }
    .link_pais {
        color: #101010;
        cursor: pointer;
    }
    .pais-activo {
        color: #FF5600;
    }
    @media screen and (max-width: 1199px) {
        .tiendas_i {
            height: 80px;
        }
    }
    @media screen and (max-width: 991px) {
        .side {
            width: 100%; 
            float: left;
        }
        .content {
            width: 100%;
        }
        .tiendas_i {
            height: 110px;
        }
    }
</style>

<div class="col-12 fondo_subpagina">
    <div class="col-12 espacio_header">

    </div>
</div>

<div class="col-12 pt-lg-5 pb-lg-5 pt-3 pb-3" style="background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('{{ asset('img/bg/bg.png') }}'); background-size: cover; background-attachment: fixed; background-position: center;">
    <div class="container">
        <div class="col-12 text-center text-white">
            <h1>Donde Comprar?</h1>
            <p class="mb-0"><a href="{{ route('principal') }}" class="a_naranja">Inicio</a> / Donde Comprar?</p>
        </div>
    </div>
</div>

<div class="col-12 pt-lg-5 pt-3 pb-5">
    <div class="container">
        <div class="col-12">
            <div class="row g-3">
                <div class="side">
                    <div class="col-12">
                        <div class="col-12">

                            <div class="col-12 mb-3">

                                <div class="accordion" id="accordionPanelsStayOpenExample">
                                    <div class="accordion-item">
                                        <h2 class="accordion-header">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
                                            Pais
                                        </button>
                                        </h2>
                                        <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse">
                                            <div class="accordion-body p-2">
                                                <div class="col-12 p-3 pt-2 border-bottom mb-3">
                                                    <a href="javascript:void(0)" clas="link_pais_todas" onclick="buscarTodosLosPaises()" style="font-size: 13px;">Todos los paises</a>
                                                </div>
                                                @foreach($pais as $p)
                                                    <table class="table mb-2 table-borderless" style="font-size: 13px;">
                                                        <tr>
                                                            <td style="width: 25px;" class="p-1"><i class="text-dark fa-solid fa-caret-right"></i></td>
                                                            <td class="p-1">
                                                                <p data-id="{{ $p->id }}" data-nombre="{{ $p->nombre_pais }}" class="mb-0 link_pais">{{ $p->nombre_pais }}</p>
                                                            </td>
                                                        </tr>
                                                    </table>   
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="accordion" id="accordionExample2">
                                    <div class="accordion-item">
                                        <h2 class="accordion-header">
                                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                                Categorías
                                            </button>
                                        </h2>
                                        <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                                            <div class="accordion-body p-2">

                                                <div class="col-12 p-3 pt-2 border-bottom mb-3">
                                                    <a href="javascript:void(0)" clas="link_categoria_todas" onclick="buscarTodasLasCategorias()" style="font-size: 13px;">Todas las Categorías</a>
                                                </div>
                                                @foreach($categorias as $c)
                                                    <table class="table mb-2 table-borderless" style="font-size: 13px;">
                                                        <tr>
                                                            <td style="width: 25px;" class="p-1"><i class="text-dark fa-solid fa-caret-right"></i></td>
                                                            <td class="p-1">
                                                                <p data-id="{{ $c->id }}" data-nombre="{{ $c->nombre_categoria }}" class="mb-0 link_categoria">{{ $c->nombre_categoria }}</p>
                                                            </td>
                                                        </tr>
                                                    </table>   
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="content">
                    <div class="col-12 mb-3">
                        <div class="form-floating">
                            <input type="text" id="buscarTiendas" onkeyup="buscarTiendasDesdeInput()" class="form-control">
                            <label for="">Buscar tiendas</label>
                        </div>
                    </div>
                    
                    <div class="col-12 tablaTiendas">

                        <div class="col-12">
                            <div class="row g-3">
                                @foreach($tienda as $t)
                                    <div class="col-lg-3 col-6">
                                        <div class="col-12 p-lg-4 p-1 rounded bg-white">
                                            <a href="{{ $t->link }}" target="_blank">
                                                <div class="col-12 mb-4 mt-4 rounded tiendas_i" style="display: flex; align-items: center; justify-content: center; overflow: hidden;">
                                                    <img src="{{ asset('uploads/tienda/'.$t->path) }}" class="w-100 p-lg-0 p-4" style="max-width: 100%; max-height: 100%; height: auto; width: auto; object-fit: contain;" alt="">
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{{ asset('js/jquery.js') }}"></script>
<script>
    let categoriaSeleccionadaId = null;
    let categoriaSeleccionadaNombre = null;
    let paisSeleccionadoId = null;
    let paisSeleccionadoNombre = null;

    $(document).ready(function() {
        // Evento click categoría
        $('.link_categoria').on('click', function(e) {
            e.preventDefault();

            $('.link_categoria').removeClass('categoria-activa');
            $('.link_categoria_todas').removeClass('categoria-activa');
            $(this).addClass('categoria-activa');

            categoriaSeleccionadaId = $(this).data('id');
            categoriaSeleccionadaNombre = $(this).data('nombre');

            buscarTiendas(categoriaSeleccionadaId, categoriaSeleccionadaNombre, paisSeleccionadoId, paisSeleccionadoNombre);
        });

        // Evento click país
        $('.link_pais').on('click', function(e) {
            e.preventDefault();

            $('.link_pais').removeClass('pais-activo');
            $('.link_pais_todos').removeClass('pais-activo');
            $(this).addClass('pais-activo');

            paisSeleccionadoId = $(this).data('id');
            paisSeleccionadoNombre = $(this).data('nombre');

            buscarTiendas(categoriaSeleccionadaId, categoriaSeleccionadaNombre, paisSeleccionadoId, paisSeleccionadoNombre);
        });
    });

    function buscarTodasLasCategorias() {
        $('.link_categoria').removeClass('categoria-activa');
        $('.link_categoria_todas').addClass('categoria-activa');
        categoriaSeleccionadaId = null;
        categoriaSeleccionadaNombre = null;

        buscarTiendas(null, null, paisSeleccionadoId, paisSeleccionadoNombre);
    }

    function buscarTodosLosPaises() {
        $('.link_pais').removeClass('pais-activo');
        $('.link_pais_todos').addClass('pais-activo');
        paisSeleccionadoId = null;
        paisSeleccionadoNombre = null;

        buscarTiendas(categoriaSeleccionadaId, categoriaSeleccionadaNombre, null, null);
    }

    function buscarTiendas(idCategoria, nombreCategoria, idPais, nombrePais) {
        var buscar = $('#buscarTiendas').val(); 
        $.ajax({
            type: "GET",
            data: {
                buscar: buscar,
                id: idCategoria,
                nombre: nombreCategoria,
                pais_id: idPais,
                pais_nombre: nombrePais
            },
            url: "{{ route('page.buscarTiendas') }}",
            success: function(data) {
                $('.tablaTiendas').empty().html(data);
            }
        });
    }

    function buscarTiendasDesdeInput() {
        buscarTiendas(categoriaSeleccionadaId, categoriaSeleccionadaNombre, paisSeleccionadoId, paisSeleccionadoNombre);
    }


    function ajustarAcordeonesSegunTamaño() {
        const ancho = window.innerWidth;

        const acordeonPais = document.getElementById('panelsStayOpen-collapseOne');
        const acordeonCategoria = document.getElementById('collapseOne');

        const instPais = bootstrap.Collapse.getInstance(acordeonPais);
        const instCat = bootstrap.Collapse.getInstance(acordeonCategoria);

        // Eliminar instancias anteriores si existen
        if (instPais) instPais.dispose();
        if (instCat) instCat.dispose();

        if (ancho > 991) {
            // Abrir ambos acordeones
            new bootstrap.Collapse(acordeonPais, { toggle: true });
            new bootstrap.Collapse(acordeonCategoria, { toggle: true });
        } else {
            // Cerrar ambos acordeones
            new bootstrap.Collapse(acordeonPais, { toggle: false });
            new bootstrap.Collapse(acordeonCategoria, { toggle: false });
        }
    }

    // Ejecutar al cargar y al redimensionar
    window.addEventListener('load', ajustarAcordeonesSegunTamaño);
    window.addEventListener('resize', ajustarAcordeonesSegunTamaño);
</script>

@endsection