@extends('layouts.app')

@section('content')
<div class="container mx-auto max-w-3xl px-4">
    @include('admin.panel._nav')

    <div class="mb-6 flex items-center justify-between">
        <h1 class="text-xl font-semibold text-gray-900">Edit Section: {{ $section->name }}</h1>
        <a href="{{ route('admin.sections.index') }}" class="text-sm text-gray-500 hover:underline">&larr; Kembali</a>
    </div>

    @if ($section->key === 'seo')
        <div class="mb-4 rounded border border-blue-200 bg-blue-50 px-4 py-3 text-sm text-blue-800">
            Pengaturan ini dipakai untuk SEO &amp; tampilan saat link situs dibagikan (WhatsApp, Facebook, dll).
            <strong>Judul</strong> = meta title / og:title, <strong>Subjudul</strong> = meta description / og:description,
            <strong>Gambar</strong> = gambar preview saat dibagikan (og:image). Judul ini jadi default — halaman
            tertentu (mis. Contact) tetap bisa punya judulnya sendiri.
        </div>
    @endif

    <form method="POST" action="{{ route('admin.sections.update', $section) }}" enctype="multipart/form-data" class="space-y-4">
        @csrf
        @method('PUT')

        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div>
                <label class="block text-sm font-medium text-gray-700">Judul (ID)</label>
                <input type="text" name="title[id]" value="{{ old('title.id', $section->getTranslation('title', 'id', false)) }}"
                       class="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Title (EN)</label>
                <input type="text" name="title[en]" value="{{ old('title.en', $section->getTranslation('title', 'en', false)) }}"
                       class="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm">
            </div>
        </div>

        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div>
                <label class="block text-sm font-medium text-gray-700">Subjudul (ID)</label>
                <textarea name="subtitle[id]" rows="2"
                          class="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm">{{ old('subtitle.id', $section->getTranslation('subtitle', 'id', false)) }}</textarea>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Subtitle (EN)</label>
                <textarea name="subtitle[en]" rows="2"
                          class="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm">{{ old('subtitle.en', $section->getTranslation('subtitle', 'en', false)) }}</textarea>
            </div>
        </div>
        @if ($section->key === 'footer')
            <p class="text-xs text-gray-400">Subjudul di sini tampil sebagai keterangan singkat di bawah logo pada kolom pertama footer.</p>
        @endif

        @php
            $contentLabel = match ($section->key) {
                'team' => 'URL Embed Google Maps',
                'footer' => 'Teks Copyright',
                'contact' => 'Alamat',
                'services' => 'Deskripsi About Us',
                'visimisi' => 'Pernyataan Visi',
                'privacy_policy', 'terms_conditions' => 'Isi Halaman',
                default => 'Konten',
            };
            $proseContent = in_array($section->key, ['services', 'visimisi', 'privacy_policy', 'terms_conditions'], true);
        @endphp
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div>
                <label class="block text-sm font-medium text-gray-700">{{ $contentLabel }} (ID)</label>
                <div class="mt-1">
                    @if ($proseContent)
                        @include('admin.panel._rich-editor', ['name' => 'content[id]', 'value' => old('content.id', $section->getTranslation('content', 'id', false))])
                    @else
                        <textarea name="content[id]" rows="3"
                                  class="w-full rounded border border-gray-300 px-3 py-2 text-sm">{{ old('content.id', $section->getTranslation('content', 'id', false)) }}</textarea>
                    @endif
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">{{ $contentLabel }} (EN)</label>
                <div class="mt-1">
                    @if ($proseContent)
                        @include('admin.panel._rich-editor', ['name' => 'content[en]', 'value' => old('content.en', $section->getTranslation('content', 'en', false))])
                    @else
                        <textarea name="content[en]" rows="3"
                                  class="w-full rounded border border-gray-300 px-3 py-2 text-sm">{{ old('content.en', $section->getTranslation('content', 'en', false)) }}</textarea>
                    @endif
                </div>
            </div>
        </div>
        @if ($proseContent)
            <p class="text-xs text-gray-400">Enter untuk baris baru. Gunakan tombol <strong>B</strong> untuk tebal dan tombol angka/bullet untuk daftar bernomor.</p>
        @else
            <p class="text-xs text-gray-400">Untuk section "team" &amp; "contact", nilai ID dan EN biasanya sama (URL peta / alamat tidak perlu diterjemahkan) &mdash; cukup isi keduanya sama.</p>
        @endif

        @if ($section->key === 'contact')
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Telepon</label>
                    <input type="text" name="meta[phone]" value="{{ old('meta.phone', $section->meta['phone'] ?? '') }}"
                           class="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Email</label>
                    <input type="email" name="meta[email]" value="{{ old('meta.email', $section->meta['email'] ?? '') }}"
                           class="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm">
                </div>
            </div>
        @endif

        @if (in_array($section->key, ['hero'], true))
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Teks Tombol (ID)</label>
                    <input type="text" name="button_text[id]" value="{{ old('button_text.id', $section->getTranslation('button_text', 'id', false)) }}"
                           class="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Button Text (EN)</label>
                    <input type="text" name="button_text[en]" value="{{ old('button_text.en', $section->getTranslation('button_text', 'en', false)) }}"
                           class="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm">
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Link Tombol</label>
                <input type="text" name="button_link" value="{{ old('button_link', $section->button_link) }}"
                       class="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm">
            </div>
        @endif

        <div>
            <label class="block text-sm font-medium text-gray-700">Gambar</label>
            @if ($section->imageUrl())
                <img src="{{ $section->imageUrl() }}"
                     alt="{{ $section->name }}" class="mt-2 h-20 rounded border border-gray-200 object-cover">
            @endif
            <input type="file" name="image" accept="image/*" class="mt-1 w-full text-sm">
        </div>

        <div class="flex items-center gap-2">
            <input type="checkbox" name="is_active" id="is_active" value="1" @checked(old('is_active', $section->is_active))>
            <label for="is_active" class="text-sm text-gray-700">Aktif</label>
        </div>

        <div class="flex gap-3">
            <button type="submit" class="rounded bg-gray-900 px-4 py-2 text-sm text-white hover:bg-gray-700">Simpan</button>
            <a href="{{ route('admin.sections.index') }}" class="rounded border border-gray-300 px-4 py-2 text-sm text-gray-700">Batal</a>
        </div>
    </form>

    <div class="mt-10">
        <div class="mb-4 flex items-center justify-between">
            <h2 class="text-lg font-semibold text-gray-900">Item {{ $section->name }}</h2>
            @can('create sections')
                <a href="{{ route('admin.sections.items.create', $section) }}"
                   class="rounded bg-gray-900 px-3 py-2 text-sm text-white hover:bg-gray-700">
                    Tambah Item
                </a>
            @endcan
        </div>
        @if ($section->key === 'services')
            <p class="mb-3 text-xs text-gray-400">Item di sini adalah kartu statistik: isi "Judul" dengan angka (mis. "10+") dan "Deskripsi" dengan labelnya (mis. "Tahun Pengalaman").</p>
        @elseif ($section->key === 'visimisi')
            <p class="mb-3 text-xs text-gray-400">Item di sini adalah poin-poin Misi: isi "Judul" dengan satu poin misi (deskripsi tidak dipakai).</p>
        @elseif ($section->key === 'whatwedo')
            <p class="mb-3 text-xs text-gray-400">Item di sini tampil sebagai kartu/kotak: isi "Ikon", "Judul", dan "Deskripsi" untuk tiap kartu.</p>
        @elseif ($section->key === 'features')
            <p class="mb-3 text-xs text-gray-400">Isi "Link" (opsional) kalau kartu layanan ini perlu diarahkan ke website lain saat diklik — kosongkan kalau tidak perlu.</p>
        @elseif ($section->key === 'footer')
            <p class="mb-3 text-xs text-gray-400">Item di sini tampil sebagai link kanan-bawah footer (mis. Kebijakan Privasi, Syarat &amp; Ketentuan): isi "Judul" dan "Link" tujuannya.</p>
        @endif

        <div class="overflow-x-auto rounded border border-gray-200">
            <table class="min-w-full text-sm">
                <thead class="bg-gray-50 text-left text-gray-600">
                    <tr>
                        <th class="px-4 py-2">Urutan</th>
                        <th class="px-4 py-2">Gambar</th>
                        <th class="px-4 py-2">Judul</th>
                        <th class="px-4 py-2">Status</th>
                        <th class="px-4 py-2">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($section->items as $item)
                        <tr class="border-t border-gray-100">
                            <td class="px-4 py-2">{{ $item->order }}</td>
                            <td class="px-4 py-2">
                                @if ($item->imageUrl())
                                    <img src="{{ $item->imageUrl() }}"
                                         alt="{{ $item->title }}" class="h-8 w-auto rounded">
                                @else
                                    -
                                @endif
                            </td>
                            <td class="px-4 py-2">{{ $item->title ?: '-' }}</td>
                            <td class="px-4 py-2">
                                @if ($item->is_active)
                                    <span class="rounded bg-green-100 px-2 py-1 text-xs text-green-800">Aktif</span>
                                @else
                                    <span class="rounded bg-gray-200 px-2 py-1 text-xs text-gray-700">Nonaktif</span>
                                @endif
                            </td>
                            <td class="px-4 py-2">
                                <div class="flex flex-wrap gap-2">
                                    @can('edit sections')
                                        <a href="{{ route('admin.items.edit', $item) }}" class="text-blue-600 hover:underline">Edit</a>
                                        <form method="POST" action="{{ route('admin.sections.items.toggle-status', $item) }}">
                                            @csrf
                                            @method('PATCH')
                                            <button type="submit" class="text-amber-600 hover:underline">
                                                {{ $item->is_active ? 'Nonaktifkan' : 'Aktifkan' }}
                                            </button>
                                        </form>
                                    @endcan
                                    @can('delete sections')
                                        <form method="POST" action="{{ route('admin.items.destroy', $item) }}"
                                              onsubmit="return confirm('Hapus item ini?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="text-red-600 hover:underline">Hapus</button>
                                        </form>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-4 py-6 text-center text-gray-500">Belum ada item.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection