@extends('layouts.app')

@section('content')
<style>
    #audioPlayer {
        display: none;
    }

    .slider-container {
        position: relative;
        width: 100%;
        height: 320px;
        overflow: hidden;
    }

    .slider-wrapper {
        display: flex;
        width: 100%;
        height: 100%;
        transition: transform 0.3s ease-out;
    }

    .slider-image {
        min-width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .slider-dots {
        position: absolute;
        bottom: 10px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        gap: 8px;
        padding: 0 10px;
    }

    .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.5);
    }

    .dot.active {
        background-color: white;
    }
</style>

<!-- BAŞLIK RESİMLERİ / SLIDER -->
<div class="z-50 w-full border-b-8 shadow-md border-stone-800">
    <div class="w-full h-auto bg-center bg-cover slider-container">
        <div class="slider-wrapper">
            @if(!empty($imagePaths))
            @foreach($imagePaths as $index => $imagePath)
            <img src="{{ asset($imagePath) }}" alt="{{ $exhibit->name }}" class="slider-image"
                data-slide="{{ $index }}">
            @endforeach
            @else
            <img src="{{ asset($exhibit->getFirstImage()) }}" alt="{{ $exhibit->name }}" class="slider-image">
            @endif
        </div>
        <div class="slider-dots">
            @if(!empty($imagePaths))
            @foreach($imagePaths as $index => $imagePath)
            <span class="dot {{ $index === 0 ? 'active' : '' }}" data-slide="{{ $index }}"></span>
            @endforeach
            @else
            <span class="dot active" data-slide="0"></span>
            @endif
        </div>
    </div>
</div>
<!-- İÇERİK BÖLÜMÜ -->
<div class="container grid px-3 pb-56 mx-auto {{ app()->getLocale() === 'ar' ? 'text-right' : '' }}">
    <h3 class="pt-2 pb-0 text-lg uppercase text-stone-400">{{ $exhibit->city->name }} / {{ $exhibit->district->name }} /
        {{ $exhibit->venue->translated_name }}
    </h3>
    @if($exhibit->section)
    <h3 class="text-3xl uppercase text-stone-500">{{ $exhibit->section->translated_name }}
    </h3>
    @endif
    @if ($exhibit->translated_location_desc)
    <h3 class="text-2xl uppercase font-normal text-stone-400"><span class="text-stone-400 pr-1">{{
            $exhibit->order }}.</span>{{ $exhibit->translated_location_desc }}</h3>
    @endif
    <h1 class="text-4xl/9 mt-2 {{ app()->getLocale() === 'ar' ? 'font-bold' : '' }}">
        {{ $exhibit->translated_name }}
    </h1>
    <div class="text-stone-700 mt-3">
        {!! $exhibit->translated_description !!}
    </div>
</div>

