@extends('layouts.app')

@section('meta-title'){{ $product->seo_title }} @endsection
@section('meta-keywords'){{ $product->seo_keywords }} @endsection
@section('meta-description'){{ $product->seo_description }} @endsection
@section('meta-image'){{ $product->getFirstMediaUrl('seo_image', 'thumbnail') }} @endsection

@section('content')

    <section id="szakacskonyv" class="vasarlas bg-one c-gray ptb-50">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-6">
                    <div class="title-h2 t-border b-border text-center">
                        <h1>{{ $product->name }}</h1>
                    </div>
                </div>
            </div>
        </div>
    </section>

        @if($product->id == 1)
            <section id="szakacskonyv" class="vasarlas bg-one c-gray ptb-50">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 r-border">
                            @if($product->getFirstMediaUrl('images', 'thumbnail'))
                                <img src="{{ $product->getFirstMediaUrl('images', 'thumbnail') }}" class="img-fluid" alt="{{ $product->name }}" title="{{ $product->name }}" loading="lazy">
                            @endif
                        </div>
                        <div class="col-md-6">
                            <div class="product-subtitle">
                                <p>Fehér Diéta</p>
                                <span>szakácskönyv</span>
                            </div>
                            <div class="product-title">
                                <h2 class="t-border b-border">
                                    {{ $product->name }}
                                    <input class="hidden-trigger" id="toogle1" type="checkbox" data-toggle="collapse" href="#product1" role="button" aria-expanded="false" aria-controls="product1">
                                    <label class="circle" for="toogle1">
                                        <img src="{{ url('assets/images/bovebben.png') }}" alt="{{ $product->name }} bővebben" title="{{ $product->name }} bővebben" />
                                    </label>
                                </h2>
                                <div class="collapse show" id="product1">
                                    <div class="collapse-content">
                                        {!! $product->description !!}
                                    </div>
                                </div>
                            </div>
                            <div class="product-price pt-70">
                                Ár: <span class="c-black">{{ \App\Utils::priceForHumans($product->price) }}</span>
                            </div>
                            <div class="product-shipping-cost">
                                Szállítási költség: <span class="c-black">{{ \App\Utils::priceForHumans($product->shipping_cost) }}</span>
                            </div>
                            <div class="product-unit mb-20">
                                Mennyiség: <span class="c-black">{{ $product->unit }}</span>
                            </div>
                            <div class="row pb-100">
                                <div class="col-lg-4">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <button class="btn btn-black minus-btn" data-product-id="{{ $product->id }}">-</button>
                                        </div>
                                        <input type="text" step="1" min="1" max="9" value="1" id="quantity-{{ $product->id }}" class="shop-quantity-field"/>
                                        <div class="input-group-append">
                                            <button class="btn btn-black plus-btn" data-product-id="{{ $product->id }}">+</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-8">
                                    <button class="btn btn-orange add-to-cart" data-id="{{ $product->id }}">
                                        {{ __('Kosárba teszem') }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @elseif($product->id == 2)
            <section id="dental-business-csomag" class="vasarlas bg-two c-gray ptb-50">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 r-border">
                            @if($product->getFirstMediaUrl('images', 'thumbnail'))
                                <img src="{{ $product->getFirstMediaUrl('images', 'thumbnail') }}" class="img-fluid" alt="{{ $product->name }}" title="{{ $product->name }}" loading="lazy">
                            @endif
                        </div>
                        <div class="col-md-6">
                            <div class="product-info">
                                <img src="{{ url('assets/images/alert.png') }}" alt="Fogrovosoknak, viszonteladóknak" title="Fogrovosoknak, viszonteladóknak"> Fogrovosoknak, viszonteladóknak
                            </div>
                            <div class="product-subtitle">
                                <p>Fehér Diéta</p>
                                <span>szakácskönyv csomag <br>fogorvosoknak</span>
                            </div>
                            <div class="product-title">
                                <h2 class="t-border b-border">
                                    {{ $product->name }}
                                    <input class="hidden-trigger" id="toogle2" type="checkbox" data-toggle="collapse" href="#product2" role="button" aria-expanded="false" aria-controls="product2">
                                    <label class="circle" for="toogle2">
                                        <img src="{{ url('assets/images/bovebben.png') }}" alt="{{ $product->name }} bővebben" title="{{ $product->name }} bővebben" />
                                    </label>
                                </h2>
                                <div class="collapse show" id="product2">
                                    <div class="collapse-content">
                                        {!! $product->description !!}
                                    </div>
                                </div>
                            </div>
                            <div class="product-info2">
                                - minimum 10 db szakácskönyv rendelése esetén
                            </div>
                            <div class="product-price pt-70">
                                Ár: <span class="c-black">{{ \App\Utils::priceForHumans($product->price) }} / csomag - (10 db szakácskönyv /
                        csomag)</span>
                            </div>
                            <div class="product-shipping-cost">
                                Szállítási költség: <span class="c-black">{{ \App\Utils::priceForHumans($product->shipping_cost) }} {{--/ 1. csomag + 160 Ft
                        minden további csomag esetén--}}</span>
                            </div>
                            <div class="product-unit mb-20">
                                Mennyiség: <span class="c-black">{{ $product->unit }} - (10 db szakácskönyv / csomag)</span>
                            </div>
                            <div class="row pb-100">
                                <div class="col-lg-4">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <button class="btn btn-black minus-btn" data-product-id="{{ $product->id }}">-</button>
                                        </div>
                                        <input type="text" step="1" min="1" max="9" value="1" id="quantity-{{ $product->id }}" class="shop-quantity-field" />
                                        <div class="input-group-append">
                                            <button class="btn btn-black plus-btn" data-product-id="{{ $product->id }}">+</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-8">
                                    <button class="btn btn-orange add-to-cart" data-id="{{ $product->id }}">
                                        {{ __('Kosárba teszem') }}
                                    </button>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </section>
        @elseif($product->id == 3)
            <section id="extra-dental-business-csomag" class="vasarlas bg-one c-gray ptb-50">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 r-border">
                            @if($product->getFirstMediaUrl('images', 'thumbnail'))
                                <img src="{{ $product->getFirstMediaUrl('images', 'thumbnail') }}" class="img-fluid" alt="{{ $product->name }}" title="{{ $product->name }}" loading="lazy">
                            @endif
                        </div>
                        <div class="col-md-6">
                            <div class="product-info">
                                <img src="{{ url('assets/images/alert.png') }}" alt="Fogrovosoknak, viszonteladóknak" title="Fogrovosoknak, viszonteladóknak"> Fogrovosoknak, viszonteladóknak
                            </div>
                            <div class="product-subtitle">
                                <p>Fehér Diéta</p>
                                <span>szakácskönyv csomag <br>fogorvosoknak</span>
                            </div>
                            <div class="product-title">
                                <h2 class="t-border b-border">
                                    {{ $product->name }}
                                    <input class="hidden-trigger" id="toogle3" type="checkbox" data-toggle="collapse" href="#product3" role="button" aria-expanded="false" aria-controls="product3">
                                    <label class="circle" for="toogle3">
                                        <img src="{{ url('assets/images/bovebben.png') }}" alt="{{ $product->name }} bővebben" title="{{ $product->name }} bővebben" />
                                    </label>
                                </h2>
                                <div class="collapse show" id="product3">
                                    <div class="collapse-content">
                                        {!! $product->description !!}
                                    </div>
                                </div>
                            </div>
                            <div class="product-info2">
                                - minimum 100 db, azaz 10 csomag szakácskönyv rendelése esetén
                            </div>
                            <div class="product-price pt-70">
                                Ár: <span class="c-black">{{ \App\Utils::priceForHumans($product->price) }} / csomag - (10 db szakácskönyv /
                        csomag)</span>
                            </div>
                            <div class="product-shipping-cost">
                                Szállítási költség: <span class="c-black">{{ \App\Utils::priceForHumans($product->shipping_cost) }}</span>
                            </div>
                            <div class="product-unit mb-20">
                                Mennyiség: <span class="c-black">{{ $product->unit }} - (10 db szakácskönyv / csomag)</span>
                            </div>
                            <div class="row pb-100">
                                <div class="col-lg-4">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <button class="btn btn-black minus-btn" data-product-id="{{ $product->id }}">-</button>
                                        </div>
                                        <input type="text" step="1" min="10" value="10" max="9999" id="quantity-{{ $product->id }}" class="shop-quantity-field" />
                                        <div class="input-group-append">
                                            <button class="btn btn-black plus-btn" data-product-id="{{ $product->id }}">+</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-8">
                                    <button class="btn btn-orange add-to-cart" data-id="{{ $product->id }}">
                                        {{ __('Kosárba teszem') }}
                                    </button>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </section>
        @else
            <section id="products-{{ $product->id }}" class="vasarlas bg-two c-gray ptb-50">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 r-border">
                            @if($product->getFirstMediaUrl('images', 'thumbnail'))
                                <img src="{{ $product->getFirstMediaUrl('images', 'thumbnail') }}" class="img-fluid" alt="{{ $product->name }}" title="{{ $product->name }}" loading="lazy">
                            @endif
                        </div>
                        <div class="col-md-6">
                            <div class="product-subtitle">
                                <p>Fehér Diéta</p>
                                <span>szakácskönyv</span>
                            </div>
                            <div class="product-title">
                                <h2 class="t-border b-border">
                                    {{ $product->name }}
                                    <input class="hidden-trigger" id="toogle1" type="checkbox" data-toggle="collapse" href="#product1" role="button" aria-expanded="false" aria-controls="product1">
                                    <label class="circle" for="toogle1">
                                        <img src="{{ url('assets/images/bovebben.png') }}" alt="{{ $product->name }} bővebben" title="{{ $product->name }} bővebben" />
                                    </label>
                                </h2>
                                <div class="collapse show" id="product1">
                                    <div class="collapse-content">
                                        {!! $product->description !!}
                                    </div>
                                </div>
                            </div>
                            <div class="product-price pt-70">
                                Ár: <span class="c-black">{{ \App\Utils::priceForHumans($product->price) }}</span>
                            </div>
                            <div class="product-shipping-cost">
                                Szállítási költség: <span class="c-black">{{ \App\Utils::priceForHumans($product->shipping_cost) }}</span>
                            </div>
                            <div class="product-unit mb-20">
                                Mennyiség: <span class="c-black">{{ $product->unit }}</span>
                            </div>
                            <div class="row pb-100">
                                <div class="col-lg-4">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <button class="btn btn-black minus-btn" data-product-id="{{ $product->id }}">-</button>
                                        </div>
                                        <input type="text" step="1" min="1" max="999" value="1" id="quantity-{{ $product->id }}" class="shop-quantity-field"/>
                                        <div class="input-group-append">
                                            <button class="btn btn-black plus-btn" data-product-id="{{ $product->id }}">+</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-8">
                                    <button class="btn btn-orange add-to-cart" data-id="{{ $product->id }}">
                                        {{ __('Kosárba teszem') }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @endif

@endsection