@extends('layouts.main')
@push('title')
<title>Home</title>
@endpush
@section('main-section')

<style>
    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>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

{{-- @component('components.breadcrumbs')
<a href="/">Home</a>
<i class="fa fa-chevron-right breadcrumb-separator"></i>
<span><a href="{{ route('shop.index') }}">Product</a></span>
<i class="fa fa-chevron-right breadcrumb-separator"></i>
<span>{{ $product->product_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">Product</h1>
    <ol class="breadcrumb justify-content-center mb-0">
        <li class="breadcrumb-item"><a href="{{ route('shop.index') }}">Product</a></li>
        <li class="breadcrumb-item active text-white">{{ $product->product_title }}</li>
    </ol>
</div>
<!-- Single Page Header End -->


<!-- Single Product Start -->
<div class="container-fluid py-5 mt-5">
    @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="border rounded">
                       
                                @foreach ($images as $image)
                                
                                    <!-- Main Displayed Image -->
                                {{-- <img id="mainImage" class="main-image" src="path/to/initial/image.jpg" alt="Superman"> --}}

                                <!-- Image Carousel -->
                                {{-- <div class="carousel">
                                    <img class="thumbnail" src="path/to/image1.jpg" alt="Thumbnail 1" onclick="changeImage('path/to/image1.jpg')">
                                    <img class="thumbnail" src="path/to/image2.jpg" alt="Thumbnail 2" onclick="changeImage('path/to/image2.jpg')">
                                    <img class="thumbnail" src="path/to/image3.jpg" alt="Thumbnail 3" onclick="changeImage('path/to/image3.jpg')">
                                  
                                </div> --}}

                                <img src="{{ $image }}" class="img-fluid rounded" alt="Product Image">
                                @endforeach
             
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <h4 class="fw-bold mb-3">{!! $product->product_title !!}</h4>
                        @foreach($categories as $category)
                        <p class="mb-3">
                            {{ $category->category_name }} 
                        </p>
                        @endforeach

                       

                        <h5 class="fw-bold me-2"><i class="fas fa-rupee-sign" aria-hidden="true"></i> {{ $product->discount }}</h5>
                        <h5 class="text-danger text-decoration-line-through"><i class="fas fa-rupee-sign" aria-hidden="true"></i> {{ $product->price }}</h5>
                        <p class="mb-4">{{ $product->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>
                        @if ($product->quantity > 0)
                        <form action="{{ route('cart.store', $product) }}" method="POST">
                            {{ csrf_field() }}
                            <button type="submit" class="btn border border-secondary rounded-pill px-4 py-2 mb-4 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to Cart</button>
                        </form>
                        @endif
                    </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">
                <h4 class="prodescription">{!! $product->description !!}</h4>
            </div>
        
    <div class="details">
    <h4>Details</h4>
    <hr>

    <div class="row">

        <div class="col-12 col-md-6">
            <div class="input-group d-flex align-items-center mb-3">
                <label for="brand" class="bold-label me-2">Brands</label>
                <input type="text" name="brand" id="brand" class="input-underline" value="{!! $product->product_title !!}">
            </div>

            <div class="input-group mb-3">
                <label for="category" class="bold-label">Category</label>
                <input type="text" name="category" id="category" class="input-underline"  value="{!! $product->category !!}">
            </div>

            <div class="input-group mb-3">
                <label for="scale" class="bold-label">Scale</label>
                <input type="text" name="scale" id="scale" class="input-underline" value="{!! $product->scale !!}">
            </div>

            <div class="input-group mb-3">
                <label for="product_code" class="bold-label">Product Code</label>
                <input type="text" name="product_code" id="product_code" class="input-underline" value="{!! $product->product_code !!}">
            </div>
        </div>

        <div class="col-12 col-md-6">
            <div class="mb-4">
                <label for="product_size" class="bold-label">Product Size Approx</label>
            <div>
                <span><strong>H:</strong>{!! $product->height !!} </span>
                <span><strong>D:</strong>{!! $product->depth !!} </span>
                <span><strong>W:</strong>{!! $product->width !!} </span>
            </div>
            </div>

            <div class="input-group mb-3">
                <label for="product_weight" class="bold-label">Product Weight Approx</label>
                <input type="text" name="product_weight" id="product_weight" class="input-underline" value="{!! $product->weight !!}" >
            </div>

            <div class="input-group mb-3">
                <label for="material" class="bold-label">Material</label>
                <input type="text" name="material" id="material" class="input-underline" value="{!! $product->material !!}">
            </div>

            <div class="input-group mb-3">
                <label for="product_code_2" class="bold-label">Product Code</label>
                <input type="text" name="product_code_2" id="product_code_2" class="input-underline" value="{!! $product->product_title !!}">
            </div>


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


<h2 class="text-danger">Youtube Video</h2>
<div class="video-container">
    
    
{{-- <iframe width="560" height="315" src="https://www.youtube.com/embed/3PfJv3TqoAo?si=_NjnNT_PvwP_EJae" 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> --}}

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


{{-- <iframe width="560" height="315" src="{!! $product->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> --}}
    </div>

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

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


    <h1 class="fw-bold mb-0 mt-5 text-center">RECOMMENDED FOR YOU</h1>
<div class="vesitable">
    <div class="owl-carousel vegetable-carousel justify-content-center">
        @foreach ($variant as $product)
            <div class="position-relative vesitable-item">
                <div class="vesitable-img border-0 position-relative">
                    <img src="{{ asset($product->picture_url) }}" class="img-fluid w-100" alt="{{ $product->title }}">

                    <div class="text-white bg-primary px-3 py-1 position-absolute" style="bottom: 10px; right: 10px;">
                        <span class="cartship"><i class="fa fa-truck" aria-hidden="true"></i></span> Free U.S. Shipping
                    </div>
                </div>
                <div class="py-4 rounded-bottom cart-body">
                    <h4>{{ $product->title }}</h4>
                    <p>{{ $product->description }}</p>
                    <div class="d-flex justify-content-between flex-lg-wrap">
                        <p class="text-dark fs-5 fw-bold mb-0">${{ $product->price }}</p>
                        <a href="#" class="btn border border-secondary rounded-pill px-3 py-1 mb-4 text-primary">
                            <i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart
                        </a>
                        <div>
                            <a href="#" class="text-primary"><i class="fa fa-heart me-2 text-primary"></i></a>
                            <a href="#" class="text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>

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




<!-- Include Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>


{{-- @include('partials.might-like') --}}
<script>
    (function() {
        const currentImage = document.querySelector('#currentImage');
        const images = document.querySelectorAll('.product-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>
@endsection