@extends('layouts.app')
@section('title', __('vetSite::lang.navigation'))

@section('content')
<section class="content-header">
    <h1><i class="fas fa-bars"></i> {{ __('vetSite::lang.navigation') }}
        <small>Order your menu and choose what shows</small></h1>
</section>

<section class="content">
    @include('vetSite::admin._flash')
    <div class="row">
        <div class="col-md-7">
            @component('components.widget', ['title' => 'Menu order', 'class' => 'box-primary'])
                <p class="text-muted">Use the arrows to reorder. Untick to hide a page from the menu (it stays reachable by URL).</p>
                <form method="POST" action="{{ route('vs.navigation.save') }}" id="navForm">@csrf
                    <table class="table"><tbody id="navRows">
                        @foreach($pages as $p)
                            <tr>
                                <td style="width:60px;">
                                    <button type="button" class="btn btn-xs btn-default" onclick="vsNav(this,-1)"><i class="fa fa-arrow-up"></i></button>
                                    <button type="button" class="btn btn-xs btn-default" onclick="vsNav(this,1)"><i class="fa fa-arrow-down"></i></button>
                                </td>
                                <td>
                                    <input type="hidden" name="order[]" value="{{ $p->id }}">
                                    <strong>{{ $p->title }}</strong>
                                    @if($p->is_home)<span class="label label-info">Home</span>@endif
                                    <br><code>/{{ $p->is_home ? '' : $p->slug }}</code>
                                </td>
                                <td style="width:130px;">
                                    <label><input type="checkbox" name="show_in_nav[]" value="{{ $p->id }}" {{ $p->show_in_nav ? 'checked' : '' }}> In menu</label>
                                </td>
                            </tr>
                        @endforeach
                    </tbody></table>
                    <button class="btn btn-primary"><i class="fa fa-save"></i> Save navigation</button>
                </form>
            @endcomponent
        </div>
    </div>
</section>

<script>
function vsNav(btn,dir){
    var tr=btn.closest('tr'), tb=tr.parentNode;
    if(dir<0 && tr.previousElementSibling) tb.insertBefore(tr, tr.previousElementSibling);
    if(dir>0 && tr.nextElementSibling) tb.insertBefore(tr.nextElementSibling, tr);
}
</script>
@endsection
