@extends('layouts.app')

@section('title', 'Tambah 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">Tambah Menu</li>
@endsection

@section('content')
<div class="page-header">
    <h4><i class="bi bi-plus-circle me-2 text-primary"></i>Tambah Item Menu</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.store') }}">
                    @csrf

                    <div class="mb-3">
                        <label class="form-label">Tipe Item</label>
                        <select id="typeSelect" class="form-select" onchange="toggleFields()">
                            <option value="item" {{ old('parent_id') ? 'selected' : '' }}>Item Menu (di dalam seksi)</option>
                            <option value="section" {{ !old('parent_id') && old('_token') ? 'selected' : '' }}>Seksi / Grup Baru</option>
                        </select>
                    </div>

                    <div id="parentField" 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="">-- Pilih Seksi --</option>
                            @foreach($sections as $section)
                                <option value="{{ $section->id }}" {{ old('parent_id') == $section->id ? 'selected' : '' }}>
                                    {{ $section->title }}
                                </option>
                            @endforeach
                        </select>
                        @error('parent_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <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') }}"
                                   class="form-control @error('title') is-invalid @enderror"
                                   placeholder="contoh: Data Pelanggan">
                            @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', 99) }}"
                                   class="form-control" min="0">
                        </div>
                    </div>

                    <div id="itemFields">
                        <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', 'bi bi-circle') }}"></i>
                                    </span>
                                    <input type="text" name="icon" value="{{ old('icon') }}"
                                           class="form-control" placeholder="bi bi-people"
                                           oninput="document.getElementById('iconPreview').innerHTML='<i class=\''+this.value+'\'></i>'">
                                </div>
                                <div class="form-text">Lihat ikon di <a href="https://icons.getbootstrap.com" target="_blank">icons.getbootstrap.com</a></div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Route Name</label>
                                <input type="text" name="route_name" value="{{ old('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') }}"
                                       class="form-control" placeholder="customers.*">
                                <div class="form-text">Pola untuk menentukan menu aktif, gunakan * sebagai wildcard</div>
                            </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') === $key ? 'selected' : '' }}>
                                            {{ $label }} ({{ $key }})
                                        </option>
                                    @endforeach
                                </select>
                                <div class="form-text">Permission yang diperlukan untuk melihat menu ini</div>
                            </div>
                        </div>
                    </div>

                    <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', '1') == '1' ? '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
                        </button>
                        <a href="{{ route('menus.index') }}" class="btn btn-outline-secondary">Batal</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
function toggleFields() {
    const type = document.getElementById('typeSelect').value;
    document.getElementById('parentField').style.display = type === 'item' ? '' : 'none';
    document.getElementById('itemFields').style.display  = type === 'item' ? '' : 'none';
    if (type === 'section') {
        document.querySelector('[name=parent_id]').value = '';
    }
}
toggleFields();
</script>
@endsection