@extends('front.layouts.main')
@section('contenido')

<style>
    .primera_letra_grande::first-letter {
        font-size: 300%;
        font-weight: 700;
        float: left;
        line-height: 0.8;
        margin-right: 10px;
        margin-top: 5px;
    }
    .banner_principal p {
        color: #fff;
    }
</style>

<div class="col-12 fondo_negro fondo_mundo" style="overflow: hidden;">
    <div class="col-12 espacio_header">

    </div>
    <div class="col-12">
        <div id="carouselExampleIndicators" class="carousel slide">
            <div class="carousel-indicators">
                @foreach($sliderPrincipal as $index=>$sp)
                    <button type="button" style="background-image: url('{{ asset('uploads/slider/'.$sp->path) }}');" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="{{ $index }}" class="{{$loop->first ? 'active':''}} banner_indicadores" aria-current="true" aria-label="Slide {{ $index }}"></button>
                @endforeach
            </div>
            <div class="carousel-inner">
                @foreach($sliderPrincipal as $sp)
                    <div class="carousel-item {{$loop->first ? 'active':''}}">
                        {{-- <div class="col-12 banner_principal" style="background-image: url('{{ asset('uploads/slider/'.$sp->path) }}');"> --}}
                        <div class="col-12 banner_principal">
                            <div class="col-12 h-100">
                                <div class="col-12 h-100 banner_contenido" style="display: flex; align-items: center;">
                                    <div class="col-12 h-100">
                                        <div class="row g-3 h-100">
                                            <div class="banner_contenido_int h-100" style="display: flex; align-items: center;">
                                                <div class="col-12">
                                                    <h1 class="text-white mb-3">
                                                        {!! $sp->titulo !!}
                                                    </h1>
                                                    <div class="text-white separador mb-4"></div>
                                                    {!! $sp->subtitulo !!}
                                                    <a href="{{ $sp->link_boton }}" class="btn btn_banner mt-3">
                                                        <table class="w-100">
                                                            <tr>
                                                                <td style="padding-right: 15px; padding-left: 15px;">{{ $sp->nombre_boton }}</td>
                                                                <td style="width: 45px; padding-right: 10px;">
                                                                    <div class="btn_interior">
                                                                        <i class="fa-solid fa-arrow-right-long" style="font-size: 12px;"></i>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="h-100 banner_imagen" style="background-image: url('{{ asset('uploads/slider/'.$sp->path) }}'); background-position: center; background-size: cover;">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

<div class="col-12 seccion_margen">
    <div class="container">
        @foreach($nosotros as $n)
            <div class="col-12">
                <div class="col-12">
                    {!! $n->subtitulo !!}
                    {!! $n->titulo !!}
                </div>
                <div class="col-12 mt-lg-5 mt-3">
                    <div class="row g-3">
                        <div class="col-lg-5 mb-lg-0 mb-2">
                            {!! $n->contenido_izq !!}
                            <a href="{{ $n->link_boton }}" class="btn btn-dark mt-lg-3 mt-1">{{ $n->nombre_boton }} <i class="fa-solid fa-arrow-right-long" style="margin-left: 15px;"></i></a>
                        </div>
                        <div class="col-lg-7 primera_letra_grande">
                            {!! $n->contenido_der !!}
                        </div>
                    </div>
                </div>
            </div>
        @endforeach

        <div class="col-12 mt-5">
            <div class="swiper" style="position: relative; overflow: hidden;">
                <div class="swiper-wrapper">
                    
                    <div class="swiper-slide">
                        <div class="col-12 p-5 text-center rounded" style="background: #f1f1f1;">
                            <p class="mb-0">Nuestros servicios</p>
                            <h5>Fletes aéreo</h5>
                            <div class="col-12 mb-4 mt-4 rounded" style="background-image: url('{{ asset('img/bg/bg-avion.jpg') }}'); background-size: cover; backgroind-position: center; height: 200px;">

                            </div>
                            {{-- <a href="#" class="">Leer más <i class="fa-solid fa-arrow-right-long" style="margin-left: 5px; font-size: 12px;"></i></a> --}}
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="col-12 p-5 text-center rounded" style="background: #f1f1f1;">
                            <p class="mb-0">Nuestros servicios</p>
                            <h5>Fletes marítimo</h5>
                            <div class="col-12 mb-4 mt-4 rounded" style="background-image: url('{{ asset('img/bg/bg-mar.jpg') }}'); background-size: cover; backgroind-position: center; height: 200px;">

                            </div>
                            {{-- <a href="#" class="">Leer más <i class="fa-solid fa-arrow-right-long" style="margin-left: 5px; font-size: 12px;"></i></a> --}}
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="col-12 p-5 text-center rounded" style="background: #f1f1f1;">
                            <p class="mb-0">Nuestros servicios</p>
                            <h5>Servicios adicionales a tu medida</h5>
                            <div class="col-12 mb-4 mt-4 rounded" style="background-image: url('{{ asset('img/bg/bg-servicio.jpg') }}'); background-size: cover; backgroind-position: center; height: 200px;">

                            </div>
                            {{-- <a href="#" class="">Leer más <i class="fa-solid fa-arrow-right-long" style="margin-left: 5px; font-size: 12px;"></i></a> --}}
                        </div>
                    </div>
                </div> 
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
        <div class="col-12 text-center mt-4">
            <a href="{{ url('servicios') }}" class="btn btn-dark">Ver todos los servicios <i class="fa-solid fa-arrow-right-long" style="margin-left: 10px;"></i></a>
        </div>

    </div>
