@extends('layouts.main')
@push('title')
<title>Home</title>
@endpush
@section('main-section')
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@splidejs/splide@1.2.0/dist/css/splide.min.css'>
<style>
    .thumbnail_slider {
    max-width: 700px;
}

/* .input-group {
    border-bottom:1px solid #f1f1f1;
} */

span.check-pincode {
    display: inline-block;
    padding: 6px 20px;
    background: #f1f1f1;
    cursor: pointer;
    border-radius: 20px;
    border: 2px solid #120434;
}

span.variant-type {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #f1f1f1;
    border-radius: 10px;
    cursor: pointer;
}

.stock {
    display: inline-block;
    padding: 5px 10px;
    background: #008000;
    color: #fff;
  
}

span.variant-type:hover{
    border: 1px solid #000;
}
    .splide__slide {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 400px;
        width: 580px;
        overflow: hidden;
        transition: .2s;
        border-width: 2px !important;
        margin: 10px 4px;
        background-size: contain!important;
    }

    .splide--nav > .splide__track > .splide__list > .splide__slide.is-active {
        box-shadow: 2px 3px 8px #000000a3;
    }

    .splide__slide img {
        width: 100%;
        height: auto;
        margin: auto;
        display: block!important;
        max-width: 100%;
        max-height: 100%;
    }

    li.splide__slide {
        height: auto!important;
        background: none!important;
    }

    h4.prodescription {
        letter-spacing: 1.05px;
        font-size: 15px;
        line-height: 27px;
    }

    .bold-label {
    font-weight: bold;
    display: inline-block;  /* Keep label inline with the input */
    margin-right: 10px; /* Add space between the label and input */
    width: auto;  /* Adjust width of the label */
}

.input-underline {
    border: none;
    border-bottom: 1px solid #f1f1f1;  /* Bottom border for input */
    outline: none;
    width: 100%;  /* Ensure input takes remaining space */
    padding: 5px 0;  /* Adjust padding for input */
}

.input-underline:focus {
    border-bottom: 2px solid #007bff;  /* Change border color on focus */
}

.input-group {
    display: flex;  /* Use flexbox for horizontal alignment */
     /* Align items vertically */
    margin-bottom: 15px;  /* Space between fields */
}
.video-container {
    margin-top: 30px;  /* Add space above the video */
    position: relative;
    width: 100%;  /* Make the video container take full width */
    height: 500px; /* Set a fixed height for the video (you can adjust as needed) */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;  /* Make iframe take full width of the container */
    height: 100%; /* Make iframe take full height of the container */
    border: none;
}



</style>


{{-- @component('components.breadcrumbs')
<a href="/">Home</a>
<i class="fa fa-chevron-right breadcrumb-separator"></i>
<span><a href="{{ route('shop.index') }}">variant</a></span>
<i class="fa fa-chevron-right breadcrumb-separator"></i>
<span>{{ $variant->variant_title }}</span>
<style>
    .service_image {
        text-align: left;
    }
</style>
@endcomponent --}}


<!-- Modal Search Start -->
<div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content rounded-0">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Search by keyword</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body d-flex align-items-center">
                <div class="input-group w-75 mx-auto d-flex">
                    <input type="search" class="form-control p-3" placeholder="keywords" aria-describedby="search-icon-1">
                    <span id="search-icon-1" class="input-group-text p-3"><i class="fa fa-search"></i></span>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal Search End -->


<!-- Single Page Header start -->
<div class="container-fluid page-header py-5">
    <h1 class="text-center text-white display-6">variant</h1>
    <ol class="breadcrumb justify-content-center mb-0">
        <li class="breadcrumb-item"><a href="{{ route('shop.index') }}">variant</a></li>
        <li class="breadcrumb-item active text-white">{{ $variant->additional_title }}</li>
    </ol>
</div>
<!-- Single Page Header End -->


