@extends('layout.backend.containerlist')
@section('header_css')

@endsection
@section('footer_js')
    <script src="{{ asset('backend/js/jquery-ui/jquery-ui-1.10.1.custom.min.js') }}"></script>
    <!-- formValidation -->
    <script src="{{ asset('backend/js/formValidation/formValidation.min.js') }}"></script>
    <script src="{{ asset('backend/js/formValidation/bootstrap.min.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#sidebar li').removeClass('active');
            $('#modules').addClass('active');

            $('table tbody').sortable({
                update: function (event, ui) {
                    var $object = $(this);
                    var modules = $(this).sortable('serialize');
                    var count = parseInt($object.children().first().children('td:nth-child(2)').html());
                    $object.children('tr').each(function () {
                        var sn = parseInt($(this).children('td:nth-child(2)').html());
                        if (sn < count) {
                            count = sn;
                        }
                    });
                    $object.children('tr').each(function () {
                        $(this).children('td:nth-child(2)').html(count);
                        count++;
                    });
                    $.ajax({
                        type: "PUT",
                        url: "{{ route('admin.previlege.module.sortorder') }}",
                        data: {modules: modules},
                        success: function (response) {
                            swal("Thank You!", response.message, "success")
                        },
                        error: function (error) {
                            swal("OOPS!", error.message, "error")
                        }
                    });
                }
            });

            $('#moduleAddForm').formValidation({
                framework: 'bootstrap',
                excluded: ':disabled',
                icon: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    module_name: {
                        validators: {
                            notEmpty: {
                                message: 'The module name is required.'
                            }
                        }
                    },
                    slug: {
                        validators: {
                            notEmpty: {
                                message: 'The slug is required.'
                            }
                        }
                    },
                    icon: {
                        validators: {
                            notEmpty: {
                                message: 'The icon is required.'
                            }
                        }
                    },
                    parent_id: {
                        validators: {
                            notEmpty: {
                                message: 'The parent is required.'
                            }
                        }
                    },
                }
            }).on('success.form.fv', function (e) {
                // Prevent form submission
                e.preventDefault();
                var $form = $(e.target),
                    fv = $form.data('formValidation');
                $.ajax({
                    type: "POST",
                    url: $form.attr('action'),
                    data: $form.serialize(),
                    dataType: 'json',
                    success: function (response) {
                        swal('Success', response.message, 'success');
                        $('#moduleAddForm')[0].reset();
                        $('#addNewModuleModal').modal('hide');
                    },
                    error: function (e) {
                        swal('Oops...', 'Something went wrong!', 'error');
                    },
                });
            });

            $('#tablebody').on('click', '.delete-module', function (e) {
                e.preventDefault();
                $object = $(this);
                var id = $object.attr('id');
                debugger;
                swal({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then(function () {
                    $.ajax({
                        type: "POST",
                        url: "{{ url('/admin/previlege/module/') }}" + "/" + id,
                        data: {'id': id, _method: 'delete'},
                        dataType: 'json',
                        success: function (response) {
                            var nRow = $($object).parents('tr')[0];
                            var tableId = $object.parents('table').attr('id');
                            var oTable = $('#' + tableId).dataTable();
                            oTable.fnDeleteRow(nRow);
                            swal('Success', response.message, 'success');
                        },
                        error: function (e) {
                            swal('Oops...', 'Something went wrong!', 'error');
                        }
                    });
                });
            });

            $('#tablebody').on('click', '.edit-module', function (e) {
                e.preventDefault();
                $object = $(this);
                var id = $object.attr('id');
                $.ajax({
                    type: "GET",
                    url: "{{ url('/admin/previlege/module/') }}" + "/" + id,
                    dataType: 'json',
                    success: function (response) {
                        debugger;
                        $('#editModuleModal').modal().show();
                        $(".module_id").val(response.module.id);
                        $(".module_name").val(response.module.module_name);
                        $(".slug").val(response.module.slug);
                        $(".icon").val(response.module.icon);
                        $(".parent_id").val(response.module.parent_id);
                        $(".is_active").val(response.module.is_active);
                    },
                    error: function (e) {
                        swal('Oops...', 'Something went wrong!', 'error');
                    }
                });
            });

            $('#moduleEditForm').formValidation({
                framework: 'bootstrap',
                excluded: ':disabled',
                icon: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    module_name: {
                        validators: {
                            notEmpty: {
                                message: 'The module name is required.'
                            }
                        }
                    },
                    slug: {
                        validators: {
                            notEmpty: {
                                message: 'The slug is required.'
                            }
                        }
                    },
                    icon: {
                        validators: {
                            notEmpty: {
                                message: 'The icon is required.'
                            }
                        }
                    },
                    parent_id: {
                        validators: {
                            notEmpty: {
                                message: 'The parent is required.'
                            }
                        }
                    },
                }
            }).on('success.form.fv', function (e) {
                // Prevent form submission
                e.preventDefault();
                var $form = $(e.target),
                    fv = $form.data('formValidation');
                $.ajax({
                    type: "PUT",
                    url: $form.attr('action'),
                    data: $form.serialize(),
                    dataType: 'json',
                    success: function (response) {
                        swal('Success', response.message, 'success');
                        $('#moduleEditForm')[0].reset();
                        var htmlToReplace = '<td>' + response.module.module_name + '</td>';
                        if (response.module.parent === undefined || response.module.parent === null) {
                            htmlToReplace += '<td></td>';
                        } else {
                            htmlToReplace += '<td>' + response.module.parent.module_name + '</td>';
                        }
                        if (response.module.is_active == 1) {
                            htmlToReplace += '<td class="center><a href="javascript:;" class="change-status" title="Deactivate" id="' + response.module.id + '"><i class="fa fa-check-circle-o"></i></a></td>';
                        } else {
                            htmlToReplace += '<td class="center><a href="javascript:;" class="change-status" title="Activate" id="' + response.module.id + '"><i class="fa fa-ban"></i></a></td></td>';
                        }
                        htmlToReplace += '<td>' +
                            '<a class="edit-module" href="javascript:;" id="' + response.module.id + '" title="Edit Module"><i class="fa fa-edit"></i></a>&nbsp;' +
                            '<a class="delete-module" href="javascript:;" id="' + response.module.id + '" title="Delete Module"><i class="fa fa-trash-o"></i></a>' +
                            '</td>';
                        $('#tablebody').find('#row_' + response.module.id).html(htmlToReplace);
                        $('#editModuleModal').modal('hide');
                    },
                    error: function (e) {
                        swal('Oops...', 'Something went wrong!', 'error');
                    },
                });
            });

            $('#tablebody').on('click', '.change-status', function (e) {
                e.preventDefault();
                $object = $(this);
                var id = $object.attr('id');
                swal({
                    title: 'Are you sure?',
                    text: "You are going to change the status!",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, change it!'
                }).then(function () {
                    $.ajax({
                        type: "PUT",
                        url: "{{ url('/admin/previlege/module/change/status/') }}" + "/" + id,
                        dataType: 'json',
                        success: function (response) {
                            swal('Success', response.message, 'success');
                            if (response.module.is_active == 1) {
                                $($object).children().removeClass('fa-ban');
                                $($object).children().addClass('fa-check-square-o');
                                $($object).attr('title', 'Deactivate');
                            } else {
                                $($object).children().removeClass('fa-check-square-o');
                                $($object).children().addClass('fa-ban');
                                $($object).attr('title', 'Activate');
                            }
                        },
                        error: function (e) {
                            swal('Oops...', 'Something went wrong!', 'error');
                        }
                    });
                });
            });

            $('#addNewModuleModal').on('hidden.bs.modal', function () {
                $('#moduleAddForm').formValidation('resetForm', true);
            });
            $('#editModuleModal').on('hidden.bs.modal', function () {
                $('#moduleEditForm').formValidation('resetForm', true);
            });

        });
    </script>
