@extends('layouts.app')

@section('content')
<div class="page-wrapper content-wrapper page-courts">
   <section class="mini-banner" style="background-image: url({{ asset("storage/{$courts->banner_desktop}") }})">
        <div class="container">
            <div class="mini-banner__title">
                <small>{{ $courts->title ?? '' }}</small>
                <h2>{{ $courts->subtitle ?? ''}}</h2>
            </div>
        </div>
    </section>

    <section class="courts">
        <div class="container">
            <form method="GET" action="{{ route('courts.index') }}">
                <select name="arena" id="selectedArena">
                    <option value="">Todas as arenas</option>
                    @foreach($availableArenas as $arena)
                        <option value="{{ $arena }}" {{ $selectedArena === $arena ? 'selected' : '' }}>{{ $arena }}</option>
                    @endforeach
                </select>

                <select name="court" id="selectedCourt">
                    <option value="">Todas as quadras</option>
                    @foreach($availableCourts as $court)
                        <option value="{{ $court }}" {{ $selectedCourt === $court ? 'selected' : '' }}>{{ $court }}</option>
                    @endforeach
                </select>

                <select name="date" id="selectedDate">
                    <option value="">Todas as datas</option>
                    @foreach($availableDates as $date)
                        <option value="{{ $date }}" {{ $selectedDate === $date ? 'selected' : '' }}>
                            {{ \Carbon\Carbon::parse($date)->format('d/m/Y') }}
                        </option>
                    @endforeach
                </select>

                <select name="time_range" id="selectedTimeRange">
                    <option value="">Todos os horários</option>
                    @foreach($availableTimeRanges as $value => $label)
                        <option value="{{ $value }}" {{ $selectedTimeRange === $value ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>

                <button type="submit">
                    <i class="fa-solid fa-magnifying-glass"></i>
                </button>
            </form>

            @if($paginator && $paginator->total() > 0)
                <div class="courts__items">
                    {{-- <div class="skeleton-wrapper">
                        @for($s = 0; $s < 5; $s++)
                            <div class="skeleton-item skeleton-loading">
                                <div class="skeleton-video"></div>
                                <div class="skeleton-text"></div>
                                <div class="skeleton-text" style="width: 50%;"></div>
                            </div>
                        @endfor
                    </div> --}}
                    <div thumbsSlider="" class="swiper slider-courts">
                        <div class="swiper-wrapper">
                            @foreach($videos as $index => $video)
                                <div class="swiper-slide">
                                    <div class="courts__item" data-modal-open="modal-video" data-slide-index="{{ $loop->index }}" >
                                        <video controls autoplay playsinline preload="metadata" muted>
                                            <source src="{{ $video['url'] ?? $video['dropbox_path'] }}" type="video/mp4">
                                        </video>
                                        <h3>{{ $video['court'] }}</h3>
                                        <p>{{ \Carbon\Carbon::parse($video['date'])->format('d/m/Y') }}</p>
                                        <p>{{ $video['time'] }}</p>
                                    </div>  
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif

            @if($paginator && $paginator->hasPages())
                <div class="mt-6">
                    <div class="flex justify-center">
                        <ul class="pagination">
                            {{-- Botão Anterior --}}
                            <li>
                                @if($paginator->onFirstPage())
                                    <span class="prev disabled"><i class="fas fa-fw fa-chevron-left"></i></span>
                                @else
                                    <a href="{{ $paginator->previousPageUrl() }}" class="prev"><i class="fas fa-fw fa-chevron-left"></i></a>
                                @endif
                            </li>

                            {{-- Números das Páginas --}}
                            @php
                                $start = max(1, $paginator->currentPage() - 2);
                                $end = min($paginator->lastPage(), $paginator->currentPage() + 2);
                            @endphp

                            {{-- Primeira página se não estiver no range --}}
                            @if($start > 1)
                                <li>
                                    <a class="page-numbers" href="{{ $paginator->url(1) }}">1</a>
                                </li>
                                @if($start > 2)
                                    <li>
                                        <span class="page-numbers dots">...</span>
                                    </li>
                                @endif
                            @endif

                            {{-- Páginas do range atual --}}
                            @for($page = $start; $page <= $end; $page++)
                                <li>
                                    @if($page == $paginator->currentPage())
                                        <a class="page-numbers current">{{ $page }}</a>
                                    @else
                                        <a class="page-numbers" href="{{ $paginator->url($page) }}">{{ $page }}</a>
                                    @endif
                                </li>
                            @endfor

                            {{-- Última página se não estiver no range --}}
                            @if($end < $paginator->lastPage())
                                @if($end < $paginator->lastPage() - 1)
                                    <li>
                                        <span class="page-numbers dots">...</span>
                                    </li>
                                @endif
                                <li>
                                    <a class="page-numbers" href="{{ $paginator->url($paginator->lastPage()) }}">{{ $paginator->lastPage() }}</a>
                                </li>
                            @endif

                            {{-- Botão Próximo --}}
                            <li>
                                @if($paginator->hasMorePages())
                                    <a href="{{ $paginator->nextPageUrl() }}" class="next"><i class="fas fa-fw fa-chevron-right"></i></a>
                                @else
                                    <span class="next disabled"><i class="fas fa-fw fa-chevron-right"></i></span>
                                @endif
                            </li>
                        </ul>
                    </div>
                </div>
            @endif
        </div>
    </section>

    {{-- Modal único para todos os vídeos - fora da section para melhor estrutura HTML --}}
    @if($paginator && $paginator->total() > 0)
        <div data-modal="modal-video" class="modal modal-video courts-video">
            <div class="modal__bg js-modal-close"></div>
            <div class="modal__box">
                <div class="modal__header">
                    <div class="modal__close js-modal-close">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                            <path class="path1" d="M548.203 537.6l289.099-289.098c9.998-9.998 9.998-26.206 0-36.205-9.997-9.997-26.206-9.997-36.203 0l-289.099 289.099-289.098-289.099c-9.998-9.997-26.206-9.997-36.205 0-9.997 9.998-9.997 26.206 0 36.205l289.099 289.098-289.099 289.099c-9.997 9.997-9.997 26.206 0 36.203 5 4.998 11.55 7.498 18.102 7.498s13.102-2.499 18.102-7.499l289.098-289.098 289.099 289.099c4.998 4.998 11.549 7.498 18.101 7.498s13.102-2.499 18.101-7.499c9.998-9.997 9.998-26.206 0-36.203l-289.098-289.098z"></path>
                        </svg>
                    </div>
                </div>
                <div class="modal__body">
                    <div class="swiper-container slider-courts2">
                        <div class="swiper-wrapper">
                            @foreach($videos as $modalVideo)
                                <div class="swiper-slide">
                                    <div class="modal__content">
                                        <video controls autoplay width="860" height="640" playsinline webkit-playsinline preload="metadata" muted>
                                            <source src="{{ $modalVideo['url'] ?? $modalVideo['dropbox_path'] }}" type="video/mp4">
                                            Seu navegador não suporta o elemento de vídeo.
                                        </video>
                                        <div class="courts__bottom">
                                            <a href="{{ route('video.download', ['path' => $modalVideo['dropbox_path'] ?? $modalVideo['name']]) }}" class="download-btn">
                                                    Download
                                            </a>
                                            <div class="share">
                                                <p>Compartilhe</p>

                                                <div class="share__items">
                                                    <a href="#" class="share-whatsapp" data-video-path="{{ $modalVideo['dropbox_path'] ?? $modalVideo['name'] }}">
                                                        <div class="share__item">
                                                            <i class="fa-brands fa-whatsapp"></i>
                                                        </div>
                                                    </a>

                                                    <a href="#" class="share-facebook" data-video-path="{{ $modalVideo['dropbox_path'] ?? $modalVideo['name'] }}">
                                                        <div class="share__item">
                                                            <i class="fa-brands fa-facebook"></i>
                                                        </div>
                                                    </a>

                                                    <a href="#" class="share-twitter" data-video-path="{{ $modalVideo['dropbox_path'] ?? $modalVideo['name'] }}">
                                                        <div class="share__item">
                                                            <i class="fa-brands fa-twitter"></i>
                                                        </div>
                                                    </a>

                                                    <a href="#" class="share-link" data-video-path="{{ $modalVideo['dropbox_path'] ?? $modalVideo['name'] }}">
                                                        <div class="share__item">
                                                            <i class="fa-solid fa-link"></i>
                                                        </div>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        
                        <div class="swiper-button-prev courts-button-prev">
                            <i class="fas fa-angle-left"></i>
                        </div>
                        <div class="swiper-button-next courts-button-next">
                            <i class="fas fa-angle-right"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Função para abrir modal
        function openModal(modalId) {
            const modal = document.querySelector(`[data-modal="${modalId}"]`);
            if (modal) {
                modal.style.display = 'flex';
                document.body.style.overflow = 'hidden';
            }
        }

        // Função para fechar modal
        function closeModal(modal) {
            modal.style.display = 'none';
            document.body.style.overflow = 'auto';
        }

        // Event listeners para abrir modais
        document.querySelectorAll('[data-modal-open]').forEach(function(trigger) {
            trigger.addEventListener('click', function() {
                const modalId = this.getAttribute('data-modal-open');
                const slideIndex = parseInt(this.getAttribute('data-slide-index')) || 0;
                
                // Navegar para o slide correto no swiper do modal
                if (window.slideCourts2) {
                    window.slideCourts2.slideTo(slideIndex);
                }
                
                openModal(modalId);
            });
        });

        // Event listeners para fechar modais
        document.querySelectorAll('.js-modal-close').forEach(function(closeBtn) {
            closeBtn.addEventListener('click', function() {
                const modal = this.closest('.modal');
                if (modal) {
                    closeModal(modal);
                }
            });
        });

        // Fechar modal ao clicar fora
        document.querySelectorAll('.modal').forEach(function(modal) {
            modal.addEventListener('click', function(e) {
                if (e.target === this) {
                    closeModal(this);
                }
            });
        });

        // Fechar modal com ESC
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                const openModal = document.querySelector('.modal[style*="flex"]');
                if (openModal) {
                    closeModal(openModal);
                }
            }
        });

        // Funcionalidades de compartilhamento
        document.querySelectorAll('.share-whatsapp').forEach(function(btn) {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                // Usar URL do vídeo diretamente (sem AJAX)
                const videoElement = btn.closest('.modal').querySelector('video source');
                const videoUrl = videoElement ? videoElement.src : window.location.origin + '/quadras';
                const whatsappUrl = `https://wa.me/?text=${encodeURIComponent('Confira este vídeo: ' + videoUrl)}`;
                window.open(whatsappUrl, '_blank');
            });
        });

        document.querySelectorAll('.share-facebook').forEach(function(btn) {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                // Usar URL do vídeo diretamente (sem AJAX)
                const videoElement = btn.closest('.modal').querySelector('video source');
                const videoUrl = videoElement ? videoElement.src : window.location.origin + '/quadras';
                const facebookUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(videoUrl)}`;
                window.open(facebookUrl, '_blank');
            });
        });

        document.querySelectorAll('.share-twitter').forEach(function(btn) {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                // Usar URL do vídeo diretamente
                const videoElement = btn.closest('.modal').querySelector('video source');
                const videoUrl = videoElement ? videoElement.src : window.location.origin + '/quadras';
                const twitterUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(videoUrl)}&text=${encodeURIComponent('Confira este vídeo!')}`;
                window.open(twitterUrl, '_blank');
            });
        });

        document.querySelectorAll('.share-link').forEach(function(btn) {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                // Usar URL do vídeo diretamente
                const videoElement = btn.closest('.modal').querySelector('video source');
                const videoUrl = videoElement ? videoElement.src : window.location.origin + '/quadras';
                
                // Copiar link para clipboard
                navigator.clipboard.writeText(videoUrl).then(function() {
                    alert('Link do vídeo copiado para a área de transferência!');
                }).catch(function() {
                    // Fallback para navegadores mais antigos
                    const textArea = document.createElement('textarea');
                    textArea.value = videoUrl;
                    document.body.appendChild(textArea);
                    textArea.select();
                    document.execCommand('copy');
                    document.body.removeChild(textArea);
                    alert('Link do vídeo copiado para a área de transferência!');
                });
            });
        });
    });

    // Inicialização dos Swipers (baseado no app.bundle.js)
    document.addEventListener('DOMContentLoaded', function() {
        // Swiper dos vídeos principais (thumbnails)
        window.slideCourts = new Swiper(".slider-courts", {
            spaceBetween: 30,
            slidesPerView: 5,
            freeMode: true,
            watchSlidesProgress: true,
            breakpoints: {
                600: {
                    slidesPerView: 1,
                    spaceBetween: 12,
                },
                900: {
                    slidesPerView: 5,
                    spaceBetween: 12,
                },
            },
        });

        // Swiper do modal (principal)
        window.slideCourts2 = new Swiper(".slider-courts2", {
            spaceBetween: 1,
            navigation: {
                nextEl: ".courts-button-next",
                prevEl: ".courts-button-prev",
            },
            thumbs: {
                swiper: window.slideCourts,
            },
        });

        // Sincronizar vídeos quando slide muda
        if (window.slideCourts) {
            window.slideCourts.on("slideChange", () => {
                const iframes = document.querySelectorAll(".slider-courts iframe");
                iframes.forEach(iframe => {
                    const src = iframe.src;
                    iframe.src = src;
                });
            });
        }
    });

    $(function() {
        $("#datepicker").datepicker({
            showOtherMonths: true,
            selectOtherMonths: true
        });
    });
    const iframe = document.querySelector("#ytplayer");

    iframe.addEventListener("click", () => {
        const modal = document.querySelector(".modal.modal-video");
        if (modal.requestFullscreen) {
            modal.requestFullscreen();
        }
    });

</script>
@endsection