@extends('layouts.admin')

@section('title', $menu->exists ? 'Edit Menu Item' : 'Add Menu Item')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="mb-1 fw-semibold">
            <i class="bi bi-list-ul me-2 text-primary"></i>
            {{ $menu->exists ? 'Edit Menu Item' : 'Add Menu Item' }}
        </h4>
        <p class="text-muted small mb-0">
            {{ $menu->exists ? 'Update details for this navigation item' : 'Create a new item for your site navigation' }}
        </p>
    </div>
    <a href="{{ route('admin.menu-items.index') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-arrow-left me-1"></i> Back to List
    </a>
</div>

<div class="card border-0 shadow-sm">
    <div class="card-header bg-white border-bottom py-3">
        <h6 class="mb-0 text-uppercase text-muted small fw-bold">
            <i class="bi bi-gear me-1"></i> Menu Item Details
        </h6>
    </div>

    <div class="card-body p-4">
        <form action="{{ $menu->exists ? route('admin.menu-items.update', $menu->id) : route('admin.menu-items.store') }}"
              method="POST">
            @csrf
            @if ($menu->exists)
                @method('PUT')
            @endif

            <div class="row g-4">

                {{-- Title --}}
                <div class="col-md-6">
                    <label for="title" class="form-label fw-medium">
                        <i class="bi bi-tag text-muted me-1"></i> Menu Title <span class="text-danger">*</span>
                    </label>
                    <input type="text" name="title" id="title"
                        class="form-control @error('title') is-invalid @enderror"
                        value="{{ old('title', $menu->title) }}" placeholder="e.g. About Us" required>
                    @error('title')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Parent Menu --}}
                <div class="col-md-6">
                    <label for="parent_id" class="form-label fw-medium">
                        <i class="bi bi-diagram-3 text-muted me-1"></i> Parent Menu
                    </label>
                    <select name="parent_id" id="parent_id"
                        class="form-select @error('parent_id') is-invalid @enderror">
                        <option value="">— None (Top Level) —</option>
                        @foreach ($parents as $parent)
                            @if (!$menu->exists || $parent->id != $menu->id)
                                <option value="{{ $parent->id }}"
                                    {{ old('parent_id', $menu->parent_id) == $parent->id ? 'selected' : '' }}>
                                    {{ $parent->parent_id ? '— ' : '' }}{{ $parent->title }}
                                </option>
                            @endif
                        @endforeach
                    </select>
                    @error('parent_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                    <div class="form-text">Leave empty to make this a top-level menu item.</div>
                </div>

                {{-- URL --}}
                <div class="col-md-6">
                    <label for="url" class="form-label fw-medium">
    <i class="bi bi-link-45deg text-muted me-1"></i> URL
</label>
<input type="text" name="url" id="url"
    class="form-control @error('url') is-invalid @enderror"
    value="{{ old('url', $menu->url) }}" placeholder="e.g. /about-us or https://example.com">
                    @error('url')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Order --}}
                <div class="col-md-6">
                    <label for="order" class="form-label fw-medium">
                        <i class="bi bi-sort-numeric-down text-muted me-1"></i> Display Order
                    </label>
                    <input type="number" name="order" id="order"
                        class="form-control @error('order') is-invalid @enderror"
                        value="{{ old('order', $menu->order ?? 0) }}" min="0">
                    @error('order')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                    <div class="form-text">Lower numbers appear first.</div>
                </div>

                {{-- Status + Open in new tab --}}
                {{-- <div class="col-12">
                    <label class="form-label fw-medium d-block">
                        <i class="bi bi-toggles text-muted me-1"></i> Options
                    </label>

                    <div class="border rounded-3 p-3 d-flex flex-wrap gap-4 bg-light bg-opacity-50">
                        <div class="form-check form-switch mb-0">
                            <input type="hidden" name="is_active" value="0">
                            <input class="form-check-input" type="checkbox" role="switch"
                                name="is_active" id="is_active" value="1"
                                {{ old('is_active', $menu->exists ? $menu->is_active : true) ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_active">
                                Active <span class="text-muted small">(visible on site)</span>
                            </label>
                        </div>

                        <div class="form-check form-switch mb-0">
                            <input type="hidden" name="open_new_tab" value="0">
                            <input class="form-check-input" type="checkbox" role="switch"
                                name="open_new_tab" id="open_new_tab" value="1"
                                {{ old('open_new_tab', $menu->open_new_tab) ? 'checked' : '' }}>
                            <label class="form-check-label" for="open_new_tab">
                                Open in new tab
                            </label>
                        </div>
                    </div>
                </div> --}}

            </div>

            <hr class="my-4">

            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-dark px-4">
                    <i class="bi bi-check-lg me-1"></i> {{ $menu->exists ? 'Update' : 'Save' }} Menu Item
                </button>
                <a href="{{ route('admin.menu-items.index') }}" class="btn btn-light border px-4">
                    Cancel
                </a>
            </div>

        </form>
    </div>
</div>
@endsection