@extends('layouts.master')
@section('page_title', 'Article Taxonomy')

@section('content')

    <div class="container">
        {{ Form::page_header('Article Taxonomy', 'sourcedata') }}
        {{ Form::hidden('post_arrange_url', action('TaxonomyController@update_sort', compact('taxonomy')), ['id' => 'post_arrange_url'] ) }}

        <div class="row grid-header">
            {{ Form::button_ex('ADD A Taxonomy', 'add_item()', 'add-btn') }}
        </div>

        <div class="row">
            <div class="grey-bg curve_container">
                <div class="hide-area">
                    {!! Form::open(['url' => action('TaxonomyController@store')]) !!}
                    {{ Form::row_text_inline('taxonomy_name', 'Taxonomy Name', null, 2, 4, \App\Helpers\FormComponentHelper::SIZE_MEDIUM) }}
                    <div class="row ">
                        <div class="no-left-pad col-md-offset-2 col-xs-offset-2">
                            {{ Form::button_save() }}
                            {{ Form::button_ex('Cancel', 'cancel_item()', 'cancel-btn') }}
                        </div>
                    </div>
                    {!! Form::close() !!}
                    <hr class="grey-divider small-screen-divider">
                </div>

                <div class="row">
                    <div class="white-bg">
                        <div class="taxonyms">
                            {{--TODO do we maybe just want to roll them all up? --}}
                            {{--<div class="row">{{ Form::label_title($taxonomy->taxonomy_name, \App\Helpers\FormComponentHelper::SIZE_LARGE) }}</div>--}}
                            {{--<ol id="plan-root" class="root {{ $can_edit ? 'sortable' : '' }}">--}}
                            <ol id="plan-root" class="root sortable">
                                @foreach($taxonyms as $taxonomy)
                                    <li id="item-{{$taxonomy->taxonomy}}" data-id="{{$taxonomy->taxonomy}}">
                                        @include('super_admin.taxonomy._taxonomy', ['taxonomy' => $taxonomy])
                                        @if($taxonomy->has_children())
                                            @include('super_admin.taxonomy._taxonomy_children', ['children' => $taxonomy->get_children()])
                                        @endif
                                    </li>
                                @endforeach
                            </ol>
                        </div>
                    </div>
                    {{--<div class="row bt-button-row">--}}
                    {{--{{ Form::button_link('Edit', str_replace('XXX', $website_nav->website_nav, $edit_url)) }}--}}
                    {{--</div>--}}
                    {{--<div class="row bt-button-row text-right">--}}
                    {{--{{ Form::button_link('Create Sub Nav', $create_url) }}--}}
                    {{--</div>--}}
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page_script')
    @include('shared_script._nested_sortable')

    <script>
        $(document).ready(function () {
            @if(sizeof(session()->getOldInput()) == 0)
            $('.hide-area').hide();
            @endif
        });

        function add_item() {
            $('.hide-area').show();
        }

        function cancel_item() {
            $('.hide-area').hide();
        }

    </script>

@endsection
@section('page_style')
    <style>
        .mjs-nestedSortable-error {
            background: #fbe3e4;
            border-color: transparent;
        }

        ol.root {
            list-style-type: none;
            padding-left: 0;
        }

        ol.root ol {
            padding-left: 0;
            list-style-type: none;
            margin: 0 0 0 35px;
        }

        .ui-sortable-handle .bt-label {
            cursor: move;
        }

        .taxonomy {
            margin-top: 10px;
        }

        /*.root {*/
        /*margin-left: 40px;*/
        /*}*/

        .drag-drop-img-large {
            min-height: 20px;
            min-width: 20px;
            margin-right: 5px;
        }

        .white-bg .separator-row {
            margin-top: 30px !important;
        }
    </style>
@endsection