@extends('layouts.admin')

@section('content')

{{-- ACTION BAR --}}
<header class="tracking-tight shadow bg-gradient-to-b from-stone-100 to-white">
    <div class="lg:divide-y lg:divide-stone-200">
        <nav class="hidden divide-x lg:flex" aria-label="Global">
            <div
                class="bg-gradient-to-b from-stone-600 to-stone-500 ps-2.5 pe-4 py-1.5 text-sm text-stone-50 shadow-sm rounded-e-2xl">
                {{ $exhibit->name }}</div>
            <button type="button" onclick="toggleEditMode()"
                class="px-3.5 py-1.5 text-sm text-stone-500 hover:bg-stone-100 transition-all">
                <span class="material-symbols-rounded align-middle text-base">edit</span>
                <span id="editButtonText">Düzenle</span>
            </button>
            <button type="button" id="saveButton" onclick="submitForm()" style="display: none;"
                class="px-3.5 py-1.5 text-sm text-green-500 hover:bg-green-50 transition-all">
                <span class="material-symbols-rounded align-middle text-base">save</span>
                Kaydet
            </button>
            <button type="button" onclick="openDeleteModal({{ $exhibit->id }}, '{{ addslashes($exhibit->name) }}')"
                class="px-3.5 py-1.5 text-sm text-red-500 hover:bg-red-50 transition-all">
                <span class="material-symbols-rounded align-middle text-base">delete</span>
                Sil
            </button>
        </nav>
    </div>
</header>

