<!DOCTYPE html>
<html lang="en">

<head>
    <title>{{ $product->meta_title }}</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="description" content="{{ $product->meta_description ?? '' }}" />
    <meta name="keywords" content="{{ $product->meta_keywords ?? '' }}" />
    <meta name="author" content="{{ $product->meta_author ?? '' }}" />
    @include('website.includes.head')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
    <style>
        /* Improved Product Gallery Styles */
        .product-gallery-container {
            display: flex;
            flex-direction: row-reverse; /* Thumbnails on left, main image on right */
            gap: 20px;
        }

        .thumbnail-container {
            width: 100px;
            flex-shrink: 0;
        }

        .main-image-container {
            flex-grow: 1;
        }

        .main-image {
            border: 1px solid #f0f0f0;
            border-radius: 8px;
            margin-bottom: 15px;
            text-align: center;
            padding: 30px;
            height: 450px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .main-image img {
            max-height: 100%;
            max-width: 100%;
            object-fit: contain;
            transition: transform 0.3s ease;
        }

        .main-image:hover img {
            transform: scale(1.02);
        }

        .thumbnail-slider {
            height: 450px;
            width: 100%;
        }

        .thumbnail-slider .slick-slide {
            margin: 10px 0;
        }

        .thumbnail-slider img {
            border: 2px solid #f0f0f0;
            border-radius: 6px;
            width: 100%;
            height: 80px;
            object-fit: cover;
            transition: all 0.3s ease;
            padding: 5px;
            background: #fff;
        }

        .thumbnail-slider .slick-slide.slick-current img,
        .thumbnail-slider img:hover {
            border-color: #3F51B5;
        }

        .zoom-gallery a {
            display: block;
            cursor: zoom-in;
        }

        /* Product Info Styles */
        .product-info {
            padding: 20px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.05);
        }

        .product-title {
            font-size: 28px;
            color: #333;
            margin-bottom: 15px;
            font-weight: 600;
        }

        .product-meta {
            color: #666;
            margin-bottom: 25px;
            font-size: 15px;
        }

        .product-meta .category a {
            color: #3F51B5;
            text-decoration: none;
        }

        .product-info h4 {
            font-size: 18px;
            color: #444;
            margin: 25px 0 15px;
            padding-bottom: 8px;
            border-bottom: 1px solid #eee;
        }

        .description-content {
            line-height: 1.7;
            color: #555;
        }

        /* Responsive Adjustments */
        @media (max-width: 991px) {
            .product-gallery-container {
                flex-direction: column;
            }

            .thumbnail-container {
                width: 100%;
            }

            .thumbnail-slider {
                height: auto;
            }

            .main-image {
                height: 350px;
            }
        }

        @media (max-width: 767px) {
            .main-image {
                height: 300px;
                padding: 15px;
            }
        }
    </style>
</head>

