@extends(config('admin_theme.layout', 'admin.layout.master'))
@section('title')
{{ $current_route->{'name_' . trans('admin.lang')} }}
@stop
@section('page-breadcrumb')
@include(config('admin_theme.view_prefix', 'admin').'.layout.breadcrumb_view')
@stop
@section('page-content')
@can('admin.roles.add')
<a href="{{ route('roles.add') }}" class="btn btn-default btn-primary mb-3">
    <i class="fa fa-plus"></i> @Lang('admin.add') 
</a>
@endcan
<div class="table-rep-plugin">
    @include(config('admin_theme.view_prefix', 'admin').'.layout.error')
    
<div class="table-responsive">
    <table id="roles_table" class="table  table-striped">
        <thead>
            <tr>
                <th>#</th>
                <th>@Lang('admin.name')</th>
                <th>@Lang('admin.status')</th>
                <th>@Lang('admin.actions')</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
</div>
@stop
@section('modal')
@include(config('admin_theme.view_prefix', 'admin').'.layout.ajax')
@stop
@section('js')
<script type="text/javascript">
    $(document).ready(function () {
        var oTable = $('#roles_table').DataTable({
            "processing": true,
            "serverSide": true,
            "responsive": true,
            "lengthChange": false,
            "autoWidth": false,
            "searching": false,
            "ajax": {
                url: "{{ route('roles.list') }}",
                data: function (d) {
                    d.name = $('input[name="name"]').val();
                }
            },
            "order": [[1, 'asc']],
            "columnDefs": [{
                    "targets": "_all",
                    "defaultContent": ""
                }],
            "columns": [
                {"data": ""},
                {"data": "name"},
                {"data": "status"},
                {"data": "actions"}
            ],
            "fnDrawCallback": function (oSettings) {
                $('.tooltips').tooltip();
                oTable.column(0).nodes().each(function (cell, i) {
                    cell.innerHTML = (parseInt(oTable.page.info().start)) + i + 1;
                });
            }
        });
        $(document).on('click', ".status", function () {
            var id = $(this).data('href');
            var item = $(this);
            $.ajax({
                type: "POST",
                url: "{{ route('roles.status') }}",
                data: {'id': id, '_token': $('meta[name="csrf-token"]').attr('content')},
            beforeSend: function() {
                $(".ezdan_loading").show();
            },
            complete: function() {
                $(".ezdan_loading").hide();
            },
                success: function (data) {
                    if (data.type == 'yes') {
                        item.removeClass("btn-danger");
                        item.addClass("btn-success");
                        item.html("<i class='fa fa-check'></i> @Lang('admin.enable') ");
                    } else if (data.type == 'no') {
                        item.removeClass("btn-success");
                        item.addClass("btn-danger");
                        item.html("<i class='fa fa-times'></i> @Lang('admin.disable') ");
                    }
                    toastr[data.status](data.message);
                }
            });
        });
        $('#confirm').on('show.bs.modal', function (e) {
            $("#delete_id").val($(e.relatedTarget).data('href'));
        });
        $(document).on('click', ".delete", function () {
            var id = $("#delete_id").val();
            $.ajax({
                type: "POST",
                url: "{{ route('roles.delete') }}",
                data: {'id': id, '_token': $('meta[name="csrf-token"]').attr('content')},
            beforeSend: function() {
                $(".ezdan_loading").show();
            },
            complete: function() {
                $(".ezdan_loading").hide();
            },
                success: function (data) {
                    console.log(data);
                    toastr[data.status](data.message);
                    oTable.draw();
                }
            });
        });
    });
</script>
@stop