@extends('layout.default', ['appTopMenu' => true])
@section('title', 'Menu Master')
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> -->
<!-- <link href="/assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" rel="stylesheet" />
<script src="/assets/plugins/datatables.net/js/jquery.dataTables.min.js" defer></script>
<script src="/assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js" defer></script>
<script src="/assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js" defer></script> -->

@push('scripts')
<link href="/assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.css" rel="stylesheet" />
<script src="/assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.js" defer></script>

<!-- <script src="/assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script> -->



<!-- required files -->
<link href="/assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-colreorder-bs5/css/colReorder.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-keytable-bs5/css/keyTable.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-rowreorder-bs5/css/rowReorder.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-select-bs5/css/select.bootstrap5.min.css" rel="stylesheet" />

<script src="/assets/plugins/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
<script src="/assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="/assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>
<script src="/assets/plugins/datatables.net-colreorder/js/dataTables.colReorder.min.js"></script>
<script src="/assets/plugins/datatables.net-colreorder-bs5/js/colReorder.bootstrap5.min.js"></script>
<script src="/assets/plugins/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
<script src="/assets/plugins/datatables.net-keytable-bs5/js/keyTable.bootstrap5.min.js"></script>
<script src="/assets/plugins/datatables.net-rowreorder/js/dataTables.rowReorder.min.js"></script>
<script src="/assets/plugins/datatables.net-rowreorder-bs5/js/rowReorder.bootstrap5.min.js"></script>
<script src="/assets/plugins/datatables.net-select/js/dataTables.select.min.js"></script>
<script src="/assets/plugins/datatables.net-select-bs5/js/select.bootstrap5.min.js"></script>
<script src="/assets/plugins/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="/assets/plugins/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js"></script>
<script src="/assets/plugins/datatables.net-buttons/js/buttons.colVis.min.js"></script>
<script src="/assets/plugins/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="/assets/plugins/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="/assets/plugins/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="/assets/plugins/pdfmake/build/pdfmake.min.js"></script>
<script src="/assets/plugins/pdfmake/build/vfs_fonts.js"></script>
<script src="/assets/plugins/jszip/dist/jszip.min.js"></script>

<script src="/assets/plugins/sweetalert/dist/sweetalert.min.js"></script>
@endpush

@push('head')




<style>
/*Custom CSS*/
span {
    transition: color 0.5s ease-in;
}

label:focus-within span {
    color: blue;
}

input {
    display: block;
    width: 100%;
}

label,
select {

    display: block;
    width: 100%;
    max-width: 100%;
}

/*Profile Pic Start*/
.picture-container {
    position: relative;
    cursor: pointer;
    text-align: center;
}

.picture {
    width: 106px;
    height: 106px;
    background-color: #999999;
    border: 4px solid #CCCCCC;
    color: #FFFFFF;
    border-radius: 50%;
    margin: 0px auto;
    overflow: hidden;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
}

.picture:hover {
    border-color: #2ca8ff;
}

.picture input[type="file"] {
    cursor: pointer;
    display: block;
    height: 100%;
    left: 0;
    opacity: 0 !important;
    position: absolute;
    top: 0;
    width: 100%;
}

.picture-src {
    width: 100%;

}

/*Profile Pic End*/
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.select2:focus-within {
    border-color: #6265e4 !important;
    box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
}
</style>
@endpush
@section('content')
<script>
@if(Session::has('success'))

