@extends('master.front')



@section('title')
    {{ $item->name }}
@endsection


@section('css')
    <!-- Bootstrap CSS -->
    <!--JS-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
        integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous">
    </script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.css">
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.js"></script>
@endsection



@section('meta')
    <meta name="tile" content="{{ $item->title }}">

    <meta name="keywords" content="{{ $item->meta_keywords }}">

    <meta name="description" content="{{ $item->meta_description }}">



    <meta name="twitter:title" content="{{ $item->title }}">

    <meta name="twitter:image" content="{{ asset('assets/images/' . $item->photo) }}">

    <meta name="twitter:description" content="{{ $item->meta_description }}">



    <meta name="og:title" content="{{ $item->title }}">

    <meta name="og:image" content="{{ asset('assets/images/' . $item->photo) }}">

    <meta name="og:description" content="{{ $item->meta_description }}">
@endsection



@section('content')

    <div class="">
        <div class="container-fluid container60">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb py-3">
                    <li class="breadcrumb-item"><a href="{{ route('front.index') }}">{{ __('Home') }}</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('front.catalog') }}">{{ __('Shop') }}</a></li>
                    {{-- <li class="breadcrumb-item"><a href="#"></a></li> --}}
                    <li class="breadcrumb-item active" aria-current="page">{{ $item->name }}</li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Page Content-->

    <div class="container-fluid container60 pt-4 pb-5">
        <div class="row">
            <div class="col-md-5 col-lg-4">


                <div class="product-gallery">

                    @if ($item->video)
                        <div class="gallery-wrapper">

                            <div class="gallery-item video-btn text-center">

                                <a href="{{ $item->video }}" title="Watch video"></a>

                            </div>

                        </div>
                    @endif


                    @if (!$item->is_stock())
                        <label class="product-label label-soldout" style="display: block;">{{ __('สินค้าหมด') }}</label>
                    @endif



                    @if ($item->discount_price != $item->previous_price)
                        <div class="product-badge bg-goldenrod  ppp-t"> -{{ PriceHelper::DiscountPercentage($item) }}</div>
                    @endif



                    <div class="product-thumbnails insize">

                        <div class="product-details-slider owl-carousel">

                            <div class="item">
                                <img src="{{ asset('assets/images/' . $item->photo) }}" alt="zoom" />
                                <a type="button" class="btn btn-expand rounded-10 bg-white"
                                    style="background: #fff !important" href="{{ asset('assets/images/' . $item->photo) }}"
                                    data-fancybox><i class="material-symbols-outlined"
                                        style="padding: 10px;
        border-radius: 10%;color: black;border: 1px solid rgba(0, 0, 0, .125) !important;">open_in_full</i></a>
                            </div>

                            @foreach ($galleries as $key => $gallery)
                                <div class="item"><img src="{{ asset('assets/images/' . $gallery->photo) }}"
                                        alt="zoom" />
                                    <a type="button" class="btn btn-expand rounded-10 bg-white"
                                        style="background: #fff !important"
                                        href="{{ asset('assets/images/' . $gallery->photo) }}" data-fancybox><i
                                            class="material-symbols-outlined"
                                            style="padding: 10px;
        border-radius: 10%;color: black;border: 1px solid rgba(0, 0, 0, .125) !important;">open_in_full</i></a>
                                </div>
                            @endforeach

                        </div>

                    </div>

                </div>




            </div>



            <div class="col-md-7 col-lg-5">
                <input type="hidden" id="item_id" value="{{ $item->id }}">

                <input type="hidden" id="demo_price" value="{{ PriceHelper::setConvertPrice($item->discount_price) }}">

                <input type="hidden" value="{{ PriceHelper::setCurrencySign() }}" id="set_currency">

                <input type="hidden" value="{{ PriceHelper::setCurrencyValue() }}" id="set_currency_val">

                <input type="hidden" value="{{ $setting->currency_direction }}" id="currency_direction">




                <h4 class="mb-2 p-title-main">{{ $item->name }}</h4>
                <div class="row gx-3 border-bottom mb-3 pb-3">
                    <div class="col-4 col-sm-3">
                        <div class="border p-2">

                            <img src="{{ asset('assets/images/' . $item->brand->photo) }}" class="object-contain w-100"
                                height="60">
                        </div>
                    </div>
                    <div class="col-8 col-sm-9">
                        {{-- @if ($item->brand_id)
                    <div class="pt-1 mb-1"><span class="text-medium">{{ __('Brand') }}:</span>

                        <a
                            href="{{ route('front.catalog') . '?brand=' . $item->brand->slug }}">{{ $item->brand->name }}</a>

                    </div>
                @endif --}}

                        <div class="pt-1 mb-1"><span class="text-medium">{{ __('Categories') }}:</span>

                            <a
                                href="{{ route('front.catalog') . '?category=' . $item->category->slug }}">{{ $item->category->name }}</a>

                            @if ($item->subcategory->name)
                                /
                            @endif

                            <a
                                href="{{ route('front.catalog') . '?subcategory=' . $item->subcategory->slug }}">{{ $item->subcategory->name }}</a>

                            @if ($item->childcategory->name)
                                /
                            @endif

                            <a
                                href="{{ route('front.catalog') . '?childcategory=' . $item->childcategory->slug }}">{{ $item->childcategory->name }}</a>

                        </div>

                        <p class="text-secondary">{{ __('รหัสสินค้า') }}: {{ $item->sku }}</p>
                    </div>
                </div>

                <span class="h3 d-block price-area">