@extends('layouts.guest')

@section('content')
    <div class="bg-white">
        <section aria-labelledby="features-heading" class="relative max-w-7xl mx-auto">
            @php
                $jpgPath = 'uploads/img/m/' . $artifact->image . '.jpg';
                $pngPath = 'uploads/img/m/' . $artifact->image . '.png';
                $imagePath = file_exists(public_path($jpgPath)) ? $jpgPath : $pngPath;
            @endphp

            <div class="lg:absolute lg:h-full lg:w-1/2 lg:pr-4 xl:pr-16 flex items-center justify-center">
                <img src="{{ asset($imagePath) }}" alt="{{ $artifact->name }}"
                    class="max-w-full max-h-full bg-black rounded-none sm:rounded-xl p-4 object-contain">
            </div>
            <div
                class="mx-auto max-w-2xl px-4 pt-4 pb-24 sm:px-6 sm:pb-32 lg:grid lg:max-w-7xl lg:grid-cols-2 lg:gap-x-8 lg:px-8 lg:pt-10">
                <div class="lg:col-start-2">
                    @if ($artifact->audio)
                        <div>
                            <h2 class="mb-2 text-xl font-medium">Eseri dinleyin</h2>
                            <div class="custom-audio-player bg-black rounded-lg p-6">
                                <audio id="audioPlayer" class="hidden">
                                    @php
                                        $mp3Path = 'uploads/audio/' . $artifact->audio . '.mp3';
                                        $mpegPath = 'uploads/audio/' . $artifact->audio . '.mpeg';
                                        $audioPath = file_exists(public_path($mp3Path)) ? $mp3Path : $mpegPath;
                                    @endphp
                                    <source src="{{ asset($audioPath) }}"
                                        type="{{ str_ends_with($audioPath, '.mp3') ? 'audio/mpeg' : 'audio/mpeg' }}">
                                    Tarayıcınız audio öğesini desteklemiyor.
                                </audio>

                                <div class="flex items-center mb-2">
                                    <button id="playPauseBtn" class="text-gray-200 focus:outline-none mr-4">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" viewBox="0 0 20 20"
                                            fill="currentColor">
                                            <path fill-rule="evenodd"
                                                d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
                                                clip-rule="evenodd" />
                                        </svg>
                                    </button>
                                    <div class="w-full">
                                        <input type="range" id="audioProgress"
                                            class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
                                            min="0" max="100" value="0">
                                        <div class="flex justify-between text-xs text-gray-200 mt-1">
                                            <span id="currentTime">0:00</span>
                                            <span id="duration">0:00</span>
                                        </div>
                                    </div>
                                    <button id="audioVolume" class="text-gray-200 focus:outline-none ml-4">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20"
                                            fill="currentColor">
                                            <path fill-rule="evenodd"
                                                d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z"
                                                clip-rule="evenodd" />
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                    @endif

                    <div
                        class="flex justify-between items-end content-end mt-4 text-4xl font-normal tracking-tight text-gray-400">
                        <div class="flex items-center mt-4 text-2xl font-normal text-gray-400">
                            <span class="material-symbols-rounded mr-1">
                                brightness_empty
                            </span>
                            <span>{{ $artifact->number }}</span>
                        </div>
                        <span class="text-base font-normal tracking-wide text-gray-600">
                            <a href="{{ route('artifacts') }}">
                                < Tüm eserlere dön</a>
                        </span>
                    </div>
                    <p class="mt-6 text-3xl font-bold tracking-tight text-gray-900">{{ $artifact->name }}</p>
                    <div class="mt-4">
                        <p class="text-gray-500">{!! nl2br(e($artifact->description)) !!}</p>
                    </div>

                    <dl class="mt-10 grid grid-cols-1 gap-x-8 gap-y-10 text-sm">
                        <div>
                            @if ($artifact->video)
                                <div class="mt-6">
                                    <h3 class="text-lg font-medium text-gray-900 mb-2">Video</h3>
                                    <div class="bg-gray-50 p-4 rounded-lg shadow">
                                        <video id="videoPlayer" class="w-full rounded" controls>
                                            <source src="{{ asset('uploads/artifacts/' . $artifact->video) }}"
                                                type="video/mp4">
                                            Tarayıcınız video öğesini desteklemiyor.
                                        </video>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </dl>

                    <!-- JavaScript for audio player -->
                    <script>
                        document.addEventListener('DOMContentLoaded', function() {
                            const audioPlayer = document.getElementById('audioPlayer');
                            if (audioPlayer) {
                                const playPauseBtn = document.getElementById('playPauseBtn');
                                const audioProgress = document.getElementById('audioProgress');
                                const currentTimeDisplay = document.getElementById('currentTime');
                                const durationDisplay = document.getElementById('duration');
                                const volumeBtn = document.getElementById('audioVolume');

                                // Format time in minutes:seconds
                                function formatTime(seconds) {
                                    const minutes = Math.floor(seconds / 60);
                                    const remainingSeconds = Math.floor(seconds % 60);
                                    return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
                                }

                                // Play/Pause button functionality
                                playPauseBtn.addEventListener('click', function() {
                                    if (audioPlayer.paused) {
                                        audioPlayer.play();
                                        playPauseBtn.innerHTML = `
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" viewBox="0 0 20 20" fill="currentColor">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z" clip-rule="evenodd" />
                                        </svg>
                                    `;
                                    } else {
                                        audioPlayer.pause();
                                        playPauseBtn.innerHTML = `
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" viewBox="0 0 20 20" fill="currentColor">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
                                        </svg>
                                    `;
                                    }
                                });

                                // Update progress bar and time displays
                                audioPlayer.addEventListener('timeupdate', function() {
                                    const currentTime = audioPlayer.currentTime;
                                    const duration = audioPlayer.duration;

                                    if (!isNaN(duration)) {
                                        audioProgress.value = (currentTime / duration) * 100;
                                        currentTimeDisplay.textContent = formatTime(currentTime);
                                        durationDisplay.textContent = formatTime(duration);
                                    }
                                });

                                // Set audio position when user drags progress bar
                                audioProgress.addEventListener('input', function() {
                                    const seekTime = audioPlayer.duration * (audioProgress.value / 100);
                                    audioPlayer.currentTime = seekTime;
                                });

                                // Display duration when metadata is loaded
                                audioPlayer.addEventListener('loadedmetadata', function() {
                                    durationDisplay.textContent = formatTime(audioPlayer.duration);
                                });

                                // Audio ended event
                                audioPlayer.addEventListener('ended', function() {
                                    playPauseBtn.innerHTML = `
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
                                    </svg>
                                `;
                                });

                                // Handle volume button click
                                volumeBtn.addEventListener('click', function() {
                                    if (audioPlayer.muted) {
                                        audioPlayer.muted = false;
                                        volumeBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828a1 1 0 010-1.415z" clip-rule="evenodd" />
                                    </svg>`;
                                    } else {
                                        audioPlayer.muted = true;
                                        volumeBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217z" clip-rule="evenodd" />
                                        <path d="M12.707 2.293a1 1 0 011.414 0L16 4.172l1.879-1.879a1 1 0 111.414 1.414L17.414 5.586l1.879 1.879a1 1 0 01-1.414 1.414L16 7.000l-1.879 1.879a1 1 0 11-1.414-1.414l1.879-1.879-1.879-1.879a1 1 0 010-1.414z" />
                                    </svg>`;
                                    }
                                });
                            }
                        });
                    </script>
                </div>
            </div>
        </section>
    </div>
@endsection