@extends('layouts.site')
@section('title', $product->name)
@section('content')
    <section class="bg-light-gray py-3">
        <div class="text-center">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb breadcrumb--custom py-0 mb-0 bg-transparent d-inline-flex">
                    <li class="breadcrumb-item"><a href="{{ route('site.') }}">Home</a></li>
                    <li class="breadcrumb-item"><a
                            href="{{ route('site.product.index', ['category' => $product->category]) }}">{{ $product->category->name }}</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">{{ $product->name }}</li>
                </ol>
            </nav>
        </div>
    </section>
    <section>
        <div class="container mt-5">
            <div class="row">
                <div class="col-md-12 col-lg-9 mb-4 mb-md-5 mb-lg-0">
                    <div class="row mb-4">
                        <div class="col-md-5 mb-4 mb-md-0">
                            <div class="swiper main-photo mb-3">
                                <div class="swiper-wrapper">
                                    @foreach($product->getMedia('images') as $media)
                                        <div class="swiper-slide">
                                            <a href="{{ $media->getUrl('medium') }}"
                                               class="glightbox"
                                               data-gallery="product gallery">
                                                <img
                                                    src="{{ $media->getUrl('large') }}"
                                                    class="img-fluid"
                                                    loading="lazy"/>
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="swiper-button-next swiper-button-next--product"></div>
                                <div class="swiper-button-prev swiper-button-prev--product"></div>
                            </div>
                            <div class="swiper thumbs-carousel">
                                <div class="swiper-wrapper">
                                    @foreach($product->getMedia('images') as $media)
                                        <div class="swiper-slide">
                                            <img src="{{ $media->getUrl('medium') }}"
                                                 class="img-fluid"
                                                 loading="lazy"/>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <div class="col-md-7">
                            <div class="product-details">
                                <div class="mb-4">
                                    <h1 class="product__name">{{ $product->name }}</h1>
                                    <div class="font-small text-dark">Cod produs: <span
                                            class="font-weight-semibold">{{ $product->code }}</span>
                                    </div>
                                </div>
                                <div class="py-4 mb-4 border-top border-bottom">
                                    <table class="font-weight-light">
                                        <tbody>
                                        <tr>
                                            <td class="pr-3 pb-2">Valabilitate:</td>
                                            @if($product->stock > 0)
                                                <td class="pb-2">În stoc</td>
                                            @else
                                                <td class="pb-2">Lipsă stoc</td>
                                            @endif
                                        </tr>
                                        <tr>
                                            <td class="pb-2">Categorie:</td>
                                            <td class="pb-2">{{ $product->category->name }}</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div
                                    class="bg-light-gray p-3 d-flex align-items-center justify-content-between font-weight-light mb-4">
                                    <div class="text-uppercase">Brand</div>
                                    <span class="font-small">{{ $product->brand->name }}</span>
                                </div>
                                <div class="d-md-flex justify-content-between border-bottom pb-4 mb-4">
                                    <div class="input-counter d-inline-flex mb-3 mb-md-0 p-2">
                                        <div class="minus-btn"><span class="icon icon-minus"></span></div>
                                        <input type="text" value="1" name="quantity" data-id="0" data-action="add"
                                               size="100" class="cart-item-quantity">
                                        <div class="plus-btn"><span class="icon icon-plus"></span></div>
                                    </div>
                                    <div class="d-flex">
                                        <button class="btn btn-light-blue mr-3 text-primary px-4 py-2 add-to-cart"
                                                data-url="{{ route('site.cart.add') }}"
                                                data-product="{{ $product->id }}">
                                            <span class="icon icon-shopping-cart mr-3"></span> Adaugă în coș
                                        </button>
                                        <button class="btn btn-light-blue text-primary px-3 py-2 add-remove-favorites"
                                                data-url="{{ route('client.account.add-remove-favorites') }}"
                                                data-product_id="{{ $product->id }}">
                                            <span class="icon icon-heart"></span>
                                        </button>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <a href="#"
                                       class="btn btn-facebook-blue d-inline-flex align-items-center px-4 py-2">
                                        <span class="icon icon-facebook-solid mr-2"></span>
                                        <span class="font-montserrat font-small font-weight-medium">Distribuie pe Facebook</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bg-light p-4 p-md-5">
                        <div class="additional-info">
                            <div class="info-title mb-4 mb-lg-5">Informații</div>
                            <div>
                                {{ $product->description }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-lg-3">
                    <div class="row align-items-center">
                        <div class="col-md-7 col-lg-12">
                            <div class="text-gray mb-2">Cel mai vândut</div>
                            <div class="swiper best-sale__swiper pb-5 mb-4">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <div class="product">
                                            <div class="sale-badge">Hot</div>
                                            <div class="product__image">
                                                <img src="{{ asset('assets/site/img/insecticid-aerosol.png') }}" alt=""
                                                     class="img-fluid">
                                                <div class="product__options">
                                                    <button class="btn add-to-favorit p-0 mr-1">
                                                        <span class="icon icon-heart"></span>
                                                    </button>
                                                    <a href="insecticid-aerosol.php" class="ml-1">
                                                        <span class="icon icon-shopping-cart"></span>
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="border-top text-center mx-2 mx-md-4 py-3">
                                                <div class="product__name mb-3">Insecticid aerosol pentru uz domestic și
                                                    civil
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="product">
                                            <div class="sale-badge">Redus</div>
                                            <div class="product__image">
                                                <img src="{{ asset('assets/site/img/pachet-pulverizator-spray.jpg') }}"
                                                     alt="" class="img-fluid">
                                                <div class="product__options">
                                                    <button class="btn add-to-favorit p-0 mr-1">
                                                        <span class="icon icon-heart"></span>
                                                    </button>
                                                    <a href="pachet-pulverizator-insecticid.php" class="ml-1">
                                                        <span class="icon icon-shopping-cart"></span>
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="border-top text-center mx-2 mx-md-4 py-3">
                                                <div class="product__name mb-3">Pulverizator automatic + Insecticid
                                                    aerosol
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-pagination bestSale-pagination"></div>
                            </div>
                        </div>
                        <div class="col-md-5 col-lg-12">
                            <a href="pachet-pulverizator-insecticid.php">
                                <div class="banner-product p-3">
                                    <div class="font-weight-bold mt-3 text-center">Pulverizator automatic + Insecticid
                                        aerosol
                                    </div>
                                    <img src="{{ asset('assets/site/img/pachet-pulverizator-spray.jpg') }}" alt=""
                                         class="img-fluid">
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class="container">
            <div class="row mb-4 mb-xl-5">
                <div class="col-md-12">
                    <div class="text-center">
                        <div class="title">Produse asemănătoare</div>
                    </div>
                </div>
            </div>
            <div class="row">
                @foreach($similarProducts as $similarProduct)

                    <div class="col-6 col-md-4 col-lg-3 product-holder">
                        <div class="product">
                            <div class="product__image">
                                <img src="{{ asset('assets/site/img/insecticid-aerosol.png') }}" alt=""
                                     class="img-fluid">
                                <div class="product__options">
                                    {{--                                    <button class="btn add-to-favorit p-0 mr-1">--}}
                                    {{--                                        <span class="icon icon-heart"></span>--}}
                                    {{--                                    </button>--}}
                                    <a href="{{ route('site.product.show', $similarProduct) }}" class="ml-1">
                                        <span class="icon icon-plus"></span>
                                    </a>
                                </div>
                            </div>
                            <div class="border-top text-center mx-2 mx-md-4 py-3">
                                <div class="product__name mb-3">{{ $similarProduct->name }}</div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endsection