@extends('layouts.app')

@section('title', 'Edit Menu')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('menus.index') }}" class="text-decoration-none">Manajemen Menu</a></li>
<li class="breadcrumb-item active">Edit Menu</li>
@endsection

@section('content')
<div class="page-header">
    <h4><i class="bi bi-pencil-square me-2 text-primary"></i>Edit Menu — {{ $menu->title }}</h4>
</div>

<div class="row justify-content-center">
    <div class="col-lg-7">
        <div class="card border-0 shadow-sm">
            <div class="card-body p-4">
                <form method="POST" action="{{ route('menus.update', $menu) }}">
                    @csrf @method('PUT')

                    @if($menu->isSection())
                        <div class="alert alert-info py-2 small mb-3">
                            <i class="bi bi-info-circle me-1"></i>
                            Ini adalah <strong>Seksi</strong>. Anda hanya bisa mengedit judul dan urutan.
                        </div>
                        <input type="hidden" name="parent_id" value="">
                    @else
                        <div class="mb-3">
                            <label class="form-label">Seksi Induk <span class="text-danger">*</span></label>
                            <select name="parent_id" class="form-select @error('parent_id') is-invalid @enderror">
                                <option value="">— Jadikan Seksi —</option>
                                @foreach($sections as $section)
                                    <option value="{{ $section->id }}" {{ old('parent_id', $menu->parent_id) == $section->id ? 'selected' : '' }}>
                                        {{ $section->title }}
                                    </option>
                                @endforeach
                            </select>
                            @error('parent_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    @endif

                    <div class="row g-3">
                        <div class="col-md-8">
                            <label class="form-label">Judul Menu <span class="text-danger">*</span></label>
                            <input type="text" name="title" value="{{ old('title', $menu->title) }}"
                                   class="form-control @error('title') is-invalid @enderror">
                            @error('title') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Urutan</label>
                            <input type="number" name="sort_order" value="{{ old('sort_order', $menu->sort_order) }}"
                                   class="form-control" min="0">
                        </div>
                    </div>

                    @if(!$menu->isSection())
                    <div class="row g-3 mt-0">
                        <div class="col-md-6">
                            <label class="form-label">Ikon Bootstrap</label>
                            <div class="input-group">
                                <span class="input-group-text" id="iconPreview">
                                    <i class="{{ old('icon', $menu->icon) }}"></i>
                                </span>
                                <input type="text" name="icon" value="{{ old('icon', $menu->icon) }}"
                                       class="form-control"
                                       oninput="document.getElementById('iconPreview').innerHTML='<i class=\''+this.value+'\'></i>'">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Route Name</label>
                            <input type="text" name="route_name" value="{{ old('route_name', $menu->route_name) }}"
                                   class="form-control" placeholder="customers.index">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Route Pattern (active state)</label>
                            <input type="text" name="route_pattern" value="{{ old('route_pattern', $menu->route_pattern) }}"
                                   class="form-control" placeholder="customers.*">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Permission Key</label>
                            <select name="permission_key" class="form-select">
                                <option value="">— Selalu tampil —</option>
                                @foreach($permissions as $key => $label)
                                    <option value="{{ $key }}" {{ old('permission_key', $menu->permission_key) === $key ? 'selected' : '' }}>
                                        {{ $label }} ({{ $key }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    @else
                        <input type="hidden" name="icon" value="{{ $menu->icon }}">
                        <input type="hidden" name="route_name" value="{{ $menu->route_name }}">
                        <input type="hidden" name="route_pattern" value="{{ $menu->route_pattern }}">
                        <input type="hidden" name="permission_key" value="{{ $menu->permission_key }}">
                    @endif

                    <div class="mt-3">
                        <div class="form-check form-switch">
                            <input type="hidden" name="is_active" value="0">
                            <input class="form-check-input" type="checkbox" name="is_active" value="1"
                                   id="isActive" {{ old('is_active', $menu->is_active) ? 'checked' : '' }}>
                            <label class="form-check-label" for="isActive">Aktif</label>
                        </div>
                    </div>

                    <hr class="my-4">
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-lg me-1"></i> Simpan Perubahan
                        </button>
                        <a href="{{ route('menus.index') }}" class="btn btn-outline-secondary">Batal</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection