@extends('layouts.admin')

@section('content')

{{-- İŞLEV ÇUBUĞU --}}
<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">
                {{ $section->name }}</div>
            <button type="button" onclick="openCreateExhibitModal()"
                class="px-3.5 py-1.5 text-sm text-stone-500 hover:bg-stone-100 transition-all">Eser Ekle</button>
        </nav>
    </div>
</header>

<div>
    <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.venues.index' ) }}"
                                    class="ml-4 text-sm font-medium text-nowrap text-stone-500 hover:text-stone-700">MEKANLAR</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', $section->venue) }}"
                                    class="ml-4 text-sm font-medium text-nowrap text-stone-500 hover:text-stone-700">{{
                                    $section->venue->name }}</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="#"
                                    class="ml-4 text-sm font-medium text-nowrap text-stone-500 hover:text-stone-700"
                                    aria-current="page">{{ $section->name }}</a>
                            </div>
                        </li>
                    </ol>
                </nav>

                <div class="grid gap-4 lg:col-start-1 lg:col-end-3">
                    {{-- SAYFA BAŞLIĞI --}}
                    <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">
                                                layers
                                            </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">BÖLÜM</p>
                                        <p class="text-2xl font-bold uppercase truncate text-stone-900">
                                            {{ $section->name }}</p>
                                        <p class="text-base font-medium uppercase truncate text-stone-500">
                                            {{ $section->venue->name }} - {{ $section->venue->city->name }} - {{
                                            $section->venue->district->name }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- ESERLER --}}
                    <div class="p-4 bg-white rounded-lg shadow ring-1 ring-stone-300">
                        <h2
                            class="flex items-center justify-between mb-4 text-lg leading-6 font-jbmono-bold text-stone-700">
                            <div class="flex items-center">
                                <span class="mr-1 material-symbols-rounded">
                                    wall_art
                                </span>
                                Eserler
                            </div>
                            <div>
                                <span
                                    class="text-xl cursor-pointer material-symbols-rounded text-stone-500 hover:text-stone-800"
                                    onclick="openCreateExhibitModal()">
                                    add
                                </span>
                            </div>
                        </h2>
                        <div class="grid grid-cols-1">
                            @if($exhibits->count() > 0)
                            <div>
                                <div>
                                    <ul id="exhibitSortable" class="space-y-1" data-type="exhibit">
                                        @foreach($exhibits as $exhibit)
                                        <li class="flex items-center px-4 py-1 border rounded cursor-move gap-x-2 text-stone-500 bg-stone-50 hover:bg-stone-100 sortable-item"
                                            data-id="{{ $exhibit->id }}">
                                            <span class="cursor-move text-stone-400 sortable-handle">
                                                <span class="mt-1 material-symbols-rounded">
                                                    drag_indicator
                                                </span>
                                            </span>
                                            <span class="text-xs">{{ $exhibit->order }}</span>
                                            <a href="{{ route('admin.exhibits.show', $exhibit->id) }}"
                                                class="font-medium text-stone-800 hover:text-stone-600 hover:underline">
                                                {{ $exhibit->name }}

                                                <p class="text-xs text-stone-400">
                                                    <span>{{ $exhibit->id }}</span>
                                                    /{{ $exhibit->slug }}
                                                </p>
                                            </a>
                                            <div class="flex items-center gap-x-4 text-stone-400 ml-auto">
                                                @if (count($exhibit->getAllAudios()) > 0)
                                                <div class="flex gap-x-0.5"><span
                                                        class="material-symbols-rounded">music_note</span>
                                                    {{ count($exhibit->getAllAudios()) }}</div>
                                                @endif
                                                @if (count($exhibit->translations) > 0)
                                                <div class="flex gap-x-0.5"><span
                                                        class="material-symbols-rounded">translate</span>
                                                    {{ count($exhibit->translations) }}</div>
                                                @endif
                                                @if (count($exhibit->getAllImages()) > 0)
                                                <div class="flex gap-x-0.5"><span
                                                        class="material-symbols-rounded">photo</span>
                                                    {{ count($exhibit->getAllImages()) }}</div>
                                                @endif
                                            </div>
                                        </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                            @else
                            <x-alert-standard color="stone">
                                Bu bölüm için henüz eser bulunmuyor.
                            </x-alert-standard>
                            @endif
                        </div>
                    </div>
                </div>

                {{-- SAĞ PANEL --}}
                <div class="grid grid-cols-1 gap-4 sm:mx-0 lg:col-start-3">
                    {{-- ÜRÜN BİLGİLERİ --}}
                    <h2 class="flex items-center text-lg leading-6 font-jbmono-bold text-stone-700">
                        <span class="mr-1 material-symbols-rounded">
                            info
                        </span>
                        Bölüm Bilgileri
                    </h2>
                    <div class="p-4 bg-white rounded-lg shadow ring-1 ring-stone-300">
                        <h2 class="flex items-center text-lg leading-6 font-jbmono-bold text-stone-700 mb-4">
                            <span class="mr-1 material-symbols-rounded">
                                info
                            </span>
                            Bölüm Bilgileri
                        </h2>
                        <div class="space-y-3">
                            <div>
                                <label class="block text-sm font-medium text-stone-700 mb-1">Adı</label>
                                <p class="text-stone-900">{{ $section->name }}</p>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-stone-700 mb-1">Slug</label>
                                <p class="text-stone-900">{{ $section->slug }}</p>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-stone-700 mb-1">Mekan</label>
                                <p class="text-stone-900">{{ $section->venue->name }}</p>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-stone-700 mb-1">Şehir</label>
                                <p class="text-stone-900">{{ $section->venue->city->name }}</p>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-stone-700 mb-1">İlçe</label>
                                <p class="text-stone-900">{{ $section->venue->district->name }}</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </main>
