@include('admin.header', [
   'elementActive' => 'core'
])


<div class="content-wrapper">

    <section class="content-header">
      <h1>
      Cores e menus	      <small>Altere o nome dos menus e as cores do seu site</small>
      </h1> 
    </section>

    <!-- Main content -->
    <section class="content">
    <div class="row">

        <div class="col-xs-12">

            <div class="nav-tabs-custom">

                <ul class="nav nav-tabs ">
                    
                    <li {!! $active == 'header' || $active == false ? 'class="active"' : '' !!}>
                        <a href="#menu" data-toggle="tab">Menu Topo</a>
                    </li>

                    <li {!! $active == 'footer' ? 'class="active"' : '' !!}>
                        <a href="#menu_rodape" data-toggle="tab">Menu Rodape</a>
                    </li>

                    <li {!! $active == 'colors' ? 'class="active"' : '' !!}>
                        <a href="#cores" data-toggle="tab">Cores</a>
                    </li>

                    <li {!! $active == 'orders' ? 'class="active"' : '' !!}>
                        <a href="#orders" data-toggle="tab">Ordem do Layout</a>
                    </li>

                </ul>

                <div class="tab-content">


                    <div id="menu" class="tab-pane {!! $active == 'header' || $active == false ? 'active' : '' !!}">

                          {{-- <div>
                              <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#janela_modal_grande">Novo Menu</button>
                        </div>

                        <hr> --}}

                        <div style="padding-bottom:15px;">
                            Ordene movendo para cima e para baixo e transforme em sub-menus movendo para os lados.
                        </div>
                        
                        <div class="dd" id="nestable">
                            <ol class="dd-list">
                                @foreach ($headers as $header)
                                    <li class="dd-item dd3-item" data-id="{{ $header->id }}">
                                        <div class="dd-handle dd3-handle">
                                            <i class="fa fa-arrows" style="margin-top: 4px"></i>
                                        </div>
                                        <div class="dd3-content-editar" onclick="openUpdateHeaderModal({{ $header->id }}, '{{ $header->name }}', '{{ $header->value }}', {{ $header->enable }});">
                                            <i class="fa fa-pencil" style="margin-top: 4px"></i>
                                        </div>
                                        <div class="dd3-content">{{ $header->name }}</div>
                                        <ol class="dd-list"></ol>
                                    </li>  
                                @endforeach

                            </ol>							
                        </div>

                        <div style="clear:both; padding-top:15px;">
                            <form action="{{ route('admin.core.update', 'header') }}" method="post">
                                @csrf
                                @method('PUT')
                                <input type="hidden" name="headers_order" id="nestable-output" class="form-control" value="">
                                <button type="submit" class="btn btn-primary">Salvar Ordem</button>
                            </form>
                        </div>

                    </div>


                    <div id="menu_rodape" class="tab-pane {!! $active == 'footer' ? 'active' : '' !!}">


                        <div style="padding-bottom:15px;">Ordene movendo para cima e para baixo.</div>
                        
                        <div class="dd" id="nestable_rodape">
                            <ol class="dd-list">
                                @foreach ($footers as $footer)
                                    <li class="dd-item dd3-item" data-id="{{ $footer->id }}">
                                        <div class="dd-handle dd3-handle">
                                            <i class="fa fa-arrows" style="margin-top: 4px"></i>
                                        </div>
                                        <div class="dd3-content-editar" onclick="openUpdateFooterModal({{ $footer->id }}, '{{ $footer->name }}', '{{ $footer->value }}', {{ $footer->enable }});">
                                            <i class="fa fa-pencil" style="margin-top: 4px"></i>
                                        </div>
                                        <div class="dd3-content">{{ $footer->name }}</div>
                                    </li>
                                @endforeach
                            </ol>
                        </div>
                        
                        <div style="clear:both; padding-top:15px;">
                            <form action="{{ route('admin.core.update', 'footer') }}" method="post">
                                @csrf
                                @method('PUT')
                                <input type="hidden" name="footers_order" id="nestable-output_rodape" class="form-control" value="">
                                <button type="submit" class="btn btn-primary">Salvar Ordem</button>
                            </form>
                        </div>
                        
                    </div>


                    <div id="cores" class="tab-pane {!! $active == 'colors' ? 'active' : '' !!}">
                        <form action="{{ route('admin.core.update', 'colors') }}" class="form-horizontal" method="post">
                            @csrf
                            @method('PUT')

                            <div class="row">
                                <div class="col-xs-12" style="padding-bottom:15px; ">

                                    <div style="float:left; width:20%; text-align:center; margin-top:20px;">
                                        <label>Background do Topo</label>
                                    </div>
                                    <div style="float:left; width:25%; text-align:center; margin-top:15px;">
                                        <input type="color" id="secondary" name="secondary" onchange="clickColor(0, -1, -1, 5)" value="{{ $colors->secondary }}" style="width:85%;">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-xs-12" style="padding-bottom:15px; ">
                                    <div style="float:left; width:20%; text-align:center; margin-top:20px;">
                                        <label>Background do Rodapé</label>
                                    </div>
                                    <div style="float:left; width:25%; text-align:center; margin-top:15px;">
                                        <input type="color" id="footer_background" name="footer_background" onchange="clickColor(0, -1, -1, 5)" value="{{ $colors->footer_background }}" style="width:85%;">
                                    </div> 
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-xs-12" style="padding-bottom:15px;">
                                    <div style="float:left; width:20%; text-align:center; margin-top:20px;">
                                        <label>Cor dos Menus</label>
                                    </div>
                                    <div style="float:left; width:25%; text-align:center; margin-top:15px;">
                                        <input type="color" id="top_menu" color="top_menu" name="top_menu" onchange="clickColor(0, -1, -1, 5)" value="{{ $colors->top_menu }}" style="width:85%;">
                                    </div>
                                </div>
                            </div>

                            {{-- <div class="row">
                                <div class="col-xs-12" style="padding-bottom:15px; ">
                                    <div style="float:left; width:20%; text-align:center; margin-top:20px;">
                                        <label>Topo do site - Textos selecionados</label>
                                    </div>
                                    <div style="float:left; width:25%; text-align:center; margin-top:15px;">
                                        <input type="color" id="top_menu_selected" name="top_menu_selected" onchange="clickColor(0, -1, -1, 5)" value="{{ $colors->top_menu_selected }}" style="width:85%;">
                                    </div>
                                </div>
                            </div> --}}

                                <div class="row">

                                    <div class="col-xs-12" style="padding-bottom:15px; ">
                                        <div style="float:left; width:20%; text-align:center; margin-top:20px;">
                                            <label>Cor dos Botões</label>
                                        </div>
                                        <div style="float:left; width:25%; text-align:center; margin-top:15px;">
                                            <input type="color" id="primary" name="primary" onchange="clickColor(0, -1, -1, 5)" value="{{ $colors->primary }}" style="width:85%;">
                                        </div>
                                    </div>
                                
                                </div>
                                
                                <div class="row">

                                    <div class="col-xs-12" style="padding-bottom:15px;">
                                        <div style="float:left; width:20%; text-align:center; margin-top:20px;">
                                            <label>Contraste dos Botões</label>
                                        </div>
                                        <div style="float:left; width:25%; text-align:center; margin-top:15px;">
                                            <input type="color" id="primary_contrast" name="primary_contrast" onchange="clickColor(0, -1, -1, 5)" value="{{ $colors->primary_contrast }}" style="width:85%;">
                                        </div>
                                    </div>

                                </div>
                                
                                
                                
                                {{-- <div class="row">
                                    <div class="col-xs-12" style="padding-bottom:15px; background-color:#eee; ">
                                        <div style="float:left; width:20%; text-align:center; margin-top:20px;">
                                            <label>Cor Secundária - Contraste</label>
                                        </div>
                                        <div style="float:left; width:25%; text-align:center; margin-top:15px;">
                                            <input type="color" id="secondary_contrast" name="secondary_contrast" onchange="clickColor(0, -1, -1, 5)" value="{{ $colors->secondary_contrast }}" style="width:85%;">
                                        </div>
                                    </div>
                                </div> --}}
                                
                                {{-- <div class="row">
                                    <div class="col-xs-12" style="padding-bottom:15px; ">

                                        <div style="float:left; width:20%; text-align:center; margin-top:20px;">
                                            <label>Cor Terciária</label>
                                        </div>
                                        <div style="float:left; width:25%; text-align:center; margin-top:15px;">
                                            <input type="color" id="secondary" name="tertiary" onchange="clickColor(0, -1, -1, 5)" value="{{ $colors->tertiary }}" style="width:85%;">
                                        </div>
                                    </div>
                                </div> --}}
                                
                                {{-- <div class="row">
                                    <div class="col-xs-12" style="padding-bottom:15px; background-color:#eee; ">
                                        <div style="float:left; width:20%; text-align:center; margin-top:20px;">
                                            <label>Cor Terciária - Contraste</label>
                                        </div>
                                        <div style="float:left; width:25%; text-align:center; margin-top:15px;">
                                            <input type="color" id="tertiary_contrast" name="tertiary_contrast" onchange="clickColor(0, -1, -1, 5)" value="{{ $colors->tertiary_contrast }}" style="width:85%;">
                                        </div>
                                    </div>
                                </div> --}}
                                
                                
                                
                                <div class="row">
                                    <div class="col-xs-12" style="padding-bottom:15px;">
                                        <div style="float:left; width:20%; text-align:center; margin-top:20px;">
                                            <label>Textos do rodapé</label>
                                        </div>
                                        <div style="float:left; width:25%; text-align:center; margin-top:15px;">
                                            <input type="color" id="footer_texts" name="footer_texts" onchange="clickColor(0, -1, -1, 5)" value="{{ $colors->footer_texts }}" style="width:85%;">
                                        </div>
                                    </div>
                                </div>
                                
                                {{-- <div class="row">
                                    <div class="col-xs-12" style="padding-bottom:15px; ">
                                        <div style="float:left; width:20%; text-align:center; margin-top:20px;">
                                            <label>Titulos do rodapé</label>
                                        </div>
                                        <div style="float:left; width:25%; text-align:center; margin-top:15px;">
                                            <input type="color" id="footer_titles" name="footer_titles" onchange="clickColor(0, -1, -1, 5)" value="{{ $colors->footer_titles }}" style="width:85%;">
                                        </div>
                                    </div>
                                </div> --}}
                                
                                
                                
                            
                                                            
                            <div style="padding-top:15px;">
                                <button type="submit" class="btn btn-primary">Salvar</button>
                            </div>

                        </form>
                    </div>

                    <div id="orders" class="tab-pane {!! $active == 'orders' ? 'active' : '' !!}">


                        <div style="padding-bottom:15px;">Ordene movendo para cima e para baixo.</div>
                        
                        <div class="dd" id="nestable_core">
                            <ol class="dd-list">
                                @foreach ($coreOrders as $coreOrder)
                                    <li class="dd-item dd3-item" data-id="{{ $coreOrder->page }}">
                                        <div class="dd-handle dd3-handle">
                                            <i class="fa fa-arrows" style="margin-top: 4px"></i>
                                        </div>
                                        <div class="dd3-content">{{ $coreOrder->name }}</div>
                                    </li>
                                @endforeach
                            </ol>
                        </div>
                        
                        <div style="clear:both; padding-top:15px;">
                            <form action="{{ route('admin.core.update', 'orders') }}" method="post">
                                @csrf
                                @method('PUT')
                                <input type="hidden" name="layout_order" id="nestable-output_core" class="form-control" value="">
                                <button type="submit" class="btn btn-primary">Salvar Ordem</button>
                            </form>
                        </div>
                        
                    </div>
                    
                </div>
            
            </div>
            
        </div>

    </div>
    <!-- /.row -->
