@extends('layouts.admin')
@section('title', 'Menu & typography')
@section('page_heading', 'Main navigation')
@section('content')
<span class="eyebrow">Website navigation</span>
<h2>Make the menu yours.</h2>
<p class="admin-intro">Change the visible labels, order and typography of the main menu. Product and service page links remain connected to their correct destinations. The quote button remains visible so customers can reach you.</p>
<form method="post" action="{{ route('admin.navigation.update') }}" class="admin-form admin-form-wide">@csrf @method('PUT')
    <h3>Menu pages</h3><p class="form-help">Smaller order numbers appear first. Hide a link without removing its page from the website.</p>
    <div class="navigation-editor">
        @foreach($items as $item)
        <div class="navigation-edit-row">
            <div class="form-field"><label for="nav-{{ $item->key }}">{{ ucfirst($item->key) }} label</label><input id="nav-{{ $item->key }}" name="items[{{ $item->key }}][label]" class="form-input" maxlength="35" required value="{{ old('items.'.$item->key.'.label', $item->label) }}"><small>Links to {{ route($item->routeName(), [], false) }}</small></div>
            <div class="form-field"><label for="order-{{ $item->key }}">Order</label><input id="order-{{ $item->key }}" name="items[{{ $item->key }}][sort_order]" type="number" min="-1000" max="1000" class="form-input" value="{{ old('items.'.$item->key.'.sort_order', $item->sort_order) }}" required></div>
            <div class="form-field"><label for="show-{{ $item->key }}">Visibility</label><select id="show-{{ $item->key }}" name="items[{{ $item->key }}][visible]" class="form-input"><option value="1" @selected((string)old('items.'.$item->key.'.visible', (int)$item->visible) === '1')>Shown</option><option value="0" @selected((string)old('items.'.$item->key.'.visible', (int)$item->visible) === '0')>Hidden</option></select></div>
        </div>
        @endforeach
    </div>
    <h3 class="form-subheading">Menu lettering</h3>
    <div class="form-grid"><div class="form-field"><label for="nav_font_family">Font family</label><select id="nav_font_family" name="nav_font_family" class="form-input">@foreach(\App\Http\Controllers\Admin\TypographyController::FAMILIES as $family)<option @selected(old('nav_font_family', $appearance['nav_font_family']) === $family)>{{ $family }}</option>@endforeach</select></div><div class="form-field"><label for="nav_font_size">Font size</label><select id="nav_font_size" name="nav_font_size" class="form-input">@foreach(range(15,21) as $size)<option value="{{ $size }}" @selected((int)old('nav_font_size', $appearance['nav_font_size']) === $size)>{{ $size }}px</option>@endforeach</select></div></div>
    <div class="form-grid"><div class="form-field"><label for="nav_font_weight">Font weight</label><select id="nav_font_weight" name="nav_font_weight" class="form-input">@foreach(['500'=>'Medium (500)', '600'=>'Semibold (600)', '700'=>'Bold (700)', '800'=>'Extra bold (800)'] as $weight=>$name)<option value="{{ $weight }}" @selected((string)old('nav_font_weight', $appearance['nav_font_weight']) === (string)$weight)>{{ $name }}</option>@endforeach</select></div><div class="form-field"><label for="nav_font_style">Font style</label><select id="nav_font_style" name="nav_font_style" class="form-input"><option value="normal" @selected(old('nav_font_style', $appearance['nav_font_style']) === 'normal')>Normal</option><option value="italic" @selected(old('nav_font_style', $appearance['nav_font_style']) === 'italic')>Italic</option></select></div></div>
    <div class="admin-buttons"><button class="button button-dark" type="submit">Save navigation ↗</button><a class="button button-outline" href="{{ route('home') }}" target="_blank" rel="noopener">Preview the site</a></div>
</form>
@endsection