@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>
    <style>
        #nav-scroller {
            overflow-x: auto;
            white-space: nowrap;
            padding: 10px 0;
            height: 8rem !important;
        }

        .brand-card {
            display: inline-block;
            text-align: center;
            margin: 0 10px;
            width: 120px;
        }

        .brand-link {
            text-decoration: none;
            color: inherit;
        }

        .brand-link img {
            width: 100px;
            /* Ancho fijo */
            height: 80px;
            /* Alto fijo */
            object-fit: contain;
            /* Recorta la imagen para que llene el espacio sin deformarse */
            border-radius: 8px;
            /* Opcional: bordes redondeados para un mejor estilo */
            padding: 5px;
        }

        .brand-name {
            font-size: 0.9em;
            margin-top: 5px;
        }
    </style>
@endsection

@section('content')
    {{-- Carrusel --}}
    <div class="container">
        <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="Tercera imagen"></div>
            @endif
        </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">Algunos de 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="custom-md-4 col-md-4 custom-sm-4 custom-xs-6 col-lg-3 mb-4 @if ($key > 5) d-none d-sm-block @endif">
                        <div class="card">
                            <a href="{{ Route('productDetails', $product->slug) }}">
                                <img src="{{ Asset('uploads/products/' . $product->images->first()->image) }}"
                                    class="card-img-top img-fluid max-image-card" alt="Error al cargar el producto"
                                    width="100%" height="100%">
                            </a>
                            <div class="card-body">
                                <a class="text-decoration-none text-black"
                                    href="{{ Route('productDetails', $product->slug) }}">
                                    <h1 class="card-title fw-bold h5 d-none d-lg-block">{{ $product->display_name }}</h1>
                                    <h2 class="card-subtitle h5 fw-bold">{{ $product->model }}</h2>
                                    @php
                                        $instance = $product->getBestPricedInstance();
                                        $priceText = $product->price;
                                        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, '.', ',');
                                                $priceText =
                                                    '<span class="text-decoration-line-through">$' .
                                                    $oldPrice .
                                                    ' MXN</span> <span class="custom-text-color h5">$' .
                                                    $price .
                                                    ' MXN</span>';
                                            } else {
                                                $price = number_format($instance->price, 2, '.', ',');
                                                $priceText = '<span class="h5">$' . $price . ' MXN</span>';
                                            }
                                        }
                                    @endphp

                                    <p class="mt-3 card-text">{!! $priceText !!}</p>
                                </a>
                            </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-xl">
        <div id="title" class="text-center">
            <h1 class="custom-text-color">Directorio industrial</h1>
        </div>
        <div id="section1" class="row mt-4">
            <div class="col-lg-6 col-sm-12">
                <h3 class="custom-text-color">
                    <strong>Servicios</strong>
                </h3>
                <p style="text-align: justify;">
                    Encuentra proveeduría y servicios industriales para las necesidades de tu empresa,
                    proyecto o producción! Industryall Market el carrito de la industria
                </p>
                <div class="text-center">
                    <a href="{{ Route('services') }}"
                        class="d-flex align-items-center justify-content-center btn custom-bg-color w-50 mx-auto">
                        <i class="bi bi-check-circle"></i>
                        <span>Mira todos los servicios</span>
                    </a>
                    <hr>
                    {{-- validar --}}
                    <div id="promotion" class="alert alert-info d-flex justify-content-between align-items-center"
                        role="alert">
                        <div>
                            <i class="bi bi-megaphone-fill me-2"></i>
                            ¿Quieres promocionar tu empresa con nosotros?
                        </div>
                        <a href="{{ Route('showSuscriptions') }}" class="btn custom-bg-color btn-sm">Suscríbete con
                            nosotros</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 d-none d-lg-block">
                <div id="services-slider">
                    @if ($sliders->where('iam_identifier_id', 2)->count() > 0)
                        @foreach ($sliders->where('iam_identifier_id', 2) 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>
        </div>
    </div>
    <hr>

    {{-- Category --}}
    <div class="container mt-4">
        <h2 class="mb-5 mt-5 text-center custom-text-color">Categorías</h2>

        <div class="row">
            {{--
        @forelse ($categories as $key => $category)
            @if ($key == 11)
                <div class="col-md-2 mb-4">
                    <div class="category-item d-flex flex-column align-items-center justify-content-center">
                        <a href="{{ Route('categories') }}" class="btn btn-lg custom-hover-color">
                            <i class="bi bi-arrow-right"></i>
                            <p class="category-name mt-2">Ver mas...</p>
                        </a>
                    </div>
                </div>
                @break
            @endif
            <div class="col-md-2 mb-4 @if ($key > 2) d-none d-sm-block @endif">
                <div class="category-item d-flex flex-column align-items-center justify-content-center">
                    <a href="{{ Route('categories', $category->slug) }}" class="btn btn-lg custom-hover-color">
                        <img src="{{ Asset('uploads/categories/' . $category->category_image) }}"
                            alt="{{ $category->slug }}" class="img-fluid" width="30%" height="30%">
                        <p class="category-name mt-2">{{ $category->display_name }}</p>
                    </a>
                </div>
            </div>
        @empty
            <div class="col-12 text-center">
                <p class="text-danger">Sin categorias</p>
            </div>
        @endforelse
        --}}
            {{-- Por el momento se dejara las categorias que aparecen en el index estaticas hasta ver si 
            realmente es rentable colocar las imagenes.
        --}}
            <div class="col-md-2 mb-4">
                <div class="category-item d-flex flex-column align-items-center justify-content-center">
                    <a href="{{ Route('categories', 'control-industrial') }}" class="btn btn-lg custom-hover-color">
                        <img src="{{ Asset('uploads/categories/control-industrial.png') }}" alt="control-industrial"
                            class="img-fluid" width="30%" height="30%">
                        <p class="category-name mt-2">Control industrial</p>
                    </a>
                </div>
            </div>
            <div class="col-md-2 mb-4">
                <div class="category-item d-flex flex-column align-items-center justify-content-center">
                    <a href="{{ Route('categories', 'electronica') }}" class="btn btn-lg custom-hover-color">
                        <img src="{{ Asset('uploads/categories/electronica.png') }}" alt="electronica" class="img-fluid"
                            width="30%" height="30%">
                        <p class="category-name mt-2">Electrónica</p>
                    </a>
                </div>
            </div>
            <div class="col-md-2 mb-4">
                <div class="category-item d-flex flex-column align-items-center justify-content-center">
                    <a href="{{ Route('categories', 'hidraulica') }}" class="btn btn-lg custom-hover-color">
                        <img src="{{ Asset('uploads/categories/hidraulica.png') }}" alt="hidraulica" class="img-fluid"
                            width="30%" height="30%">
                        <p class="category-name mt-2">Hidráulica</p>
                    </a>
                </div>
            </div>
            <div class="col-md-2 mb-4">
                <div class="category-item d-flex flex-column align-items-center justify-content-center">
                    <a href="{{ Route('categories', 'mecanica') }}" class="btn btn-lg custom-hover-color">
                        <img src="{{ Asset('uploads/categories/mecanica.png') }}" alt="mecanica" class="img-fluid"
                            width="30%" height="30%">
                        <p class="category-name mt-2">Mecánica</p>
                    </a>
                </div>
            </div>
            <div class="col-md-2 mb-4 d-none d-sm-block">
                <div class="category-item d-flex flex-column align-items-center justify-content-center">
                    <a href="{{ Route('categories', 'motores') }}" class="btn btn-lg custom-hover-color">
                        <img src="{{ Asset('uploads/categories/motores.png') }}" alt="motores" class="img-fluid"
                            width="30%" height="30%">
                        <p class="category-name mt-2">Motores</p>
                    </a>
                </div>
            </div>
            <div class="col-md-2 mb-4 d-none d-sm-block">
                <div class="category-item d-flex flex-column align-items-center justify-content-center">
                    <a href="{{ Route('categories', 'neumatica') }}" class="btn btn-lg custom-hover-color">
                        <img src="{{ Asset('uploads/categories/neumatica.png') }}" alt="neumatica" class="img-fluid"
                            width="30%" height="30%">
                        <p class="category-name mt-2">Neumática</p>
                    </a>
                </div>
            </div>
            <div class="col-md-2 mb-4 d-none d-sm-block">
                <div class="category-item d-flex flex-column align-items-center justify-content-center">
                    <a href="{{ Route('categories', 'productos-digitales') }}" class="btn btn-lg custom-hover-color">
                        <img src="{{ Asset('uploads/categories/productos-digitales.png') }}" alt="productos-digitales"
                            class="img-fluid" width="30%" height="30%">
                        <p class="category-name mt-2">Productos digitales</p>
                    </a>
                </div>
            </div>
            <div class="col-md-2 mb-4 d-none d-sm-block">
                <div class="category-item d-flex flex-column align-items-center justify-content-center">
                    <a href="{{ Route('categories', 'productos-im') }}" class="btn btn-lg custom-hover-color">
                        <img src="{{ Asset('uploads/categories/productos-im.png') }}" alt="productos-im"
                            class="img-fluid" width="30%" height="30%">
                        <p class="category-name mt-2">Productos IM</p>
                    </a>
                </div>
            </div>
            <div class="col-md-2 mb-4 d-none d-sm-block">
                <div class="category-item d-flex flex-column align-items-center justify-content-center">
                    <a href="{{ Route('categories', 'sensores') }}" class="btn btn-lg custom-hover-color">
                        <img src="{{ Asset('uploads/categories/sensores.png') }}" alt="sensores" class="img-fluid"
                            width="30%" height="30%">
                        <p class="category-name mt-2">Sensores</p>
                    </a>
                </div>
            </div>
            <div class="col-md-2 mb-4 d-none d-sm-block">
                <div class="category-item d-flex flex-column align-items-center justify-content-center">
                    <a href="{{ Route('categories', 'hmi-human-machine-interface') }}"
                        class="btn btn-lg custom-hover-color">
                        <img src="{{ Asset('uploads/categories/hmi.png') }}" alt="hmi-human-machine-interface"
                            class="img-fluid" width="30%" height="30%">
                        <p class="category-name mt-2">HMI</p>
                    </a>
                </div>
            </div>
            <div class="col-md-2 mb-4 d-none d-sm-block">
                <div class="category-item d-flex flex-column align-items-center justify-content-center">
                    <a href="{{ Route('categories', 'plc') }}" class="btn btn-lg custom-hover-color">
                        <img src="{{ Asset('uploads/categories/PLC.png') }}" alt="plc" class="img-fluid"
                            width="30%" height="30%">
                        <p class="category-name mt-2">PLC</p>
                    </a>
                </div>
            </div>
            <div class="col-md-2 mb-4">
                <div class="category-item d-flex flex-column align-items-center justify-content-center">
                    <a href="{{ Route('categories') }}" class="btn btn-lg custom-hover-color">
                        <i class="bi bi-arrow-right"></i>
                        <p class="category-name mt-2">Ver mas...</p>
                    </a>
                </div>
            </div>
        </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 104 9158</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: 3000,
                    pauseOnHover: false,
                });
                $('#services-slider').slick({
                    autoplay: true,
                    autoplaySpeed: 3000,
                    pauseOnHover: false,
                });
            });
        </script>
    @endsection