@extends('layouts.app')

@section('og_title', $product->display_name)
@section('og_description', Str::limit(strip_tags($product->description), 150))
@section('og_image', asset('uploads/products/' . $product->images[0]->image))
@section('og_type', 'product')

@section('links')
    @vite('resources/css/productDetails.css')
@endsection

@section('content')
    <div class="container">
        <div class="row mt-4">
            <div class="col-sm-12 col-lg-6">
                {{-- Product slider --}}
                <section class="row">
                    {{--
                        Notas: Miniaturas: 150-300px Principal: 800-1200px
                    --}}
                    {{-- Thumbs --}}
                    <div class="col-md-2 d-none d-md-block">
                        <div class="swiper thumbsSwiper">
                            <div class="swiper-wrapper">
                                @foreach ($product->images as $image)
                                    <div class="swiper-slide">
                                        <img src="{{ asset('uploads/products/' . $image->image) }}" alt="Producto">
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    {{-- Main Image --}}
                    <div class="col-md-10">
                        <div class="swiper mainSwiper">
                            <div class="swiper-wrapper">
                                @foreach ($product->images as $image)
                                    <div class="swiper-slide">
                                        <img src="{{ asset('uploads/products/' . $image->image) }}" alt="Producto"
                                            data-zoom="{{ Asset('uploads/products/' . $image->image) }}" class="main-image">
                                    </div>
                                @endforeach
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                </section>
                <hr>
                <h1 class="h6">Modelo: {{ $product->model }}</h1>
                <p>Categorías:
                    @if ($product->categories->count() > 0 || $product->subcategories->count() > 0)
                        @foreach ($product->categories as $category)
                            <a href="{{ Route('categories', $category->slug) }}">{{ $category->display_name }}</a>
                        @endforeach
                        @foreach ($product->subcategories as $subcategory)
                            <a href="{{ Route('categories', $subcategory->slug) }}">{{ $subcategory->display_name }}</a>
                        @endforeach
                    @else
                        <p>--</p>
                    @endif
                </p>
                <p>
                    Marca: <a href="{{ Route('brands', $product->brand->slug) }}">{{ $product->brand->display_name }}</a>
                </p>
                @isset($product->vendorUser)
                    <a href="{{ Route('vendorDetails', $product->vendorUser->slug) }}" class="custom-text-color">Ver mas
                        productos de este vendedor</a>
                @endisset
                @if (Auth::guard('admin')->check())
                    <p>
                        @if ($product->inventory->racks->count() > 0)
                            Ubicacion del producto en el inventario:
                            <ul>
                                @foreach ($product->inventory->racks->unique('id') as $rack)
                                    <li>
                                        {{ $rack->location }}
                                        @if ($rack->rackBins->count() > 0)
                                            <ul>
                                                @foreach ($rack->rackBins()->where('iam_inventory_id', $product->inventory->id)->get() as $bin)
                                                    <li>{{ $bin->bin_name }}</li>
                                                @endforeach
                                            </ul>
                                        @endif
                                    </li>
                                @endforeach
                            </ul>
                        @else
                            <span class="text-danger">No está ubicado el producto en el inventario</span>
                        @endif
                        <br>
                    </p>
                @endif
                <hr>
                @if ($product->video_link)
                    <div class="row justify-content-center mt-3">
                        <h5 class="text-center custom-text-color mb-3">Video del producto</h5>
                        <div class="col-auto text-center ratio ratio-16x9">
                            <iframe class="embed-responsive-item" src="{{ $product->video_link }}"
                                title="YouTube video player" frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                        </div>
                    </div>
                    <hr>
                @endif
                @if ($product->datasheet)
                    <div class="row justify-content-center mt-4">
                        <div class="col-auto text-center">
                            <a href="
                            @if (filter_var($product->datasheet, FILTER_VALIDATE_URL)) {{ $product->datasheet }}
                            @else
                                {{ Asset('uploads/datasheet/' . $product->datasheet) }} @endif"
                                target="_BLANK">
                                <img src="{{ asset('assets/download.png') }}" alt="Descargar datasheet" width="50%">
                            </a>
                        </div>
                    </div>
                    <div class="row justify-content-center">
                        <div class="col-auto">
                            <p>Presiona para ver la ficha técnica del producto</p>
                        </div>
                    </div>
                @endif
            </div>
            <div class="col-sm-12 col-lg-6">
                <h1 class="custom-text-color h2">{{ $product->display_name }}</h1>
                <p>{!! $product->description !!}</p>
                <hr>
                <span class="fw-bold mb-3">*Precios incluye IVA</span>
                @if ($product->inventory->reserve)
                    <p class="text-success">{{ $product->inventory->stock == 0 ? '*Se puede reservar ' : '' }}(Tiempo de
                        entrega: {{ $product->delivery_time }} dias aproximado)</p>
                @endif

                <div class="buttons">
                    @if ($product->instances->count() > 0)
                        <div class="row">
                            <div class="col-sm-12 col-lg-12">
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                @if ($product->type->id == 1 && !$product->iam_vendor_id)
                                                    <th>Ubicación</th>
                                                @endif
                                                <th>Nivel</th>
                                                <th>Precio</th>
                                                <th>Stock</th>
                                                <th>*</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($product->instances->filter(fn($instance) => $instance->store->show) as $instance)
                                                <tr>
                                                    @if ($product->type->id == 1 && !$product->iam_vendor_id)
                                                        <td><a href="{{ Route('stores') }}" target="__blank">
                                                                {{ $instance->store->store_name }}
                                                            </a>
                                                            @if ($instance->free_shipping)
                                                                <p class="text-info">Disponible envío gratis</p>
                                                            @endif
                                                        </td>
                                                    @endif
                                                    <td>
                                                        @foreach ($instance->attributes as $attrib)
                                                            {{ $attrib->display_name }}
                                                        @endforeach
                                                    </td>
                                                    <td>
                                                        @if ($instance->offert)
                                                            <span class="text-decoration-line-through mr-2">
                                                                ${{ number_format($instance->price, 2, '.', ',') }} MXN
                                                            </span>
                                                            <br>
                                                            <span class="custom-text-color h5">
                                                                ${{ number_format($instance->offert->discount_price, 2, '.', ',') }}
                                                                MXN
                                                            </span>
                                                        @else
                                                            ${{ number_format($instance->price ?? $product->price, 2, '.', ',') }}
                                                            MXN
                                                        @endif
                                                    </td>
                                                    <td>
                                                        {{ $instance->stock != 0 ? $instance->stock : 'Sin stock disponible' }}
                                                    </td>
                                                    <td>
                                                        @if ($instance->stock != 0)
                                                            <form action="{{ Route('addProductToCart') }}"
                                                                class="addTocart" method="POST">
                                                                @csrf
                                                                <input type="hidden" name="quantity" value=1>
                                                                <input type="hidden" name="slug"
                                                                    value="{{ $instance->slug }}">
                                                                <input type="hidden" name="productSlug"
                                                                    value="{{ $product->slug }}">
                                                                <button type="submit"
                                                                    class="btn custom-bg-color custom-hover-color mt-1"
                                                                    style="width: 100%;"><i class="bi bi-cart-fill"></i>
                                                                    Agregar
                                                                    al carrito</button>
                                                            </form>
                                                        @else
                                                            <button type="button"
                                                                class="btn custom-bg-color custom-hover-color mt-1 disabled"
                                                                style="width: 100%;">Sin existencias</button>
                                                        @endif
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            {{--
                            @auth
                                <div class="col-sm-12 col-lg-6">
                                    <a href="#" class="btn btn-warning mt-1" style="width: 100%;">Agregar a la lista de
                                        deseos</a>
                                </div>
                            @endauth
                            --}}
                        </div>
                    @else
                        <p>Pregunte por el producto con nosotros</p>
                    @endif
                </div>

                <div class="attribute-table mt-4">
                    <strong>
                        Cuadro de niveles IM
                    </strong>
                    <div class="">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th scope="col">Nombre</th>
                                    <th scope="col">Descripcion</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $attributes = collect($product->instances)
                                        ->map(fn($instance) => $instance->attributes->first())
                                        ->unique('display_name')
                                        ->sortBy('display_name');
                                @endphp
                                @foreach ($attributes as $attribute)
                                    <tr>
                                        <td scope="row">{{ $attribute->display_name }}</td>
                                        <td>{{ $attribute->description }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        @if ($referProducts->count() > 0)
            <div class="row mt-4">
                <div class="col-sm-12 col-lg-12">
                    <div class="container-fluid border-top border-bottom p-2">
                        <div class="text-center mx-auto mt-2">
                            <h3 class="custom-text-color">Productos que podrian interesarte</h3>
                        </div>
                    </div>
                    <div class="row text-center mt-3">
                        @forelse ($referProducts as $key => $product)
                            @if (!$product->draft)
                                <div class="custom-md-4 col-md-4 custom-sm-4 custom-xs-6 col-lg-3 mb-4">
                                    <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>
                                                <h1 class="card-subtitle h5 fw-bold">{{ $product->model }}</h1>
                                            </a>
                                            @if ($product->offert)
                                                <small
                                                    class="text-decoration-line-through">${{ number_format($product->price, 2, '.', ',') }}</small>
                                                <p class="custom-text-color">
                                                    ${{ number_format($product->offert->discount_price, 2, '.', ',') }}
                                                    <small>MXN</small>
                                                </p>
                                            @else
                                                <p>${{ number_format($product->price, 2, '.', ',') }}
                                                    <small>MXN</small>
                                                </p>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @empty
                            <h3 class="text-danger text-center mb-5">Hay un problema al mostrar los productos</h3>
                        @endforelse
                    </div>
                </div>
            </div>
        @endif
    </div>
@endsection

@section('custom_script')

    <script>
        const isMobile = window.matchMedia("(max-width: 768px)").matches;
        let zoomInstance = null;
        let driftInstance = null;

        const thumbs = new Swiper(".thumbsSwiper", {
            spaceBetween: 10,
            slidesPerView: 4,
            direction: "vertical",
            watchSlidesProgress: true,
        });
        const main = new Swiper(".mainSwiper", {
            spaceBetween: 10,
            thumbs: {
                swiper: thumbs,
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            breakpoints: {
                768: {
                    pagination: false,
                }
            },
        });

        mediumZoom('.main-image', {
            margin: 20,
            background: 'rgba(0,0,0,0.7)',
        });
    </script>
@endsection