@extends('admin.layouts.app')

@section('title', isset($menu) ? 'Menyunu dəyiş' : 'Yeni menyu')

@php
    $isFooter = isset($menu) && $menu->location === 'footer';
    $isChild = isset($menu) && $menu->parent_id;
    $currentKind = old('menu_kind', request('parent') ? 'child' : (request('area') === 'footer' || $isFooter ? 'footer' : ($isChild ? 'child' : 'main')));
    $currentDestination = old('destination', match($menu->link_type ?? '') {
        'category' => 'category',
        'products' => 'products',
        'about' => 'about',
        'contacts' => 'contacts',
        default => 'custom',
    });
@endphp

@section('content')
<div class="admin-header-row">
    <div>
        <h1 class="admin-title">{{ isset($menu) ? 'Menyunu dəyiş' : 'Yeni menyu əlavə et' }}</h1>
        <p class="admin-page-description">Adı yazın, harada görünəcəyini seçin və kliklənəndə hara açılacağını göstərin.</p>
    </div>
    <a href="{{ route('admin.menus.index') }}" class="admin-btn admin-btn-secondary">Geri qayıt</a>
</div>

<form method="POST" action="{{ isset($menu) ? route('admin.menus.update', $menu) : route('admin.menus.store') }}" class="simple-admin-form" data-simple-menu-form>
    @csrf
    @if(isset($menu)) @method('PUT') @endif

    <input type="hidden" name="menu_area" value="{{ $currentKind === 'footer' ? 'footer' : 'header' }}" data-menu-area>
    <input type="hidden" name="menu_level" value="{{ $currentKind === 'child' ? 'child' : 'main' }}" data-menu-level>

    <div class="admin-card">
        <div class="simple-admin-heading">
            <span>1</span>
            <div>
                <h2>Nə əlavə edirsiniz?</h2>
                <p>Əsas menyu yuxarıda görünür. Alt menyu seçdiyiniz menyunun altında görünür.</p>
            </div>
        </div>

        <div class="simple-choice-grid">
            <label class="simple-choice">
                <input type="radio" name="menu_kind" value="main" {{ $currentKind === 'main' ? 'checked' : '' }}>
                <strong>Əsas menyu</strong>
                <small>Məsələn: Mətbəx texnikası</small>
            </label>
            <label class="simple-choice">
                <input type="radio" name="menu_kind" value="child" {{ $currentKind === 'child' ? 'checked' : '' }}>
                <strong>Alt menyu</strong>
                <small>Məsələn: Çaydanlar, Blenderlər</small>
            </label>
            <label class="simple-choice">
                <input type="radio" name="menu_kind" value="footer" {{ $currentKind === 'footer' ? 'checked' : '' }}>
                <strong>Footer linki</strong>
                <small>Saytın aşağı hissəsi</small>
            </label>
        </div>

        <div class="admin-form-group" data-parent-menu-field>
            <label>Hansı menyunun altında görünsün?</label>
            <select name="parent_id" class="admin-form-control">
                <option value="">Menyunu seçin</option>
                @foreach($parents as $parent)
                    <option value="{{ $parent->id }}" {{ old('parent_id', $menu->parent_id ?? request('parent')) == $parent->id ? 'selected' : '' }}>
                        {{ $parent->parent_id ? '— ' : '' }}{{ $parent->title }}
                    </option>
                @endforeach
            </select>
            <small class="admin-help-text">Yaratdığınız menyu burada görünmürsə, onu əvvəl aktiv menyu kimi yadda saxlayın.</small>
        </div>
    </div>

    <div class="admin-card">
        <div class="simple-admin-heading">
            <span>2</span>
            <div>
                <h2>Menyu adı</h2>
                <p>Saytda görünəcək adı yazın.</p>
            </div>
        </div>

        <div class="admin-form-group">
            <label>Menyu adı *</label>
            <input name="title" class="admin-form-control" required value="{{ old('title', $menu->title ?? '') }}" placeholder="Məsələn: Yeni məhsullar">
        </div>

        <details class="admin-details">
            <summary>İngilis və rus dilində ad</summary>
            <div class="admin-details__content admin-form-grid">
                <div class="admin-form-group">
                    <label>Ad (EN)</label>
                    <input name="title_en" class="admin-form-control" value="{{ old('title_en', $menu->title_en ?? '') }}">
                </div>
                <div class="admin-form-group">
                    <label>Ad (RU)</label>
                    <input name="title_ru" class="admin-form-control" value="{{ old('title_ru', $menu->title_ru ?? '') }}">
                </div>
            </div>
        </details>
    </div>

    <div class="admin-card">
        <div class="simple-admin-heading">
            <span>3</span>
            <div>
                <h2>Kliklənəndə hara açılsın?</h2>
                <p>Kateqoriya, bütün məhsullar və ya istədiyiniz linki seçə bilərsiniz.</p>
            </div>
        </div>

        <div class="admin-form-group">
            <label>Açılacaq səhifə</label>
            <select name="destination" class="admin-form-control" data-menu-destination>
                <option value="category" {{ $currentDestination === 'category' ? 'selected' : '' }}>Kateqoriya səhifəsi</option>
                <option value="products" {{ $currentDestination === 'products' ? 'selected' : '' }}>Bütün məhsullar</option>
                <option value="about" {{ $currentDestination === 'about' ? 'selected' : '' }}>Şirkət haqqında</option>
                <option value="contacts" {{ $currentDestination === 'contacts' ? 'selected' : '' }}>Əlaqə</option>
                <option value="custom" {{ $currentDestination === 'custom' ? 'selected' : '' }}>Başqa link</option>
            </select>
        </div>

        <div class="admin-form-group" data-category-field>
            <label>Kateqoriyanı seçin</label>
            <select name="category_id" class="admin-form-control">
                <option value="">Kateqoriya seçin</option>
                @foreach($categories as $category)
                    <option value="{{ $category->id }}" {{ old('category_id', ($menu->link_type ?? '') === 'category' ? $categories->firstWhere('slug', $menu->link_value)?->id : '') == $category->id ? 'selected' : '' }}>
                        {{ $category->parent_id ? '— ' : '' }}{{ $category->name }}
                    </option>
                @endforeach
            </select>
        </div>

        <div class="admin-form-group" data-custom-url-field>
            <label>Link ünvanı</label>
            <input name="custom_url" class="admin-form-control" value="{{ old('custom_url', $currentDestination === 'custom' ? ($menu->url ?? '') : '') }}" placeholder="/az/products və ya https://...">
        </div>
    </div>

    <div class="admin-card">
        <div class="simple-admin-heading">
            <span>4</span>
            <div>
                <h2>Son ayarlar</h2>
                <p>Sıra nömrəsi az olan menyu daha əvvəl görünür.</p>
            </div>
        </div>

        <div class="admin-form-grid">
            <div class="admin-form-group">
                <label>Sıra nömrəsi</label>
                <input type="number" name="sort_order" class="admin-form-control" value="{{ old('sort_order', $menu->sort_order ?? 0) }}">
            </div>
            <div class="admin-form-group slider-editor__checks">
                <label class="admin-form-check">
                    <input type="checkbox" name="is_active" value="1" {{ old('is_active', $menu->is_active ?? true) ? 'checked' : '' }}>
                    <span>Aktiv olsun</span>
                </label>
            </div>
        </div>
    </div>

    <div class="slider-editor__actions">
        <button class="admin-btn admin-btn-primary">Yadda saxla</button>
        <a href="{{ route('admin.menus.index') }}" class="admin-btn admin-btn-secondary">Ləğv et</a>
    </div>
</form>

<script>
    const menuForm = document.querySelector('[data-simple-menu-form]');

    function refreshSimpleMenuForm() {
        const kind = menuForm.querySelector('input[name="menu_kind"]:checked').value;
        const destination = menuForm.querySelector('[data-menu-destination]').value;
        menuForm.querySelector('[data-menu-area]').value = kind === 'footer' ? 'footer' : 'header';
        menuForm.querySelector('[data-menu-level]').value = kind === 'child' ? 'child' : 'main';
        menuForm.querySelector('[data-parent-menu-field]').hidden = kind !== 'child';
        menuForm.querySelector('[data-category-field]').hidden = destination !== 'category';
        menuForm.querySelector('[data-custom-url-field]').hidden = destination !== 'custom';
        menuForm.querySelectorAll('.simple-choice').forEach(choice => {
            choice.classList.toggle('selected', choice.querySelector('input').checked);
        });
    }

    menuForm.querySelectorAll('input[name="menu_kind"], [data-menu-destination]').forEach(input => {
        input.addEventListener('change', refreshSimpleMenuForm);
    });

    refreshSimpleMenuForm();
</script>
@endsection