@extends('layouts.app')
@include('plugins.datatables')
@section('content')
<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="content-wrapper">
        
        <div class="content-header row">
            <div class="content-header-left col-md-6 col-12 mb-2">
                <h3 class="content-header-title">Menu Configuration</h3>
                <div class="row breadcrumbs-top">
                    <div class="breadcrumb-wrapper col-12">
                        <!-- {{ Breadcrumbs::render('menuconfiguration') }} -->
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="http://localhost/home">Home</a></li>
                            <li class="breadcrumb-item active">Menu Configuration</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-body">
            <section>
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Menu Configuration</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <table class="table" id="table" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th width="10%">No.</th>
                                            <th width="20%">OrderBy</th>
                                            <th>Name</th>
                                            <th>Parent</th>
                                            <th width="20%">Action</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                            <!-- <div class="col-md-3">
                                <ul id="tree1">
                                    @foreach($menus as $menu)
                                        <li>
                                            <a href="javascript:;" class="btn btn-dark btn-xs mb-1"><i class="la la-edit mr-1"></i> {{ $menu->title }}</a>
                                            @if(count($menu->childs))
                                                @include('admin.menu.child',['childs' => $menu->childs])
                                            @endif
                                        </li>
                                    @endforeach
                                </ul>
                            </div> -->
                            
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
@endsection

<div class="modal fade" id="modal-add" tabindex="-1" role="dialog" aria-labelledby="addModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-cara white">
                <h5 class="modal-title white" id="addModalTitle">Add <span class="bold">Menu</span></h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body m-t-20">
                
                <div class="alert alert-secondary" role="alert">
                    <span class="la la-info-circle m-r-5"></span> Note that after this process, you need to :-<br><br>
                    <ul>
                        <li>
                            Modified routes based on your own URL 
                        </li>
                        <li>
                            Set permission which Role can access this menu
                        </li>
                        <li>
                            If tick CRUD , permission for crud will be automatically add. You need to set which Role can do based on their task.
                        </li>
                    </ul>
                </div> 

                <form id='form-add' action="{{ route('admin.menu')}}" method="post">
                    @csrf
                    <div class="form-body">
                        @if(count($errors) > 0)
                            <div class="alert alert-danger  alert-dismissible">
                                <button type="button" class="close" data-dismiss="alert">×</button>
                                @foreach($errors->all() as $error)
                                        {{ $error }}<br>
                                @endforeach
                            </div>
                        @endif
                        @if ($message = Session::get('success'))
                            <div class="alert alert-success  alert-dismissible">
                                <button type="button" class="close" data-dismiss="alert">×</button>   
                                    <strong>{{ $message }}</strong>
                            </div>
                        @endif

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>Parent</label>
                                    <select class="form-control" name="parent_id">
                                    <option selected disabled>Select Parent Menu</option>
                                    @foreach($menu_list as $key => $value)
                                        <option value="{{ $value->id }}">{{ $value->title}}</option>
                                    @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>Title</label>
                                    <input type="text" name="title" class="form-control">   
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Sequence</label>
                                    <input type="text" name="orderBy" class="form-control">   
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Icon</label>
                                    <select class="form-control" name="icon">
                                        <option selected disabled>Select Icon</option>
                                        @foreach($symbol_list as $key => $symbol_lists)
                                            <option value="{{ $symbol_lists->name }}">{{ $symbol_lists->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row"> 
                            <div class="custom-control custom-checkbox col-md-12">
                                <div class="col-md-6" style="padding-left: 7px">
                                    &nbsp;<input name="crud" value="1" id="crud" class="custom-control-input" type="checkbox">
                                    <label class="custom-control-label" for="crud">CRUD ( Create , Read , Update , Delete )
                                    </label>
                                </div>
                                <div class="col-md-6" style="padding-left: 7px">
                                    &nbsp;<input name="module" value="1" id="module" class="custom-control-input" type="checkbox">
                                    <label class="custom-control-label" for="module">Module
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" onclick="submitForm('form-add')"><i class="la la-check m-r-5"></i> Submit</button>
            </div>
        </div>
    </div>
</div>

@push('js')
<script src="/js/treeview.js"></script>

<script type="text/javascript">

var table = $('#table');

var settings = {
    "processing": true,
    "serverSide": true,
    "deferRender": true,
    "ajax": "{{ fullUrl() }}",
    "columns": [
        { data: 'index', defaultContent: '', orderable: false, searchable: false, render: function (data, type, row, meta) {
            return meta.row + meta.settings._iDisplayStart + 1;
        }},
        { data: "sequence", name: "sequence", render: function(data, type, row){
            return $("<div/>").html(data).text();
        }},
        { data: "name", name: "name", render: function(data, type, row){
            return $("<div/>").html(data).text();
        }},
        { data: "parent", name: "parent", render: function(data, type, row){
            return $("<div/>").html(data).text();
        }},
        { data: "action", name: "action", orderable: false, searchable: false},
    ],
    "dom": "Blfrtip",
    "buttons": [
        {
            text: '<i class="la la-plus-circle m-r-5"></i> Add Menu',
            className: 'btn btn-success btn-sm',
            action: function ( e, dt, node, config ) {
                add();
            }
        },
        {
            text: '<i class="la la-print m-r-5"></i> Print',
            extend: 'print',
            className: 'btn btn-secondary btn-sm',
            exportOptions: {
                columns: ':visible:not(.nowrap)'
            }
        },
        {
            text: '<i class="la la-download m-r-5"></i> Excel',
            extend: 'excelHtml5',
            className: 'btn btn-secondary btn-sm',
            exportOptions: {
                columns: ':visible:not(.nowrap)'
            }
        },
        {
            text: '<i class="la la-download m-r-5"></i> PDF',
            extend: 'pdfHtml5',
            className: 'btn btn-secondary btn-sm',
            exportOptions: {
                columns: ':visible:not(.nowrap)'
            }
        },
    ],
    "destroy": true,
    "iDisplayLength": 200
};

table.dataTable(settings);

function edit(id) {
    $("#modal-div").load("{{ route('admin.menu') }}/"+id);
}

function add() {
    $('#modal-add').modal('show');
    $('.modal form').trigger("reset");
    $('.modal form').validate();
}

$("#form-add").submit(function(e) {
    e.preventDefault();
    var form = $(this);

    if(!form.valid())
       return;

    $.ajax({
        url: form.attr('action'),
        method: form.attr('method'),
        data: new FormData(form[0]),
        dataType: 'json',
        async: true,
        contentType: false,
        processData: false,
        success: function(data) {
            swal(data.title, data.message, data.status);
            $("#modal-add").modal("hide");
            location.reload();
        }
    });
    
});

function remove(id) {
    swal({
        title: "Delete Data",
        text: "Deleted data cannot be restored. Proceed?",
        icon: "warning",
        buttons: ["Cancel", { text: "Delete", closeModal: false }],
        dangerMode: true,
    })
    .then((confirm) => {
        if (confirm) {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: '{{ route('admin.menu') }}/'+id,
                method: 'delete',
                dataType: 'json',
                async: true,
                contentType: false,
                processData: false,
                success: function(data) {
                    swal(data.title, data.message, data.status);
                    table.api().ajax.reload(null, false);
                    // location.reload();
                }
            });
        }
    });
}

$('#crud').change(function() {
    if(this.checked) {
        $('#module').prop('checked', true);
        $('#module').attr('disabled',true);
    } else {
        $('#module').prop('checked', false);
        $('#module').attr('disabled',false);
    }
});
</script>
@endpush