@extends('layouts.app')

@section('links')
    @vite('resources/css/index.css')
    {{-- <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script> --}}
@endsection

@section('content')
    {{-- Carrusel --}}
    <div class="container slider-wrapper">
        <div id="dynamic-slider">
            @if ($sliders->where('iam_identifier_id', 1)->count() > 0)
                @foreach ($sliders->where('iam_identifier_id', 1) as $slider)
                    @if (isset($slider->redirect_link))
                        <div>
                            <a href="{{ $slider->redirect_link }}" class="text-decoration-none" target="_BLANK">
                                <img class="img-fluid" src="{{ asset('uploads/sliders/' . $slider->image) }}"
                                    alt="{{ $slider->id }}" width="100%">
                            </a>
                        </div>
                    @else
                        <div>
                            <img class="img-fluid" src="{{ asset('uploads/sliders/' . $slider->image) }}"
                                alt="{{ $slider->id }}" width="100%">
                        </div>
                    @endif
                @endforeach
            @else
                <div><img class="img-fluid" src="B1.png" alt="Primera imagen"></div>
                <div><img class="img-fluid" src="B2.png" alt="Segunda imagen"></div>
                <div><img class="img-fluid" src="B3.png" alt="Segunda imagen"></div>
            @endif
        </div>
        <div class="cards-overlay">
            <div class="cards-container">
                @for ($i = 0; $i < 6; $i++)
                    <div class="mini-card">
                        <div class="mini-card-title">
                            🚚 Envío gratis
                        </div>

                        <div class="mini-card-desc">
                            <small>En compras mayores a $999</small>
                        </div>

                        <div class="mini-card-action">
                            <a href="#" class="btn btn-sm btn-light">Ver más</a>
                        </div>
                    </div>
                @endfor
            </div>
        </div>
    </div>

    {{-- Space for the brands --}}
    {{-- <div class="container-fluid custom-bg-color p-3">
        <div class="text-center">
            <a href="{{ Route('brands') }}"
                class="d-flex align-items-center justify-content-center header-brand-link btn btn-lg">
                <i class="bi bi-bag-check"></i>
                <span>Mira nuestras marcas</span>
            </a>
            <small>Has click aquí arriba</small>
        </div>
    </div> --}}
    <div class="nav-scroller mt-3" id="nav-scroller">
        <div class="container d-flex overflow-auto">
            <nav class="nav" aria-label="Brands navigation">
                @foreach ($brands as $brand)
                    <div class="brand-card">
                        <a href="{{ Route('brands', $brand->slug) }}" class="brand-link">
                            {{-- Raro que img-fluid me lo renderice mas feo --}}
                            <img src="{{ Asset('uploads/brands/' . $brand->image_logo) }}"
                                alt="Error al cargar la imagen de la marca {{ $brand->display_name }}" class="">
                        </a>
                    </div>
                @endforeach
            </nav>
        </div>
    </div>
    <div class="container-fluid custom-bg-color p-3">
        <div class="text-center">
            <a href="{{ Route('brands') }}"
                class="d-flex align-items-center justify-content-center header-brand-link btn btn-lg">
                <i class="bi bi-bag-check"></i>
                <span>Mira todas las marcas</span>
            </a>
            <small>Has click aquí arriba</small>
        </div>
    </div>

    {{-- The most selled products --}}
    <div class="container mt-4">
        {{-- <h2 class="mb-4 text-center">Productos Más Vendidos</h2> --}}
        <h1 class="mb-4 text-center custom-text-color">Nuestros productos</h1>
        <div class="row text-center">
            @forelse ($products as $key => $product)
                @if ($key == 7)
                    {{-- old col-md-6 col-sm-12 col-lg-3 --}}
                    <div class="col-sm-12 col-lg-3 mb-4">
                        <div class="card custom-card">
                            <a href="{{ Route('products') }}" class="btn custom-hover-color">
                                <div class="card-body">
                                    <h5 class="card-title">Mira mas productos</h5>
                                    <p class="card-text">Pulsa aqui</p>
                                </div>
                            </a>
                        </div>
                    </div>
                    @break
                @endif
                @if (!$product->draft)
                    <div class="col-6 col-md-4 col-lg-3 mb-4">
                        <div class="card product-card h-100">
                            {{-- Imagen --}}
                            <a href="{{ Route('productDetails', $product->slug) }}">
                                <img src="{{ Asset('uploads/products/' . $product->images->first()->image) }}"
                                    class="card-img-top product-img" alt="{{ $product->display_name }}">
                            </a>

                            <div class="card-body d-flex flex-column">
                                {{-- Nombre --}}
                                <a href="{{ Route('productDetails', $product->slug) }}"
                                    class="text-decoration-none text-dark">
                                    <p class="product-title mb-1">
                                        {{ $product->display_name }}
                                    </p>
                                </a>
                                {{-- Modelo --}}
                                <small class="text-muted mb-2">
                                    {{ $product->model }}
                                </small>

                                @php
                                    $instance = $product->getBestPricedInstance();
                                    $oldPrice = null;
                                    $price = null;

                                    if ($instance && isset($instance->price)) {
                                        if ($instance->offert && isset($instance->offert->discount_price)) {
                                            $oldPrice = number_format($instance->price, 2, '.', ',');
                                            $price = number_format($instance->offert->discount_price, 2, '.', ',');
                                        } else {
                                            $price = number_format($instance->price, 2, '.', ',');
                                        }
                                    }
                                @endphp

                                {{-- Precios --}}
                                <div class="mt-auto">
                                    @if ($oldPrice)
                                        <small class="text-muted text-decoration-line-through d-block">
                                            ${{ $oldPrice }} MXN
                                        </small>
                                    @endif

                                    <span class="product-price">
                                        ${{ $price }} MXN
                                    </span>

                                    <div class="shipping">
                                        Envío gratis
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            @empty
                <h3 class="text-danger text-center mb-5">Hay un problema al mostrar los productos</h3>
            @endforelse
            @if ($productsIndex == 7)
                {{-- old col-md-6 col-sm-12 col-lg-3 --}}
                <div class="col-sm-12 col-lg-3 mb-4">
                    <div class="card custom-card">
                        <a href="{{ Route('products') }}" class="btn custom-hover-color">
                            <div class="card-body">
                                <h5 class="card-title">Mira mas productos</h5>
                                <p class="card-text">Pulsa aqui</p>
                            </div>
                        </a>
                    </div>
                </div>
            @endif
        </div>
    </div>

    {{-- Services --}}
    <hr>
    <div class="container my-5">
        <div class="row align-items-center service-section">
            {{-- TEXTO --}}
            <div class="col-lg-5 mb-4 mb-lg-0">
                <h2 class="service-title">
                    Directorio industrial
                </h2>
                <p class="service-text">
                    Encuentra proveeduría y servicios industriales para tu empresa,
                    proyecto o producción. Conecta con proveedores confiables en un solo lugar.
                </p>
                <div class="service-actions">
                    <a href="{{ Route('services') }}" class="btn btn-main">
                        Ver servicios
                    </a>
                    <a href="{{ Route('showSuscriptions') }}" class="btn btn-outline-secondary ms-2">
                        Promociona tu empresa
                    </a>
                </div>
            </div>
            {{-- SLIDER --}}
            <div class="col-lg-7">
                <div id="services-slider" class="service-slider">
                    @forelse ($sliders->where('iam_identifier_id', 2) as $slider)
                        <div>
                            <img src="{{ asset('uploads/sliders/' . $slider->image) }}" class="img-fluid service-img">
                        </div>

                    @empty
                        <div><img class="img-fluid service-img" src="B1.png" alt="Primera imagen"></div>
                        <div><img class="img-fluid service-img" src="B2.png" alt="Segunda imagen"></div>
                        <div><img class="img-fluid service-img" src="B3.png" alt="Segunda imagen"></div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
    <hr>

    {{-- Category --}}
    @php
        $categories = [
            ['slug' => 'control-industrial', 'name' => 'Control industrial', 'img' => 'control-industrial.png'],
            ['slug' => 'electronica', 'name' => 'Electrónica', 'img' => 'electronica.png'],
            ['slug' => 'hidraulica', 'name' => 'Hidráulica', 'img' => 'hidraulica.png'],
            ['slug' => 'mecanica', 'name' => 'Mecánica', 'img' => 'mecanica.png'],
            ['slug' => 'motores', 'name' => 'Motores', 'img' => 'motores.png'],
            ['slug' => 'neumatica', 'name' => 'Neumática', 'img' => 'neumatica.png'],
        ];
    @endphp
    <div class="container my-5">
        <h2 class="text-center mb-4 category-title">Categorías</h2>

        <div class="category-grid">

            @foreach ($categories as $cat)
                <a href="{{ Route('categories', $cat['slug']) }}" class="category-card">
                    <img src="{{ asset('uploads/categories/' . $cat['img']) }}" alt="{{ $cat['name'] }}">
                    <span>{{ $cat['name'] }}</span>
                </a>
            @endforeach

            {{-- Ver más --}}
            <a href="{{ Route('categories') }}" class="category-card more">
                <i class="bi bi-arrow-right"></i>
                <span>Ver más</span>
            </a>

        </div>
    </div>

    {{-- Space for the contact message --}}
    <div class="container-fluid contact-start p-5">
        <div class="text-center mx-auto">
            <h2>¡Estamos para ti!</h2>
            <p>Si tienes dudas acerca de nuestros productos o sugerencia para mejorar, no dudes en contactarnos con
                nuestro
                correo o teléfono y en breve nos comunicaremos contigo.</p>
        </div>
    </div>

    {{-- Contact info --}}
    <div class="container mt-4">
        <h2 class="p-4 mb-4 text-center custom-text-color">Contacto</h2>
        <div class="row">
            <div class="col-sm-12 col-lg-6 mb-4">
                <div class="contact-info">
                    <h4 class="custom-text-color py-3">Información</h4>
                    <p><i class="bi bi-geo-alt"></i> Av. Pirineos 535-Int 8, Benito Juárez, 76120 Santiago de
                        Querétaro,
                        Qro.
                    </p>
                    <p><i class="bi bi-telephone"></i>
                        +52 442 475 0853</p>
                    <p><i class="bi bi-envelope"></i> contacto@industryallmarket.com</p>
                    <p><i class="bi bi-exclamation-lg"></i> IndustryAllMarket no es distribuidor autorizado o
                        representante
                        de los
                        productos que aparecen en este sitio. Todos los nombres de productos, marcas y logotipos que
                        empleamos son propiedad de sus respectivos dueños. © IndustryAll Market 2026</p>
                </div>
            </div>

            <!-- Mapa -->
            <div class="col-sm-12 col-lg-6 mb-4">
                <div class="row">
                    <iframe
                        src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d29872.328699985042!2d-100.438987!3d20.627182!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85d35a821b320957%3A0xdc27ccc216cdcb2d!2sIndustry%20All%20Market!5e0!3m2!1ses!2smx!4v1702505334488!5m2!1ses!2smx"
                        width="300" height="225" style="border:0;" allowfullscreen="" loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            </div>
        </div>
    </div>
    {{--
    <div class="row">
        <div class="col-6"></div>
        <div class="col-6">
            <script>
                hbspt.forms.create({
                    portalId: "20116730",
                    formId: "ecc70159-7d0d-4a38-9ad4-328596eb0e22"
                });
            </script>
        </div>
    </div>
</div>
--}}

@endsection

@section('custom_script')
    <script>
        $(document).ready(function() {
            $('#dynamic-slider').slick({
                autoplay: true,
                autoplaySpeed: 50000,
                pauseOnHover: false,
            });
            $('#services-slider').slick({
                autoplay: true,
                autoplaySpeed: 5000,
                pauseOnHover: false,
            });
        });
    </script>
@endsection