swal("{{Session::get('success')}}").then(function() {
    //window.location = "/project/" + loc;
});
@endif
</script>
<section>
    <div class="row">
        <div class="col-xl-12">
            <div class="col-xl-12 ui-sortable">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a href="#major_tab" data-bs-toggle="tab" class="nav-link active" aria-selected="true"
                            role="tab">
                            <span class="d-sm-none">Menu Level 1</span>
                            <span class="d-sm-block d-none">Menu Level 1</span>
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a href="#minor_tab" data-bs-toggle="tab" class="nav-link" aria-selected="false" role="tab"
                            tabindex="-1">
                            <span class="d-sm-none">Menu Level 2</span>
                            <span class="d-sm-block d-none">Menu Level 2</span>
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a href="#sub_minor1_tab" data-bs-toggle="tab" class="nav-link" aria-selected="false" role="tab"
                            tabindex="-1">
                            <span class="d-sm-none">Menu Level 3</span>
                            <span class="d-sm-block d-none">Menu Level 3</span>
                        </a>
                    </li>
                </ul>
                <div class="tab-content panel rounded-0 p-3 m-0">

                    <!-- Menu Level 1 -->
                    <div class="tab-pane fade active show" id="major_tab" role="tabpanel">
                    <div class="card mt-2" data-sortable-id="form-stuff-3">

                       <!-- <div class="panel" data-sortable-id="form-stuff-3">
                             <div class="panel-heading card-bg-color">
                                <h4 class="panel-title">Major Head </h4>
                                <div class="panel-heading-btn">
                                    <a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
                                    <a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
                                    <a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
                                    <a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
                                </div>
                            </div> 
                            <div class="panel-body"> --> 
                            <div class="card-body">
                                <div class="row">
                                    <div class="card border-0">
                                        <form>
                                            @csrf
                                            <div class="row">
                                                <div class="col-sm-2 mb-1">
                                                    <label class="control-label" for="menu_name_1">Menu Name</label> 
                                                    <input id="menu_name_1" value="" name="menu_name_1" type="text" class="form-control" />
                                                    <small id="menu_name_1_e" class="help-block text-danger"></small>
                                                    <input type="hidden" id="menu_1_id" name="menu_1_id" />
                                                </div>
                                                <div class="col-sm-2 mb-1">
                                                    <label class="control-label" for="menu_link_1">Menu Link</label> 
                                                    <input id="menu_link_1" value="" name="menu_link_1" type="text" class="form-control" />
                                                </div>
                                                <div class="col-sm-2 mb-1">
                                                    <label class="control-label" for="menu_sort_1">Select Sorting Order</label>
                                                    <select id="menu_sort_1" name="menu_sort_1" class="form-control form-select">
                                                        <option value=''>Select Order</option>
                                                        @for($i=1; $i<=50; $i++)
                                                            <option selected value="{{ $i }}">{{ $i }}</option>
                                                        @endfor  
                                                    </select>
                                                    <small id="menu_sort_1_e" class="help-block text-danger"></small>
                                                </div>
                                                <div class="col-sm-1 mb-1">
                                                    <label class="control-label" for="btn_menu_1"></label>
                                                    <input id="btn_menu_1" onclick="save_menu_level_1()" name="btn_menu_1" type="button" class="btn btn-primary form-control" value="Save" />
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card mt-2" data-sortable-id="form-stuff-3">
                        <div class="card-header fw-bold small">Menu Level 1</div>

                       <!-- <div class="panel" data-sortable-id="form-stuff-3">
                             <div class="panel-heading card-bg-color">
                                <h4 class="panel-title">Post Details</h4>
                                <div class="panel-heading-btn">
                                    <a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
                                    <a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
                                    <a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
                                    <a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
                                </div>
                            </div>
                            <div class="panel-body menu_1_tabledata lg-12"> -->
                            <div class="card-body menu_1_tabledata lg-12">

                            </div>
                        </div>
                    </div>
                    <!-- Menu Level 1 -->

                    <!-- Menu Level 2 -->
                    <div class="tab-pane fade" id="minor_tab" role="tabpanel">
                    <div class="card mt-2" data-sortable-id="form-stuff-3">
                       

                       <!-- <div class="panel" data-sortable-id="form-stuff-3">
                             <div class="panel-heading card-bg-color">
                                <h4 class="panel-title">Major Head </h4>
                                <div class="panel-heading-btn">
                                    <a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
                                    <a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
                                    <a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
                                    <a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
                                </div>
                            </div>  
                            <div class="panel-body">-->
                            <div class="card-body">
                                <div class="row">
                                    <div class="card border-0">
                                        <form>
                                            @csrf
                                            <div class="row">
                                                <div class="col-sm-2 mb-1">
                                                    <label class="control-label" for="master_menu_2">Select Main Menu</label>
                                                    <select id="master_menu_2" name="master_menu_2" class="form-control form-select" onchange="loadtable(2)">
                                                        <option value=''>Select Main Menu</option>
                                                        @foreach($allMenuLevel1 as $mh)
                                                            <option value="{{ $mh->id }}">{{ $mh->menu_name }}</option>
                                                        @endforeach   
                                                    </select>
                                                    <small id="master_menu_2_e" class="help-block text-danger"></small>
                                                </div>
                                                <div class="col-sm-2">
                                                    <label class="control-label" for="menu_name_2">Sub Menu Name</label> 
                                                    <input id="menu_name_2" value="" name="menu_name_2" type="text" class="form-control" />
                                                    <small id="menu_name_2_e" class="help-block text-danger"></small>
                                                    <input type="hidden" id="menu_2_id" name="menu_2_id" />
                                                </div>
                                                <div class="col-sm-2 mb-1">
                                                    <label class="control-label" for="menu_link_2">Menu Link</label> 
                                                    <input id="menu_link_2" value="" name="menu_link_2" type="text" class="form-control" />
                                                </div>
                                                <div class="col-sm-2 mb-1">
                                                    <label class="control-label" for="menu_sort_2">Select Sorting Order</label>
                                                    <select id="menu_sort_2" name="menu_sort_2" class="form-control form-select">
                                                        <option value=''>Select Order</option>
                                                        @for($i=1; $i<=50; $i++)
                                                            <option value="{{ $i }}">{{ $i }}</option>
                                                        @endfor  
                                                    </select>
                                                    <small id="menu_sort_2_e" class="help-block text-danger"></small>
                                                </div> 
                                                <div class="col-sm-1 mb-1">
                                                    <label class="control-label" for="ddl_user_type"></label>
                                                    <input id="btn_menu_2" onclick="save_menu_level_2()" name="btn_menu_1" type="button" class="btn btn-primary form-control" value="Save" />
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card mt-2" data-sortable-id="form-stuff-3">
                        <div class="card-header fw-bold small">Menu Level 2</div>
               

                      <!--  <div class="panel" data-sortable-id="form-stuff-3">
                             <div class="panel-heading card-bg-color">
                                <h4 class="panel-title">Post Details</h4>
                                <div class="panel-heading-btn">
                                    <a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
                                    <a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
                                    <a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
                                    <a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
                                </div>
                            </div> 

                            <div class="panel-body menu_2_tabledata">-->
 <div class="card-body  menu_2_tabledata">
                            </div>
                        </div>
                    </div>
                    <!-- Menu Level 2 -->

                    <!-- Menu Level 3 -->
                    <div class="tab-pane fade" id="sub_minor1_tab" role="tabpanel">
                    <div class="card mt-2" data-sortable-id="form-stuff-3">
                      

                     <!--   <div class="panel" data-sortable-id="form-stuff-3">
                             <div class="panel-heading card-bg-color">
                                <h4 class="panel-title">Major Head </h4>
                                <div class="panel-heading-btn">
                                    <a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
                                    <a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
                                    <a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
                                    <a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
                                </div>
                            </div>  
                            <div class="panel-body">-->
                            <div class="card-body">
                                <div class="row">
                                    <div class="card border-0">
                                        <form>
                                            @csrf
                                            <div class="row">
                                                <div class="col-sm-2 mb-1">
                                                    <label class="control-label" for="master_menu_3">Select Main Menu</label>
                                                    <select id="master_menu_3" name="master_menu_3" class="form-control form-select" onchange="get_sub_menu(3)">
                                                        <option value=''>Select</option>
                                                        @foreach($allMenuLevel1 as $mh)
                                                            <option value="{{ $mh->id }}">{{ $mh->menu_name }}</option>
                                                        @endforeach   
                                                    </select>
                                                    <small id="master_menu_3_e" class="help-block text-danger"></small>
                                                </div>
                                                <div class="col-sm-2 mb-1">
                                                    <label class="control-label" for="master_sub_menu_3">Select Sub Menu</label>
                                                    <select id="master_sub_menu_3" name="master_sub_menu_3" class="form-control form-select" onchange="loadtable(3)">
                                                        <option value=''>Select</option>
                                                    </select>
                                                    <small id="master_sub_menu_3_e" class="help-block text-danger"></small>
                                                </div>
                                                <div class="col-sm-2 mb-1">
                                                    <label class="control-label" for="menu_name_3">Menu Name</label> 
                                                    <input id="menu_name_3" value="" name="menu_name_3" type="text" class="form-control" />
                                                    <small id="menu_name_3_e" class="help-block text-danger"></small>
                                                    <input type="hidden" id="menu_3_id" name="menu_3_id" />
                                                </div>
                                                <div class="col-sm-2 mb-1">
                                                    <label class="control-label" for="menu_link_3">Menu Link</label> 
                                                    <input id="menu_link_3" value="" name="menu_link_3" type="text" class="form-control" />
                                                </div>
                                                <div class="col-sm-2 mb-1">
                                                    <label class="control-label" for="menu_sort_3">Select Sorting Order</label>
                                                    <select id="menu_sort_3" name="menu_sort_3" class="form-control form-select">
                                                        <option value=''>Select Order</option>
                                                        @for($i=1; $i<=50; $i++)
                                                            <option value="{{ $i }}">{{ $i }}</option>
                                                        @endfor  
                                                    </select>
                                                    <small id="menu_sort_3_e" class="help-block text-danger"></small>
                                                </div> 
                                                <div class="col-sm-1 mb-1">
                                                    <label class="control-label" for="ddl_user_type"></label>
                                                    <input id="btn_menu_3" onclick="save_menu_level_3()" name="btn_menu_3" type="button" class="btn btn-primary form-control" value="Save" />
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card mt-2" data-sortable-id="form-stuff-3">
                        <div class="card-header fw-bold small">Menu Level 3</div>

                        <!-- <div class="panel" data-sortable-id="form-stuff-3">
                            <div class="panel-heading card-bg-color">
                                <h4 class="panel-title">Post Details</h4>
                                <div class="panel-heading-btn">
                                    <a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
                                    <a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
                                    <a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
                                    <a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
                                </div>
                            </div> 
                            <div class="panel-body  menu_3_tabledata">-->
                            <div class="card-body menu_3_tabledata">

                            </div>
                        </div>
                    </div>
                    <!-- Menu Level 3 -->
                </div>
            </div>
        </div>
    </div>
