@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">
                <div class="card-header">
                    {{--                            <a href="{{url('user/export-customers-csv')}}" class="btn
                    btn-complete"><i--}}
                        {{--                                        class="fa fa-expand"></i> Export All Customer--}}
                        {{--                            </a>--}} </div> <div class="card-body p-none">
                        @if (count($customers) > 0)
                        <button class="btn btn-success btn-sm pull-right" data-toggle="tooltip" data-placement="top"
                            id="exportAll" style="margin: 10px;"><i class="fa fa-expand"></i> Export Selected
                        </button>

                        <button class="btn btn-success btn-sm pull-right" data-toggle="tooltip" data-placement="top"
                            id="exportAllCustomers" style="margin: 10px;"><i class="fa fa-expand"></i> Export All Customers
                        </button>
                        @endif
                        <table class="table data-table table-hover" id="export-customers-list-table">
                            <thead>
                                <tr>
                                    <th class="hide-td">No.</th>
                                    @if (count($customers) > 0)
                                    <th style="width: 10%;"><input type="checkbox" class="checkbox" id="checkAll">
                                        Select All
                                    </th>
                                    @endif
                                    <th>Phone Number</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Club Account</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($customers as $k=>$customer)
                                <tr>
                                    <td>{{$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><a href="{{url('customers/'.$customer->id)}}"
                                               class="btn btn-success btn-sm">Manage</a>
                                            <button class="deleteCustomer btn btn-sm btn-danger"
                                                    data-id="{{$customer->id}}">Delete
                                            </button>
                                        </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                </div>
            </div>
        </div>
    </div>
</div>


@endsection

@section('script')

    <script>
        $(document).ready(function () {
            $(".deleteCustomer").click(function () {
                var id = $(this).data("id");
                console.log(id)
                //console.log(id);
                bootbox.confirm("Are you sure?", function (result) {
                    if (result) {
                        window.location.href = BASE_URL + "/customers/delete/" + id;
                    }
                });
            });



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

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

            function exportAll() {
                bootbox.confirm("Are you sure you want to export?", function (result) {
                    if (result) {
                        
                        $.ajax({
                            headers: {'X-CSRF-TOKEN': CSRF_TOKEN},
                            url: BASE_URL + '/export-customers-csv',
                            type: 'POST',
                            data: {
                                'idList': idList
                            },
                            success: function () {
                                location.href = BASE_URL + "/public/assets/exported-customers.csv";
                                $('#msg-success').html('<div class="alert alert-success alert-block">\n' +
                                    '\t<button type="button" class="close" data-dismiss="alert">×</button>\t\n' +
                                    '        <strong>Customer(s) exported successfully.</strong>\n' +
                                    '</div>');
                                console.log("Exported");
                                //location.reload();
                            }
                        });
                    }
                });
            }


            $body.on('click', '#exportAllCustomers', function () {
                exportAllCustomers();
            });

            function exportAllCustomers() {
                bootbox.confirm("Are you sure you want to export?", function (result) {
                    if (result) {
                        
                        $.ajax({
                            headers: {'X-CSRF-TOKEN': CSRF_TOKEN},
                            url: BASE_URL + '/export-all-customers-csv',
                            type: 'POST',
                            data: {
                                'idList': idList
                            },
                            success: function () {
                                location.href = BASE_URL + "/public/assets/exported-customers.csv";
                                $('#msg-success').html('<div class="alert alert-success alert-block">\n' +
                                    '\t<button type="button" class="close" data-dismiss="alert">×</button>\t\n' +
                                    '        <strong>Customer(s) exported successfully.</strong>\n' +
                                    '</div>');
                                console.log("Exported");
                                //location.reload();
                            }
                        });
                    }
                });
            }


        });
    </script>
@endsection