</section>
<!-- /.content -->

</div>

<script>
    function openUpdateHeaderModal(id, name, value, enable){

        $("#header_id_menu").val(id);
        $("#header_enable").val(enable);
        $("#header_name").val(name);
        $("#header_value").val(value);
        $("#updateHeader").modal();

    }
    function openUpdateFooterModal(id, name, value, enable){

        $("#footer_id_menu").val(id);
        $("#footer_enable").val(enable);
        $("#footer_name").val(name);
        $("#footer_value").val(value);
        $("#updateFooter").modal();

    }
</script>

<div id="updateHeader" class="modal fade" role="dialog">
    <div class="modal-dialog modal-md">
  
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h5 class="modal-title modal_titulo">Edite o menu do topo</h5>
         </div>
         <div class="modal-body" id="modal_conteudo_m">
            <style type="text/css">
               .bootstrap-timepicker-widget table{
               background-color: #fff !important;
               }
            </style>
        <form action="{{ route('admin.core.update', 'header') }}" method="post">
            @csrf
            @method('PUT')
  

                <input type="text" name="id_menu" id="header_id_menu" value="" hidden>
                <fieldset>
                    <div class="form-group">
                        <label>Nome do menu </label>
                        <input type="text" name="name" id="header_name" class="form-control" value="">
                    </div>
                    <div class="form-group">
                        <label>Redirecionar para</label>
                        <input type="text" name="value" id="header_value" class="form-control" value="">
                    </div>
                    <div class="form-group">
                        <label>Habilitado </label>
                        <select class="form-control" name="enable" id="header_enable">
                            <option value="1">Sim</option>
                            <option value="0">Não</option>
                        </select>
                    </div>
                </fieldset>

            </div>
    
            <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Salvar</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
            </div>
        </form>
      </div>
  
    </div>
  </div>

  