<body class="tm-container-1300px">

    <div id="wrapper" class="clearfix">

        @include('website.includes.header')
        @include('website.includes.messages')

        <div class="main-content-area">

            <section class="page-title layer-overlay overlay-dark-9 section-typo-light bg-img-center"
                data-tm-bg-img="<?php echo url('/'); ?>/website/assets/images/bg/bg1.jpg">
                <div class="container pt-50 pb-50">
                    <div class="section-content">
                        <div class="row">
                            <div class="col-md-12 text-center">
                                <h1 class="title">{{ $product->name_en }}</h1>
                                <nav class="breadcrumbs" role="navigation" aria-label="Breadcrumbs">
                                    <div class="breadcrumbs">
                                        <span><a href="{{ route('home') }}" rel="home">Home</a></span>
                                        <span><i class="fa fa-angle-right"></i></span>
                                        <span><a href="{{ route('products.category', $product->category->slug) }}">{{ $product->category->name_en }}</a></span>
                                        <span><i class="fa fa-angle-right"></i></span>
                                        <span>{{ $product->name_en }}</span>
                                    </div>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="product-details-section">
                <div class="container pt-50 pb-50">
                    <div class="row">
                        <!-- Left Side - Image Gallery -->
                        <div class="col-lg-6 col-md-6">
                            <div class="product-gallery-container">
                                  <div class="brand">
                                    <img src="{{$product->brand_logo}}" alt="{{$product->brand_logo}}" style="max-width: 80px">
                                    </div>
                                <!-- Main Image Container -->
                                <div class="main-image-container">
                                  
                                    <div class="main-image zoom-gallery">
                                        @php
                                            $mainImage = $product->img_1 ?? ($product->img_2 ?? ($product->img_3 ?? ($product->img_4 ?? asset('website/assets/images/placeholder.jpg'))));
                                        @endphp
                                        <a href="{{ $mainImage }}" class="main-image-link">
                                            <img src="{{ $mainImage }}" alt="{{ $product->name_en }}" id="main-product-image">
                                        </a>
                                    </div>
                                </div>

                                <!-- Thumbnail Container (Left Side) -->
                                <div class="thumbnail-container">
                                    @if ($product->img_1 || $product->img_2 || $product->img_3 || $product->img_4)
                                        <div class="thumbnail-slider">
                                            @if ($product->img_1)
                                                <div>
                                                    <img src="{{ $product->img_1 }}" alt="{{ $product->name_en }}"
                                                         data-main-src="{{ $product->img_1 }}">
                                                </div>
                                            @endif
                                            @if ($product->img_2)
                                                <div>
                                                    <img src="{{ $product->img_2 }}" alt="{{ $product->name_en }}"
                                                         data-main-src="{{ $product->img_2 }}">
                                                </div>
                                            @endif
                                            @if ($product->img_3)
                                                <div>
                                                    <img src="{{ $product->img_3 }}" alt="{{ $product->name_en }}"
                                                         data-main-src="{{ $product->img_3 }}">
                                                </div>
                                            @endif
                                            @if ($product->img_4)
                                                <div>
                                                    <img src="{{ $product->img_4 }}" alt="{{ $product->name_en }}"
                                                         data-main-src="{{ $product->img_4 }}">
                                                </div>
                                            @endif
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!-- Right Side - Product Details -->
                        <div class="col-lg-6 col-md-6">
                            <div class="product-info">
                                
                                <h2 class="product-title">{{ $product->name_en }}</h2>
                                <div class="product-meta">
                                    <span class="category">Category: <a href="{{ route('products.category', $product->category->slug) }}">{{ $product->category->name_en }}</a></span>
                                </div>

                                <div class="product-description">
                                    <h4>Description</h4>
                                    <div class="description-content">
                                        {!! $product->details !!}
                                    </div>
                                </div>

                                <div class="product-composition">
                                    <h4>Composition</h4>
                                    <p>{{ $product->composition ?? 'Not specified' }}</p>
                                </div>

                                <div class="product-benefits">
                                    <h4>Benefits</h4>
                                    <?php echo $product->benefits ?? 'Not specified' ?>
                                </div>
                            </div>
                        </div>

                        <!-- Full Width Introduction Section -->
                        <div class="col-lg-12 col-md-12 mt-5">
                            <div class="product-introduction">
                                <h4>Introduction</h4>
                                <div class="introduction-content">
                                    {!! $product->introduction ?? '<p>Not specified</p>' !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

        </div>

        @include('website.includes.footer')

    </div>

    @include('website.includes.script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
    <script>
        $(document).ready(function() {
            // Initialize vertical thumbnail slider
            $('.thumbnail-slider').slick({
                slidesToShow: 4,
                slidesToScroll: 1,
                vertical: true,
                verticalSwiping: true,
                arrows: true,
                focusOnSelect: true,
                infinite: false,
                responsive: [
                    {
                        breakpoint: 991,
                        settings: {
                            vertical: false,
                            verticalSwiping: false,
                            slidesToShow: 4
                        }
                    },
                    {
                        breakpoint: 576,
                        settings: {
                            vertical: false,
                            verticalSwiping: false,
                            slidesToShow: 3
                        }
                    }
                ]
            });

            // Change main image when thumbnail is clicked
            $('.thumbnail-slider img').on('click', function() {
                var mainSrc = $(this).data('main-src');
                $('#main-product-image').attr('src', mainSrc);
                $('.main-image-link').attr('href', mainSrc);
                $('.thumbnail-slider .slick-slide').removeClass('slick-current');
                $(this).closest('.slick-slide').addClass('slick-current');
            });

            // Initialize lightbox with zoom
            $('.zoom-gallery').magnificPopup({
                delegate: 'a',
                type: 'image',
                gallery: {
                    enabled: true
                },
                zoom: {
                    enabled: true,
                    duration: 300,
                    easing: 'ease-in-out',
                    opener: function(openerElement) {
                        return openerElement.is('img') ? openerElement : openerElement.find('img');
                    }
                }
            });
        });
    </script>

</body>
</html>
