@extends('layouts.main')

@section('content')
<div class="container-fluid">
    <div class="row">

        <div class="col-lg-12">
            <div class="card">
                
                <div class="card-header">
                    <h3 class="card-title">{{$group->name}}</h3>
                    <a href="{{url('/customers-groups')}}" style="float: right;">See All Group</a>
                </div>
               
                <div class="card-body p-none">
                    @if (count($customers) > 0)
                    <button class="btn btn-danger btn-sm pull-right" data-toggle="tooltip" data-placement="top"
                        id="deleteAll" style="margin-right: 10px;">Delete All</button>
                    @endif
                    <table class="table data-table table-hover" id="group-customer-list-table">
                        <thead>
                            <tr>
                                <th class="hide-td">Id</th>
                                @if (count($customers) > 0)
                                <th style="width: 10%;"><input type="checkbox" class="checkbox" id="checkAll"> Select
                                    All</th>
                                @endif
                                <th style="width: 15%;">Phone Number</th>
                                <th style="width: 15%;">Gender</th>
                                <th style="width: 15%;">Name</th>
                                <th style="width: 15%;">Email</th>
                                <th style="width: 15%;">Club Account</th>
                                <th style="width: 15%;">Whatsapp</th>
                                <th style="width: 15%;">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($customers as $k=>$customer)
                            <tr>
                                <td>{{(($page-1) * $limit) +($k+1)}}</td>
                                <td><input type="checkbox" class="group-customer-checkbox" value="{{$customer->id}}"
                                        id="checkbox-{{$customer->id}}" /></td>
                                <td>{{$customer->code}}{{$customer->number}}</td>
                                <td>{{$customer->gender}}</td>
                                <td>{{$customer->first_name}} {{$customer->last_name}}</td>
                                <td>{{$customer->email}}</td>
                                <td>{{$customer->user_name}}</td>
                                <td>@if($customer->wp==1) yes @else no @endif</td>
                                <td><button class="deleteCustomer btn btn-sm btn-danger"
                                        data-id="{{$customer->id}}">Delete</button></td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    {{ $customers->links() }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            $(".deleteCustomer").click(function () {
                var id = $(this).data("id");
                var groupId = '{{$groupId}}';
                console.log(groupId);
                //console.log(id);
                bootbox.confirm("Are you sure?", function (result) {
                    if (result) {
                        
                        window.location.href = BASE_URL + "/customers-groups/" + groupId + "/delete-customer/" + id;
                    }
                });
            });

            var $body = $('body');
            var idList=[];

            /**
             * checkbox start
             */



            $('#group-customer-list-table #checkAll').click(function () {
                $('input:checkbox').prop('checked', this.checked);
                getAllCheckedId()
            });


            function getAllCheckedId() {
                $(".group-customer-checkbox").each(function(){

                    if($(this).is(':checked')){
                        if(jQuery.inArray($(this).val(), idList) === -1){
                            idList.push($(this).val());
                        }

                    }else {
                        if(jQuery.inArray($(this).val(), idList) !== -1){
                            idList.splice($.inArray($(this).val(), idList), 1);
                        }

                    }
                });
                console.log(idList)
            }


            $body.on('click', '.group-customer-checkbox', function () {
                if($(this).is(':checked')){
                    if(jQuery.inArray($(this).val(), idList) === -1){
                        idList.push($(this).val());
                    }
                }else {
                    if(jQuery.inArray($(this).val(), idList) !== -1){
                        idList.splice($.inArray($(this).val(), idList), 1);
                    }
                }
                console.log(idList)
            })


            /**
             * checkbox end
             */

            $body.on('click', '#deleteAll', function () {
                if(idList.length<=0){
                    alert("Select at least 1 user!");
                    return false;
                }else {
                    // alert("Hello");
                    deleteAll();
                }
            });

            function deleteAll() {
                bootbox.confirm("Are you sure you want to delete?", function (result) {
                    if (result) {
                        var base_url = BASE_URL;
                        var groupId = '{{$groupId}}';
                        $.ajax({
                            headers: {'X-CSRF-TOKEN': CSRF_TOKEN},
                            url: BASE_URL + '/customers-groups/' + groupId + '/delete-all-customer',
                            type: 'POST',
                            data: {
                                'idList': idList
                            },
                            success: function ()
                            {
                                $('#msg-success').html('<div class="alert alert-success alert-block">\n' +
                                    '\t<button type="button" class="close" data-dismiss="alert">×</button>\t\n' +
                                    '        <strong>Customers successfully deleted from group.</strong>\n' +
                                    '</div>');
                                console.log("Deleted");
                                //$('#group-customer-list-table').reload();
                                //location.reload(true);
                                window.location.href = base_url + "/customers-groups/" + groupId + "/customers";
                            }
                        });
                    }
                });
            }
        });
    </script>
@endsection