</div>

{{-- CALCULADORA Y COTIZACION --}}
{{-- <div class="col-12 seccion_margen" style="padding-top: 0;">
    <div class="container">
        <div class="col-12">
            <div class="row g-3">
                <div class="col-lg-6">
                    <div class="col-12 fondo_negro p-lg-5 p-4 rounded">
                        <table class="w-100">
                            <tr>
                                <td style="width: 65px;"><img src="{{ asset('img/icono/calculadora.svg') }}" style="width: 50px; float: left; margin-right: 10px;" alt=""></td>
                                <td><h3 class="mb-0 text-white">Calculadora</h3></td>
                            </tr>
                        </table>
                        <div class="col-12 mt-4">
                            <p class="text-white mb-4">
                                Ingresá el peso y seleccioná la unidad a convertir.
                            </p>
                        </div>
                        <div class="col-12">
                            <div class="row g-3">
                                <div class="col-lg-6">
                                    <div class="col-12">
                                        <div class="form-floating mb-3">
                                            <select name="" id="" class="form-control">
                                                <option value="" disabled selected>Seleccione ..</option>
                                                <option value="usa">Estados Unidos</option>
                                                <option value="espana">España</option>
                                                <option value="china">China</option>
                                            </select>
                                            <label for="">Origen</label>
                                        </div>
                                    </div>
                                    <div class="col-12 mb-3">
                                        <div class="form-floating">
                                            <input type="text" class="form-control" placeholcer="Peso">
                                            <label for="">Peso</label>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-floating">
                                            <select name="" id="" class="form-control">
                                                <option value="" disabled selected>Seleccione ..</option>
                                                <option value="libras">Libras</option>
                                                <option value="onza">Onzas</option>
                                            </select>
                                            <label for="">Medida</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="col-12 mb-3">
                                        <div class="form-floating">
                                            <select name="" id="" class="form-control">
                                                <option value="" disabled selected>Seleccione ..</option>
                                                <option value="libras">Asunción</option>
                                                <option value="onza">Coronel Oviedo</option>
                                                <option value="">San Juan Bautista</option>
                                                <option value="">Encarnación</option>
                                                <option value="">Pedro Juan Caballero</option>
                                            </select>
                                            <label for="">Sucursal</label>
                                        </div>
                                    </div>

                                    <div class="col-12 mb-3">
                                        <div class="form-floating">
                                            <input type="text" class="form-control" readonly placeholcer="Peso">
                                            <label for="">Peso</label>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-floating">
                                            <select name="" id="" class="form-control">
                                                <option value="kilo">Kg</option>
                                                <option value="gramo">Gramos</option>
                                            </select>
                                            <label for="">Medida</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 mb-1" style="text-align: right;">
                                    <button class="btn btn-orange">CALCULAR</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="col-12 fondo_naranja p-lg-5 p-4 rounded h-100">
                        <table class="w-100">
                            <tr>
                                <td style="width: 65px;"><img src="{{ asset('img/icono/cotizacion.svg') }}" style="width: 50px; float: left; margin-right: 10px;" alt=""></td>
                                <td><h3 class="mb-0 text-white">Cotización dolar</h3></td>
                            </tr>
                        </table>
                        <div class="col-12 mt-5">
                            @foreach($cotizacion as $coti)
                                <table class="w-100 bg-white rounded">
                                    <tr class="border-bottom">
                                        <td class="p-3" style="width: 70px;"><img src="{{ asset('img/banderas/py.svg') }}" style="width: 50px;" alt=""></td>
                                        <td class="p-3">Guaranies</td>
                                        <td class="p-3" style="width: 130px; text-align: right;">Gs. {{ number_format($coti->valor, 0, ',', '.') }}</td>
                                    </tr>
                                </table>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> --}}