<div id="updateFooter" class="modal fade" role="dialog">
    <div class="modal-dialog modal-md">
  
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h5 class="modal-title modal_titulo">Edite o menu do topo</h5>
         </div>
         <div class="modal-body" id="modal_conteudo_m">
            <style type="text/css">
               .bootstrap-timepicker-widget table{
               background-color: #fff !important;
               }
            </style>
        <form action="{{ route('admin.core.update', 'footer') }}" method="post">
            @csrf
            @method('PUT')
  

                <input type="text" name="id_menu" id="footer_id_menu" value="" hidden>
                <fieldset>
                    <div class="form-group">
                        <label>Nome do menu </label>
                        <input type="text" name="name" id="footer_name" class="form-control" value="">
                    </div>
                    <div class="form-group">
                        <label>Redirecionar para</label>
                        <input type="text" name="value" id="footer_value" class="form-control" value="">
                    </div>
                    <div class="form-group">
                        <label>Habilitado </label>
                        <select class="form-control" name="enable" id="footer_enable">
                            <option value="1">Sim</option>
                            <option value="0">Não</option>
                        </select>
                    </div>
                </fieldset>

            </div>
    
            <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Salvar</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
            </div>
        </form>
      </div>
  
    </div>
  </div>

@include('admin.footer')
<script src="{{ asset('asset/api/nestable/jquery.nestable.js') }}"></script>
<script src="{{ asset('asset/api/nestable/examples.nestable.js') }}"></script>