</div>

<!-- MODAL *** Create Exhibit -->
<div id="createExhibitModal"
    class="fixed inset-0 z-50 flex items-start justify-center hidden pt-20 mx-auto bg-black bg-opacity-50">
    <div class="w-full max-w-md p-6 bg-white rounded-lg shadow-xl">
        <!-- Modal Header -->
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-stone-900">Yeni Eser</h3>
            <button onclick="closeCreateExhibitModal()" class="text-stone-400 hover:text-stone-600">
                <span class="text-2xl material-symbols-rounded">close</span>
            </button>
        </div>

        <!-- Modal Body -->
        <form id="createExhibitForm" class="space-y-4">
            <div>
                <label for="exhibitName" class="block mb-1 text-sm font-medium text-stone-700">Eser Adı</label>
                <input type="text" id="exhibitName" name="name" required
                    class="w-full px-3 py-2 border rounded-md bg-stone-50 border-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-500" />
            </div>
            <div>
                <label for="exhibitSlug" class="block mb-1 text-sm font-medium text-stone-700">Slug</label>
                <input type="text" id="exhibitSlug" name="slug" required
                    class="w-full px-3 py-2 border rounded-md bg-stone-50 border-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-500" />
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block mb-1 text-sm font-medium text-stone-700">Şehir</label>
                    <input type="text" value="{{ $section->venue->city->name }}" readonly
                        class="w-full px-3 py-2 border rounded-md bg-stone-200 border-stone-300" />
                    <input type="hidden" name="city_id" value="{{ $section->venue->city->id }}" />
                </div>
                <div>
                    <label class="block mb-1 text-sm font-medium text-stone-700">İlçe</label>
                    <input type="text" value="{{ $section->venue->district->name }}" readonly
                        class="w-full px-3 py-2 border rounded-md bg-stone-200 border-stone-300" />
                    <input type="hidden" name="district_id" value="{{ $section->venue->district->id }}" />
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label for="exhibitVenue" class="block mb-1 text-sm font-medium text-stone-700">Mekan</label>
                    <input type="text" value="{{ $section->venue->name }}" readonly
                        class="w-full px-3 py-2 border rounded-md bg-stone-200 border-stone-300" />
                    <input type="hidden" name="venue_id" value="{{ $section->venue->id }}" />
                </div>
                <div>
                    <label for="exhibitSection" class="block mb-1 text-sm font-medium text-stone-700">Bölüm</label>
                    <input type="text" value="{{ $section->name }}" readonly
                        class="w-full px-3 py-2 border rounded-md bg-stone-200 border-stone-300" />
                    <input type="hidden" name="section_id" value="{{ $section->id }}" />
                </div>
            </div>

            <div>
                <label for="exhibitNotes" class="block mb-1 text-sm font-medium text-stone-700">Notlar</label>
                <textarea id="exhibitNotes" name="notes" rows="3"
                    class="w-full px-3 py-2 border rounded-md bg-stone-50 border-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-500"></textarea>
            </div>

            <div class="flex justify-end gap-2">
                <button type="button" onclick="closeCreateExhibitModal()"
                    class="px-4 py-2 text-sm font-medium transition-colors border rounded-md text-stone-700 border-stone-300 hover:bg-stone-50">
                    VAZGEÇ
                </button>
                <button type="submit" id="submitCreateVenueBtn"
                    class="px-4 py-2 text-sm font-medium text-white transition-colors rounded-md bg-stone-600 hover:bg-stone-700">
                    OLUŞTUR
                </button>
            </div>
        </form>
    </div>
</div>


@endsection

@section('scripts')
{{-- SORTING JS --}}
<script>
    document.addEventListener('DOMContentLoaded', function() {
    // Exhibit Sortable
    const exhibitSortable = document.getElementById('exhibitSortable');
    if (exhibitSortable) {
      new Sortable(exhibitSortable, {
        animation: 150,
        handle: '.sortable-handle',
        onEnd: function () {
          const order = Array.from(document.querySelectorAll('#exhibitSortable li'))
            .map(el => el.dataset.id);

          fetch('{{ route("admin.exhibits.update-order") }}', {
            method: 'POST',
            headers: {
              'X-CSRF-TOKEN': '{{ csrf_token() }}',
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({ order })
          });
        }
      });
    }

    // Handle exhibit form submission
    const exhibitForm = document.getElementById('createExhibitForm');
    if (exhibitForm) {
      exhibitForm.addEventListener('submit', function(e) {
        e.preventDefault();

        // Get form data
        const formData = new FormData(exhibitForm);

        // Submit using fetch API
        fetch('{{ route("admin.exhibits.store") }}', {
          method: 'POST',
          headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json',
          },
          body: formData
        })
        .then(response => response.json())
        .then(data => {
          if (data.success) {
            // Close modal and refresh page or update UI
            closeCreateExhibitModal();
            location.reload();
          } else {
            alert('Error creating exhibit: ' + (data.message || 'Unknown error'));
          }
        })
        .catch(error => {
          console.error('Error:', error);
          alert('An error occurred while creating the exhibit.');
        });
      });
    }
  });

    function openCreateExhibitModal() {
        document.getElementById('createExhibitModal').classList.remove('hidden');
    }
    function closeCreateExhibitModal() {
        document.getElementById('createExhibitModal').classList.add('hidden');
    }
</script>
@endsection