@php
    $isEdit = isset($menu) && $menu->exists && $menu->id;
    $formAction = $isEdit 
        ? route('admin.menus.update', $menu->id) 
        : route('admin.menus.store');
    $formMethod = $isEdit ? 'PUT' : 'POST';
    $formTitle = $isEdit ? 'Edit Menu Item' : 'Create Menu Item';
    $submitText = $isEdit ? 'Update Menu' : 'Save Menu';
@endphp

<style>
    /* ============================================
       MENU FORM - REDSPIDER THEME
    ============================================ */

    .form-section .form-group-custom:last-child {
        margin-bottom: 0;
    }

    .form-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid #E8E8E8;
    }

    .form-card-header h4 {
        font-size: 18px;
        font-weight: 600;
        color: #1A1A2E;
        margin: 0;
    }

    .form-card-header h4 i {
        color: #C1121F;
    }

    .btn-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 20px;
        border-radius: 10px;
        background: #F8F9FA;
        border: 1px solid #E8E8E8;
        color: #4A5568;
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        font-family: 'Poppins', sans-serif;
        transition: all 0.3s ease;
    }

    .btn-back:hover {
        background: rgba(193, 18, 31, 0.06);
        border-color: rgba(193, 18, 31, 0.2);
        color: #C1121F;
        transform: translateX(-2px);
    }

    .form-section {
        background: #FAFBFC;
        border-radius: 14px;
        padding: 20px 24px;
        border: 1px solid #F0F0F0;
        transition: all 0.3s ease;
        margin-bottom: 20px;
    }

    .form-section:hover {
        border-color: rgba(193, 18, 31, 0.08);
    }

    .section-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 16px;
    }

    .section-header i {
        font-size: 18px;
        color: #C1121F;
    }

    .section-header h5 {
        font-size: 15px;
        font-weight: 600;
        color: #1A1A2E;
        margin: 0;
    }

    .section-header .badge-optional {
        margin-left: auto;
        padding: 2px 12px;
        border-radius: 12px;
        background: #E8E8E8;
        color: #6B7280;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
    }

    .form-group-custom {
        margin-bottom: 18px;
    }

    .form-group-custom label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #1A1A2E;
        margin-bottom: 6px;
    }

    .form-group-custom label .required {
        color: #DC2626;
        margin-left: 2px;
    }

    .form-control-custom {
        width: 100%;
        padding: 10px 14px;
        border: 1.5px solid #E8E8E8;
        border-radius: 10px;
        font-size: 14px;
        font-family: 'Poppins', sans-serif;
        color: #1A1A2E;
        background: #FFFFFF;
        transition: all 0.3s ease;
        outline: none;
    }

    .form-control-custom:focus {
        border-color: #C1121F;
        box-shadow: 0 0 0 4px rgba(193, 18, 31, 0.06);
    }

    .form-control-custom.is-invalid {
        border-color: #DC2626;
    }

    .form-control-custom.is-invalid:focus {
        box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.06);
    }

    .form-control-custom::placeholder {
        color: #9CA3AF;
        font-size: 13px;
    }

    textarea.form-control-custom {
        resize: vertical;
        min-height: 80px;
    }

    select.form-control-custom {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        padding-right: 36px;
    }

    .form-hint {
        display: block;
        font-size: 12px;
        color: #6B7280;
        margin-top: 4px;
    }

    .error-text {
        display: block;
        color: #DC2626;
        font-size: 12px;
        margin-top: 4px;
    }

    .input-with-prefix {
        display: flex;
        align-items: center;
        border: 1.5px solid #E8E8E8;
        border-radius: 10px;
        background: #FFFFFF;
        transition: all 0.3s ease;
        overflow: hidden;
    }

    .input-with-prefix:focus-within {
        border-color: #C1121F;
        box-shadow: 0 0 0 4px rgba(193, 18, 31, 0.06);
    }

    .input-with-prefix .prefix {
        padding: 10px 12px;
        background: #F8F9FA;
        color: #6B7280;
        font-size: 13px;
        font-weight: 500;
        border-right: 1px solid #E8E8E8;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .input-with-prefix .form-control-custom {
        border: none !important;
        border-radius: 0 !important;
        padding: 10px 14px;
    }

    .input-with-prefix .form-control-custom:focus {
        box-shadow: none !important;
    }

    .toggle-switch-custom {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 8px 0;
    }

    .toggle-switch-custom .switch {
        position: relative;
        width: 48px;
        height: 26px;
        flex-shrink: 0;
    }

    .toggle-switch-custom .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .toggle-switch-custom .switch .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #E8E8E8;
        transition: all 0.4s ease;
        border-radius: 26px;
    }

    .toggle-switch-custom .switch .slider::before {
        content: "";
        position: absolute;
        height: 18px;
        width: 18px;
        left: 4px;
        bottom: 4px;
        background: #FFFFFF;
        transition: all 0.4s ease;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .toggle-switch-custom .switch input:checked+.slider {
        background: linear-gradient(135deg, #C1121F, #780000);
    }

    .toggle-switch-custom .switch input:checked+.slider::before {
        transform: translateX(22px);
    }

    .toggle-switch-custom .switch input:focus+.slider {
        box-shadow: 0 0 0 3px rgba(193, 18, 31, 0.15);
    }

    .toggle-switch-custom .status-text {
        font-size: 14px;
        font-weight: 500;
        color: #4A5568;
    }

    .form-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 8px;
        padding-top: 20px;
        border-top: 1px solid #E8E8E8;
        flex-wrap: wrap;
    }

    .btn-submit {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 28px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        background: linear-gradient(135deg, #C1121F, #780000);
        border: none;
        color: #FFFFFF;
        box-shadow: 0 4px 16px rgba(193, 18, 31, 0.25);
    }

    .btn-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(193, 18, 31, 0.35);
    }

    .btn-submit:active {
        transform: scale(0.96);
    }

    .btn-cancel {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 10px 24px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 500;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
        transition: all 0.3s ease;
        background: transparent;
        border: 1px solid #E8E8E8;
        color: #4A5568;
        text-decoration: none;
    }

    .btn-cancel:hover {
        background: #F8F9FA;
        border-color: #D1D5DB;
    }

    .btn-reset-custom {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 10px 20px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 500;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
        transition: all 0.3s ease;
        background: transparent;
        border: 1px solid #E8E8E8;
        color: #4A5568;
    }

    .btn-reset-custom:hover {
        background: #F8F9FA;
        border-color: #D1D5DB;
    }

    .checkbox-label-custom {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        font-weight: 500;
        color: #1A1A2E;
        cursor: pointer;
    }

    .checkbox-label-custom input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: #C1121F;
        cursor: pointer;
    }

    .checkbox-label-custom i {
        font-size: 16px;
        color: #6B7280;
    }

    @media (max-width: 576px) {
        .form-section {
            padding: 14px 16px !important;
        }

        .form-card-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .form-actions {
            flex-direction: column;
        }

        .form-actions .btn-submit,
        .form-actions .btn-cancel,
        .form-actions .btn-reset-custom {
            width: 100%;
            justify-content: center;
        }
    }