<script>
(function( $ ) {

'use strict';
    
/*
Update Output
*/
var updateOutput = function (e) {
    var list = e.length ? e : $(e.target),
        output = list.data('output');

    if (window.JSON) {
        output.val(window.JSON.stringify(list.nestable('serialize')));
    } else {
        output.val('JSON browser support required for this demo.');
    }
};

var updateOutput_rodape = function (e) {
    var list = e.length ? e : $(e.target),
        output_rodape = list.data('output_rodape');
        
    if (window.JSON) {
        output_rodape.val(window.JSON.stringify(list.nestable('serialize')));
    } else {
        output_rodape.val('JSON browser support required for this demo.');
    }
};

var updateOutput_core = function (e) {
    var list = e.length ? e : $(e.target),
    output_core = list.data('output_core');
        
    if (window.JSON) {
        output_core.val(window.JSON.stringify(list.nestable('serialize')));
    } else {
        output_core.val('JSON browser support required for this demo.');
    }
};

/*
Nestable 1
*/
$('#nestable').nestable({
    group: 1
}).on('change', updateOutput);

$('#nestable_rodape').nestable({
    group: 1
}).on('change', updateOutput_rodape);

$('#nestable_core').nestable({
    group: 1
}).on('change', updateOutput_core);
/*
Output Initial Serialised Data
*/
$(function() {
    updateOutput($('#nestable').data('output', $('#nestable-output')));
    updateOutput_rodape($('#nestable_rodape').data('output_rodape', $('#nestable-output_rodape')));
    updateOutput_rodape($('#nestable_core').data('output_core', $('#nestable-output_core')));
});

}).apply(this, [ jQuery ]);
    </script>