@extends('themes.basic.businesses.layout')
@section('title', d_trans(':business_name Gallery', ['business_name' => ucFirst($business->trans->name)]))
@section('description', $business->trans->short_description)
@section('keywords', $business->trans->tags)
@section('og_image', $business->getLogoLink())
@if ($business->hasCategory())
    @section('breadcrumbs_schema', Breadcrumbs::view('breadcrumbs::json-ld', 'businesses.show', $business))
    @section('breadcrumbs', Breadcrumbs::render('businesses.show', $business))
@endif
@section('container', 'container-custom')
@section('business_tabs', true)
@section('write_button', true)
@section('content')
    <div class="row g-3 align-items-center">
        <div class="col-12 col-lg">
            <h3 class="page-title">
                {{ d_trans(':business_name Gallery', ['business_name' => ucFirst($business->trans->name)]) }}
            </h3>
        </div>
        <div class="col-12 col-lg-auto">
            <form action="{{ url()->current() }}" method="GET">
                <div class="form-search form-search-reverse mb-4">
                    <button class="icon">
                        <i class="bi bi-search"></i>
                    </button>
                    <input type="text" name="search" placeholder="{{ d_trans('Search...') }}"
                        class="form-control form-control-md" value="{{ request('search') }}">
                </div>
            </form>
        </div>
    </div>
    @if ($galleries->count() > 0)
        <div class="gallery-grid">
            @foreach ($galleries as $gallery)
                <div class="gallery-item box p-0">
                    <div class="gallery-media">
                        <img src="{{ $gallery->getThumbnailLink() }}" alt="{{ $gallery->title }}" class="gallery-image">
                        <div class="gallery-overlay">
                            <div class="gallery-actions">
                                <button class="btn btn-light btn-sm gallery-btn {{ $gallery->isExternal() ? 'media-view-btn-ex' : 'media-view-btn' }}"
                                    data-media-type="{{ $gallery->type }}" data-media-title="{{ $gallery->title }}"
                                    data-media-thumb="{{ $gallery->getThumbnailLink() }}"
                                    data-media-src="{{ $gallery->getFileLink() }}"
                                    data-media-external="{{ $gallery->isExternal() ? 1 : 0 }}">
                                    <i class="bi bi-zoom-in"></i>
                                </button>
                                @unless($gallery->isExternal())
                                    <form action="{{ route('businesses.gallery.download', [$business->slug, $gallery->id]) }}"
                                        method="POST">
                                        @csrf
                                        <button class="btn btn-light btn-sm gallery-btn">
                                            <i class="bi bi-download"></i>
                                        </button>
                                    </form>
                                @endunless
                            </div>
                        </div>
                    </div>
                    <div class="gallery-caption">
                        <h6 class="mb-1">{{ $gallery->title }}</h6>
                        <p class="text-muted small mb-0">{{ dateFormat($gallery->created_at) }}</p>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="modal fade" id="galleryModal" tabindex="-1" aria-labelledby="galleryModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header border-0 pb-0">
                        <h5 class="modal-title" id="galleryModalLabel"></h5>
                        <button type="button" class="btn-close btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="gallery-modal-content">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="youtubeModal" tabindex="-1" aria-labelledby="youtubeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header border-0 pb-0">
                        <h5 class="modal-title" id="youtubeModalLabel"></h5>
                        <button type="button" class="btn-close btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-0">
                        <div class="ratio ratio-16x9">
                            <iframe id="youtubeIframe" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @push('styles_libs')
            <link rel="stylesheet" href="{{ asset('vendor/libs/plyr/plyr.min.css') }}">
        @endpush
        @push('scripts_libs')
            <script src="{{ asset('vendor/libs/plyr/plyr.min.js') }}"></script>
        @endpush
        @push('scripts')
            <script>
                (function(){
                    'use strict';
                    const mediaBtns = document.querySelectorAll('.media-view-btn-ex');
                    const galleryModal = new bootstrap.Modal(document.getElementById('galleryModal'));
                    const youtubeModal = new bootstrap.Modal(document.getElementById('youtubeModal'));

                    mediaBtns.forEach(btn => {
                        btn.addEventListener('click', function(e){
                            // Prevent other handlers (including delegated/global handlers) from also running
                            e.preventDefault();
                            e.stopPropagation();
                            if (typeof e.stopImmediatePropagation === 'function') {
                                e.stopImmediatePropagation();
                            }
                            const type = this.dataset.mediaType;
                            const title = this.dataset.mediaTitle;
                            const thumb = this.dataset.mediaThumb;
                            const src = this.dataset.mediaSrc;
                            const external = this.dataset.mediaExternal === '1';

                            if (type === 'video' && external) {
                                // Open YouTube iframe modal (support youtu.be and youtube links)
                                const videoIdMatch = src.match(/(?:youtube(?:-nocookie)?\.com.*(?:v=|embed\/|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/i);
                                let embedSrc = src;
                                if (videoIdMatch && videoIdMatch[1]) {
                                    embedSrc = 'https://www.youtube.com/embed/' + videoIdMatch[1] + '?rel=0&showinfo=0&autoplay=1';
                                }
                                document.getElementById('youtubeIframe').setAttribute('src', embedSrc);
                                document.getElementById('youtubeModalLabel').textContent = title;
                                youtubeModal.show();
                                return;
                            }

                            const contentContainer = document.querySelector('.gallery-modal-content');
                            contentContainer.innerHTML = '';
                            if (type === 'image') {
                                contentContainer.innerHTML = '<div class="gallery-img"><img src="'+src+'" alt="'+title+'" class="img-fluid" /></div>';
                            } else if (type === 'video') {
                                contentContainer.innerHTML = '<video class="video-plyr" poster="'+thumb+'" controls><source src="'+src+'"></video>';
                                document.querySelectorAll('.video-plyr').forEach((el) => {
                                    new Plyr(el);
                                });
                            }
                            document.getElementById('galleryModalLabel').textContent = title;
                            galleryModal.show();
                        });
                    });

                    // Clear iframe on modal hide to stop playback
                    document.getElementById('youtubeModal').addEventListener('hidden.bs.modal', function () {
                        document.getElementById('youtubeIframe').setAttribute('src', '');
                    });
                })();
            </script>
        @endpush
    @else
        @include('themes.basic.partials.empty-box', ['empty_image' => 'v1', 'height' => '150'])
    @endif
@endsection