@extends('layouts.master')
@section('page_title', $website_request->website_request_name)

@section('content')
    {{ Form::open(['url' => $post_url]) }}
    <div class="container">
        {{ Form::page_header($website_request->website_request_name, "paper_stack") }}
        <div class="row">
            <div class="grey-bg curve_container">
                <div class="row">
                    @include('website._website_sidebar', compact('website_request'))
                    <div class="col-md-9 col-xs-9 detail-right-side">
                        <div class="white-bg">
                            {{ Form::hidden('primary', $website_nav->primary) }}
                            {{ Form::hidden('footer', $website_nav->footer) }}
                            <div class="row">{{ Form::label_title($website_nav->nav_type_title) }}</div>
                            @if (!$website_nav->primary && !$website_nav->footer)
                                {{ Form::row_text_inline('nav_name', 'Name', $website_nav->nav_name, 3, 9, \App\Helpers\FormComponentHelper::SIZE_MEDIUM) }}
                            @else
                                {{ Form::hidden('nav_name', $website_nav->nav_name) }}
                            @endif
                            {{ Form::row_textarea_inline('notes', 'Notes', $website_nav->notes, 3, 9, \App\Helpers\FormComponentHelper::SIZE_MEDIUM) }}
                            <div class="row">
                                <div class="col-md-3 col-xs-3 no-left-pad">
                                    {{ Form::label_title('Select Content', \App\Helpers\FormComponentHelper::SIZE_MEDIUM) }}
                                </div>
                                <div class="col-md-9 col-xs-9 no-left-pad" id="navigation_items">
                                    @foreach($website_nav_modules as $website_nav_module)
                                        @include('website._navigation_checkbox', ['website_nav_module' => $website_nav_module, 'level' => 0])
                                    @endforeach
                                        @if (sizeof(session()->getOldInput()) > 0 )
                                            @if (Request::old('new_navigation'))
                                                @foreach (Request::old('new_navigation') as $key => $new_navigation)
                                                    @if ($key != 'XXX')
                                                        <div class="row" id="new_navigation_{{ $key }}">
                                                            @include('website._navigation_checkbox_text', ['prefix' => 'new_navigation',
                                                                'website_nav_module' => $key,
                                                                'link_url' => $new_navigation['link_url'],
                                                                'name' => $new_navigation['name'],
                                                                'level' => 0,
                                                                'type' => $new_navigation['is_link'] ? 'link' : '',
                                                                'is_checked' => isset($new_navigation['check'])])
                                                        </div>
                                                    @endif
                                                @endforeach
                                            @endif
                                        @endif
                                </div>
                            </div>
                        </div>
                        <div class="row bt-button-row text-right">
                            {{ Form::button_ex('Add Nav Item', "add_item('new_link');") }}
                            {{ Form::button_ex('Add Heading', "add_item('new_heading');") }}
                            {{ Form::button_save() }}
                            {{ Form::button_cancel() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{ Form::close() }}

    <div style="display:none" id="new_heading">
        <div class="row new-navigation-row" id="new_navigation_XXX">
            @include('website._navigation_checkbox_text', ['prefix' => 'new_navigation',
                'website_nav_module' => 'XXX',
                'name' => '',
                'level' => 0,
                'is_checked' => false])
        </div>
    </div>

    <div style="display:none" id="new_link">
        <div class="row new-navigation-row" id="new_navigation_XXX">
            @include('website._navigation_checkbox_text', ['prefix' => 'new_navigation',
                'website_nav_module' => 'XXX',
                'name' => '',
                'link_url' => '',
                'level' => 0,
                'type' => 'link',
                'is_checked' => false])
        </div>
    </div>

@endsection

@section('page_script')
    @include('shared_script._website_sidebar_script')
    <script >

        $(document).ready(function() {
            $('.checkbox-indent').each(function(i, obj) {
                // indent all the checkboxes depending on their level
                var class_name = obj.className;
                var level = class_name.replace("bt-checkbox checkbox-indent checkbox-indent-", '');
                obj.parentElement.style.paddingLeft = (level*25) + "px";
            });
            $('.checkbox-indent-nav').each(function(i, obj) {
                // indent all the checkboxes depending on their level
                var class_name = obj.className;
                var level = class_name.replace("bt-checkbox checkbox-indent-nav checkbox-indent-", '');
                obj.parentElement.parentElement.style.paddingLeft = (level*25 + 15) + "px";
            });

            $('.navigation-name').each(function(i, obj) {
                // we want to make sure the box gets checked if they change the text
                $(this).on('input',function(e){
                    toggle_checkbox($(this));
                });
            });

        });

        function add_item(handle_id)
        {
            var new_navigation = $('.new-navigation-row').length;
            var new_id = 'new_navigation_' + new_navigation;
            $('#'+handle_id+' .row').clone().appendTo('#navigation_items')
                .attr({id: new_id});
            $('#' + new_id + ' .bt-text')
                .attr({id: 'new_navigation_'+new_navigation+'_name', name: 'new_navigation['+new_navigation+'][name]'});
            $('#' + new_id + ' .navigation-link')
                .attr({id: 'new_navigation_'+new_navigation+'_name', name: 'new_navigation['+new_navigation+'][link_url]'});
            // we want to make sure the box gets checked if they change the text
            $('#new_navigation_'+new_navigation+'_name').on('input',function(e){
                toggle_checkbox($(this));
            });
            $('#' + new_id + ' .bt-checkbox')
                .attr({id: 'new_navigation_'+new_navigation+'_check', name: 'new_navigation['+new_navigation+'][check]'});
            $('#' + new_id + ' #new_navigation_XXX_module')
                .attr({id: 'new_navigation_'+new_navigation+'_module', name: 'new_navigation['+new_navigation+'][module]'});
            $('#' + new_id + ' #new_navigation_XXX_is_link')
                .attr({id: 'new_navigation_'+new_navigation+'_is_link', name: 'new_navigation['+new_navigation+'][is_link]'});
        }

        function toggle_checkbox(elem) {
            var val = !(elem.val() == '');
            var parent_row = elem.closest(".text-row") ;
            var checkbox = parent_row.find('.bt-checkbox');
            checkbox.prop('checked', val);
        }

    </script>
@endsection

@section('page_style')
    <style>
        .text-row {
            display: flex;
            flex-wrap: wrap;
        }
        .text-row-item {
            flex-grow: 1;
        }
        .text-row-item .input-group {
            width: calc(100% - 70px);
        }
        .text-row .bt-checkbox {
            margin-top: 15px !important;
            margin-right: 5px !important;
        }
        input.navigation-name {
            width: 97%;
        }
        #navigation-link {
            width: 92%;
            margin-right: -5px;
        }
        .link-label-name {
            margin-left: 26px;
        }
        .link-name {
            margin-left: -10px;
            padding-right: 5px;
        }
    </style>
@endsection