@extends('admin.layouts.app')

@php($duzenleme = $menu->exists)

@section('title', ($duzenleme ? 'Menüyü Düzenle' : 'Yeni Menü') . ' | LikaWEB CMS')

@section('content')
    <!-- Özel Modern CSS Stilleri -->
    <style>
        .modern-admin-header {
            background: linear-gradient(135deg, #0f172a, #1e293b);
            padding: 24px;
            border-radius: 16px;
            border: 1px solid #334155;
            margin-bottom: 24px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }
        .modern-admin-header h1 {
            color: #ffffff;
            font-size: 24px;
            font-weight: 800;
            margin: 0 0 6px 0;
        }
        .modern-admin-header p {
            color: #94a3b8;
            font-size: 14px;
            margin: 0;
        }
        
        .modern-card {
            background: #ffffff;
            border-radius: 16px;
            border: 1px solid #e2e8f0;
            padding: 24px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
            margin-bottom: 24px;
        }
        .modern-card h2 {
            font-size: 18px;
            font-weight: 700;
            color: #0f172a;
            margin: 0 0 16px 0;
            padding-bottom: 12px;
            border-b: 1px solid #e2e8f0;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        /* Form Alanları */
        .modern-field {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-bottom: 16px;
        }
        .modern-field label {
            font-size: 13px;
            font-weight: 600;
            color: #334155;
        }
        .modern-field input[type="text"],
        .modern-field input[type="number"],
        .modern-field select {
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            padding: 10px 14px;
            font-size: 14px;
            color: #0f172a;
            background-color: #f8fafc;
            transition: all 0.2s ease;
        }
        .modern-field input:focus,
        .modern-field select:focus {
            border-color: #2563eb;
            background-color: #ffffff;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
            outline: none;
        }
        
        /* Hiyerarşik Ağaç Yapısı */
        .tree-container {
            margin-top: 24px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .tree-item {
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            background: #ffffff;
            overflow: hidden;
            transition: all 0.2s ease;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.01);
        }
        .tree-item:hover {
            border-color: #cbd5e1;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
        }
        .tree-item-header {
            padding: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            background-color: #f8fafc;
            border-bottom: 1px solid transparent;
            cursor: pointer;
            user-select: none;
        }
        .tree-item.is-open .tree-item-header {
            border-bottom-color: #e2e8f0;
            background-color: #f1f5f9;
        }
        .tree-item-title-col {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-grow: 1;
        }
        .tree-indent-bar {
            width: 24px;
            height: 24px;
            border-left: 2px dashed #cbd5e1;
            border-bottom: 2px dashed #cbd5e1;
            margin-top: -12px;
            margin-right: 4px;
            flex-shrink: 0;
        }
        .tree-item-label {
            font-weight: 700;
            color: #0f172a;
            font-size: 15px;
        }
        .tree-item-info {
            font-size: 12px;
            color: #64748b;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .tree-item-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }
        
        .tree-item-body {
            padding: 20px;
            background-color: #ffffff;
            display: none;
        }
        
        /* Rozetler (Badges) */
        .modern-badge {
            font-size: 11px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 6px;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }
        .badge-sayfa { background-color: #dbeafe; color: #1e40af; }
        .badge-url { background-color: #fef3c7; color: #92400e; }
        .badge-anchor { background-color: #f3e8ff; color: #6b21a8; }
        
        /* Durum Göstergesi */
        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
        }
        .status-active {
            background-color: #10b981;
            box-shadow: 0 0 8px #10b981;
        }
        .status-passive {
            background-color: #94a3b8;
        }
        
        /* Butonlar */
        .modern-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-weight: 600;
            font-size: 13px;
            padding: 8px 16px;
            border-radius: 8px;
            transition: all 0.2s ease;
            cursor: pointer;
            border: none;
            outline: none;
        }
        .btn-primary-blue {
            background-color: #2563eb;
            color: #ffffff;
        }
        .btn-primary-blue:hover {
            background-color: #1d4ed8;
            transform: translateY(-1px);
        }
        .btn-secondary-slate {
            background-color: #f1f5f9;
            color: #334155;
            border: 1px solid #cbd5e1;
        }
        .btn-secondary-slate:hover {
            background-color: #e2e8f0;
            transform: translateY(-1px);
        }
        .btn-danger-rose {
            background-color: #f43f5e;
            color: #ffffff;
        }
        .btn-danger-rose:hover {
            background-color: #e11d48;
            transform: translateY(-1px);
        }
        
        .grid-layout {
            display: grid;
            grid-template-cols: 1fr;
            gap: 24px;
        }
        @media(min-width: 1024px) {
            .grid-layout {
                grid-template-cols: 2fr 1fr;
            }
        }
        
        /* SVG Boyut Sınırlayıcıları */
        .modern-admin-header svg,
        .modern-card svg,
        .tree-item svg {
            display: inline-block;
            vertical-align: middle;
            flex-shrink: 0;
        }
        svg.w-4 {
            width: 16px;
            height: 16px;
        }
        svg.w-5 {
            width: 20px;
            height: 20px;
        }
        
        .checkbox-container {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 8px;
            font-size: 13px;
            font-weight: 600;
            color: #334155;
            cursor: pointer;
        }
        .checkbox-container input {
            width: 16px;
            height: 16px;
            cursor: pointer;
        }
    </style>

    <!-- Header Alanı -->
    <div class="modern-admin-header">
        <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;">
            <div>
                <h1>{{ $duzenleme ? 'Menüyü Düzenle' : 'Yeni Menü Oluştur' }}</h1>
                <p>Menü konumunu, durumunu ve menü ağaç yapısını Türkçe uyumlu modern arayüzle yönetin.</p>
            </div>
            <a class="modern-btn btn-secondary-slate" href="{{ route('admin.menuler.index') }}">
                <svg class="w-4 h-4" width="16" height="16" style="width: 16px; height: 16px;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18" /></svg>
                Listeye Dön
            </a>
        </div>
    </div>

    <!-- Menü Bilgileri Formu -->
    <form action="{{ $duzenleme ? route('admin.menuler.update', $menu) : route('admin.menuler.store') }}" method="POST">
        @csrf
        @if ($duzenleme)
            @method('PUT')
        @endif

        <div class="grid-layout">
            <div class="modern-card">
                <h2>
                    <svg width="20" height="20" style="width: 20px; height: 20px;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" /></svg>
                    Menü Bilgileri
                </h2>
                
                <div class="form-grid" style="display: grid; grid-template-cols: 1fr; gap: 16px; margin-bottom: 20px;">
                    <div class="modern-field">
                        <label for="ad">Menü Adı</label>
                        <input id="ad" name="ad" type="text" value="{{ old('ad', $menu->ad) }}" maxlength="120" required placeholder="Örn: Ana Navigasyon">
                        @error('ad')<span class="field-error" style="color: #ef4444; font-size: 12px; font-weight: 600;">{{ $message }}</span>@enderror
                    </div>

                    <div class="grid-2-col" style="display: grid; grid-template-cols: 1fr 1fr; gap: 16px;">
                        <div class="modern-field">
                            <label for="konum">Konum Kodu</label>
                            <input id="konum" name="konum" type="text" value="{{ old('konum', $menu->konum) }}" maxlength="80" placeholder="header" required>
                            <small class="field-hint" style="font-size: 11px; color: #64748b;">Şablonda çağırmak için benzersiz kod. Örn: header, footer</small>
                            @error('konum')<span class="field-error" style="color: #ef4444; font-size: 12px; font-weight: 600;">{{ $message }}</span>@enderror
                        </div>

                        <div class="modern-field">
                            <label for="durum">Menü Durumu</label>
                            <select id="durum" name="durum" required>
                                <option value="aktif" @selected(old('durum', $menu->durum ?: 'aktif') === 'aktif')>Aktif</option>
                                <option value="pasif" @selected(old('durum', $menu->durum) === 'pasif')>Pasif</option>
                            </select>
                            @error('durum')<span class="field-error" style="color: #ef4444; font-size: 12px; font-weight: 600;">{{ $message }}</span>@enderror
                        </div>
                    </div>
                </div>

                <div class="form-actions" style="border-top: 1px solid #e2e8f0; padding-top: 16px; text-align: right;">
                    <button class="modern-btn btn-primary-blue" type="submit">
                        <svg class="w-4 h-4" width="16" height="16" style="width: 16px; height: 16px;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
                        {{ $duzenleme ? 'Değişiklikleri Kaydet' : 'Menüyü Oluştur' }}
                    </button>
                </div>
            </div>

            <div class="modern-card" style="background-color: #f8fafc; border-color: #cbd5e1;">
                <h3 style="font-size: 14px; font-weight: 700; color: #1e293b; margin: 0 0 8px 0; display: flex; align-items: center; gap: 6px;">
                    <svg class="w-4 h-4 text-blue-500" width="16" height="16" style="width: 16px; height: 16px; color: #2563eb;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                    Önemli Bilgi
                </h3>
                <p style="font-size: 12px; color: #475569; leading-relaxed: 1.5;">
                    Konum kodu, temanızın ilgili alanlarında (üst başlık, alt bilgi vb.) dinamik menüyü çağırmak için sistem anahtarı görevi görür. Sitenin bütünlüğünü korumak adına var olan konum kodlarını silmek yerine pasif duruma getirmeniz önerilir.
                </p>
            </div>
        </div>
    </form>

    <!-- Menü Ögeleri Bölümü (Sadece Düzenleme Modunda) -->
    @if ($duzenleme)
        <div class="grid-layout" style="margin-top: 24px;">
            <!-- Sol Sütun: Menü Ögeleri Listesi -->
            <div class="modern-card">
                <h2>
                    <svg style="width: 20px; height: 20px;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012 2v2M7 7h10" /></svg>
                    Mevcut Menü Ögeleri Listesi
                </h2>
                <p style="font-size: 13px; color: #64748b; margin-top: -12px; margin-bottom: 20px;">
                    Eklenen ögeleri düzenlemek için üzerlerine tıklayıp formu açabilirsiniz. Ögeleri silmek veya sıralarını değiştirmek için detayları kullanın.
                </p>

                <div class="tree-container">
                    @forelse ($menuOgeleri as $oge)
                        <div class="tree-item" id="tree_item_{{ $oge->menu_ogesi_id }}">
                            <div class="tree-item-header" onclick="toggleTreeItem({{ $oge->menu_ogesi_id }})">
                                <div class="tree-item-title-col">
                                    <!-- Girinti Çizgileri -->
                                    @for ($i = 0; $i < $oge->seviye; $i++)
                                        <div class="tree-indent-bar"></div>
                                    @endfor
                                    
                                    <span class="status-dot {{ $oge->durum === 'aktif' ? 'status-active' : 'status-passive' }}" title="{{ $oge->durum === 'aktif' ? 'Aktif' : 'Pasif' }}"></span>
                                    <span class="tree-item-label">{{ $oge->etiket }}</span>
                                    
                                    <span class="modern-badge badge-{{ $oge->tip }}">
                                        @if ($oge->tip === 'sayfa') Sayfa @elseif ($oge->tip === 'url') Dış URL @else Çapa @endif
                                    </span>
                                </div>

                                <div class="tree-item-info">
                                    <span class="desktop-only">
                                        @if ($oge->tip === 'sayfa')
                                            {{ $oge->sayfa?->baslik ?? 'Sayfa Kaydı Bulunamadı' }}
                                        @else
                                            {{ $oge->hedef }}
                                        @endif
                                    </span>
                                    <span style="font-weight: 700; background-color: #f1f5f9; padding: 2px 6px; border-radius: 4px;" title="Sıra">#{{ $oge->sira }}</span>
                                </div>

                                <div class="tree-item-actions">
                                    <button class="modern-btn btn-secondary-slate" style="padding: 6px 10px; font-size: 11px;" type="button">
                                        Düzenle
                                    </button>
                                    <form action="{{ route('admin.menuler.ogeler.destroy', [$menu, $oge]) }}" method="POST" style="display: inline;" onsubmit="return confirm('Bu menü ögesini silmek istediğinize emin misiniz? Varsa tüm alt ögeleri de silinecektir!');">
                                        @csrf
                                        @method('DELETE')
                                        <button class="modern-btn btn-danger-rose" style="padding: 6px 10px; font-size: 11px;" type="submit">
                                            Sil
                                        </button>
                                    </form>
                                </div>
                            </div>

                            <!-- Katlanabilir Düzenleme Formu Gövdesi -->
                            <div class="tree-item-body" id="tree_body_{{ $oge->menu_ogesi_id }}">
                                <form action="{{ route('admin.menuler.ogeler.update', [$menu, $oge]) }}" method="POST">
                                    @csrf
                                    @method('PUT')

                                    <div style="display: grid; grid-template-cols: 1fr; gap: 16px;">
                                        <div style="display: grid; grid-template-cols: 1fr md:grid-template-cols-3; gap: 16px;">
                                            <div class="modern-field">
                                                <label for="etiket_{{ $oge->menu_ogesi_id }}">Öge Başlığı (Etiket)</label>
                                                <input id="etiket_{{ $oge->menu_ogesi_id }}" name="etiket" type="text" value="{{ $oge->etiket }}" maxlength="160" required>
                                            </div>

                                            <div class="modern-field">
                                                <label for="tip_{{ $oge->menu_ogesi_id }}">Bağlantı Tipi</label>
                                                <select id="tip_{{ $oge->menu_ogesi_id }}" name="tip" onchange="toggleItemFields({{ $oge->menu_ogesi_id }})" required>
                                                    <option value="sayfa" @selected($oge->tip === 'sayfa')>Sayfa</option>
                                                    <option value="url" @selected($oge->tip === 'url')>Dış URL</option>
                                                    <option value="anchor" @selected($oge->tip === 'anchor')>Sayfa İçi Çapa (#)</option>
                                                </select>
                                            </div>

                                            <div class="modern-field" id="sayfa_id_field_{{ $oge->menu_ogesi_id }}">
                                                <label for="sayfa_id_{{ $oge->menu_ogesi_id }}">Bağlanacak Sayfa</label>
                                                <select id="sayfa_id_{{ $oge->menu_ogesi_id }}" name="sayfa_id">
                                                    <option value="">Bir sayfa seçin...</option>
                                                    @foreach ($sayfalar as $sayfa)
                                                        <option value="{{ $sayfa->sayfa_id }}" @selected((string) $oge->sayfa_id === (string) $sayfa->sayfa_id)>{{ $sayfa->baslik }} (/{{ $sayfa->slug }})</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="modern-field" id="hedef_field_{{ $oge->menu_ogesi_id }}">
                                                <label for="hedef_{{ $oge->menu_ogesi_id }}">Hedef Değer (Link/Çapa)</label>
                                                <input id="hedef_{{ $oge->menu_ogesi_id }}" name="hedef" type="text" value="{{ $oge->hedef }}" maxlength="500" placeholder="https:// veya #ozellikler">
                                            </div>
                                        </div>

                                        <div style="display: grid; grid-template-cols: 1fr md:grid-template-cols-3; gap: 16px;">
                                            <div class="modern-field">
                                                <label for="ust_menu_ogesi_id_{{ $oge->menu_ogesi_id }}">Üst Menü Ögesi</label>
                                                <select id="ust_menu_ogesi_id_{{ $oge->menu_ogesi_id }}" name="ust_menu_ogesi_id">
                                                    <option value="">Üst Öge Yok (Ana Seviye)</option>
                                                    @foreach ($parentOptions as $parentOption)
                                                        @continue($parentOption->menu_ogesi_id === $oge->menu_ogesi_id)
                                                        <option value="{{ $parentOption->menu_ogesi_id }}" @selected((string) $oge->ust_menu_ogesi_id === (string) $parentOption->menu_ogesi_id)>{{ str_repeat('-- ', (int) $parentOption->seviye) }}{{ $parentOption->etiket }}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="modern-field">
                                                <label for="sira_{{ $oge->menu_ogesi_id }}">Görüntüleme Sırası</label>
                                                <input id="sira_{{ $oge->menu_ogesi_id }}" name="sira" type="number" value="{{ $oge->sira }}" min="0" required>
                                            </div>

                                            <div class="modern-field">
                                                <label for="durum_{{ $oge->menu_ogesi_id }}">Durum</label>
                                                <select id="durum_{{ $oge->menu_ogesi_id }}" name="durum" required>
                                                    <option value="aktif" @selected($oge->durum === 'aktif')>Aktif</option>
                                                    <option value="pasif" @selected($oge->durum === 'pasif')>Pasif</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; border-top: 1px solid #f1f5f9; padding-top: 16px;">
                                            <label class="checkbox-container" for="yeni_sekme_{{ $oge->menu_ogesi_id }}">
                                                <input name="yeni_sekme" type="hidden" value="0">
                                                <input id="yeni_sekme_{{ $oge->menu_ogesi_id }}" name="yeni_sekme" type="checkbox" value="1" @checked($oge->yeni_sekme)>
                                                Bağlantıyı yeni sekmede aç
                                            </label>

                                            <button class="modern-btn btn-primary-blue" type="submit">
                                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
                                                Öge Değişikliklerini Kaydet
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    @empty
                        <p style="text-align: center; color: #94a3b8; font-size: 14px; padding: 24px; border: 1px dashed #cbd5e1; border-radius: 12px; background: #f8fafc;">
                            Bu menüde henüz hiç öge bulunmuyor. Sağdaki formu kullanarak yeni ögeler ekleyebilirsiniz.
                        </p>
                    @endforelse
                </div>
            </div>

            <!-- Sağ Sütun: Yeni Öge Ekleme Paneli -->
            <div class="modern-card">
                <h2>
                    <svg style="width: 20px; height: 20px;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                    Yeni Öge Ekle
                </h2>
                
                <form action="{{ route('admin.menuler.ogeler.store', $menu) }}" method="POST">
                    @csrf

                    <div style="display: flex; flex-direction: column; gap: 16px;">
                        <div class="modern-field">
                            <label for="etiket">Etiket / Başlık</label>
                            <input id="etiket" name="etiket" type="text" value="{{ old('etiket') }}" maxlength="160" required placeholder="Örn: Hakkımızda">
                            @error('etiket')<span class="field-error" style="color: #ef4444; font-size: 12px; font-weight: 600;">{{ $message }}</span>@enderror
                        </div>

                        <div class="modern-field">
                            <label for="tip">Bağlantı Tipi</label>
                            <select id="tip" name="tip" onchange="toggleNewItemFields()" required>
                                <option value="sayfa" @selected(old('tip', 'sayfa') === 'sayfa')>Sayfa</option>
                                <option value="url" @selected(old('tip') === 'url')>Dış URL</option>
                                <option value="anchor" @selected(old('tip') === 'anchor')>Sayfa İçi Çapa (#)</option>
                            </select>
                            @error('tip')<span class="field-error" style="color: #ef4444; font-size: 12px; font-weight: 600;">{{ $message }}</span>@enderror
                        </div>

                        <div class="modern-field" id="new_sayfa_id_field">
                            <label for="sayfa_id">Bağlanacak Sayfa</label>
                            <select id="sayfa_id" name="sayfa_id">
                                <option value="">Bir sayfa seçin...</option>
                                @foreach ($sayfalar as $sayfa)
                                    <option value="{{ $sayfa->sayfa_id }}" @selected((string) old('sayfa_id') === (string) $sayfa->sayfa_id)>{{ $sayfa->baslik }} (/{{ $sayfa->slug }})</option>
                                @endforeach
                            </select>
                            @error('sayfa_id')<span class="field-error" style="color: #ef4444; font-size: 12px; font-weight: 600;">{{ $message }}</span>@enderror
                        </div>

                        <div class="modern-field" id="new_hedef_field">
                            <label for="hedef">Hedef Değer (Link/Çapa)</label>
                            <input id="hedef" name="hedef" type="text" value="{{ old('hedef') }}" maxlength="500" placeholder="https:// veya #ozellikler">
                            @error('hedef')<span class="field-error" style="color: #ef4444; font-size: 12px; font-weight: 600;">{{ $message }}</span>@enderror
                        </div>

                        <div class="modern-field">
                            <label for="ust_menu_ogesi_id">Üst Menü Ögesi</label>
                            <select id="ust_menu_ogesi_id" name="ust_menu_ogesi_id">
                                <option value="">Üst Öge Yok (Ana Seviye)</option>
                                @foreach ($parentOptions as $parentOption)
                                    <option value="{{ $parentOption->menu_ogesi_id }}" @selected((string) old('ust_menu_ogesi_id') === (string) $parentOption->menu_ogesi_id)>{{ str_repeat('-- ', (int) $parentOption->seviye) }}{{ $parentOption->etiket }}</option>
                                @endforeach
                            </select>
                            @error('ust_menu_ogesi_id')<span class="field-error" style="color: #ef4444; font-size: 12px; font-weight: 600;">{{ $message }}</span>@enderror
                        </div>

                        <div class="modern-field">
                            <label for="sira">Sıralama</label>
                            <input id="sira" name="sira" type="number" value="{{ old('sira') }}" min="0" placeholder="Otomatik">
                            @error('sira')<span class="field-error" style="color: #ef4444; font-size: 12px; font-weight: 600;">{{ $message }}</span>@enderror
                        </div>

                        <div class="modern-field">
                            <label for="oge_durum">Durum</label>
                            <select id="oge_durum" name="durum" required>
                                <option value="aktif" @selected(old('durum', 'aktif') === 'aktif')>Aktif</option>
                                <option value="pasif" @selected(old('durum') === 'pasif')>Pasif</option>
                            </select>
                            @error('durum')<span class="field-error" style="color: #ef4444; font-size: 12px; font-weight: 600;">{{ $message }}</span>@enderror
                        </div>

                        <label class="checkbox-container" for="new_yeni_sekme">
                            <input name="yeni_sekme" type="hidden" value="0">
                            <input id="new_yeni_sekme" name="new_yeni_sekme" type="checkbox" value="1" @checked(old('yeni_sekme'))>
                            Bağlantıyı yeni sekmede aç
                        </label>

                        <div style="border-top: 1px solid #e2e8f0; padding-top: 16px; margin-top: 8px;">
                            <button class="modern-btn btn-primary-blue" style="width: 100%;" type="submit">
                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
                                Yeni Menü Ögesi Ekle
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @endif

    <!-- Etkileşim Yönetimi için JavaScript -->
    <script>
        // Sayfa yüklendiğinde çalışacak başlangıç ayarları
        document.addEventListener('DOMContentLoaded', () => {
            // Yeni öge alanlarını ilk duruma göre göster/gizle
            toggleNewItemFields();
            
            // Tüm mevcut ögeler için alan göster/gizlemelerini çalıştır
            @if ($duzenleme)
                @foreach ($menuOgeleri as $oge)
                    toggleItemFields({{ $oge->menu_ogesi_id }});
                @endforeach
            @endif
        });

        // 1. Mevcut ağaç ögesini genişlet/kapat
        function toggleTreeItem(id) {
            const body = document.getElementById(`tree_body_${id}`);
            const item = document.getElementById(`tree_item_${id}`);
            if (body && item) {
                const isOpen = item.classList.contains('is-open');
                if (isOpen) {
                    body.style.display = 'none';
                    item.classList.remove('is-open');
                } else {
                    body.style.display = 'block';
                    item.classList.add('is-open');
                }
            }
        }

        // Tıklamaların form girişlerini tetiklemesini önle (tıklama olayı sadece başlığa ait olsun)
        @if ($duzenleme)
            @foreach ($menuOgeleri as $oge)
                const bodyEl_{{ $oge->menu_ogesi_id }} = document.getElementById('tree_body_{{ $oge->menu_ogesi_id }}');
                if (bodyEl_{{ $oge->menu_ogesi_id }}) {
                    bodyEl_{{ $oge->menu_ogesi_id }}.addEventListener('click', (e) => {
                        e.stopPropagation();
                    });
                }
                
                // Form içindeki butonlar ve eylemler dış tıklama tetiklememeli
                const formEl_{{ $oge->menu_ogesi_id }} = bodyEl_{{ $oge->menu_ogesi_id }} ? bodyEl_{{ $oge->menu_ogesi_id }}.querySelector('form') : null;
                if (formEl_{{ $oge->menu_ogesi_id }}) {
                    formEl_{{ $oge->menu_ogesi_id }}.addEventListener('click', (e) => {
                        e.stopPropagation();
                    });
                }
                
                // Header içindeki form ve butonların tıklaması yayılmamalı
                const headerEl_{{ $oge->menu_ogesi_id }} = document.querySelector(`#tree_item_${{ $oge->menu_ogesi_id }} .tree-item-header`);
                if (headerEl_{{ $oge->menu_ogesi_id }}) {
                    const actionForm_{{ $oge->menu_ogesi_id }} = headerEl_{{ $oge->menu_ogesi_id }}.querySelector('form');
                    if (actionForm_{{ $oge->menu_ogesi_id }}) {
                        actionForm_{{ $oge->menu_ogesi_id }}.addEventListener('click', (e) => {
                            e.stopPropagation();
                        });
                    }
                    const actionBtns_{{ $oge->menu_ogesi_id }} = headerEl_{{ $oge->menu_ogesi_id }}.querySelectorAll('button, a');
                    actionBtns_{{ $oge->menu_ogesi_id }}.forEach(btn => {
                        btn.addEventListener('click', (e) => {
                            e.stopPropagation();
                        });
                    });
                }
            @endforeach
        @endif

        // 2. Yeni öge ekleme formundaki alanların gösterimi
        function toggleNewItemFields() {
            const tipSelect = document.getElementById('tip');
            const sayfaField = document.getElementById('new_sayfa_id_field');
            const hedefField = document.getElementById('new_hedef_field');

            if (!tipSelect) return;

            if (tipSelect.value === 'sayfa') {
                if (sayfaField) sayfaField.style.display = 'block';
                if (hedefField) hedefField.style.display = 'none';
            } else {
                if (sayfaField) sayfaField.style.display = 'none';
                if (hedefField) hedefField.style.display = 'block';
            }
        }

        // 3. Mevcut ögelerin formlarındaki alanların gösterimi
        function toggleItemFields(id) {
            const tipSelect = document.getElementById(`tip_${id}`);
            const sayfaField = document.getElementById(`sayfa_id_field_${id}`);
            const hedefField = document.getElementById(`hedef_field_${id}`);

            if (!tipSelect) return;

            if (tipSelect.value === 'sayfa') {
                if (sayfaField) sayfaField.style.display = 'block';
                if (hedefField) hedefField.style.display = 'none';
            } else {
                if (sayfaField) sayfaField.style.display = 'none';
                if (hedefField) hedefField.style.display = 'block';
            }
        }
    </script>
@endsection