@extends('layouts.app')
@section('content')
    <section class="contnet userList">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-8 col-12">
                    <h1 class="page-title">Group list</h1>
                </div>
                <div class="col-md-4 col-12 text-right">
                    <a class="add-user" href="{{$add_group_link}}">
                        Add Group <i class="fa fa-plus" aria-hidden="true"></i>
                    </a>
                </div>
            </div>
            <input type="hidden" id="setting_id" value="">
            <!--Start User List Tabel -->
            <div class="row grp_Row">
                <div class="col-12">
                    <hr>
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th scope="col">Group Name</th>
                                {{--<th scope="col">Created at</th>--}}
                                <th scope="col"></th>
                            </tr>
                            </thead>
                            <tbody>
                            @if(count($groups) > 0)
                                @foreach($groups as $group)
                                    <tr id="row_{{$group['grp_id']}}">
                                        <td class="group">{{$group['grp_name']}}</td>
                                        {{--<td class="created_at">{{date('Y-m-d',strtotime($group['created_at']))}}</td>--}}
                                        <td class="action">
                                            @if($edit_group_access)
                                            <a href="{{ $add_group_link}}/{{$group['grp_id']}}" class="btn btn-light"><i class="fa fa-pencil" aria-hidden="true"></i></a>
                                            @endif
                                            @if($delete_group_access)
                                            <a class="btn btn-light delete" d="{{$group['grp_id']}}"><i class="fa fa-trash" aria-hidden="true"></i> </a>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        {{$groups->links()}}
    </section>

    @include('layouts.modals')
@endsection
@section('script')
    <script>
        $(".grp_Row").on('click touchstart','.delete',function(){
            $(".deleteHeader").text('Delete Group');
            $("#deleteSetting").modal("show");
            $("#setting_id").val($(this).attr('d'));
        });

        $("#deleteSetting").on('click touchstart','.delete',function(){
            var id = $('#setting_id').val();
            var th = $("#row_"+id);
            if(id){
                loading();
                $.ajax({
                    type:"GET",
                    cache:false,
                    url:'{{$delete_group_link}}/'+id,
                    success: function (response) {
                        unLoading();
                        if(response.status){
                            // success message
                            th.closest('tr').remove();
                            $("#deleteSetting").modal("hide");
                            $(".invalid-feedback").css('color','green').html("<strong>"+response.msg+"</strong>" );
                            $(".invalid-feedback").show();
                            $("#successModal").modal("show");
                            setTimeout(function(){
                                $("#successModal").modal("hide");
                            },1500);
                        }
                        else{
                            $("#deleteSetting").modal("hide");
                            $(".invalid-feedback").css('color','red').html("<strong>"+response.msg+"</strong>" );
                            $(".invalid-feedback").show();
                            $("#errorModal").modal("show");
                            setTimeout(function(){
                                $("#errorModal").modal("hide");
                            },3000);
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        unLoading();
                    }
                });
            }
        });


    </script>
@endsection