@extends('layouts.base')

@section('content')
<!-- Page Title-->
<div class="page-title-overlap bg-dark pt-4">
    <div class="container d-lg-flex justify-content-between py-2 py-lg-3">
        <div class="order-lg-1 pe-lg-4 text-center text-lg-start">
            <h1 class="h3 text-light mb-0">{{$product->name}}</h1>
        </div>
    </div>
</div>

<div class="container">
    <!-- Gallery + details-->
    <div class="bg-light shadow-lg rounded-3 px-4 py-3 mb-5">
        <div class="px-lg-3">
            <div class="row">
                <!-- Product gallery-->
                <div class="col-lg-7 pe-lg-0 pt-lg-4">
                    <img src="{{Storage::url($product->featured)}}" alt="Product">
                </div>
                <!-- Product details-->
                <div class="col-lg-5 pt-4 pt-lg-0">

                    <x-product.product-details :product="$product"/>

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

<!-- Product carousel (You may also like)-->
@if (count($relatedProducts))
<div class="container py-5 my-md-3">
    <h2 class="h3 text-center pb-4">Productos Relacionados</h2>
    <div class="tns-carousel pt-3">
        <div class="tns-carousel-inner">
        @foreach ($relatedProducts as $product)
            <div class="card product-card card-static">
                <a href="/producto/{{$product->id}}" class="d-block bg-white py-4 py-sm-5 px-2">
                    <img src="{{Storage::url($product->featured)}}" class="d-block mx-auto" style="width: 165px;" alt="Alt text">
                </a>
                <div class="card-body py-2">
                    @auth
                        <a class="product-meta d-block fs-xs pb-1" href="#">stock: {{$product->netsuite_stock}}</a>
                    @endauth
                    <h3 class="product-title fs-sm">
                        <a href="#">{{$product->name}}</a>
                    </h3>
                    @auth
                    <div class="d-flex justify-content-between">
                        <div class="product-price text-accent">
                            <x-amount-formatter :amount="$product->price" />
                        </div>
                    </div>
                    @endauth
                </div>
            </div>
        @endforeach
        </div>
    </div>
</div>
@endif

@include('partials.select-quantity-by-location')

@endsection

@section('scripts')

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Tiny Slider:
    var slider = tns({
        container: '.tns-carousel-inner',
        nav: false, // Desactiva los puntos de navegación inferiores
        controls: true, // Desactiva los botones de anterior/siguiente
        mouseDrag: true,
        autoplay: true, // Activa el autoplay
        autoplayButtonOutput: false,
        autoplayTimeout: 3000, // Establece el intervalo de autoplay a 4000ms (4 segundos)
        loop: true, // Permite que el slider se repita infinitamente
        responsive: {
            "0": {"items": 1},
            "360": {"items": 2},
            "600": {"items": 3},
            "991": {"items": 4},
            "1200": {"items": 4} // A partir de 1200px, muestra 4 elementos
        },
        controlsText: ['Anterior', 'Siguiente'] // Textos personalizados para los botones de control
    });

    document.querySelector('[data-controls="prev"]').innerHTML = '<i class="bi bi-chevron-left"></i>'
    document.querySelector('[data-controls="next"]').innerHTML = '<i class="bi bi-chevron-right"></i>'
})
</script>

@if (session('message'))
<script>
    Swal.fire({
        position: "center",
        icon: "{{ session('icon') }}",
        title: "{{ session('message') }}",
        showConfirmButton: false,
        timer: 2000,
    });
</script>
@endif

@endsection