@extends('layouts.admin-layouts.admin-master')
@section('content')
<div class="page-content fade-in-up">
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h3 class="m-0 font-weight-bold text-black d-inline">Menus</h3>
            <button type="button" class="btn btn-primary d-inline float-right" data-toggle="modal"
                data-target="#addMenuPopup"><i class="fa fa-plus-circle"></i>
                &nbsp;Add Menu
            </button>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="datatable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>English Title</th>
                            <th>Urdu Title</th>
                            <th>English Name</th>
                            <th>Urdu Name</th>
                            <th>Parent Menu</th>
                            <th>Page</th>
                            <th>Header</th>
                            <th>Footer</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($menus as $menu)
                        <tr>
                            <td>{{ $loop->index+1 }}</td>
                            <td>{{ $menu->english_title }}</td>
                            <td style="font-family: Nafees">{{ $menu->urdu_title }}</td>
                            <td>{{ $menu->english_name }}</td>
                            <td style="font-family: Nafees">{{ $menu->urdu_name }}</td>
                            <td>
                                {{\App\Models\Menu::getMenuParent($menu->parent)}}
                            </td>
                            <td>
                                @if($menu->page_id)
                                {{\App\Models\Menu::getPageName($menu->page_id)}}
                                @endif
                            </td>
                            <td>
                                @if($menu->is_header == 1)
                                    Yes
                                @endif
                            </td>
                            <td>
                                @if($menu->is_footer == 1)
                                    Yes
                                @endif
                            </td>
                            <td>
                                <span data-toggle="tooltip" title="Edit Menu" class="badge badge-warning p-2"
                                    style="font-size: 10px;" onclick="edit_menu({{$menu->id}})">
                                    <i class="fa fa-edit"></i>
                                </span>

                                <span data-toggle="tooltip" title="Delete Menu"
                                    class="badge badge-danger p-2" style="font-size: 10px;"
                                    onclick="delete_menu({{$menu->id}})">
                                    <i class="fa fa-trash"></i>
                                </span>

                            </td>

                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>
@include('models.create.menu')
@include('models.edit.menu')
@include('models.delete.menu')
@endsection

@section('js-script')
<script type="text/javascript">
    function edit_menu(id) {
        $('#editMenuPopup').modal('show');
        let edit_url = 'menu/' + id + '/edit';
        $.ajax({
            method: "GET",
            url: edit_url,
        }).done(function (res) {
            if (res.edit_menu) {
                $('#edit_id').val(res.edit_menu.id);
                $('#edit_english_title').val(res.edit_menu.english_title);
                $('#edit_urdu_title').val(res.edit_menu.urdu_title);
                $('#edit_english_name').val(res.edit_menu.english_name);
                $('#edit_urdu_name').val(res.edit_menu.urdu_name);

                $("#edit_parent").empty();
                $("#edit_parent").append("<option value='"+res.edit_menu.parent+"'>" + res.parent_name +"  (current)</option>");

                $.each(res.menus, function (i,
                    data) { // bind the dropdown list using json result   
                        if(data.id != res.edit_menu.id)  
                        {
                            $('<option>', {
                                value: data.id,
                                text: data.english_name,
                            }).html(data.english_name).appendTo("#edit_parent");

                        }         
                });

                $("#edit_page_id").empty();
                if(res.edit_menu.page_id)
                {
                    $("#edit_page_id").append("<option value='"+res.edit_menu.page_id+"'>" + res.current_page +"  (current)</option>");
                    $("#edit_page_id").append("<option value=''>No Page</option>");
                }
                else
                {
                    $("#edit_page_id").append("<option value=''>No page assigned</option>");
                }
                $.each(res.pages, function (i,
                    data) { // bind the dropdown list using json result   
                        if(data.id != res.edit_menu.page_id)  
                        {
                            $('<option>', {
                                value: data.id,
                                text: data.name,
                            }).html(data.name).appendTo("#edit_page_id");

                        }         
                });
                if(res.edit_menu.is_header == 1)
                    $("#edit_is_header").prop('checked', true);
                else
                    $("#edit_is_header").prop('checked', false);
                if(res.edit_menu.is_footer == 1)
                    $("#edit_is_footer").prop('checked', true);
                else
                    $("#edit_is_footer").prop('checked', false);


                
            } else {
                alert('Something went wrong')
            }
        });
    }
    function delete_menu(id) {
        $('#deleteMenuPopup').modal('show');
       $('#delete_id').val(id);
    }

    $(document).ready(function () {
        // Add
        $('#addMenu').click(function () {
            var form_data = $('#menuFormDataAdd');
            $.ajax({
                method: "POST",
                url: "menu",
                data: form_data.serialize(),
            }).done(function (res) {
                if (res.success) {
                    $('#addMenuPopup').modal('hide');
                    $(".print-error-msg").find("ul").html('');
                    $(".print-error-msg").css('display', 'block');
                    $('#addDepartmentPopup').modal('hide');
                    $(".print-success-msg").css('display', 'block');
                    $(".print-success-msg").text(res.success);
                    $("#menuFormDataAdd")[0].reset();
                    Swal.fire({
                        icon: 'success',
                        title: res.success,
                        showConfirmButton: false,
                        timer: 2500                    })
                    setTimeout("location.reload(true);", 2000);

                } else {
                    $(".print-error-msg").find("ul").html('');
                    $(".print-error-msg").css('display', 'block');
                    $.each(res.error, function (key, value) {
                        $(".print-error-msg").find("ul").append('<li>' + value +
                            '</li>');

                    });
                    if(res.error_custom)
                    {
                        $(".print-error-msg").find("ul").append('<li>' + res.error_custom + '</li>');
                    }
                }
            });
        })

        // update
        $('#updateMenu').click(function () {
            let id = document.getElementById('edit_id').value;
            let form_data = $('#menuFormDataEdit');
            let edit_url = 'menu/' + id;
            $.ajax({
                method: "PUT",
                url: edit_url,
                data: form_data.serialize(),
            }).done(function (res) {
                if (res.success) {
                    $('#editMenuPopup').modal('hide');
                    $(".print-success-msg").css('display', 'block');
                    $(".print-success-msg").text(res.success);
                    Swal.fire({
                        icon: 'success',
                        title: res.success,
                        showConfirmButton: false,
                        timer: 1500
                    })
                    setTimeout("location.reload(true);", 1500);
                } else {
                    $(".print-error-msg").find("ul").html('');
                    $(".print-error-msg").css('display', 'block');
                    $.each(res.error, function (key, value) {

                        $(".print-error-msg").find("ul").append('<li>' + value +
                            '</li>');

                    });
                    if(res.error_custom)
                    {
                        $(".print-error-msg").find("ul").append('<li>' + res.error_custom + '</li>');
                    }
                }
            });
        })

        // Delete
        $('#deleteMenu').click(function () {
            let form_data = $('#menuFormDataDelete');
            let id = document.getElementById('delete_id').value;
            let delete_url = 'menu/' + id;
            $.ajax({
                method: "DELETE",
                url: delete_url,
                data: form_data.serialize(),
            }).done(function (res) {
                if (res.success) {
                    $('#deleteMenuPopup').modal('hide');
                    Swal.fire({
                        icon: 'success',
                        title: res.success,
                        showConfirmButton: false,
                        timer: 2000

                    })
                    setTimeout("location.reload(true);", 2000);
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: res.error,
                        showConfirmButton: true,
                        timer: 5000

                    })
                }
            });
        });
    });

</script>
@endsection