@extends('layouts.app')

@section('title', 'User Group')
@section('breadcrumb', 'Manage User Group')
@section('sub-breadcrumb')
    <a class="kt-subheader__breadcrumbs-link">
        List
    </a>
@endsection
@section('manage-user-group', 'kt-menu__item--open kt-menu__item--here')
@section('list-user-group', 'kt-menu__item--active')
@section('content')
    <div class="kt-portlet">
        <div class="kt-portlet__body">
            @include('layouts.notification')

            {{-- begin: datatable --}}
            <div class="col-md-12">
                <table id="datatable" class="table table-hover" style="width:100%">
                    <thead>
                        <tr>
                            <th width="30">No</th>
                            <th>User Group</th>
                            <th width="30">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            $no = 1;
                        @endphp
                        @foreach ($user_group as $key =>$value)
                            <tr>
                                <td>{{$no++}}</td>
                                <td>{{$value['name']}}</td>
                                <td>
                                <a data-toggle="kt-tooltip" data-html="true" data-original-title="Edit User Group" href="{{route('setting.user.group.edit', $value['id'])}}"><i class='fa fa-edit text-warning'></i></a> |
                                <a class="btn-delete" data-toggle="kt-tooltip" data-html="true" data-original-title="Delete User Group" href="{{route('setting.user.group.delete', $value['id'])}}" title=''><i class='fa fa-trash text-danger'></i></a>

                                </td>
                            </tr>
                        @endforeach

                    </tbody>
                </table>
                <div class="kt-separator kt-separator--dashed"></div>
            </div>
            {{-- begin: datatable --}}

        </div>
    </div>
@endsection

@section('custom-script')
<script type="text/javascript">
    $("#datatable").DataTable({
    })
</script>
<script>
    $('body').on('click', '.btn-delete', function (event) {
        event.preventDefault();

        var me = $(this),
            url = me.attr('href'),
            title = me.attr('title'),
            csrf_token = $('meta[name="csrf-token"]').attr('content');

        swal.fire({
            title: 'Are you sure want to delete ' + title + ' ?',
            text: 'You won\'t be able to revert this!',
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.value) {
                $('#loading').show();
                $.ajax({
                    url: url,
                    type: "POST",
                    data: {
                        '_method': 'DELETE',
                        '_token': csrf_token
                    },
                    success: function (response) {
                        $('#loading').hide();
                        // console.log(response)
                        if (response.status == "fail") {
                            swal.fire({
                                type: 'error',
                                title: 'Oops...',
                                text: 'Something went wrong!'
                            });
                        }
                        if (response.status == "success") {
                            location.reload();
                            swal.fire({
                                type: 'success',
                                title: 'Success!',
                                text: 'Data has been deleted!'
                            });
                        }
                    },
                    error: function (xhr) {
                        $('#loading').hide();
                        swal.fire({
                            type: 'error',
                            title: 'Oops...',
                            text: 'Something went wrong!'
                        });
                    }
                });
            }
        });
    });
</script>
@endsection