</style>

<!-- ============================================
   ALERT MESSAGES
============================================ -->

@if ($errors->any())
<div class="alert-box alert-error" style="margin-bottom: 20px;">
    <i class="bi bi-exclamation-circle-fill"></i>
    <span>
        <strong>Validation Errors!</strong>
        <ul style="margin: 4px 0 0 20px; padding: 0;">
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </span>
    <button type="button" class="alert-close-btn" onclick="this.closest('.alert-box').remove()">
        <i class="bi bi-x"></i>
    </button>
</div>
@endif

<!-- ============================================
   FORM CARD
============================================ -->

<div class="form-card">

    <div class="form-card-header">
        <h4>
            <i class="bi bi-list"></i>
            {{ $formTitle }}
        </h4>
        <a href="{{ route('admin.menus.index') }}" class="btn-back">
            <i class="bi bi-arrow-left"></i> Back to List
        </a>
    </div>

    <!-- ===== FORM START ===== -->
    <form action="{{ $formAction }}" method="POST" id="menuForm">
        @csrf
        @if($isEdit)
        @method('PUT')
        @endif

        <div class="row">
            <!-- ===== LEFT COLUMN ===== -->
            <div class="col-lg-8">

                <!-- Basic Information -->
                <div class="form-section">
                    <div class="section-header">
                        <i class="bi bi-info-circle"></i>
                        <h5>Basic Information</h5>
                    </div>

                    <!-- Name -->
                    <div class="form-group-custom">
                        <label>Menu Name <span class="required">*</span></label>
                        <input type="text"
                               name="name"
                               id="name"
                               class="form-control-custom @error('name') is-invalid @enderror"
                               value="{{ old('name', $menu->name ?? '') }}"
                               placeholder="Enter menu name"
                               required>
                        @error('name')
                        <span class="error-text">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Slug -->
                    <div class="form-group-custom">
                        <label>Slug <span class="required">*</span></label>
                        <div class="input-with-prefix">
                            <span class="prefix">menu-</span>
                            <input type="text"
                                   name="slug"
                                   id="slug"
                                   class="form-control-custom @error('slug') is-invalid @enderror"
                                   value="{{ old('slug', $menu->slug ?? '') }}"
                                   placeholder="unique-slug"
                                   required
                                   data-auto-generated="{{ isset($menu) && $menu->slug ? 'false' : 'true' }}">
                        </div>
                        @error('slug')
                        <span class="error-text">{{ $message }}</span>
                        @enderror
                        <span class="form-hint">Used as a unique identifier</span>
                    </div>

                    <!-- URL -->
                    <div class="form-group-custom">
                        <label>URL</label>
                        <input type="text"
                               name="url"
                               class="form-control-custom @error('url') is-invalid @enderror"
                               value="{{ old('url', $menu->url ?? '') }}"
                               placeholder="e.g., /about or https://example.com">
                        @error('url')
                        <span class="error-text">{{ $message }}</span>
                        @enderror
                        <span class="form-hint">Leave empty for dropdown with children or use page linking below</span>
                    </div>

                    <!-- ===== PAGE LINKING (NEW) ===== -->
                    <div class="form-group-custom">
                        <label>Link to Page</label>
                        <select name="page_id" class="form-control-custom @error('page_id') is-invalid @enderror">
                            <option value="">-- Select Page --</option>
                            @foreach($pages as $page)
                            <option value="{{ $page->id }}" {{ old('page_id', $menu->page_id ?? '') == $page->id ? 'selected' : '' }}>
                                {{ $page->title }}
                            </option>
                            @endforeach
                        </select>
                        @error('page_id')
                        <span class="error-text">{{ $message }}</span>
                        @enderror
                        <span class="form-hint">Select a page to link dynamically. Overrides URL field.</span>
                    </div>

                    <!-- ===== EXTERNAL LINK SWITCH (NEW) ===== -->
                    <div class="form-group-custom" style="margin-bottom: 0;">
                        <label class="checkbox-label-custom">
                            <input type="hidden" name="is_external" value="0">
                            <input type="checkbox"
                                   name="is_external"
                                   id="is_external"
                                   value="1"
                                   {{ old('is_external', $menu->is_external ?? 0) ? 'checked' : '' }}>
                            <i class="bi bi-box-arrow-up-right"></i>
                            External Link
                        </label>
                        <span class="form-hint">Check if this link points to an external website</span>
                    </div>

                    <!-- Icon -->
                    <div class="form-group-custom" style="margin-bottom: 0;">
                        <label>Icon</label>
                        <input type="text"
                               name="icon"
                               class="form-control-custom @error('icon') is-invalid @enderror"
                               value="{{ old('icon', $menu->icon ?? '') }}"
                               placeholder="e.g., bi bi-house-fill">
                        @error('icon')
                        <span class="error-text">{{ $message }}</span>
                        @enderror
                        <span class="form-hint">Bootstrap icon class</span>
                    </div>
                </div>
            </div>

            <!-- ===== RIGHT COLUMN ===== -->
            <div class="col-lg-4">

                <!-- Settings -->
                <div class="form-section">
                    <div class="section-header">
                        <i class="bi bi-gear"></i>
                        <h5>Settings</h5>
                    </div>

                    <!-- Location -->
                    <div class="form-group-custom">
                        <label>Location <span class="required">*</span></label>
                        <select name="location" class="form-control-custom @error('location') is-invalid @enderror" required>
                            <option value="header" {{ old('location', $menu->location ?? 'header') == 'header' ? 'selected' : '' }}>Header Menu</option>
                            <option value="footer" {{ old('location', $menu->location ?? 'header') == 'footer' ? 'selected' : '' }}>Footer Menu</option>
                        </select>
                        @error('location')
                        <span class="error-text">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Parent -->
                    <div class="form-group-custom">
                        <label>Parent</label>
                        <select name="parent_id" class="form-control-custom @error('parent_id') is-invalid @enderror">
                            <option value="">None (Root)</option>
                            @foreach($parents as $parent)
                            <option value="{{ $parent->id }}" {{ old('parent_id', $menu->parent_id ?? '') == $parent->id ? 'selected' : '' }}>
                                {{ $parent->name }}
                            </option>
                            @endforeach
                        </select>
                        @error('parent_id')
                        <span class="error-text">{{ $message }}</span>
                        @enderror
                        <span class="form-hint">Select parent for dropdown menus</span>
                    </div>

                    <!-- Target -->
                    <div class="form-group-custom">
                        <label>Target</label>
                        <select name="target" class="form-control-custom @error('target') is-invalid @enderror">
                            <option value="_self" {{ old('target', $menu->target ?? '_self') == '_self' ? 'selected' : '' }}>Same Tab</option>
                            <option value="_blank" {{ old('target', $menu->target ?? '_self') == '_blank' ? 'selected' : '' }}>New Tab</option>
                        </select>
                        @error('target')
                        <span class="error-text">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Status -->
                    <div class="form-group-custom">
                        <label>Status <span class="required">*</span></label>
                        <select name="status" class="form-control-custom @error('status') is-invalid @enderror" required>
                            <option value="draft" {{ old('status', $menu->status ?? 'draft') == 'draft' ? 'selected' : '' }}>Draft</option>
                            <option value="published" {{ old('status', $menu->status ?? 'draft') == 'published' ? 'selected' : '' }}>Published</option>
                        </select>
                        @error('status')
                        <span class="error-text">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Sort Order -->
                    <div class="form-group-custom" style="margin-bottom: 0;">
                        <label>Sort Order</label>
                        <input type="number"
                               name="sort_order"
                               class="form-control-custom @error('sort_order') is-invalid @enderror"
                               value="{{ old('sort_order', $menu->sort_order ?? 0) }}"
                               placeholder="0"
                               min="0">
                        @error('sort_order')
                        <span class="error-text">{{ $message }}</span>
                        @enderror
                        <span class="form-hint">Lower numbers appear first</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- ===== FORM ACTIONS ===== -->
        <div class="form-actions">
            <button type="submit" class="btn-submit">
                <i class="bi bi-save"></i>
                {{ $submitText }}
            </button>
            <a href="{{ route('admin.menus.index') }}" class="btn-cancel">
                <i class="bi bi-x-circle"></i> Cancel
            </a>
            <button type="reset" class="btn-reset-custom">
                <i class="bi bi-arrow-counterclockwise"></i> Reset
            </button>
        </div>

    </form>
