@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="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>

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

            @if($paginator && $paginator->total() > 0)
                <div class="courts__items">
                    @foreach($videos as $index => $video)
                        <div class="courts__item" data-modal-open="modal-video-{{ $loop->index }}" >
                            <video>
                                <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 data-modal="modal-video-{{ $loop->index }}" class="modal modal-video-{{ $loop->index }}">
                            <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="modal__content">
                                        <video controls width="860" height="640">
                                            <source src="{{ $video['url'] ?? $video['dropbox_path'] }}" type="video/mp4">
                                            Seu navegador não suporta o elemento de vídeo.
                                        </video>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </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>
</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');
                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);
                }
            }
        });
    });
</script>
@endsection