@extends('layouts/mainLayout')
@section('title', "UGAF Home Care: Issues Tracker")
<!-- ========== Left Sidebar Start ========== -->
@include('sideMenu',['page_title' => 'profiles','sub_page_title' => 'members'])
<!-- Left Sidebar End -->
@section('styles')
<link href="{{URL::asset('assets/libs/flatpickr/flatpickr.min.css')}}" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.5/css/jquery.dataTables.css" />
<link rel="stylesheet" type="text/css" href="{{URL::asset('css/sweetalert2.min.css')}}"/>
@endsection
@section('mainContent')
    <div class="page-content dark:bg-zinc-700">
        <div class="container-fluid px-[0.625rem]">
            <div class="grid grid-cols-1 mb-5">
                <div class="flex items-center justify-between">
                    <h4 class="mb-sm-0 text-lg font-semibold grow text-gray-800 dark:text-gray-100">Member List</h4>
                    <nav class="flex" aria-label="Breadcrumb">
                        <ol class="inline-flex items-center space-x-1 ltr:md:space-x-3 rtl:md:space-x-0">
                            <li class="inline-flex items-center">
                                <a href="#" class="inline-flex items-center text-sm font-medium text-gray-800 hover:text-gray-900 dark:text-zinc-100 dark:hover:text-white">
                                    Profiles
                                </a>
                            </li>
                            <li>
                                <div class="flex items-center">
                                    /
                                    <a href="#" class="ltr:ml-1 rtl:mr-1 text-sm font-medium text-gray-500 hover:text-gray-900 ltr:md:ml-2 rtl:md:mr-2 dark:text-gray-100 dark:hover:text-white">Members</a>
                                </div>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
            <div class=" grid grid-cols-1 ">
                <div class="card dark:bg-zinc-800 dark:border-zinc-600">
                    <div class="card-body">
                        <div class="grid grid-cols-12">
                            <div class="col-span-12 lg:col-span-9">
                                    <a href="/new-member" class="btn bg-gray-50 border-transparent text-gray-800 dark:bg-zinc-600 dark:text-gray-100"><i class="bx bx-plus me-1"></i> Add Member</a>
                            </div>
                        </div>
                        <div class="mt-5 relative overflow-x-auto">
                            <table class="w-full" id="usersData">
                                <thead class="border-b border-gray-50 dark:border-zinc-600 cursor-pointer">
                                    <tr>
                                        
                                        <th class="relative w-8 text-start p-4">ID</th>
                                        <th class="relative w-8 text-start p-4">Name</th>
                                        <th class="relative w-8 text-start p-4">DOB</th>
                                        <th class="relative w-8 text-start p-4">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($users as $user)
                                        <tr class="border-b border-gray-50 dark:border-zinc-600 text-gray-600" id="{{$user['id']}}">
                                            
                                            <td>
                                                <div class="p-4">
                                                    <a href="javascript: void(0);" class="text-black font-medium dark:text-gray-100">{{ $user['id'] }} </a>
                                                </div>
                                            </td>
                                            <td class="p-4 dark:text-zinc-100">{{ $user['member_name'] }}</td>
                                            <td class="p-4 dark:text-zinc-100">{{ $user['dob'] }}</td>
                                            <td class="">
                                                <a class="btn" id="{{$user['id']}}" onclick="return deleteMember(this);" style="cursor: pointer;">Delete</a>
                                            </td>
                                        </tr>
                                        @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endsection
    @push('scripts')
    <script src="{{URL::asset('assets/js/app.js')}}"></script>
    <script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.js"></script>
    <script src="{{URL::asset('js/sweetalert2.all.min.js')}}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            let table = new DataTable('#usersData', {
                pageLength: 50,
                dom: 'lifrtp', 
                lengthChange: false,
                responsive: true
            });
        });
        function blockClient(opvalue){
            var id_user = opvalue.href;
            var token = "{{ csrf_token() }}";
            $.post("/blockClient", {action: 'client', '_token': token, id_user: id_user}, function(message){
                Swal.fire('Block Client!',message.result,'success');
            });
            return false;
        } 
        function deleteMember(opvalue){
            var id_user = opvalue.id;
            var token = "{{ csrf_token() }}";
            Swal.fire({
                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((result) => {
                  if (result.value) {
                    $.post("/deleteIssue", {action: 'member', '_token': token, id_user: id_user}, function(message){
                        $("tr#" + id_user).remove()
                        Swal.fire('Issue Deleted',message.result,'success');
                    });
                  }
                });
            
            return false;
        } 
        </script>
    @endpush