</div>

<!-- ============================================
   SCRIPT
============================================ -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        'use strict';

        // ============================================
        // AUTO SLUG GENERATION
        // ============================================
        const nameInput = document.getElementById('name');
        const slugInput = document.getElementById('slug');

        if (nameInput && slugInput) {
            nameInput.addEventListener('input', function() {
                if (!slugInput.value || slugInput.dataset.autoGenerated === 'true') {
                    const slug = this.value
                        .toLowerCase()
                        .replace(/[^a-z0-9]+/g, '-')
                        .replace(/^-+|-+$/g, '');
                    slugInput.value = slug;
                    slugInput.dataset.autoGenerated = 'true';
                }
            });

            if (!slugInput.value) {
                slugInput.dataset.autoGenerated = 'true';
            }
        }

        // ============================================
        // PAGE SELECT - Auto populate URL
        // ============================================
        const pageSelect = document.querySelector('select[name="page_id"]');
        const urlInput = document.querySelector('input[name="url"]');

        if (pageSelect && urlInput) {
            pageSelect.addEventListener('change', function() {
                const selectedOption = this.options[this.selectedIndex];
                if (this.value) {
                    // Get page slug from data attribute or text
                    const pageSlug = selectedOption.getAttribute('data-slug') || selectedOption.text.toLowerCase().replace(/\s+/g, '-');
                    urlInput.value = '/page/' + pageSlug;
                    urlInput.placeholder = 'Auto-generated from page selection';
                } else {
                    urlInput.value = '';
                    urlInput.placeholder = 'e.g., /about or https://example.com';
                }
            });
        }

        // ============================================
        // FORM VALIDATION
        // ============================================
        const form = document.getElementById('menuForm');
        if (form) {
            form.addEventListener('submit', function(e) {
                const name = document.getElementById('name');
                if (name && !name.value.trim()) {
                    e.preventDefault();
                    name.classList.add('is-invalid');
                    alert('Please enter a menu name.');
                    name.focus();
                }
            });

            document.querySelectorAll('.form-control-custom').forEach(function(input) {
                input.addEventListener('input', function() {
                    this.classList.remove('is-invalid');
                });
            });
        }

        console.log('✅ Menu Form loaded successfully!');
    });
</script>