@extends('frontend::layouts.master')

@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" rel="stylesheet" />
@endsection

@section('content')
    @php
        $b = [
            [
                'name' => $service['name'] ?? '',
                'url' => $service['url'] ?? '',
            ],
        ];
    @endphp
    <livewire:frontend::section.breadcrumb id_menu="5" :breadcrumb="$b" />

    <section class="sect-product-detail">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-6 col-image">
                    <img class="img-responsive" src="{{ $service['image'] ?? '' }}" alt="{{ $service['name'] ?? '' }}">
                </div>
                <div class="col-xs-12 col-sm-12 col-md-6 col-detail">
                    @if (!empty($service['detail']))
                        <h5 class="htitle m-b-0">{{ $link_menu['name'] ?? '' }}</h5>
                        <h3 class="text-gray">{{ $service['name'] ?? '' }}</h3>
                        {!! $service['detail'] !!}
                    @endif
                </div>
            </div>
            @if (!empty($service['related'][0]))
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                        <h2 class="htitle m-t-40">{{ __('frontend::lang.project.related_projects') }}</h2>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 no-padding">
                        <div class="carousel product-slide" data-items="4" data-margin="0">
                            @foreach ($service['related'] as $r)
                                <div class="product-item">
                                    <div class="product-image text-center">
                                        <a href="{{ $r['url'] ?? 'javascript:void(0)' }}">
                                            <img src="{{ $r['image'] ?? '' }}" alt="{{ $r['name'] ?? '' }}">
                                        </a>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </section>
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>

    <script>
        // Initialize Fancybox for gallery
        Fancybox.bind("[data-fancybox]", {
            // Your custom options
            loop: true,
            buttons: [
                "zoom",
                "slideShow",
                "fullScreen",
                "thumbs",
                "close"
            ],
            animationEffect: "fade",
            transitionEffect: "slide",
            thumbs: {
                autoStart: false
            }
        });
        // Gallery functionality
        document.addEventListener('DOMContentLoaded', function() {
            const mainImage = document.getElementById('mainImage');
            const mainImageLink = document.querySelector('.main-image-link');
            const thumbnailItems = document.querySelectorAll('.thumbnail-item');
            // Add click event to thumbnails
            thumbnailItems.forEach(item => {
                item.addEventListener('click', function() {
                    const imageSrc = this.getAttribute('data-image');
                    // Update main image
                    mainImage.src = imageSrc;
                    mainImage.alt = this.querySelector('img').alt;
                    // Update main image link for Fancybox
                    mainImageLink.href = imageSrc;
                    // Remove active class from all thumbnails
                    thumbnailItems.forEach(thumb => thumb.classList.remove('active'));
                    // Add active class to clicked thumbnail
                    this.classList.add('active');
                });
            });
            // Add hover effect to thumbnails
            thumbnailItems.forEach(item => {
                item.addEventListener('mouseenter', function() {
                    this.style.transform = 'scale(1.05)';
                });
                item.addEventListener('mouseleave', function() {
                    this.style.transform = 'scale(1)';
                });
            });
        });
    </script>
@endsection