@include("messages")
<input type="hidden" id="assigned_output" name="assigned_output" value="" />
<?php
$roles = Config::get('params.roles');
$required = "";
//d($roles,1);
//$currency = $currencies[Config::get('params.currency_default')]['symbol'];
?>
<div id="errors"></div>
<div class="row">
    <div class="col-sm-12">
        <div class="form-group">
            {!! Form::label('Title') !!}
            {!! Form::text('Title', null , array('class' => 'form-control',$required) ) !!}
        </div>
    </div>
</div>
 <div class="row">
    <div class="col-md-6 col-xs-6 col-lg-6">
        <div class="col-md-12 col-xs-12 col-lg-12">
            <div class="form-group">
                {!! Form::label('Page') !!}
                <select name="pages" id='pages' class="form-control select2" >
                    @foreach($pages as $key=>$page)
                    <option value="{{$page['ID']}}"  >{{$page['Title']}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="dd col-md-12 col-xs-12 col-lg-12">
            <a href="javascript:void(0);" class="btn btn-outline-primary add">Add</a>
        </div>
    </div>
    <div class="col-md-6 col-xs-6 col-lg-6">
        <div class="cf nestable-lists">
            <div class="dd col-md-12 col-xs-12 col-lg-12" id="unassigned_menus">
                 <ol id="parent" class="dd-list dark">

                    @foreach($navigations as $rec)
                    <li id="{{$rec['id']}}" class="dd-item dd3-item" data-id="{{$rec['id']}}" data-name="{{$rec['name']}}" data-url="{{$rec['url']}}" data-type="{{$rec['type']}}">
                        <div class="dd-handle dd3-handle"></div>
                        <input type="hidden" id="p_id" name="p_id[]" value="{{$rec['id']}}">
                        <input type="hidden" id="p_link" name="p_link[]" value="{{$rec['url']}}">
                        <div class="dd3-content">
                            <div class="accordion accordianpanel" aria-expanded="false">
                                <div class="accordion-group">
                                    <div class="accordion-heading"> 
                                        <a href="#collapse{{$rec['id']}}" data-toggle="collapse" class="accordion-toggle collapsed">{{$rec['name']}}<i class="fa fa-plus"></i> </a> 
                                    </div>
                                    <div class="accordion-body collapse" id="collapse{{$rec['id']}}" style="height: 0px;">
                                        <div class="accordion-inner">
                                            <div class="form-group">
                                                <label class="form-label">Title</label>
                                                <div class="controls"><?php echo $rec['name']?></div>
                                            </div>
                                            <div class="accordion-body collapse" id="collapse{{$rec['id']}}" style="height: 0px;">
                                                <div class="accordion-inner"><div class="form-group">
                                                        <label class="form-label">URL</label>
                                                        <div class="controls">
                                                            {{$rec['url']}}
                                                        </div>
                                                    </div>
                                                    <div class="control-button">
                                                        <a href="javascript:void(0);" onclick="remove('<?php echo $rec['id']; ?>')" data-id="<?php echo $rec['id']; ?>" class="remove-nav">Remove</a><!--<a data-id="' + num + '" class="cancel-nav">Close</a>-->
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- children --->
                        <?php 
                            $children = $rec['children']; 
                        ?>
                        
                        @if(isset($children)>0)
                        <ol class="dd-list dark">
                            @foreach($children as $val)
                            <li  id="<?php echo $val['id']?>" class="dd-item" data-id="<?php echo $val['id']?>" data-id="{{$val['id']}}" data-name="{{$val['name']}}" data-url="{{$val['url']}}" data-type="{{$val['type']}}">
                                <div class="dd-handle dd3-handle"></div>
                                <div class="dd3-content">
                                    <div class="accordion accordianpanel" aria-expanded="false">
                                        <div class="accordion-group">
                                           
                                            <div class="accordion-heading"> 
                                                <a href="#collapse{{$val['id']}}" data-toggle="collapse" class="accordion-toggle collapsed">{{$val['name']}}<i class="fa fa-plus"></i> </a> 
                                            </div>
                                            <div class="accordion-body collapse" id="collapse{{$val['id']}}" style="height: 0px;">
                                                <div class="accordion-inner">
                                                    <div class="form-group">
                                                        <label class="form-label">Title</label>
                                                       
                                                          <div class="controls"><?php echo $val['name']?></div>
                                                    </div>
                                                    <div class="accordion-body collapse" id="collapse{{$val['id']}}" style="height: 0px;">
                                                        <div class="accordion-inner"><div class="form-group">
                                                                <label class="form-label">URL</label>
                                                                <div class="controls">
                                                                    {{$val['url']}}    
                                                                </div>
                                                            </div>
                                                            <div class="control-button">
                                                                <a href="javascript:void(0);" onclick="remove('<?php echo $val['id']; ?>')" data-id="<?php echo $val['id']; ?>" class="remove-nav">Remove</a><!--<a data-id="' + num + '" class="cancel-nav">Close</a>-->
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            @endforeach
                        </ol>
                        @endif

                    </li>
                    @endforeach
                </ol>                                           
            </div>
        </div>
    </div>
</div>
<br clear="all" />
<br clear="all"/>
<h3>Add Custom Link</h3>
<div class="row">
  <div class="col-sm-6">
        <div class="form-group">
            {!! Form::label('Title') !!}
            {!! Form::text('CustomTitle', null , array('class' => 'form-control',$required, 'id'=>'title', 'name'=>'title') ) !!}
        </div>
</div>  
</div>
<div class="row">
    <div class="col-sm-6">
        <div class="form-group">
            {!! Form::label('URL') !!}
            {!! Form::text('URL', null , array('class' => 'form-control',$required, 'id'=>'urls', 'name'=>'urls') ) !!}
        </div>
    </div>
  
</div>
<div class="row">
    <div class="col-sm-6">
        <div id="error"></div>

    </div>
</div>
<div class="row">
    <div class="col-sm-6">
        <a href="javascript:void(0);" class="btn btn-outline-primary " id="add">Add</a>
    </div>
</div>
<br clear="all" />

<div class="row">
    <div class="col-md-8">
        <button type="submit" class="btn btn-primary mr-1 mb-1 waves-effect waves-light save">Save</button>
        <a href="{{url('navigations')}}" class="btn btn-outline-warning mr-1 mb-1 waves-effect waves-light">Cancel</a>
    </div>
</div>
<br clear="all" />
<?php 
// echo json_encode($navigations); 
?>
<input type="hidden" name="links" id="nestable-output" value="<?php echo json_encode($navigations); ?>"></input>
<script>
    var pages =<?php echo json_encode($pages); ?>;
    var navigations =<?php echo json_encode($navigations); ?>;
</script>
 <script>

    var count = <?php echo count($navigations); ?>;
    
    $(document).ready(function () {

    $(".add").click(function () {
    var page = $("#pages").val();
    var page = pages[page];
    var pagtype = "Page";
    addPage(count, page['ID'], page['Title'], page['AccessURL'], pagtype);
    });
    $("#add").click (function () {
    var title = $("#title").val();
    var url = $("#urls").val();
    var pageid = 0;
    var pagetype = "Url";
    if (title == "" || url == "") {
    $("#error").html("<p>Title/URL is empty</p>");
    } else {
    $('#error').hide();
    $("#title").val('');
    $("#urls").val('');
    addCustomPage(count, pageid, title, url, pagetype);
    
    
    
    }
    });
    $(".save").click(function () {

    var url = $("#form").attr('action');
    var type = "POST";
    var dataType = "json";
    var data = $("form").serialize();
    //alert(data);
    var callBack = function (response) {

    if (response.error === 1) {
    displayErrors(response, "errors");
    } else
    {
    // window.top.location.href = '{{url("admin/navigations/")}}';
    }
    };
    ajaxRequest(url, type, dataType, data, callBack, {});
    });
    var navigationsCount = Object.keys(navigations).length;
    
            });
			
			</script>

<script>
    function remove(id) {
        $("#" + id).remove();
        $($('#unassigned_menus')).trigger("change");
    }

    function addPage(num, id, title, url, pagetype) {
    var dd = '<li id="' + num + '" class="dd-item dd3-item" data-id="' + id + '" data-name="' + title + '" data-url="' + url + '" data-type="' + pagetype + '"><div class="dd-handle dd3-handle"></div><input type="hidden" id="p_id" name="p_id[]" value="' + id + '"><input type="hidden" id="p_link" name="p_link[]" value="' + pagetype + '"><div class="dd3-content"><div class="accordion accordianpanel" aria-expanded="false"><div class="accordion-group"><div class="accordion-heading"> <a href="#collapse' + num + '" data-toggle="collapse" class="accordion-toggle collapsed">' + title + '<i class="fa fa-plus"></i> </a> </div><div class="accordion-body collapse" id="collapse' + num + '" style="height: 0px;"><div class="accordion-inner"><div class="form-group"><label class="form-label">Title</label><div class="controls">' + title + '</div></div><div class="original-name"><p>Original : ' + title + ' </p></div><div class="control-button"><a href="javascript:void(0);" onclick="remove(' + num + ')" data-id="' + num + '" class="remove-nav">Remove</a><!--<a data-id="' + num + '" class="cancel-nav">Close</a>--></div></div></div></div></div></div></li>';
    $("#parent").append(dd);
    //updateOutput($('#unassigned_menus').data('output', $('#nestable-output')));
    $($('#unassigned_menus')).trigger("change");
count++;
}

function addCustomPage(num, id, title, url, pagetype) {

    var dd = '<li id="' + num + '" class="dd-item dd3-item" data-id="' + id + '" data-name="' + title + '" data-url="' + url + '" data-type="' + pagetype + '"><div class="dd-handle dd3-handle"></div><input type="hidden" id="p_id" name="p_id[]" value="' + id + '"><input type="hidden" id="p_link" name="p_link[]" value="' + pagetype + '"><div class="dd3-content"><div class="accordion accordianpanel" aria-expanded="false"><div class="accordion-group"><div class="accordion-heading"> <a href="#collapse' + num + '" data-toggle="collapse" class="accordion-toggle collapsed">' + title + '<i class="fa fa-plus"></i> </a> </div><div class="accordion-body collapse" id="collapse' + num + '" style="height: 0px;"><div class="accordion-inner"><div class="form-group"><label class="form-label">Title</label><div class="controls">' + title + '</div></div><div class="accordion-body collapse" id="collapse' + num + '" style="height: 0px;"><div class="accordion-inner"><div class="form-group"><label class="form-label">URL</label><div class="controls">' + url + '</div></div><div class="control-button"><a href="javascript:void(0);" onclick="remove(' + num + ')" data-id="' + num + '" class="remove-nav">Remove</a><!--<a data-id="' + num + '" class="cancel-nav">Close</a>--></div></div></div></div></div></div></li>';
count++;
$("#parent").append(dd);
//updateOutput($('#unassigned_menus').data('output', $('#nestable-output')));
$($('#unassigned_menus')).trigger("change");

}
</script>

<script>
    $( document ).ready(function() {

        if($( "#template" ).val()=="has_child"){
            
            $("#hasNochild").hide();
            $("#hasChild").show();
        }else{
             
            $("#hasNochild").show();
            $("#hasChild").hide();
        }

    $('#template').on('change', function() {
        var value = $(this).val();
        if($( "#template" ).val()=="has_child"){
            
            $("#hasNochild").hide();
            $("#hasChild").show();
        }else{
             
            $("#hasNochild").show();
            $("#hasChild").hide();
        }
    });
    });
</script>
