@extends('backend.layouts.master')

@section('title','Customers')

@section('styles')
    <link rel="stylesheet" href="{{asset('backend/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css')}}"/>
@endsection

@section('scripts')
    <script src="{{asset('backend/js/jquery.validate.min.js')}}"></script>
    <script src="{{asset('backend/js/pages/location.js')}}"></script>
    <script src="{{asset('backend/plugins/datatables/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('backend/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js')}}"></script>
    <script>
        $(function () {
            $('#customerList').DataTable({
                processing: true,
                serverSide: true,
                searching: true,
                iDisplayLength: 10,
                "ajax": {
                    url: '{{route('admin.customers.paginate')}}',
                    type: 'POST',
                    data: function (d) {
                        d._token = '{{csrf_token()}}';
                        d.entity_type = $('#entity_type').val();
                    }
                },
                bPaginate: true,
                columns: [
                    {data: "index", sortable: false},
                    {data: "entity_type", sortable: false},
                    {data: "name", sortable: false},
                    {data: "title", sortable: false},
                    {data: "email", sortable: false},
                    {data: "mobile", sortable: false},
                    {data: "created_at", sortable: false},
                    {data: "action", sortable: false},
                ],
                lengthMenu: [
                    [10, 25, 50, 100],
                    [10, 25, 50, 100]
                ],
                "columnDefs": [
                    {
                        "render": function (data, type, row) {
                            var btn = '<a href="' + ADMIN_URL + '/customers/' + row.uuid + '" class="btn btn-outline-primary btn-sm mr-1 waves-effect waves-float waves-light">View</a>';
                            return [btn].join('');
                        },
                        "targets": $('#customerList th#action').index(),
                        "orderable": false,
                        "searchable": false
                    }
                ]
            });
        });

        var entityDivCall = setInterval(myAddFunction, 1000);
        function myAddFunction() {
            var length = $('.dataTables_filter').length;
            if (length > 0) {
                var html = '<label>Type:';
                html += '<select class="form-control form-control-sm mr-3" id="entity_type" onchange="handleDataTable()" aria-controls="customerList">';
                html += '<option value="">All</option/>';
                html += '<option value="1">Preferred</option/>';
                html += '<option value="2">Non Preferred</option/>';
                html += '</select>';
                html += '</label>';
                $('.dataTables_filter').prepend(html);
                clearInterval(entityDivCall);
            }
        }

        function handleDataTable() {
            $('#customerList').DataTable().draw();
        }
    </script>
@endsection

@section('contents')
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">Customers</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{route('admin.index')}}">Dashboard</a></li>
                            <li class="breadcrumb-item active">Customers</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card card-primary">
                            <div class="card-header">
                                <h3 class="card-title">List of customers</h3>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table id="customerList" class="table table-bordered table-hover">
                                        <thead>
                                        <tr>
                                            <th>Index</th>
                                            <th>Type</th>
                                            <th>Customer Name</th>
                                            <th>Title</th>
                                            <th>Email</th>
                                            <th>Mobile</th>
                                            <th>Created At</th>
                                            <th id="action">Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection