@extends('frontend.layout')
@section('page_title', $single_product->name ?? 'Product Not Found')
@section('styles')
<style>
    .product_btn {
        width: 100%;
    }


    #back {
        cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 20 20"><path fill="none" stroke="%23000000" d="M11 10a1 1 0 01-1 1 1 1 0 01-1-1 1 1 0 011-1 1 1 0 011 1zm8 0a9 9 0 01-9 9 9 9 0 01-9-9 9 9 0 019-9 9 9 0 019 9z"/></svg>'), auto;
    }

    .details {
        min-height: 350px;
    }
</style>
@endsection

@section('content')

<section class="section">
    <div class="container">

        <div class="col-xs-12">

            @if($single_product)
            <div class="row">
                <div class="col-lg-6" id="back">
                    <img class="img-thumbnail img-responsive drift-demo-trigger"
                        data-zoom="{{asset('common_image/products')}}/{{$single_product->image ?? ''}}"
                        src="{{asset('common_image/products')}}/{{$single_product->image ?? asset('common_image/no-image.png')}}"
                        alt="{{$single_product->name ?? ''}}" style="max-width:100%; height:auto;">
                </div>

                <div class="col-lg-6">
                    <div class="details">
                        <h1>{{$single_product->name ?? ''}}</h1>
                        <p class="price">&#2547; {{$single_product->price ?? ''}}</p>

                        <div class="description">
                            {!! $single_product->desc ?? '' !!}
                        </div>

                        <br>

                        <div class="row">

                            <div class="col-xs-6">

                                <a target="blank" href="{{$single_product->btn_link ?? '#'}}"
                                    class="btn btn-warning product_btn">
                                    <span>
                                        <i class="fa fa-cart-arrow-down"></i>
                                    </span>
                                    <span>Buy Now</span>
                                </a>

                            </div>

                        </div>

                        <br>

                    </div>
                </div>
            </div>
            @else
            <div class="row">
                <div class="col-xs-12">
                    <h1 class="page-heading-1">Product Not Found</h1>
                    <p>The requested product could not be found.</p>
                </div>
            </div>
            @endif

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

@endsection

@section('scripts')

<script src="https://cdnjs.cloudflare.com/ajax/libs/drift-zoom/1.3.1/Drift.min.js"
    integrity="sha512-Pd9pNKoNtEB70QRXTvNWLO5kqcL9zK88R4SIvThaMcQRC3g8ilKFNQawEr+PSyMtf/JTjV7pbFOFnkVdr0zKvw=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    new Drift(document.querySelector('.drift-demo-trigger'), {
            paneContainer: document.querySelector('.details'),
            inlinePane: 769,
            inlineOffsetY: -85,
            containInline: true,
            hoverBoundingBox: true
        });
</script>
@endsection