</section>

@endsection
@push('scripts')
<script>
var options = {
    dom: '<"dataTables_wrapper dt-bootstrap"<"row"<"col-xl-10 d-block d-sm-flex d-xl-block justify-content-center"<"d-block d-lg-inline-flex me-0 me-md-3"l><"d-block d-lg-inline-flex"B>><"col-xl-2 d-flex d-xl-block justify-content-center"fr>>t<"row"<"col-md-5"i><"col-md-7"p>>>',
    buttons: [{
            extend: 'copy',
            className: 'btn-sm'
        },
        {
            extend: 'csv',
            className: 'btn-sm'
        },
        {
            extend: 'excel',
            className: 'btn-sm'
        },
        {
            extend: 'pdf',
            className: 'btn-sm'
        },
        {
            extend: 'print',
            className: 'btn-sm'
        }
    ],
    responsive: true,
    colReorder: true,
    keys: true,
    rowReorder: true,
    select: true
};

if ($(window).width() <= 767) {
    options.rowReorder = false;
    options.colReorder = false;
}


loadtable(1);

$(document).ready(function() {
    

    /* For edit the record */
    $(document).on("click", ".pr-1", function() {

        var id = this.id;
        var ids = id.split("-");
        var act = ids[0];
        id = ids[1];
        $.ajax({
            url: "edit_menu_1",
            type: 'GET',
            cache: false,
            async: false,
            beforeSend: function() {

            },
            data: {
                id: id, act: act
            },
            success: function(data, status) {
                var result = (data[0]);
                var columns = String(Object.keys(result[0])).split(',');
                var i = 0;
                if(act == 1){
                    $.each(columns, function(k, v) {

                        $.each(result, function(k, v) {
                            $("#menu_name_1").val(eval("v." + columns[1]));
                            $("#menu_link_1").val(eval("v." + columns[2]));
                            $("#menu_sort_1").val(eval("v." + columns[3]));
                            $("#menu_1_id").val(id);
                            $("#btn_menu_1").val("Update");
                        });
                    });
                }else if(act == 2){
                    $.each(columns, function(k, v) {

                        $.each(result, function(k, v) {
                            $("#master_menu_2").val(eval("v." + columns[3]));
                            $("#menu_name_2").val(eval("v." + columns[1]));
                            $("#menu_link_2").val(eval("v." + columns[2]));
                            $("#menu_sort_2").val(eval("v." + columns[4]));
                            $("#menu_2_id").val(id);
                            $("#btn_menu_2").val("Update");
                        });
                    });
                }else if(act == 3){
                    $.each(columns, function(k, v) {

                        $.each(result, function(k, v) {
                            $("#master_menu_3").val(eval("v." + columns[3]));
                            $("#master_sub_menu_3").val(eval("v." + columns[4]));
                            $("#menu_name_3").val(eval("v." + columns[1]));
                            $("#menu_link_3").val(eval("v." + columns[2]));
                            $("#menu_sort_3").val(eval("v." + columns[5]));
                            $("#menu_3_id").val(id);
                            $("#btn_menu_3").val("Update");
                        });
                    });
                }else if(act == 4){
                    $.each(columns, function(k, v) {

                        $.each(result, function(k, v) {
                            $("#major_head_4").val(eval("v." + columns[1]));
                            $("#minor_head_4").val(eval("v." + columns[2]));
                            getSubMinorHead();
                            $("#sub_minor1_head_4").val(eval("v." + columns[3]));
                            $("#sub_minor2_head_4").val(eval("v." + columns[4]));
                            $("#subminor2_id").val(id);
                            $("#btn_subminor2_head").val("Update");
                        });
                    });
                }       
            },
            error: function(xhr) {
                alert("Error:" + xhr.status + ' ' + xhr.statusText);
            }
        });
    });

});