<!-- Single variant Start -->
<div class="container-sm-fluid">
    @if (session()->has('success_message'))
    <div class="alert alert-success">
        {{ session()->get('success_message') }}
    </div>
    @endif
    @if(count($errors) > 0)
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif
    <div class="container py-5">
        <div class="row g-4 mb-5">
            <div class="col-lg-12 col-xl-12">
                <div class="row g-4">
                    <div class="col-lg-7">
                        <div class="">
                            <div class="thumbnail_slider">
                                <!-- Primary Slider Start-->
                                <div id="primary_slider">
                                    <div class="splide__track">
                                        <ul class="splide__list">
                                      
                                            <li class="splide__slide">
                                                    <img src="{{$variant->picture_url }}" class="img-fluid rounded" alt="variant Image">
                                                </li>
                                               
                                            <li class="splide__slide">
                                                <img src="https://images.pexels.com/photos/858115/pexels-photo-858115.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
                                            </li>
                                            <li class="splide__slide">
                                                <img src="https://images.pexels.com/photos/13295150/pexels-photo-13295150.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
                                            </li>
                                            
                                            <li class="splide__slide">
                                                <img src="https://images.pexels.com/photos/4275890/pexels-photo-4275890.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
                                            </li>
                                            <li class="splide__slide">
                                                <img src="https://images.pexels.com/photos/3511104/pexels-photo-3511104.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
                                            </li>
                                            <li class="splide__slide">
                                                <img src="https://images.pexels.com/photos/276484/pexels-photo-276484.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
                                            </li>
                                            <li class="splide__slide">
                                                <img src="https://images.pexels.com/photos/33545/sunrise-phu-quoc-island-ocean.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
                                            </li>
                                            <li class="splide__slide">
                                                <img src="https://images.pexels.com/photos/2026452/pexels-photo-2026452.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <!-- Primary Slider End-->
                                <!-- Thumbnal Slider Start-->
                                <div id="thumbnail_slider">
                                    <div class="splide__track">
                                        <ul class="splide__list">
                                         
                                            <li class="splide__slide">
                                                    <img src="{{ $variant->picture_url }}" class="img-fluid rounded" alt="variant Image">
                                                </li>
                                               

                                        </ul>
                                    </div>
                                </div>
                                <!-- Thumbnal Slider End-->
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <div class="stock mb-3">
                            <span>Available</span>
                        </div>
                        <!-- @foreach($categories as $category)
                        <p class="mb-3">
                            {{ $category->category_name }} 
                        </p>
                        @endforeach -->

                        <h4 class="fw-bold mb-3">{!! $variant->title !!}-{!! $variant->additional_title !!} </h4>


                        
                       
                        {{-- <div class="pricing-variant mt-3">
                            <h5 class="text-danger text-decoration-line-through d-inline-block mb-0"><i class="fas fa-rupee-sign" aria-hidden="true"></i> {{ $variant->price }}</h5>
                            <h3 class="fw-bold me-2 d-inline-block m-1"><i class="fas fa-rupee-sign" aria-hidden="true"></i> {{ $variant->discount }}</h3>
                        </div> --}}

                        <div class="pricing-product mt-3">
                            <div class="pricing-product mt-3">
                                @if ($variant->discount> 0)
                                    <div class="mb-1">
                                        <span class="fw-bold text-dark ">M.R.P.:</span>
                                        <span class="text-danger text-decoration-line-through fw-bold ">₹{{ $variant->price }}</span>
                                    </div>
                            
                                    <div class="mb-1">
                                        <span class="fw-bold text-dark">Discount:</span>
                                        <span class="fw-bold text-dark">₹{{$variant->discount }}</span>
                                    </div>
                            
                                    <div class="mb-1">
                                        <span class="fw-bold text-dark fs-5" >Price After Discount:</span>
                                        <span class="fw-bold text-primary fs-5">₹{{ $variant->after_discount }}</span>
                                    </div>
                            
                                    <div class="mb-1">
                                        <span class="fw-bold text-dark">GST:</span>
                                        <span class="fw-bold text-dark">₹{{ number_format($variant->GST, 2) }}</span>
                                    </div>
                            
                                    <div class="mt-2">
                                        <span class="fw-bold text-dark ">Total Payable:</span>
                                        <span class="fw-bold text-dark ">₹{{ $variant->after_discount + $variant->GST }}</span>
                                    </div>
                                @else
                                    <div class="mb-1">
                                        <span class="fw-bold text-dark fs-5">M.R.P.:</span>
                                        <span class="fw-bold text-primary fs-4">₹{{ $variant->price }}</span>
                                    </div>
                            
                                    <div class="mb-1">
                                        <span class="fw-bold text-dark"> GST:</span>
                                        <span class="fw-bold text-dark">₹{{ number_format($variant>GST, 2) }}</span>
                                    </div>
                            
                                    <div class="mt-2">
                                        <span class="fw-bold text-dark ">Total Payable:</span>
                                        <span class="fw-bold text-dark ">₹{{ $variant->price + $variant->GST }}</span>
                                    </div>
                                @endif
                            </div>


                        {{-- <div class="pricing-product mt-3">
                            <div>
                                <span class="text-danger text-decoration-line-through">
                                    M.R.P.: <span id="mrp">₹{{ $variant->price }}</span>
                                </span>
                            </div>
                            <div>
                                <span class="price-label">Price excl. GST:</span>
                                <span id="priceExcl" class="price-head price_discounted">₹{{ $variant->price - $variant->discount }}</span>
                            </div>
                            <div>
                                <span class="price-label">Price incl. GST:</span>
                                <span id="priceIncl" class="price-head">₹{{ ($variant->price - $variant->discount) * 1.18 }}</span>
                            </div>
                            <div>
                                <span class="save-label">You Save:</span>
                                <span id="saveAmount">₹{{ $variant->discount }}</span> 
                                (<span id="savePercentage">{{ round(($variant->discount / $variant->price) * 100, 2) }}</span>%)
                            </div>
                        </div> --}}


                    
                        <p class="mb-4">{{ $variant->details }}</p>
                        <!-- <div class="input-group quantity mb-5" style="width: 100px;">
                            <div class="input-group-btn">
                                <button class="btn btn-sm btn-minus rounded-circle bg-light border">
                                    <i class="fa fa-minus"></i>
                                </button>
                            </div>
                            <input type="text" class="form-control form-control-sm text-center border-0" value="1">
                            <div class="input-group-btn">
                                <button class="btn btn-sm btn-plus rounded-circle bg-light border">
                                    <i class="fa fa-plus"></i>
                                </button>
                            </div>
                        </div> -->
                        <form action="{{ route('cart.store', ['product' => $product->id, 'variant' => $variant->id]) }}" method="POST" class="d-inline-block">
                            @csrf
                            <input type="hidden" name="product_qty" value="1"> <!-- Default quantity -->
                            <button type="submit" class="btn border border-secondary rounded-pill px-4 py-2  text-primary">
                                <i class="fa fa-shopping-bag me-2 text-primary"></i> Add to Cart
                            </button>
                        </form>
                        <div class="share_btn d-inline-block">
                                <!-- <span class="check-pincode"><i class="fa fa-map-pin mr-1"></i><span>Pincode Check</span></span> -->
                                <span class="check-pincode btn-primary border-1"  onclick="openSharePopup()"><i class="fa fa-share-alt mr-1" aria-hidden="true"></i> <span>Share</span></span>
                            </div>
                    </div>
                    {{-- <div class="col-lg-12">
                        <nav>
                            <div class="nav nav-tabs mb-3">
                                @foreach ($tab->all() as $tabs)
                                <button class="nav-link active border-white border-bottom-0" type="button" role="tab"
                                    id="{{$tabs->label}}-tab" data-bs-toggle="tab" data-bs-target="#{{$tabs->label}}"
                                    aria-controls="{{$tabs->label}}" aria-selected="true">{{ $tabs->label}}</button>
                                @endforeach
                            </div>
                        </nav>
                        <div class="tab-content mb-5">
                            @foreach ($tab->all() as $tabname)
                            <div class="tab-pane" id="{{$tabname->label}}" role="tabpanel" aria-labelledby="{{$tabname->label}}-tab">
                                <p>{!!$tabname->description!!}</p>
                            </div>
                            @endforeach
                        </div>
                    </div> --}}

                </div>
            </div>
            <div class="descrption mt-5">
                <h4 class="prodescription">{!! $variant->description !!}</h4>
            </div>
        
    <div class="details">
    <h4>Details</h4>
    <hr>

    <div class="row">

        <div class="col-12 col-md-6">
            <div class="input-group row mb-3  pb-3 border-bottom">
                <div class="col-sm-6">
                    <h5 for="brand" class="bold-label variant_label me-2 mb-0">Brands</h5>
                </div>
                <div class="col-sm-6">
                    <h5 class="m-0">{!! $variant->brand !!}</h5>
                </div>
            </div>
        </div>


        <div class="col-12 col-md-6">
            <div class="input-group row mb-3  pb-3 border-bottom">
                <div class="col-sm-6">
                    <h5 for="brand" class="bold-label variant_label me-2 mb-0">variant Size Approx</h5>
                </div>
                <div class="col-sm-6">
                    <h5 class="m-0">  <span><strong>H:</strong>{!! $variant->height !!} </span>
                        <span><strong>D:</strong>{!! $variant->depth !!} </span>
                        <span><strong>W:</strong>{!! $variant->width !!} </span></h5>
                </div>
            </div>
        </div>


        <div class="col-12 col-md-6">
            <div class="input-group row mb-3  pb-3 border-bottom">
                <div class="col-sm-6">
                    <h5 for="brand" class="bold-label variant_label me-2 mb-0">Category</h5>
                </div>
                <div class="col-sm-6">
                    <h5 class="m-0">{!! $variant->category !!}</h5>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-6">
            <div class="input-group row mb-3  pb-3 border-bottom">
                <div class="col-sm-6">
                    <h5 for="brand" class="bold-label variant_label me-2 mb-0">variant Weight Approx</h5>
                </div>
                <div class="col-sm-6">
                    <h5 class="m-0">{!! $variant->weight !!}gm</h5>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-6">
            <div class="input-group row mb-3  pb-3 border-bottom">
                <div class="col-sm-6">
                    <h5 for="brand" class="bold-label variant_label me-2 mb-0">Scale</h5>
                </div>
                <div class="col-sm-6">
                    <h5 class="m-0">{!! $variant->scale !!}</h5>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-6">
            <div class="input-group row mb-3  pb-3 border-bottom">
                <div class="col-sm-6">
                    <h5 for="brand" class="bold-label variant_label me-2 mb-0">Materials</h5>
                </div>
                <div class="col-sm-6">
                    <h5 class="m-0">{!! $variant->material !!}</h5>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-6">
            <div class="input-group row mb-3  pb-3 border-bottom">
                <div class="col-sm-6">
                    <h5 for="brand" class="bold-label variant_label me-2 mb-0">variant Code</h5>
                </div>
                <div class="col-sm-6">
                    <h5 class="m-0">{!! $variant->variant_code !!}</h5>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- <h2 class="text-danger">Youtube Video</h2>