<!-- NAVBAR -->
<div class="fixed bottom-0 w-full max-w-lg mx-auto">
    <!-- AUDIO PLAYER -->
    <div class="z-40 w-full mx-auto">
        <!-- Progress Bar -->
        <div class="w-full h-10 border-b cursor-pointer bg-stone-300/70 border-stone-300" id="progressContainer">
            <div id="progressBar" class="h-10 bg-yellow-500/80" style="width: 0%;"></div>
        </div>
        <!-- player -->
        <div class="relative flex items-center justify-center py-3 text-white bg-stone-900 gap-x-5">
            <audio id="audioPlayer" preload="metadata" src="{{ $audioPath ? asset($audioPath) : '' }}" @if(!$audioPath)
                style="display:none;" @endif></audio>
            <button id="normalSpeed">
                <span class="material-symbols-rounded" style="font-size: 2rem;">
                    1x_mobiledata
                </span>
            </button>
            <button id="1.2xSpeed">
                <span class="material-symbols-rounded" style="font-size: 2rem;">
                    speed_1_2x
                </span>
            </button>
            <button id="rewindBtn">
                <span class="material-symbols-rounded" style="font-size: 3rem;">
                    replay_10
                </span>
            </button>
            <button id="playBtn">
                <span class="material-symbols-rounded" style="font-size: 4.5rem;">
                    play_circle
                </span>
            </button>
            <button id="pauseBtn" class="hidden">
                <span class="material-symbols-rounded" style="font-size: 4.5rem;">
                    pause_circle
                </span>
            </button>
            <button id="forwardBtn">
                <span class="material-symbols-rounded" style="font-size: 3rem;">
                    forward_10
                </span>
            </button>
            <button id="1.5xSpeed">
                <span class="material-symbols-rounded" style="font-size: 2rem;">
                    speed_1_5x
                </span>
            </button>
            <button id="2xSpeed">
                <span class="material-symbols-rounded" style="font-size: 2rem;">
                    speed_2x
                </span>
            </button>
            <!-- play time -->
            <p id="currentTime" class="absolute bottom-2 left-3 text-stone-400">00:00</p>
            <!-- audio length -->
            <p id="duration" class="absolute bottom-2 right-3 text-stone-400">00:00</p>
        </div>
    </div>
    {{-- NAVBAR BUTTONS --}}
    <div class="flex items-center justify-between divide-x divide-stone-400">
        <a href="{{ $exhibit->section_id ? route('section', [
                    'city' => $exhibit->city->slug,
                    'district' => $exhibit->district->slug,
                    'venue' => $exhibit->venue->slug,
                    'section' => $exhibit->section->slug
                ]) : route('venue', [
                    'city' => $exhibit->city->slug,
                    'district' => $exhibit->district->slug,
                    'venue' => $exhibit->venue->slug
                ]) }}"
            class="content-center flex-auto h-16 py-2 text-center bg-stone-300 text-stone-800 hover:text-stone-600">
            <span class="material-symbols-rounded" style="font-size: 3rem;">
                keyboard_return
            </span>
        </a>
        <a href="#"
            class="content-center flex-auto h-16 py-2 text-center bg-stone-300 hover:text-stone-600 {{ $exhibit->section ? 'text-stone-800' : 'pointer-events-none opacity-90 text-stone-400' }}">
            <span class="material-symbols-rounded opacity-40" style="font-size: 3rem;">
                photo_camera
            </span>
        </a>
        <a href="#" class="flex-auto h-16 py-2 text-center bg-stone-300 text-stone-400 hover:text-stone-600">
            <span class="material-symbols-rounded" style="font-size: 3rem;">
                skip_previous
            </span>
        </a>
        <a href="#" class="flex-auto h-16 py-2 text-center bg-stone-300 text-stone-400 hover:text-stone-600">
            <span class="material-symbols-rounded" style="font-size: 3rem;">
                skip_next
            </span>
        </a>
    </div>
</div>

