@extends('home')
@section('title')
  @lang('site.site_name')
@endsection
@section('styles')
  {!! Html::style(Theme::current()->assetPath.'/pages/css/profile-rtl.min.css') !!}
  {!! Html::style(Theme::current()->assetPath.'/global/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css') !!}
  
  
  {!! Html::style(Theme::current()->assetPath.'/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css') !!}
  {!! Html::style(Theme::current()->assetPath.'/global/plugins/bootstrap-switch/css/bootstrap-switch-rtl.min.css') !!}
  
  <style>
  p.lead{
    max-width: 600px;
    margin:0 auto 20px auto;
  }
  div.lead{
    margin:30px 0;
  }
  a.action-placement{
    margin:0 4px 4px 4px;
    display:inline-block;
    /*border-bottom: 1px dotted #428BCA;*/
    text-decoration: none;
  }
  a.action-placement.active{
    color:#5CB85C;
  }
  .form-group{
    text-align: left;
    margin-bottom: 30px;
  }
  .form-group label{
    display:block;
    margin-bottom: 15px;
  }
  .lead iframe{
    display:inline-block;
    vertical-align: middle;
  }
  </style>
@endsection
@section('content')
  <div class="row">
    <div class="col-md-12">
      <div class="portlet light bordered">
        <div class="portlet-title">
          <div class="caption">
            <i class="fa fa-edit font-purple-soft"></i>
            <span class="caption-subject font-purple-soft bold">{{ __('List Menus') }}</span>
          </div>
          <div class="actions">

          </div>
        </div>
        <div class="portlet-body">
        
            <div class="row">

                <div class="col-md-12">
                  <div class="portlet light portlet-fit bordered">
                    <div class="portlet-body">
                      <table class="table table-striped custom-table ">
                        <thead>
                          <tr>
                            <th><i class="fa fa-bookmark-o"></i> Title</th>
                            <th width="15%"></th>
                            <th width="10%"><i class=" fa fa-edit"></i> </th>
                            <th width="25%"><i class="fa fa-cogs"></i> Action</th>
                          </tr>
                        </thead>
                        <tbody>
                          @foreach ($menus as $index => $item)
                            <tr>
                              <td>
                                <a href="{!! URL::route('MenuShow', [$item->section]) !!}" >
                                  @if ($item->depth > 1)
                                    {!! str_repeat('-',$item->depth-1) !!}<i class="fa fa-angle-right" aria-hidden="true"></i>
                                  @endif
                                  {{ $item->section }}</a>
                                </td>
                                <td>

                                </td>
                                <td>
                                  <button class="btn btn-info btn-xs btn-action" data-id="{{ $item->id }}" data-value="{{ $item->publish }}" data-type="publish"><i class="fa @if($item->publish) fa-check @else fa-times @endif"></i></button>
                                  </td>
                                  <td>
                                    <a href="{!! URL::route('MenuShow', [$item->section]) !!}" target="_blank"><span class="btn btn-success btn-xs"><i class="fa fa-eye"></i></span></a>
                                  </td>
                                </tr>
                              @endforeach
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        @endsection
        @section('scripts')
          
          
          {!! Html::script(Theme::current()->assetPath.'/global/plugins/bootstrap-fileinput/bootstrap-fileinput.js') !!}
          {!! Html::script(Theme::current()->assetPath.'/global/plugins/bootstrap-markdown/lib/markdown.js') !!}
          {!! Html::script(Theme::current()->assetPath.'/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js') !!}
          {!! Html::script(Theme::current()->assetPath.'/global/plugins/bootstrap-markdown/js/bootstrap-markdown.js') !!}
          {!! Html::script(Theme::current()->assetPath.'/global/plugins/jquery-validation/js/jquery.validate.min.js') !!}
          {!! Html::script(Theme::current()->assetPath.'/global/plugins/jquery-validation/js/additional-methods.min.js') !!}
          
          <script type="text/javascript">
            jQuery(document).ready(function($){
              $("#parent_id").select2();
              $("#page_id").select2();
              $("#order").select2();
              /************************/
              $('#parent_id').change(function(){
                var parent_id = $(this).val();
                $.get("{{ url('api/list/parents') }}",
                { option: $(this).val() },
                function(data) {
                  var order = $('#order');
                  order.empty();
                  order.append("<option value=''>-{{ __('Select') }}-</option>");
                  $.each(data, function(index, element) {
                    order.append("<option value='"+ index +"'>" + element + "</option>");
                  });
                });
              });
            });
          </script>
          <script>
            jQuery(document).ready(function($){
              $('.icp').iconpicker();
            });
          </script>
        @endsection