<div class="video-container">
    

    @php
    // Extract the video ID from the YouTube URL
    $videoId = null;
    if (!empty($variant->youtube_video_link)) {
        preg_match('/(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/|v\/|.*[?&]v=))([^?&]+)/', $variant->youtube_video_link, $matches);
        $videoId = $matches[1] ?? null;
    }
@endphp

@if ($videoId)
    <iframe width="560" height="315" src="https://www.youtube.com/embed/{{ $videoId }}" 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>
@endif



{{-- @if (!empty($variant->youtube_video_link))
    <iframe width="560" height="315" src="{{ $variant->youtube_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>
@endif --}}

    </div>

    <div class="tag-container">
    @php
        $tags = explode(',', $variant->tag);
    @endphp

    @foreach ($tags as $tag)
        <button type="button" class="btn btn-danger me-2 mb-2">{{ trim($tag) }}</button>
    @endforeach
</div> -->


   
                
          
            </div>
        </div>
    </div>
</div>
<!-- Single variant End -->



<script src='https://cdn.jsdelivr.net/npm/@splidejs/splide@1.2.0/dist/js/splide.min.js'></script>
{{-- @include('partials.might-like') --}}
<script>
    (function() {
        const currentImage = document.querySelector('#currentImage');
        const images = document.querySelectorAll('.variant-section-thumbnail');

        images.forEach((element) => element.addEventListener('click', thumbnailClick));

        function thumbnailClick(e) {
            currentImage.classList.remove('active');

            currentImage.addEventListener('transitionend', () => {
                currentImage.src = this.querySelector('img').src;
                currentImage.classList.add('active');
            })

            images.forEach((element) => element.classList.remove('selected'));
            this.classList.add('selected');
        }

    })();