{{-- SOBRE NOSOTROS --}}
@foreach($presentacion as $p)
    <div class="col-12 seccion_margen" style="padding-top: 0;">
        <div class="container">
            <div class="col-12">
                <div class="col-12">
                    {!! $p->subtitulo !!}
                    {!! $p->titulo !!}
                    <div class="col-12 primera_letra_grande mt-4">
                        {!! $p->contenido !!}
                    </div>
                </div>
                <div class="col-12 mt-5">
                    <div class="row g-3">
                        @foreach($items as $i)
                            <div class="col-lg-6 mb-3">
                                <table class="w-100">
                                    <tr>
                                        <td class="text-center" style="width: 90px;"><img src="{{ asset('uploads/icono/'.$i->path) }}" style="width: 70px;" alt=""></td>
                                        <td>
                                            <p class="mb-2"><b>{{ $i->titulo }}</b></p>
                                            {!! $i->contenido !!}
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
@endforeach

<style>
    .tiendas_img {
        background: #fff;
        /* aspect-ratio: 1 / 1;  */
        width: 100%;
        height: 250px;
        background-size: cover;
        background-position: center;
        display: flex; 
        align-items: center;
        padding: 25px;
    }
    @media screen and (max-width: 1399px) {
        .tiendas_img {
            height: 200px;
        }
    }
    @media screen and (max-width: 1199px) {
        .tiendas_img {
            height: 200px;
        }
    }
    @media screen and (max-width: 767px) {
        .tiendas_img {
            height: 150px;
        }
    }
    @media screen and (max-width: 576px) {
        .tiendas_img {
            height: 180px;
        }
    }
</style>

{{-- DONDE COMPRAR --}}
<div class="col-12 seccion_margen" style="padding-top: 0;">
    <div class="container">
        <div class="col-12">
            <div class="col-12 text-center">
                {{-- <p class="mb-0">Algunas de las tiendas de</p> --}}
                <h1>
                    DONDE <span class="naranja">COMPRAR</span>
                </h1>
                <p class="mb-0">Si no contas con tarjeta, lo compramos por vos! <a href="" class="a_naranja" style="margin-left: 10px;"><i class="fa-brands fa-whatsapp"></i> Click aquí</a></p>
            </div>
            <div class="col-12 mt-lg-5 mt-3 text-center">
                <button class="btn btn-orange btn_paises mb-1">Todos los paises</button>
                @foreach($pais as $p) 
                    <button data-id="{{ $p->id }}" data-nombre="{{ $p->nombre_pais }}" class="btn btn-dark btn_paises mb-1">{{ $p->nombre_pais }}</button>
                @endforeach

                <div class="col-12 tiendas_seleccionadas mt-5">
                    <div class="swiper_tiendas" style="position: relative; overflow: hidden;">
                        <div class="swiper-wrapper">
                            @foreach($tienda as $t)
                                <div class="swiper-slide">
                                    <div class="col-12 p-3 text-center rounded tiendas_img" style="">
                                        <a href="{{ $t->link }}" target="_blank" class="">
                                            <div class="col-12 mb-4 mt-4 rounded tiendas_img" style="">
                                                <img src="{{ asset('uploads/tienda/'.$t->path) }}" class="w-100" style="object-fit: contain;" alt="">
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            @endforeach
                        </div> 
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                </div>
            </div> 
        </div>
    </div>
</div>

<script src="{{ asset('js/jquery.js') }}"></script>
<script>

    $(document).ready(function() {
        $('.btn_paises').on('click', function(e) {
            e.preventDefault();

            // Sacar clase activa de todos
            $('.btn_paises').removeClass('btn-orange').addClass('btn-dark');

            // Agregar clase activa solo al clickeado
            $(this).removeClass('btn-dark').addClass('btn-orange');

            // Si querés ejecutar algo más, como un filtro:
            let idPais = $(this).data('id');
            let nombrePais = $(this).data('nombre');

            // Llamar tu función
            buscarTiendas(idPais, nombrePais);

        });
    });

    function buscarTiendas(id_pais, nombre_pais) {
        $.ajax({
            url: "{{ route('page.buscarTiendaPrincipal') }}",
            data: { id_pais: id_pais, nombre_pais: nombre_pais },
            type: "GET", 
            success: function(data) {
                $('.tiendas_seleccionadas').empty().html(data);
                // 👇 Reinicializar swiper
                iniciarSwiperTiendas();
            }
        })
    }

    function iniciarSwiperTiendas(cantidad) {
        new Swiper('.swiper_tiendas', {
            slidesPerView: 2,
            spaceBetween: 20,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            loop: cantidad > 1,
            breakpoints: {
                768: { slidesPerView: 2 },
                1024: { slidesPerView: 5 }
            }
        });
    };
</script>

@endsection