/* ------------ Save Menu Level 1 ----------*/

function save_menu_level_1(){
    var menu_name_1 = $("#menu_name_1").val();
    var menu_link_1 = $("#menu_link_1").val();
    var menu_sort_1 = $("#menu_sort_1").val();
    var btn_menu_1 = $("#btn_menu_1").val();
    var id = $("#menu_1_id").val();   
    $('#menu_name_1_e').text(''); 
    $('#menu_sort_1_e').text(''); 
    $.ajax({
            url: "/add_menu_1",
            type: 'POST',
            cache: false,
            async: false,
            data: {menu_name_1: menu_name_1, menu_link_1: menu_link_1, menu_sort_1: menu_sort_1, id: id, btn_menu_1: btn_menu_1},
            beforeSend:function(){
                $('#dv_showresult').html("<div class='text-center'><div class='spinner-border'></div></div>");
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function (data, status)
            {
                if(data.message=='Validate')
                {
                    var json_error=data.errors;
                    $('#menu_name_1_e').text(json_error.menu_name_1);
                    $('#menu_sort_1_e').text(json_error.menu_sort_1);
                }
                else 
                {
                    alert(data.trim());
                    get_sorting_order(1,0,0);
                    $("#menu_name_1").val('');
                    $("#menu_link_1").val(''); 
                    $("#btn_menu_1").val("Save");
                }    
                //loadtable(1);
            },
            error: function (xhr) {
                alert("Error:" + xhr.status + ' ' + xhr.statusText);
            }
        });
    loadtable(1);
}

/* ------------ Save Menu Level 1 ----------*/   


/* ------------ Save Menu Level 2 ----------*/

function save_menu_level_2(){
    var master_menu_2 = $("#master_menu_2").val();
    var menu_name_2 = $("#menu_name_2").val();
    var menu_link_2 = $("#menu_link_2").val();
    var menu_sort_2 = $("#menu_sort_2").val();
    var btn_menu_2 = $("#btn_menu_2").val();
    var id = $("#menu_2_id").val();    
    $('#master_menu_2_e').text("");
    $('#menu_name_2_e').text("");
    $('#menu_sort_2_e').text("");
    $.ajax({
            url: "/add_menu_2",
            type: 'POST',
            cache: false,
            async: false,
            data: {master_menu_2: master_menu_2, menu_name_2: menu_name_2, menu_link_2: menu_link_2, menu_sort_2: menu_sort_2, btn_menu_2: btn_menu_2, id: id},
            beforeSend:function(){
                $('#dv_showresult').html("<div class='text-center'><div class='spinner-border'></div></div>");
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function (data, status)
            {
                if(data.message=='Validate')
                {
                    var json_error=data.errors;
                    $('#master_menu_2_e').text(json_error.master_menu_2);
                    $('#menu_name_2_e').text(json_error.menu_name_2);
                    $('#menu_sort_2_e').text(json_error.menu_sort_2);
                }
                else 
                {
                    alert(data.trim());
                    $("#menu_name_2").val('');
                    $("#menu_link_2").val('');
                    $("#btn_menu_2").val("Save");
                }
                //loadtable(1);
            },
            error: function (xhr) {
                alert("Error:" + xhr.status + ' ' + xhr.statusText);
            }
        });
    loadtable(2);
}

/* ------------ Save Menu Level 2 ----------*/ 

/* ------------ Save Menu Level 3 ----------*/

function save_menu_level_3(){
    var master_menu_3 = $("#master_menu_3").val();
    var master_sub_menu_3 = $("#master_sub_menu_3").val();
    var menu_name_3 = $("#menu_name_3").val();
    var menu_link_3 = $("#menu_link_3").val();
    var menu_sort_3 = $("#menu_sort_3").val();

    var btn_menu_3 = $("#btn_menu_3").val();
    var id = $("#menu_3_id").val();    
    $('#master_menu_3_e').text("");
    $('#master_sub_menu_3_e').text("");
    $('#menu_name_3_e').text("");
    $('#menu_sort_3_e').text("");
    $.ajax({
            url: "/add_menu_3",
            type: 'POST',
            cache: false,
            async: false,
            data: {master_menu_3: master_menu_3, master_sub_menu_3: master_sub_menu_3, menu_name_3: menu_name_3, menu_link_3: menu_link_3, menu_sort_3:menu_sort_3, btn_menu_3: btn_menu_3, id: id},
            beforeSend:function(){
                $('#dv_showresult').html("<div class='text-center'><div class='spinner-border'></div></div>");
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function (data, status)
            {
                if(data.message=='Validate')
                {
                    var json_error=data.errors;
                    $('#master_menu_3_e').text(json_error.master_menu_3);
                    $('#master_sub_menu_3_e').text(json_error.master_sub_menu_3);
                    $('#menu_name_3_e').text(json_error.menu_name_3);
                    $('#menu_sort_3_e').text(json_error.menu_sort_3);
                }
                else 
                {
                    alert(data.trim());
                    $("#menu_name_3").val('');
                    $("#menu_link_3").val('');
                    $("#btn_menu_3").val("Save");
                }    
                //loadtable(1);
            },
            error: function (xhr) {
                alert("Error:" + xhr.status + ' ' + xhr.statusText);
            }
        });
    loadtable(3);
}

/* ------------ Save Menu Level 3 ----------*/  

 
function loadtable(flag) {
     master_menu_2 = "";
     master_menu_3 = "";
     master_sub_menu_3 = "";
    // major_head_4 = "";
    // minor_head_4 = "";
    // sub_minor1_head_4 = "";
    if(flag == 2){
        master_menu_2 = $("#master_menu_2").val();
    }else if(flag == 3){
        master_menu_3 = $("#master_menu_3").val();
        master_sub_menu_3 = $("#master_sub_menu_3").val();
    }
    $.ajax({
        url: "getDataTableMenu",
        type: 'GET',
        beforeSend: function() {

        },
        data: {
           // flag: flag, major_head_2: major_head_2, major_head_3: major_head_3, minor_head_3: minor_head_3, major_head_4: major_head_4, minor_head_4: minor_head_4, sub_minor1_head_4: sub_minor1_head_4
           flag: flag, master_menu_2: master_menu_2, master_menu_3: master_menu_3, master_sub_menu_3: master_sub_menu_3
        },
        success: function(data, status) {
            if(flag == 1){
                $(".menu_1_tabledata").html("");
                $(".menu_1_tabledata").html(data);
                $('#data-table-combine').DataTable(options);
            }else if(flag == 2){
                get_sorting_order(flag, master_menu_2, 0);
                $(".menu_2_tabledata").html("");
                $(".menu_2_tabledata").html(data);
                $('#data-table-combine1').DataTable(options);
            }else if(flag == 3){
                get_sorting_order(flag, master_menu_3, master_sub_menu_3);
                $(".menu_3_tabledata").html("");
                $(".menu_3_tabledata").html(data);
                $('#data-table-combine2').DataTable(options);
            }
        },
        error: function(xhr) {
            alert("Error:" + xhr.status + ' ' + xhr.statusText);
        }
    });
}

/* Get Minor Head */

function get_sub_menu(flg){
    var master_menu_3 = $("#master_menu_"+flg).val();
    $.ajax({
        url: "get_sub_menu",
        type: 'GET',
        cache: false,
        async: false,
        beforeSend: function() {

        },
        data: {
            master_menu_3: master_menu_3
        },
        success: function (data, status){
            var model = $('#master_sub_menu_3');
            model.empty();
            var html = "<option value=''>Select Sub Menu</option>";
            $.each(data, function (index, element) {
                html += "<option value='" + element.id + "'>" + element.menu_name + "</option>";
            });
            model.append(html);
            loadtable(flg);
        },
        error: function(xhr) {
            alert("Error:" + xhr.status + ' ' + xhr.statusText);
        }
    });    
}

function getSubMinorHead(){
    var minor_head_4 = $("#minor_head_4").val();
    $.ajax({
        url: "getSubMinorHead",
        type: 'GET',
        cache: false,
        async: false,
        beforeSend: function() {

        },
        data: {
            minor_head_4: minor_head_4
        },
        success: function (data, status){
            var model1 = $('#sub_minor1_head_4');
            model1.empty();
            var html1 = "<option value=''>Select Minor Head</option>";
            $.each(data, function (index, element) {
                html1 += "<option value='" + element.id + "'>" + element.subminor1_head_desc + "</option>";
            });
            model1.append(html1);
           // loadtable(4);
        },
        error: function(xhr) {
            alert("Error:" + xhr.status + ' ' + xhr.statusText);
        }
    });    
}

function get_sorting_order(flag, id, id1){
    $.ajax({
        url: "get_sorting_order",
        type: 'GET',
        cache: false,
        async: false,
        beforeSend: function() {

        },
        data: {
            flag: flag, id:id, id1:id1
        },
        success: function (data, status){
                $("#menu_sort_"+flag).val(data.trim());
        },
        error: function(xhr) {
            alert("Error:" + xhr.status + ' ' + xhr.statusText);
        }
    });
}

function confirmSubmit(flag) {
    ele = "form_menu_"+flag;
    var confirmed = confirm("Are you sure you want to delete the record?");
    if (confirmed) {
        document.getElementById(ele).submit();
    }
    return confirmed;
}
</script>
@endpush