@extends('layouts.main')
@section('content')
<!--begin::Card-->
<div class="card card-custom">
    <div class="card-header">
        <div class="card-title">
            <span class="card-icon">
                <i class="flaticon-users-1 text-primary"></i>
            </span>
            <h3 class="card-label">{{$group->group_name}} <small>Group Members List</small> </h3>
        </div>
        
    </div>
    <div class="card-body">
        <!--begin: Datatable-->
        <table class="table table-bordered table-hover table-checkable" id="datatable">
            <thead>
                <tr>
                    <th>Member Name</th>
                    <th>Created On</th>
                    <th>Actions</th>
                </tr>
            </thead>
        </table>
        <!--end: Datatable-->
    </div>
</div>
<!--end::Card-->
@endsection
@section('sub_header')
<div class="subheader py-2 py-lg-6 subheader-transparent" id="kt_subheader">
    <div class="container d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
        <!--begin::Info-->
        <div class="d-flex align-items-center flex-wrap mr-1">
            <!--begin::Page Heading-->
            <div class="d-flex align-items-baseline flex-wrap mr-5">
                <!--begin::Page Title-->
                <h5 class="text-dark font-weight-bold my-1 mr-5">Group Members</h5>
                <!--end::Page Title-->
                <!--begin::Breadcrumb-->
                <ul class="breadcrumb breadcrumb-transparent breadcrumb-dot font-weight-bold p-0 my-2 font-size-sm">
                    <li class="breadcrumb-item text-muted">
                        <a href="{{route('groups')}}" class="text-muted">Groups</a>
                    </li>
                    <li class="breadcrumb-item text-muted">
                        <a href="#" class="text-muted">Member List</a>
                    </li>
                </ul>
                <!--end::Breadcrumb-->
            </div>
            <!--end::Page Heading-->
        </div>
        
    </div>
</div>
@endsection
@section('theam_css')
<link href="{{ $common->getTheamUrl('assets/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />

@endsection

@section('js_file')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.34/moment-timezone-with-data.min.js"></script>
<script src="{{ $common->getTheamUrl('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
@endsection

@section('page_js')
    <script>
        var ajax_datatable_list = null;
        var group_id = "{{$group->id}}";

        $(document).ready(function(){            
            initializeDatatable();    
            $('body').on('click','.delete-member', function(){
                var groupid = $(this).attr('data-groupdetailsid');
                Swal.fire({
                    title: "Are you sure?",
                    text: "You won't be able to revert this!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonText: "Yes, delete it!"
                }).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            url: "{{route('groups.member.delete.ajax')}}",
                            type: 'get',
                            dataType: 'json',
                            data: {groupid:groupid},                    
                            success: function (response) {
                                if(response.status){
                                    Swal.fire(
                                        "Deleted!",
                                        response.message,
                                        "success"
                                    )
                                }else{
                                   toastr.error(response.message); 
                                }
                            },
                            error: function (response) {
                                toastr.error("An error occurred");                                
                            },
                            complete:function(){
                                initializeDatatable();
                            }
                        }); 
                    }
                });
            })
        })
        function initializeDatatable() {
            if (ajax_datatable_list) {
                ajax_datatable_list.destroy();
            }

            ajax_datatable_list = $('#datatable').DataTable({
                'paging': true,
                'lengthChange': false,
                'searching': true,
                'ordering': false,
                "processing": true,
                "serverSide": true,
                "pageLength" : datatablePageLength,
                "ajax": {
                    "url": "{{route('groups.member.list.ajax',[$group->id])}}",
                    "dataSrc": "lists"
                },
                "columns": [
                    
                    {
                        sortable: true,
                        "render": function(data, type, full, meta) {
                            return full.get_profile.profile_first_name+' '+full.get_profile.profile_last_name
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return moment(full.created_on).tz('America/Chicago').format(moment_date_format);
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            var html = '';
                            
                            html += `
                            <a href="javascript:" data-groupdetailsid="${full.id}" class="btn btn-sm btn-light-danger delete-member"><i class="flaticon-delete"></i> Delete </a>
                            `;
                            return html;
                        }
                    },
                ]
            });
            return ajax_datatable_list;
        }
    </script>
@endsection