@extends('layouts.main')

@section('title')
    Menu: Index
@endsection

@section('content')
    <div class="card m-3">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row">
                    <div>
                        <a href="{{ route('menu.create') }}" class="btn btn-sm btn-primary"><i
                                class="fa fa-plus"></i>&nbsp;&nbsp;Add Menu</a>
                    </div>
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>

        <section class="content">
            <div class="container-fluid">
                <div class="row m-2">
                    <table id="menuTable" class="table table-sm table-hover nowrap" width="100%">
                        <thead>
                            <tr>
                                <th>S.N</th>
                                <th>Name</th>
                                <th>Slug</th>
                                <th>Parent Menu</th>
                                <th>Display Order</th>
                                <th>Is Active</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th>S.N</th>
                                <th>Name</th>
                                <th>Slug</th>
                                <th>Parent Menu</th>
                                <th>Display Order</th>
                                <th>Is Active</th>
                                <th>Action</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </section>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('#menuTable').DataTable({
                bSortCellsTop: true,
                scrollX: true,
                fixedColumns: {
                    left: 0,
                    right: 1
                },
                fixedHeader: {
                    header: true,
                },
                ajax: {
                    url: "{{ route('get-menu-datas') }}",
                    dataSrc: 'menuDatas'
                },
                columns: [{
                        data: null,
                        render: function(data, type, row, meta) {
                            return meta.row + 1;
                        }
                    },
                    {
                        data: 'name',
                        render: function(data) {
                            return data;
                        }
                    },
                    {
                        data: 'slug',
                        render: function(data) {
                            return data;
                        }
                    },
                    {
                        data: 'parent_id',
                        render: function(data) {
                            return data;
                        }
                    },
                    {
                        data: 'display_order',
                        render: function(data) {
                            return data;
                        }
                    },
                    {
                        data: 'is_active',
                        render: function(data, type, row, meta) {
                            return '<input name="menu_is_active_toggle" class="menu-is-active-toggle" data-on="True" data-off="False" data-id="' +
                                row.id +
                                '" type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger"' +
                                (data == 1 ? 'checked' : '') + ' data-size="small" />';
                        }
                    },
                    {
                        data: null,
                        render: function(data, type) {
                            var editUrl = "{{ route('menu.edit', ':id') }}";
                            editUrl = editUrl.replace(':id', data.id);

                            var deleteUrl = "{{ route('menu.destroy', ':id') }}";
                            deleteUrl = deleteUrl.replace(':id', data.id);

                            return "<a href='" + editUrl +
                                "' class='btn btn-sm btn-success menu-edit'><i class='fa fa-edit'></i></a>" +
                                "<button href='" + deleteUrl +
                                "' class='btn btn-sm btn-danger menu-delete ml-2'><i class='fa fa-trash'></i></button>";
                        }
                    }
                ],
                drawCallback: function(settings) {
                    $('.menu-is-active-toggle').each(function() {
                        $(this).bootstrapToggle();
                    });
                },
            });
        });

        $(document).on("change", ".menu-is-active-toggle", function(e) {
            e.preventDefault();
            var isChecked = $(this).prop('checked');
            var id = $(this).attr('data-id');

            var updateUrl = "{{ route('change-menu-active-status', [':id']) }}";
            updateUrl = updateUrl.replace(':id', id);

            var csrfToken = $('meta[name="csrf-token"]').attr('content');

            $.ajax({
                type: "PUT",
                url: updateUrl,
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                data: {
                    'is_active': isChecked,
                },
                success: function(response) {
                    if (response == 1) {
                        Toast.fire({
                            icon: 'success',
                            title: 'Active Status updated successfully.',
                        });
                    }
                },
                error: function(response) {
                    Swal.fire('Something went wrong, please contact us!!');
                }
            });
        });

        $(document).on("click", ".menu-delete", function(e) {
            e.preventDefault();

            var route = $(this).attr('href');
            var csrfToken = $('meta[name="csrf-token"]').attr('content');

            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert it.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#b1b1b0',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': csrfToken
                        },
                        type: "DELETE",
                        url: route,
                        success: function(response) {
                            if (response == 1) {
                                Toast.fire({
                                    icon: 'success',
                                    title: 'Menu deleted successfully.'
                                });

                                $('#menuTable').DataTable().ajax.reload();
                            } else {
                                Toast.fire({
                                    icon: 'warning',
                                    title: 'Cannot delete the Menu! Try Again!'
                                });
                            }
                        },
                        error: function(response) {
                            console.log(response);
                            Swal.fire(
                                'Something went wrong, please contact us!!'
                            );
                        }
                    });
                }
            });
        });
    </script>
@endsection