<div class="">
    <main>
        <div class="w-full px-4 pt-4 pb-60 sm:px-6 lg:px-8">
            <div
                class="grid items-start max-w-2xl grid-cols-1 grid-rows-1 gap-4 mx-auto lg:mx-0 lg:max-w-none lg:grid-cols-3">

                {{-- BREADCRUMB --}}
                <nav class="flex py-2" aria-label="Breadcrumb">
                    <ol role="list" class="flex items-center space-x-3 uppercase">
                        <li>
                            <div>
                                <a href="{{ route('admin.dashboard') }}" class="text-stone-400 hover:text-stone-500">
                                    <svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="currentColor"
                                        aria-hidden="true">
                                        <path fill-rule="evenodd"
                                            d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z"
                                            clip-rule="evenodd" />
                                    </svg>
                                </a>
                            </div>
                        </li>
                        <li>
                            <div class="flex items-center">
                                <svg class="flex-shrink-0 w-5 h-5 text-stone-300" fill="currentColor"
                                    viewBox="0 0 20 20" aria-hidden="true">
                                    <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
                                </svg>
                                <a href="{{ route('admin.exhibits.index') }}"
                                    class="ml-4 text-sm font-medium text-nowrap text-stone-500 hover:text-stone-700">
                                    ESERLER</a>
                            </div>
                        </li>
                        <li>
                            <div class="flex items-center">
                                <svg class="flex-shrink-0 w-5 h-5 text-stone-300" fill="currentColor"
                                    viewBox="0 0 20 20" aria-hidden="true">
                                    <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
                                </svg>
                                <a href="{{ route('admin.venues.show', $exhibit->venue->id) }}"
                                    class="ml-4 text-sm font-medium text-nowrap text-stone-500 hover:text-stone-700">
                                    {{ $exhibit->venue->name }}</a>
                            </div>
                        </li>
                        @if ($exhibit->section_id != null)
                        <li>
                            <div class="flex items-center">
                                <svg class="flex-shrink-0 w-5 h-5 text-stone-300" fill="currentColor"
                                    viewBox="0 0 20 20" aria-hidden="true">
                                    <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
                                </svg>
                                <a href="{{ route('admin.sections.show', $exhibit->section->id) }}"
                                    class="ml-4 text-sm font-medium text-nowrap text-stone-500 hover:text-stone-700">
                                    {{ $exhibit->section->name }}</a>
                            </div>
                        </li>
                        @endif
                        <li>
                            <div class="flex items-center">
                                <svg class="flex-shrink-0 w-5 h-5 text-stone-300" fill="currentColor"
                                    viewBox="0 0 20 20" aria-hidden="true">
                                    <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
                                </svg>
                                <a href="#"
                                    class="ml-4 text-sm font-medium text-nowrap text-stone-500 hover:text-stone-700"
                                    aria-current="page">
                                    {{ $exhibit->name }}</a>
                            </div>
                        </li>
                    </ol>
                </nav>

                <div class="grid gap-4 lg:col-start-1 lg:col-end-3">
                    {{-- EXHIBIT INFO CARD --}}
                    <div class="overflow-hidden bg-white rounded-lg shadow ring-1 ring-stone-300">
                        <div class="p-6 bg-white">
                            <div class="sm:flex sm:items-center sm:justify-between">
                                <div class="sm:flex sm:space-x-5">
                                    <div class="flex-shrink-0 rounded-full pattern-charlie-brown">
                                        <span
                                            class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-b from-stone-100/80 to-stone-100/30">
                                            <span class="text-4xl material-symbols-rounded text-stone-600">
                                                wall_art
                                            </span>
                                        </span>
                                    </div>
                                    <div class="w-full mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
                                        <p class="text-sm font-medium text-stone-500">ESER</p>
                                        <p class="text-2xl font-bold uppercase truncate text-stone-900 cursor-pointer flex items-center justify-center sm:justify-start"
                                            onclick="copyExhibitNameToClipboard('{{ addslashes($exhibit->name) }}')">
                                            {{ $exhibit->name }}
                                            <span
                                                class="material-symbols-rounded text-stone-400 hover:text-stone-800 ml-2">content_copy</span>
                                        </p>
                                        <p class="text-sm font-medium text-stone-500" data-slug-display>
                                            {{ $exhibit->slug }}</p>
                                    </div>
                                </div>
                                <div class="flex mt-4 space-x-3 sm:mt-0">
                                    <span
                                        class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium {{ $exhibit->is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                        {{ $exhibit->is_active ? 'Aktif' : 'Pasif' }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- SLUG SECTION --}}
                    <div class="p-6 bg-white rounded-lg shadow ring-1 ring-stone-300">
                        @livewire('exhibit-slug-manager', ['exhibit' => $exhibit])
                    </div>

                    {{-- TRANSLATION SECTION --}}
                    <div class="p-6 bg-white rounded-lg shadow ring-1 ring-stone-300">
                        @livewire('exhibit-translations-manager', ['exhibit' => $exhibit])
                    </div>

                    {{-- IMAGES SECTION --}}
                    <div class="p-6 bg-white rounded-lg shadow ring-1 ring-stone-300">
                        <h2 class="flex items-center mb-4 text-lg leading-6 font-jbmono-bold text-stone-700">
                            <span class="mr-1 material-symbols-rounded">
                                photo_library
                            </span>
                            Görseller
                        </h2>

                        <div class="mb-4">
                            <p class="text-sm text-stone-600">
                                Klasör yolu: <code
                                    class="bg-stone-100 px-2 py-1 rounded">{{ $exhibit->getFolderPath() }}/img/</code>
                            </p>
                        </div>

                        @php
                        $images = $exhibit->getAllImages();
                        @endphp

                        @if(count($images) > 0)
                        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
                            @foreach($images as $image)
                            <div class="relative group">
                                <img src="{{ asset($image) }}" alt="{{ $exhibit->name }}"
                                    class="object-cover w-full h-32 rounded-lg">
                                <div
                                    class="absolute inset-0 flex items-center justify-center opacity-0 bg-black bg-opacity-50 rounded-lg group-hover:opacity-100 transition-opacity">
                                    <a href="{{ asset($image) }}" target="_blank"
                                        class="p-2 text-white bg-black bg-opacity-70 rounded-full hover:bg-opacity-90">
                                        <span class="material-symbols-rounded">visibility</span>
                                    </a>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        @else
                        <div class="text-center py-8 text-stone-500">
                            <span class="material-symbols-rounded text-4xl mb-2">image_not_supported</span>
                            <p>Bu eser için henüz görsel eklenmemiş.</p>
                        </div>
                        @endif
                    </div>

                    {{-- AUDIOS SECTION --}}
                    <div class="p-6 bg-white rounded-lg shadow ring-1 ring-stone-300">
                        <h2 class="flex items-center mb-4 text-lg leading-6 font-jbmono-bold text-stone-700">
                            <span class="mr-1 material-symbols-rounded">
                                music_note
                            </span>
                            Ses Dosyaları
                        </h2>

                        <div class="mb-4">
                            <p class="text-sm text-stone-600">
                                Klasör yolu: <code
                                    class="bg-stone-100 px-2 py-1 rounded">{{ $exhibit->getFolderPath() }}/audio/</code>
                            </p>
                        </div>

                        @php
                        $audios = $exhibit->getAllAudios();
                        @endphp

                        @if(count($audios) > 0)
                        <div class="space-y-3">
                            @foreach($audios as $audio)
                            <div
                                class="flex items-center p-3 bg-stone-50 rounded-lg group hover:bg-stone-100 transition-colors">
                                <div
                                    class="flex-shrink-0 w-10 h-10 flex items-center justify-center bg-stone-200 rounded-lg mr-3">
                                    <span class="material-symbols-rounded text-stone-600">audiotrack</span>
                                </div>
                                <div class="flex-grow min-w-0">
                                    <p class="text-sm font-medium text-stone-900 truncate">{{ $audio['basename'] }}</p>
                                    <p class="text-xs text-stone-500 truncate">{{ $audio['filename'] }}</p>
                                </div>
                                <div class="flex items-center space-x-2 ml-3">
                                    <audio controls preload="none" class="hidden sm:block w-32 h-8">
                                        <source src="{{ asset($audio['path']) }}"
                                            type="audio/{{ pathinfo($audio['filename'], PATHINFO_EXTENSION) }}">
                                        Tarayıcınız bu ses dosyasını desteklemiyor.
                                    </audio>
                                    <a href="{{ asset($audio['path']) }}" target="_blank"
                                        class="p-2 text-stone-600 hover:text-stone-900 hover:bg-stone-200 rounded-full transition-colors">
                                        <span class="material-symbols-rounded">download</span>
                                    </a>
                                </div>
                            </div>
                            @endforeach
                        </div>

                        <!-- Mobile audio players -->
                        <div class="sm:hidden mt-4 space-y-3">
                            @foreach($audios as $audio)
                            <div class="p-3 bg-stone-50 rounded-lg">
                                <p class="text-sm font-medium text-stone-900 mb-2">{{ $audio['basename'] }}</p>
                                <audio controls preload="none" class="w-full">
                                    <source src="{{ asset($audio['path']) }}"
                                        type="audio/{{ pathinfo($audio['filename'], PATHINFO_EXTENSION) }}">
                                    Tarayıcınız bu ses dosyasını desteklemiyor.
                                </audio>
                            </div>
                            @endforeach
                        </div>
                        @else
                        <div class="text-center py-8 text-stone-500">
                            <span class="material-symbols-rounded text-4xl mb-2">music_off</span>
                            <p>Bu eser için henüz ses dosyası eklenmemiş.</p>
                        </div>
                        @endif
                    </div>

                    {{-- DETAILS SECTION --}}
                    <div class="p-6 bg-white rounded-lg shadow ring-1 ring-stone-300">
                        <h2 class="flex items-center mb-4 text-lg leading-6 font-jbmono-bold text-stone-700">
                            <span class="mr-1 material-symbols-rounded">
                                info
                            </span>
                            Eser Detayları
                        </h2>


                        <form id="exhibitForm" method="POST" action="{{ route('admin.exhibits.update', $exhibit) }}">
                            @csrf
                            @method('PUT')

                            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">

                                <div>
                                    <label class="block text-sm font-medium text-stone-500">Şehir *</label>
                                    <select name="city_id" id="citySelect"
                                        class="mt-1 block w-full px-3 py-2 rounded-md border-stone-300 shadow-sm focus:border-stone-500 focus:ring-stone-500 sm:text-sm editable-field bg-stone-50"
                                        disabled>
                                        <option value="">Seçiniz</option>
                                        @foreach($cities as $city)
                                        <option value="{{ $city->id }}" {{ old('city_id', $exhibit->city_id) ==
                                            $city->id ? 'selected' : '' }}>
                                            {{ $city->name }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-stone-500">İlçe *</label>
                                    <select name="district_id" id="districtSelect"
                                        class="mt-1 block w-full px-3 py-2 rounded-md border-stone-300 shadow-sm focus:border-stone-500 focus:ring-stone-500 sm:text-sm editable-field bg-stone-50"
                                        disabled>
                                        <option value="">Seçiniz</option>
                                        @foreach($districts as $district)
                                        <option value="{{ $district->id }}" {{ old('district_id', $exhibit->district_id)
                                            == $district->id ? 'selected' : '' }}>
                                            {{ $district->name }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-stone-500">Mekan *</label>
                                    <select name="venue_id" id="venueSelect"
                                        class="mt-1 block w-full px-3 py-2 rounded-md border-stone-300 shadow-sm focus:border-stone-500 focus:ring-stone-500 sm:text-sm editable-field bg-stone-50"
                                        disabled>
                                        <option value="">Seçiniz</option>
                                        @foreach($venues as $venue)
                                        <option value="{{ $venue->id }}" {{ old('venue_id', $exhibit->venue_id) ==
                                            $venue->id ? 'selected' : '' }}>
                                            {{ $venue->name }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-stone-500">Bölüm</label>
                                    <select name="section_id" id="sectionSelect"
                                        class="mt-1 block w-full px-3 py-2 rounded-md border-stone-300 shadow-sm focus:border-stone-500 focus:ring-stone-500 sm:text-sm editable-field bg-stone-50"
                                        disabled>
                                        <option value="">Bölüme Dahil Değil</option>
                                        @foreach($sections as $section)
                                        <option value="{{ $section->id }}" {{ old('section_id', $exhibit->section_id) ==
                                            $section->id ? 'selected' : '' }}>
                                            {{ $section->name }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-stone-500">Sıra</label>
                                    <input type="number" name="order" id="exhibitOrder"
                                        class="mt-1 block w-full px-3 py-2 rounded-md border-stone-300 shadow-sm focus:border-stone-500 focus:ring-stone-500 sm:text-sm editable-field bg-stone-50"
                                        value="{{ old('order', $exhibit->order) }}" readonly>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-stone-500">Durum</label>
                                    <select name="is_active" id="isActiveSelect"
                                        class="mt-1 block w-full px-3 py-2 rounded-md border-stone-300 shadow-sm focus:border-stone-500 focus:ring-stone-500 sm:text-sm editable-field bg-stone-50"
                                        disabled>
                                        <option value="1" {{ old('is_active', $exhibit->is_active) ? 'selected' : ''
                                            }}>Aktif</option>
                                        <option value="0" {{ old('is_active', $exhibit->is_active) ? '' : 'selected'
                                            }}>Pasif</option>
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>

                </div>

                {{-- RIGHT PANEL --}}
                <div class="grid grid-cols-1 gap-4 sm:mx-0 lg:col-start-3">
                    <div class="p-4 bg-white rounded-lg shadow ring-1 ring-stone-300">
                        <h2 class="flex items-center mb-4 text-lg leading-6 font-jbmono-bold text-stone-700">
                            <span class="mr-1 material-symbols-rounded">
                                bar_chart
                            </span>
                            Özet
                        </h2>

                        <div class="space-y-3">
                            <div class="flex justify-between">
                                <span class="text-sm text-stone-500">Durum</span>
                                <span
                                    class="text-sm font-medium {{ $exhibit->is_active ? 'text-green-600' : 'text-red-600' }}">
                                    {{ $exhibit->is_active ? 'Aktif' : 'Pasif' }}
                                </span>
                            </div>

                            <div class="flex justify-between">
                                <span class="text-sm text-stone-500">Görsel Sayısı</span>
                                <span class="text-sm font-medium text-stone-700">{{ count($images) }}</span>
                            </div>

                            <div class="flex justify-between">
                                <span class="text-sm text-stone-500">Ses Dosyası Sayısı</span>
                                <span class="text-sm font-medium text-stone-700">{{ count($audios) }}</span>
                            </div>

                            <div class="flex justify-between">
                                <span class="text-sm text-stone-500">Son Güncelleme</span>
                                <span class="text-sm font-medium text-stone-700">{{
                                    $exhibit->updated_at->format('d.m.Y') }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>

{{-- DELETE MODAL --}}
<div id="deleteModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" aria-hidden="true"></div>

        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

        <div
            class="inline-block overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="px-4 pt-5 pb-4 bg-white sm:p-6 sm:pb-4">
                <div class="sm:flex sm:items-start">
                    <div
                        class="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto bg-red-100 rounded-full sm:mx-0 sm:h-10 sm:w-10">
                        <span class="material-symbols-rounded text-red-600">delete</span>
                    </div>
                    <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                        <h3 class="text-lg font-medium leading-6 text-gray-900" id="deleteModalTitle">
                            Eseri Sil
                        </h3>
                        <div class="mt-2">
                            <p class="text-sm text-gray-500">
                                Bu eseri silmek istediğinizden emin misiniz? Bu işlem geri alınamaz.
                            </p>
                            <p class="mt-2 text-sm font-medium text-gray-900" id="deleteExhibitName"></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="px-4 py-3 bg-gray-50 sm:px-6 sm:flex sm:flex-row-reverse">
                <form id="deleteForm" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit"
                        class="inline-flex justify-center w-full px-4 py-2 text-base font-medium text-white bg-red-600 border border-transparent rounded-md shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
                        Sil
                    </button>
                </form>
                <button type="button" onclick="closeDeleteModal()"
                    class="inline-flex justify-center w-full px-4 py-2 mt-3 text-base font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                    İptal
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
    let isEditing = false;

    function toggleEditMode() {
        isEditing = !isEditing;

        const editableFields = document.querySelectorAll('.editable-field');
        const editButton = document.getElementById('editButtonText');
        const quickEditButton = document.getElementById('quickEditButtonText');
        const saveButton = document.getElementById('saveButton');

        if (isEditing) {
            // Enable editing
            editableFields.forEach(field => {
                if (field.tagName === 'INPUT' || field.tagName === 'TEXTAREA') {
                    field.removeAttribute('readonly');
                } else if (field.tagName === 'SELECT') {
                    field.removeAttribute('disabled');
                }
                field.classList.remove('bg-stone-50');
                field.classList.add('bg-white');
            });

            editButton.textContent = 'İptal';
            quickEditButton.textContent = 'İptal';
            saveButton.style.display = 'block';
        } else {
            // Cancel editing
            editableFields.forEach(field => {
                if (field.tagName === 'INPUT' || field.tagName === 'TEXTAREA') {
                    field.setAttribute('readonly', 'readonly');
                } else if (field.tagName === 'SELECT') {
                    field.setAttribute('disabled', 'disabled');
                }
                field.classList.add('bg-stone-50');
                field.classList.remove('bg-white');
            });

            editButton.textContent = 'Düzenle';
            quickEditButton.textContent = 'Düzenle';
            saveButton.style.display = 'none';

            // Reset form to original values
            document.getElementById('exhibitForm').reset();
        }
    }

    function submitForm() {
        // Önce Livewire bileşenlerinin güncellenmesini bekle
        setTimeout(() => {
            document.getElementById('exhibitForm').submit();
        }, 100);
    }

    function openDeleteModal(exhibitId, exhibitName) {
        document.getElementById('deleteExhibitName').textContent = '"' + exhibitName + '"';
        document.getElementById('deleteForm').action = '/admin/exhibits/' + exhibitId;
        document.getElementById('deleteModal').classList.remove('hidden');
        document.getElementById('deleteModal').classList.add('block');
    }

    function closeDeleteModal() {
        document.getElementById('deleteModal').classList.add('hidden');
        document.getElementById('deleteModal').classList.remove('block');
    }

    // Close modal when clicking outside
    document.addEventListener('click', function(event) {
        const modal = document.getElementById('deleteModal');
        if (event.target === modal) {
            closeDeleteModal();
        }
    });

    // Listen for slug updates from Livewire component
    window.addEventListener('slugUpdated', event => {
        // Update any elements that display the slug
        const slugDisplayElements = document.querySelectorAll('[data-slug-display]');
        slugDisplayElements.forEach(element => {
            element.textContent = event.detail.slug;
        });
    });

    // Copy exhibit name to clipboard
    function copyExhibitNameToClipboard(exhibitName) {
        navigator.clipboard.writeText(exhibitName).then(function() {
            // Show success feedback
            const originalIcon = document.querySelector('.material-symbols-rounded');
            const originalText = originalIcon.textContent;

            // Change icon to checkmark
            originalIcon.textContent = 'check';
            originalIcon.classList.remove('text-stone-400', 'hover:text-stone-800');
            originalIcon.classList.add('text-green-500');

            // Revert back after 2 seconds
            setTimeout(function() {
                originalIcon.textContent = originalText;
                originalIcon.classList.remove('text-green-500');
                originalIcon.classList.add('text-stone-400', 'hover:text-stone-800');
            }, 2000);
        }).catch(function(error) {
            console.error('Failed to copy text: ', error);
        });
    }
</script>
@endsection