@extends('layouts.main')

@section('content')

<div class="container-fluid">
    <div class="row">
        <div id="msg-success">

        </div>
        <div class="col-lg-12">
            <div class="card">
                <a href="{{url('customers-groups/'.$groupId.'/customers')}}" style="margin-left: 10px;">See
                    Group's Customers</a>
                <div class="card-header">
                    @if (count($customers) > 0)
                    <button class="btn btn-success btn-sm pull-right" data-toggle="tooltip" data-placement="top"
                        id="addAll" style="margin-right: 10px;">Add All
                    </button>
                    @endif
                </div>
                <div class="card-body p-none">
                    <table class="table data-table table-hover" id="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%;">Name</th>
                                <th style="width: 15%;">Email</th>
                                <th style="width: 15%;">Club Account</th>
                                <th style="width: 20%;">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($customers as $k=>$customer)
                            <tr>
                                <td>{{(($page-1) * $limit) +($k+1)}}</td>
                                <td><input type="checkbox" class="customer-checkbox" value="{{$customer->id}}"
                                        id="checkbox-{{$customer->id}}" /></td>
                                <td>{{$customer->code}}{{$customer->number}}</td>
                                <td>{{$customer->first_name}} {{$customer->last_name}}</td>
                                <td>{{$customer->email}}</td>
                                <td>{{$customer->user_name}}</td>
                                <td>
                                    <button class="addCustomer btn btn-sm btn-success" data-id="{{$customer->id}}">Add
                                    </button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    {{ $customers->links() }}
                </div>
            </div>
        </div>

    </div>

</div>


@endsection


@section('script')


    <script>
        $(document).ready(function () {
            

            $(".addCustomer").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 + "/add-customer/" + id;
                    }
                });
            });

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

            /**
             * checkbox start
             */


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


            function getAllCheckedId() {
                $(".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', '.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', '#addAll', function () {
                if (idList.length <= 0) {
                    alert("Select at least 1 user!");
                    return false;
                } else {
                    // alert("Hello");
                    addAll();
                }
            });

            function addAll() {
                bootbox.confirm("Are you sure you want to add?", 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 + '/add-all-customer',
                            type: 'POST',
                            data: {
                                'idList': idList
                            },
                            success: function () {
                                //location.reload();
                                $('#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 added successfully to group.</strong>\n' +
                                    '</div>');
                                console.log("Added");
                                location.reload();
                                //$('#group-customer-list-table').reload();
                                //console.log(base_url + "/customers-groups/" + groupId + "/customers");
                                //window.location.href = base_url + "/customers-groups/" + groupId + "/customers";
                            }
                        });
                    }
                });
            }
        });
    </script>
@endsection