</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    });
</script>

<script>
    var primarySlider = new Splide('#primary_slider', {
    type: 'fade',
    heightRatio: 0.5,
    pagination: false,
    arrows: false,
    cover: true,
});

// Thumbnails slider.
var thumbnailSlider = new Splide('#thumbnail_slider', {
    rewind: true,
    loop: true,
    isNavigation: true,
    focus: 'left', // Focus starts from the left
    pagination: false,
    cover: true,
    perPage: 5, // Number of visible items
    gap: 0, // No gap between items
    breakpoints: {
        600: {
            perPage: 3, // Adjust for smaller screens
        }
    },
    classes: {
        slide: 'splide__slide', // Default class for all slides
    },
}).mount();


// sync the thumbnails slider as a target of primary slider.
primarySlider.sync(thumbnailSlider).mount();
</script>

<script>
        function openSharePopup() {
            const pageUrl = window.location.href;
            const pageTitle = document.title;

            // Check if Web Share API is supported
            if (navigator.share) {
                navigator.share({
                    title: pageTitle,
                    text: "Check out this page!",
                    url: pageUrl
                }).catch((error) => console.log("Error sharing:", error));
            } else {
                // Fallback to custom modal if Web Share API is not supported
                document.getElementById("facebookShare").href = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(pageUrl)}`;
                document.getElementById("twitterShare").href = `https://twitter.com/intent/tweet?url=${encodeURIComponent(pageUrl)}`;
                document.getElementById("whatsappShare").href = `https://api.whatsapp.com/send?text=${encodeURIComponent(pageUrl)}`;
                document.getElementById("linkedinShare").href = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(pageUrl)}`;

                // Show Bootstrap modal fallback
                var myModal = new bootstrap.Modal(document.getElementById('shareModal'));
                myModal.show();
            }
        }
    </script>

@endsection