@endsection
@section('dynamicdata')

    <div class="row">
        <div class="col-sm-12">
            <section class="panel">
                <header class="panel-heading">
                    Modules
                </header>
                <div class="panel-body">
                    <div class="adv-table editable-table ">
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary btn-lg" data-toggle="modal"
                                    data-target="#addNewModuleModal">
                                Add New <i class="fa fa-plus"></i>
                            </button>
                        </div>
                        <table class="display table table-bordered table-striped" id="module-table">
                            <thead>
                            <tr>
                                <th></th>
                                <th>
                                    S N
                                </th>
                                <th>
                                    Module Name
                                </th>
                                <th>
                                    Parent
                                </th>
                                <th>
                                    Status
                                </th>
                                <th>
                                    Options
                                </th>
                            </tr>
                            </thead>
                            <tbody id="tablebody">
                            @foreach($modules as $index=>$module)
                                <tr class="gradeX" id="module_{{ $module->id }}">
                                    <td><i class="fa fa-arrows"></i></td>
                                    <td>
                                        {{ $index+1 }}
                                    </td>
                                    <td class="module_name">
                                        {{ $module->module_name }}
                                    </td>
                                    <td class="parent">
                                        @if($module->parent)
                                            {{ $module->parent->module_name }}
                                        @endif
                                    </td>
                                    <td class="center is_active">
                                        @if($module->is_active == 1)
                                            <a href="javascript:;" class="change-status" title="Deactivate"
                                               id="{{ $module->id }}"><i class="fa fa-check-square-o"></i></a>
                                        @else
                                            <a href="javascript:;" class="change-status" title="Activate"
                                               id="{{ $module->id }}"><i class="fa fa-ban"></i></a>
                                        @endif
                                    </td>
                                    <td>
                                        <a class="edit-module" href="javascript:;" id="{{ $module->id }}"
                                           title="Edit Module"><i class="fa fa-edit"></i></a>&nbsp;
                                        <a class="delete-module" href="javascript:;" id="{{ $module->id }}"
                                           title="Delete Module"><i class="fa fa-trash-o"></i></a>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                            <tfoot>
                            <tr>
                                <th>
                                </th>
                                <th>
                                    S N
                                </th>
                                <th>
                                    Module Name
                                </th>
                                <th>
                                    Parent
                                </th>
                                <th>
                                    Status
                                </th>
                                <th>
                                    Options
                                </th>
                            </tr>
                            </tfoot>
                        </table>

                    </div>
                </div>
            </section>
        </div>
    </div>

    <!-- Modal Start -->
    <div class="modal fade" id="addNewModuleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">New Module</h4>
                </div>
                <form role="form" id="moduleAddForm" action="{{ route('admin.previlege.module.store') }}">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="moduleName">Module Name</label>
                            <input type="text" name="module_name" class="form-control" id="exampleInputEmail1"
                                   placeholder="Enter module name"/>
                        </div>
                        <div class="form-group">
                            <label for="moduleSlug">Module slug</label>
                            <input type="text" name="slug" class="form-control" id="exampleInputEmail1"
                                   placeholder="Enter module slug"/>
                        </div>
                        <div class="form-group">
                            <label for="parent">Icon</label>
                            <input type="text" name="icon" class="form-control" placeholder="Icon"/>
                        </div>
                        <div class="form-group">
                            <label for="parent">Select Parent</label>
                            <select class="form-control m-bot15" name="parent_id">
                                <option value="0">Parent Itself</option>
                                @foreach($list_modules as $key=>$module)
                                    <option value="{{ $key }}">{{ $module }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="status">Status</label>
                            <select class="form-control m-bot15" name="is_active">
                                <option value="1">Active</option>
                                <option value="0">Deactive</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- Modal End -->

    <!-- Modal Start -->
    <div class="modal fade" id="editModuleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Edit Module</h4>
                </div>
                <form role="form" id="moduleEditForm" action="{{ route('admin.previlege.module.update') }}">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="moduleName">Module Name</label>
                            <input type="text" name="module_name" class="form-control module_name"
                                   id="exampleInputEmail1" placeholder="Enter module name"/>
                        </div>
                        <div class="form-group">
                            <label for="moduleSlug">Module slug</label>
                            <input type="text" name="slug" class="form-control slug" id="exampleInputEmail1"
                                   placeholder="Enter module slug"/>
                        </div>
                        <div class="form-group">
                            <label for="parent">Icon</label>
                            <input type="text" name="icon" class="form-control icon" placeholder="Icon"/>
                        </div>
                        <div class="form-group">
                            <label for="parent">Select Parent</label>
                            <select class="form-control m-bot15 parent_id" name="parent_id">
                                <option value="0">Parent Itself</option>
                                @foreach($list_modules as $key=>$module)
                                    <option value="{{ $key }}">{{ $module }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="status">Status</label>
                            <select class="form-control m-bot15 is_active" name="is_active">
                                <option value="1">Active</option>
                                <option value="0">Deactive</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="hidden" name="id" class="form-control module_id"/>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@stop