@extends('admin.layouts.full')
@section('title', (isset($item) ? 'Modifier' : 'Ajouter').' un item menu')
@section('header')
@include('admin.partials.breadcrumb')
@endsection
@section('content')
<div class="row">
    <div class="col-12">
        <div class="card form-content">
            <div class="card-header">
                <h5>Item menu - {{ isset($item) ? 'Modification' : 'Création'}}</h5>
            </div>
            <div class="card-block">
	            @include('admin.partials.errors')
                @if(isset($item))
                {{ Form::model($item->getFillables(), ['route' => ['items-menus.update', $item->id], 'method' => 'PUT']) }}
                @else
                {{ Form::open(['route' => ['items-menus.store', $menu->id]]) }}
                @endif
                    <ul class="nav nav-tabs">
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#tab-infos" aria-selected="true"><i class="fa fa-info-circle mr-2"></i>Informations</a>
                        </li>
                        @include('admin.partials.lang-tabs')
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="tab-infos">
                            {{ FormField::info(['label' => 'Menu', 'info' => $menu->name]) }}
                            {{ FormField::checkbox(['name' => 'border', 'value' => 1, 'label' => 'Bordure', 'errors' => $errors]) }}
                            {{ FormField::select(['options' => $items, 'name' => 'parent_id', 'label' => 'Item parent', 'errors' => $errors]) }}
                            {{ FormField::select(['options' => $pages, 'name' => 'page_id', 'label' => 'Page liée', 'errors' => $errors]) }}
                            @if(isset($itemsOrder) && count($itemsOrder) > 1)
                            <div class="row form-group">
                                <div class="col-sm-3">
                                    <label class="col-form-label">Ordre des items de même niveau</label>
                                </div>
                                <div class="col-sm-9">
                                    <ul class="list-group items-order">
                                        @foreach($itemsOrder as $itemOrder)
                                        <li class="list-group-item item-order{{ $itemOrder->id == $item->id ? ' list-group-item-secondary' : null }}" data-id="{{ $itemOrder->id }}">{{ $itemOrder->name }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                            @endif
                        </div>
                        @foreach($languages as $l)
                        <div class="tab-pane fade" id="tab-{{ $l->short }}">
                            {{ FormField::checkbox(['value' => 1, 'name' => 'displayed_'.$l->short, 'label' => 'Affiché', 'errors' => $errors]) }}
                            {{ FormField::checkbox(['value' => 1, 'name' => 'use_page_name_'.$l->short, 'label' => 'Afficher le nom de la page sélectionnée', 'errors' => $errors, 'inputClass' => 'use-page-name', 'inputDatas' => ['data-lang' => $l->short]]) }}
                            {{ FormField::text(['name' => 'name_'.$l->short, 'label' => 'Nom du menu', 'errors' => $errors]) }}
                            {{ FormField::text(['name' => 'url_'.$l->short, 'label' => 'URL', 'errors' => $errors, 'class' => 'url-container', 'inputDatas' => ['data-lang' => $l->short]]) }}
                            {{ FormField::select(['options' => targetsList(), 'name' => 'target_'.$l->short, 'label' => 'Ouvrir le lien', 'errors' => $errors]) }}
                        </div>
                        @endforeach
                    </div>
                    {{ FormField::buttons(['index' => $menu->adminRoute , 'label' => isset($item) ? 'Mettre à jour' : 'Enregistrer']) }}
                {{ Form::close() }}
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>
    $(document).ready(function(){
        $('#page_id').change(function(){
            $urlInputs = $('.url-container input');
            $usePageNameInputs = $('.use-page-name');
            if($(this).val() == ''){
                $urlInputs.removeAttr('disabled');
                $usePageNameInputs.attr('disabled', 'disabled').prop('checked', false).trigger('change');
            } else {
                $urlInputs.attr('disabled', 'disabled').val('');
                $usePageNameInputs.removeAttr('disabled');
            }
        }).trigger('change');
        $('.use-page-name').change(function(){
            $input = $('input[name="name_'+$(this).attr('data-lang')+'"]');
            if($(this).is(':checked')){
                $input.val('').attr('disabled', 'disabled');
            } else {
                $input.removeAttr('disabled');
            }
        }).each(function(){
            $(this).trigger('change');
        });
        $('.items-order').sortable({
            stop: function( event, ui ) {
                var items = new Array;
                $('.item-order').each(function(){
                    items.push($(this).attr('data-id'));
                });
                $.post({
                    url: "{{ route('items-menus.order') }}",
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content'),
                        items: items
                    }
                })
            }
        });
    });
</script>
@endpush