@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Image Slider
        const sliderImages = document.querySelectorAll('.slider-image');
        const sliderWrapper = document.querySelector('.slider-wrapper');

        console.log('Total slider images:', sliderImages.length);
        console.log('Slider images:', sliderImages);

        // Initialize current slide index
        if (sliderImages.length > 1) {
            let startX = 0;
            let currentIndex = 0;
            let isDragging = false;

            const sliderContainer = document.querySelector('.slider-container');

            // Add event listeners to the slider container for dragging
            sliderContainer.addEventListener('touchstart', (event) => {
                startX = event.touches[0].clientX;
                isDragging = true;
            });

            sliderContainer.addEventListener('touchmove', (event) => {
                if (!isDragging) return;
                event.preventDefault(); // Prevent scrolling while swiping
            });

            sliderContainer.addEventListener('touchend', (event) => {
                if (!isDragging) return;

                const endX = event.changedTouches[0].clientX;
                const diff = startX - endX;

                if (Math.abs(diff) > 50) { // Minimum swipe distance
                    if (diff > 0 && currentIndex < sliderImages.length - 1) {
                        // Swipe left - go to next slide
                        goToSlide(currentIndex + 1);
                    } else if (diff < 0 && currentIndex > 0) {
                        // Swipe right - go to previous slide
                        goToSlide(currentIndex - 1);
                    }
                }

                isDragging = false;
            });

            // Mouse events for desktop users
            sliderContainer.addEventListener('mousedown', (event) => {
                startX = event.clientX;
                isDragging = true;
                event.preventDefault(); // Prevent text selection
            });

            window.addEventListener('mousemove', (event) => {
                if (!isDragging) return;
                event.preventDefault(); // Prevent text selection
            });

            window.addEventListener('mouseup', (event) => {
                if (!isDragging) return;

                const endX = event.clientX;
                const diff = startX - endX;

                if (Math.abs(diff) > 50) { // Minimum swipe distance
                    if (diff > 0 && currentIndex < sliderImages.length - 1) {
                        // Drag left - go to next slide
                        goToSlide(currentIndex + 1);
                    } else if (diff < 0 && currentIndex > 0) {
                        // Drag right - go to previous slide
                        goToSlide(currentIndex - 1);
                    }
                }

                isDragging = false;
            });

            // Function to go to a specific slide
            function goToSlide(slideIndex) {
                if (slideIndex < 0 || slideIndex >= sliderImages.length) return;

                // Update the slider position
                const translateX = -slideIndex * 100;
                sliderWrapper.style.transform = `translateX(${translateX}%)`;

                // Update current index
                currentIndex = slideIndex;

                // Update dots
                document.querySelectorAll('.dot').forEach((dot, index) => {
                    dot.classList.toggle('active', index === currentIndex);
                });
            }

            console.log('Simple manual slider initialized with', sliderImages.length, 'images');
        } else {
            console.log('Only one image, slider disabled');
        }

        // Calculate the height of the fixed header after images are loaded
        const header = document.querySelector('.fixed.top-0');
        const headerImg = header ? header.querySelector('img') : null;

        function setHeaderHeight() {
            if (header) {
                const headerHeight = header.offsetHeight;
                document.documentElement.style.setProperty('--header-height', headerHeight + 'px');
                console.log('Header height set to:', headerHeight + 'px');
            }
        }

        // If there's an image in the header, wait for it to load before calculating height
        if (headerImg) {
            if (!headerImg.complete) {
                headerImg.addEventListener('load', setHeaderHeight);
            } else {
                setHeaderHeight();
            }
        } else {
            setHeaderHeight();
        }

        // Recalculate on window resize
        window.addEventListener('resize', setHeaderHeight);


        // Audio player implementation
            const audioPlayer = document.getElementById('audioPlayer');
            const playBtn = document.getElementById('playBtn');
            const pauseBtn = document.getElementById('pauseBtn');
            const rewindBtn = document.getElementById('rewindBtn');
            const forwardBtn = document.getElementById('forwardBtn');
            const normalSpeed = document.getElementById('normalSpeed');
            const speed1_2x = document.getElementById('1.2xSpeed');
            const speed1_5x = document.getElementById('1.5xSpeed');
            const speed2x = document.getElementById('2xSpeed');
            const progressBar = document.getElementById('progressBar');
            const progressContainer = document.getElementById('progressContainer');
            const currentTime = document.getElementById('currentTime');
            const duration = document.getElementById('duration');

            console.log('Audio element found:', audioPlayer);
            console.log('Audio source:', audioPlayer.src);

            // Format time in MM:SS format
            function formatTime(seconds) {
                if (!seconds || isNaN(seconds) || !isFinite(seconds)) {
                    return '00:00';
                }
                const minutes = Math.floor(seconds / 60);
                const remainingSeconds = Math.floor(seconds % 60);
                return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
            }

            // Update audio duration when metadata is loaded
            audioPlayer.addEventListener('loadedmetadata', function() {
                console.log('Audio metadata loaded, duration:', audioPlayer.duration);
                duration.textContent = formatTime(audioPlayer.duration);
            });

            // Fallback for duration update
            audioPlayer.addEventListener('durationchange', function() {
                console.log('Duration changed:', audioPlayer.duration);
                if (audioPlayer.duration && isFinite(audioPlayer.duration)) {
                    duration.textContent = formatTime(audioPlayer.duration);
                }
            });

            // Handle play button click
            playBtn.addEventListener('click', function() {
                const playPromise = audioPlayer.play();

                if (playPromise !== undefined) {
                    playPromise.then(() => {
                        // Playback started successfully
                        playBtn.classList.add('hidden');
                        pauseBtn.classList.remove('hidden');
                    })
                    .catch(error => {
                        // Auto-play was prevented, show user needs to interact
                        console.warn('Auto-play prevented:', error);
                        // Show an alert or UI element prompting user to press play again
                        alert('Please click the play button again to start playback.');
                    });
                } else {
                    // Audio played successfully (older browsers)
                    playBtn.classList.add('hidden');
                    pauseBtn.classList.remove('hidden');
                }
            });

            // Handle pause button click
            pauseBtn.addEventListener('click', function() {
                audioPlayer.pause();
                pauseBtn.classList.add('hidden');
                playBtn.classList.remove('hidden');
            });

            // Handle rewind button click (go back 10 seconds)
            rewindBtn.addEventListener('click', function() {
                audioPlayer.currentTime = Math.max(0, audioPlayer.currentTime - 10);
            });

            // Handle forward button click (go forward 10 seconds)
            forwardBtn.addEventListener('click', function() {
                if (audioPlayer.duration && isFinite(audioPlayer.duration)) {
                    audioPlayer.currentTime = Math.min(audioPlayer.duration, audioPlayer.currentTime + 10);
                } else {
                    audioPlayer.currentTime = audioPlayer.currentTime + 10;
                }
            });

            // Speed control buttons
            normalSpeed.addEventListener('click', function() {
                audioPlayer.playbackRate = 1.0;
                updateSpeedButtons(1.0);
            });

            speed1_2x.addEventListener('click', function() {
                audioPlayer.playbackRate = 1.2;
                updateSpeedButtons(1.2);
            });

            speed1_5x.addEventListener('click', function() {
                audioPlayer.playbackRate = 1.5;
                updateSpeedButtons(1.5);
            });

            speed2x.addEventListener('click', function() {
                audioPlayer.playbackRate = 2.0;
                updateSpeedButtons(2.0);
            });

            // Update speed buttons visual state
            function updateSpeedButtons(currentSpeed) {
                const buttons = [normalSpeed, speed1_2x, speed1_5x, speed2x];
                const speeds = [1.0, 1.2, 1.5, 2.0];

                buttons.forEach((btn, index) => {
                    if (speeds[index] === currentSpeed) {
                        btn.style.opacity = '1';
                        btn.style.transform = 'scale(1.3)';
                    } else {
                        btn.style.opacity = '0.4';
                        btn.style.transform = 'scale(1)';
                    }
                });
            }

            // Initialize speed buttons
            initializeSpeedButtons();

            function initializeSpeedButtons() {
                normalSpeed.style.opacity = '1';
                normalSpeed.style.transform = 'scale(1.3)';
                speed1_2x.style.opacity = '0.4';
                speed1_5x.style.opacity = '0.4';
                speed2x.style.opacity = '0.4';
            }

            // Update progress bar and current time
            audioPlayer.addEventListener('timeupdate', function() {
                const progress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
                progressBar.style.width = `${progress}%`;
                currentTime.textContent = formatTime(audioPlayer.currentTime);
            });

            // Allow seeking by clicking on the progress bar
            progressContainer.addEventListener('click', function(e) {
                if (audioPlayer.duration && isFinite(audioPlayer.duration)) {
                    const rect = progressContainer.getBoundingClientRect();
                    const pos = (e.clientX - rect.left) / rect.width;
                    audioPlayer.currentTime = pos * audioPlayer.duration;
                }
            });

            // When audio ends, reset to play button
            audioPlayer.addEventListener('ended', function() {
                pauseBtn.classList.add('hidden');
                playBtn.classList.remove('hidden');
                progressBar.style.width = '0%';
                currentTime.textContent = '00:00';
            });

            // Handle audio errors
            audioPlayer.addEventListener('error', function() {
                console.error('Error loading audio file:', audioPlayer.error);
                console.log('Audio source:', audioPlayer.src);
                console.log('Error details:', {
                    code: audioPlayer.error.code,
                    message: audioPlayer.error.message
                });
                console.log('Ses dosyası yüklenemedi. Lütfen dosya yolunu ve formatı kontrol edin.');
            });

            // Log when audio starts loading
            audioPlayer.addEventListener('loadstart', function() {
                console.log('Audio loading started...');
            });

            // Log when audio is loaded
            audioPlayer.addEventListener('canplaythrough', function() {
                console.log('Audio can play through');
            });
        });
</script>
@endpush