@extends('site.layouts.app')

@section('title', 'Menu')

@section('stylesheets')
<link href="{{asset('adminlte/component/nestable/nestable.min.css')}}" rel="stylesheet">
<style type="text/css">
.overlay-wrapper{
    position:relative;
}
.dd-handle {
    display: block;
    height: 40px;
    padding: 8px 10px;
    text-decoration: none;
    font-weight: 500;
    border: 1px solid
    #ccc;
    border-radius: 3px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.dd-handle span{
    font-weight: 500;
}
.dd-item > button {
    margin:10px 0;
}
.item_actions{
    position: absolute;
    top: 6px;
    right: 10px;
}
</style>
@endsection

@push('breadcrump')
    <li class="breadcrumb-item active">Menu</li>
@endpush

@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">{{ $title }}</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.home') }}">Home</a></li>
                    <li class="breadcrumb-item active">{{ $title }}</li>
                </ol>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="overlay d-none">
        <div class="spinner-border" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <div class="col-lg-12">
        <div class="card" id="box-menu">
            <div class="card-header">
              <h3 class="card-title">Data Menu</h3>
              <div class="float-end card-tools">
                <button class="btn btn-sm btn-{{config('configs.app_theme')}} create" title="Tambah"><i class="fa fa-plus"></i></button>
                <button class="btn btn-sm btn-primary updateorder" title="Tambah"><i class="fa fa-save"></i></button>
              </div>
            </div>
            <div class="card-body">
                <div class="dd">
                    {!!buildDD($menus);!!}
                </div>
            </div>
            <div class="overlay d-none">
                <i class="fa fa-2x fa-sync-alt fa-spin"></i>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="create" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
            <div class="overlay-wrapper">
                <div class="modal-header">
                    <h4 class="modal-title">Tambah Menu</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    <form id="form" method="post" autocomplete="off">
                        <div class="form-group row mb-3">
                            <label class="col-md-3 col-xs-12 control-label" for="menu_name">Name <b class="text-danger">*</b></label>
                            <div class="col-sm-9 controls">
                                    <input type="text" class="form-control" id="menu_name" name="menu_name" placeholder="Name" value="" required/>
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <label class="col-md-3 col-xs-12 control-label" for="menu_route">Route</label>
                            <div class="col-sm-9 controls">
                                    <input type="text" class="form-control" id="menu_route" name="menu_route" value="" placeholder="Route" />
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <label class="col-md-3 col-xs-12 control-label" for="menu_icon">Icon</label>
                            <div class="col-sm-9 controls">
                                    <input type="text" class="form-control" id="menu_icon" name="menu_icon" value="" placeholder="Icon"/>
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <label class="col-md-3 col-xs-12 control-label" for="menu_description">Description</label>
                            <div class="col-sm-9 controls">
                                    <input type="text" class="form-control" id="menu_description" name="menu_description" placeholder="Description" value=""/>
                            </div>
                        </div>
                        {{ csrf_field() }}
                        <input type="hidden" name="_method"/>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" form="form" class="btn btn-{{config('configs.app_theme')}}" ><i class="fa fa-save"></i></button>
                </div>
                <div class="overlay d-none">
                    <i class="fa fa-2x fa-sync-alt fa-spin"></i>
                </div>
            </div>
		</div>
	</div>
</div>
@endsection
@push('scripts')
<script src="{{asset('adminlte/component/nestable/jquery.nestable.js')}}"></script>
<script src="{{asset('adminlte/component/validate/jquery.validate.min.js')}}"></script>
<script type="text/javascript">
$(function(){
    // $('.i-checks').iCheck({
    //     checkboxClass: 'icheckbox_square-green',
    //     radioClass: 'iradio_square-green',
    // });

    $('.select2').select2({
        allowClear: true,
    });
    $('.dd').nestable({
        maxDepth:3
    }).nestable('collapseAll');
    $("#form").validate({
        errorElement: 'div',
        errorClass: 'invalid-feedback',
        focusInvalid: false,
        highlight: function (e) {
            $(e).closest('.form-group').removeClass('has-success').addClass('was-validated has-error');
        },

        success: function (e) {
            $(e).closest('.form-group').removeClass('has-error').addClass('has-success');
            $(e).remove();
        },
        errorPlacement: function (error, element) {
            if(element.is(':file')) {
                error.insertAfter(element.parent().parent().parent());
            }else
            if(element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            }
            else
            if (element.attr('type') == 'checkbox') {
                error.insertAfter(element.parent());
            }
            else{
                error.insertAfter(element);
            }
        },
        submitHandler: function() {
            $.ajax({
                url:$('#form').attr('action'),
                method:'post',
                data: new FormData($('#form')[0]),
                processData: false,
                contentType: false,
                dataType: 'json',
                beforeSend:function(){
                    $('#create .overlay').removeClass('d-none');
                }
            }).done(function(response){
                $('#create .overlay').addClass('d-none');

                if(response.status){
                    if($('#form').attr('action') == "{{route('site.menu.store',['site'=>$site->slug])}}"){
                        $('#create').modal('hide');
                        $('.dd-list').append(`
                        <li class="dd-item" data-id="${response.data.id}">
                            <div class="item_actions">
                                 <button class="btn btn-sm btn-primary edit" data-id="${response.data.id}">
                                 <i class="las la-edit"></i>
                                </button> /
                                <button class="btn btn-sm btn-{{config('configs.app_theme')}} delete" data-id="${response.data.id}">
                                    <i class="ri-delete-bin-line"></i>
                                </button>
                            </div>
                            <div class="dd-handle">
                                <span>${response.data.menu_name}</span>
                                <small class="url">${response.data.menu_description}</small>
                            </div>
                        </li>`);
                    }
                    else{
                        $('#create').modal('hide');
                        $('li[data-id='+response.data.id+'] > .dd-handle > span').html(response.data.menu_name);
                        $('li[data-id='+response.data.id+'] > .dd-handle > small').html(response.data.menu_description);
                    }
                }
                else{
                    $.gritter.add({
                        title: 'Warning!',
                        text: response.message,
                        class_name: 'gritter-warning',
                        time: 1000,
                    });
                }
                return;

            }).fail(function(response){
                var response = response.responseJSON;
                $('#create .overlay').addClass('d-none');
                Swal.fire({ title: "Error!", text: response.message, icon: "error", confirmButtonClass: "btn btn-primary w-xs mt-2", buttonsStyling: !1 })
            })
        }
    });
    $(document).on('click','.edit',function(){
        var id = $(this).data('id');
        $.ajax({
            url:`{{url($site->slug.'/menu')}}/${id}/edit`,
            method:'GET',
            dataType:'json',
            beforeSend:function(){
                $('#box-menu .overlay').removeClass('d-none');
            },
        }).done(function(response){
            $('#box-menu .overlay').addClass('d-none');
            if (response.data.menu_type == 1) {
                var type = 'Approval'
            }else if (response.data.menu_type == 2) {
                var type = 'Non Approval'
            }else{
                var type = 'Master'
            }
            if(response.status){
                $('#create .modal-title').html('Ubah Menu');
                $('#create').modal('show');
                $('#form').trigger('reset');
                $('#form #menu_type').select2('val', '');
                $('#form .invalid-feedback').each(function () { $(this).remove(); });
                $('#form .form-group').removeClass('has-error').removeClass('has-success');
                $('#form input[name=_method]').val('PUT');
                $('#form input[name=menu_name]').val(response.data.menu_name);
                $('#form input[name=menu_route]').val(response.data.menu_route);
                $('#form input[name=menu_icon]').val(response.data.menu_icon);
                $('#form input[name=menu_description]').val(response.data.menu_description);
                $('#form').attr('action',`{{url($site->slug.'/menu/')}}/${response.data.id}`);
            }
        }).fail(function(response){
            var response = response.responseJSON;
            $('#box-menu .overlay').addClass('d-none');
            Swal.fire({ title: "Error!", text: response.message, icon: "error", confirmButtonClass: "btn btn-primary w-xs mt-2", buttonsStyling: !1 })
        })
    })
    $(document).on('click','.delete',function(){
        var id = $(this).data('id');
        Swal.fire({
            title: "Are you sure?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: !0,
            confirmButtonClass: "btn btn-primary w-xs me-2 mt-2",
            cancelButtonClass: "btn btn-danger w-xs mt-2",
            confirmButtonText: "Yes, delete it!",
            buttonsStyling: !1,
            showCloseButton: !0,
        }).then(function (t) {
            if(t.value){
                var data = {
                    _token: "{{ csrf_token() }}",
                    _method:'delete'
                };
                $.ajax({
                    url: `{{url($site->slug.'/menu')}}/${id}`,
                    dataType: 'json',
                    data:data,
                    type:'POST',
                    beforeSend:function(){
                        $('#box-menu .overlay').removeClass('d-none')
                    }
                }).done(function(response){
                    if(response.status){
                        $('#box-menu .overlay').addClass('d-none');
                        $('.dd li[data-id='+id+']').remove();
                        Swal.fire({ title: "Deleted!", text: "Your file has been deleted.", icon: "success", confirmButtonClass: "btn btn-primary w-xs mt-2", buttonsStyling: !1 })
                    }
                    else{
                        Swal.fire({ title: "Error!", text: response.message, icon: "error", confirmButtonClass: "btn btn-primary w-xs mt-2", buttonsStyling: !1 })
                    }
                }).fail(function(response){
                    var response = response.responseJSON;
                     $('#box-menu .overlay').addClass('d-none');
                    Swal.fire({ title: "Error!", text: response.message, icon: "error", confirmButtonClass: "btn btn-primary w-xs mt-2", buttonsStyling: !1 })
                })
            }
            //t.value && Swal.fire({ title: "Deleted!", text: "Your file has been deleted.", icon: "success", confirmButtonClass: "btn btn-primary w-xs mt-2", buttonsStyling: !1 });
        });
    })
    $('.create').on('click',function(){
        // $('#form')[0].reset();
        $('#form').attr('action',"{{route('site.menu.store',['site'=>$site->slug])}}");
        $('#form input[name=_method]').attr('value','POST');
        $('#form input[name=menu_name]').val('');
        $('#form input[name=menu_route]').val('');
        $('#form input[name=menu_icon]').val('');
        $('#form input[name=menu_description]').val('');
        // $('#form .i-checks').iCheck('uncheck');
        $('#form .invalid-feedback').each(function () { $(this).remove(); });
        $('#form .form-group').removeClass('has-error').removeClass('has-success');
        $('#create .modal-title').html('Tambah Menu');
        $('#create').modal('show');
    })


    $(document).on('click','.updateorder',function(){
        var id = $(this).data('id');
        Swal.fire({
            title: "Are you sure Sort this Data?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: !0,
            confirmButtonClass: "btn btn-primary w-xs me-2 mt-2",
            cancelButtonClass: "btn btn-danger w-xs mt-2",
            confirmButtonText: "Yes, Save it!",
            buttonsStyling: !1,
            showCloseButton: !0,
        }).then(function (t) {
            if(t.value){
                var data = {
                    _token: "{{ csrf_token() }}",
                    order: JSON.stringify($('.dd').nestable('serialize'))
                };
                $.ajax({
                    url: "{{url($site->slug.'/menu')}}/order",
                    dataType: 'json',
                    data:data,
                    type:'POST',
                    beforeSend:function(){
                        $('#box-menu .overlay').removeClass('d-none');
                    }
                }).done(function(response){
                    if(response.status){
                        $('#box-menu .overlay').addClass('d-none');
                        Swal.fire({ title: "Success!", text: response.message, icon: "success", confirmButtonClass: "btn btn-primary w-xs mt-2", buttonsStyling: !1 })
                    }
                    else{
                        Swal.fire({ title: "Error!", text: response.message, icon: "error", confirmButtonClass: "btn btn-primary w-xs mt-2", buttonsStyling: !1 })
                    }
                }).fail(function(response){
                    var response = response.responseJSON;
                    $('#box-menu .overlay').addClass('d-none');
                    Swal.fire({ title: "Error!", text: response.message, icon: "error", confirmButtonClass: "btn btn-primary w-xs mt-2", buttonsStyling: !1 })
                })
            }
            //t.value && Swal.fire({ title: "Deleted!", text: "Your file has been deleted.", icon: "success", confirmButtonClass: "btn btn-primary w-xs mt-2", buttonsStyling: !1 });
        });
    })
})
</script>
@endpush