@extends('modules.head') @section('contenido')
    <div class="box-header">

    </div>

    <!-- List forms-->
    <div class="box">
        <div class="box-header with-border">
            <h3 class="box-title">Cart Abandonment</h3>
        </div>

        <!-- /.box-header -->
        <div class="box-body table-responsive ">
            <table id="example2" class="table table-bordered table-hover dataTable" role="grid">
                <thead>
                <tr role="row">
                    <th>Code</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Time</th>
                    <th>Total</th>
                    <th>Status</th>
                </tr>
                </thead>
            </table>
        </div>
        <!-- /.box-body -->
    </div>

@endsection
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/ajax.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function () {

        getRequest(
            '{{ route('cart_abandonment.index') }}',
            function (response) {
                if (response.result) {
                    successResponse(response);
                } else {
                    swal('Error', response.message, 'error');
                }
            }
        )

        function successResponse(response) {
            $('#example2').DataTable({
                data: response.data, // Assume data is in a suitable format
                ordering: false,
                columns: [
                    {
                        data: 'eko_document', render: function (data, type, row) {
                            return `<a href="/cart_abandonment/${row.id}">${data}</a>`;
                        }
                    },
                    {data: 'full_name'},
                    {data: 'email'},
                    {data: 'human_time'},
                    {data: 'cart_total'},
                    {data: 'cart_status' , render: function (data, type, row) {
                        if (data === 'abandoned') {
                            return `<span class="badge label-danger">${data.capitalize()}</span>`;
                        } else if (data === 'converted') {
                            return `<span class="badge label-success">${data.capitalize()}</span>`;
                        } else if (data === 'shopping') {
                            return `<span class="badge label-warning">${data.capitalize()}</span>`;
                        }
                    }},
                ]
            });
        }

    });

    Object.defineProperty(String.prototype, 'capitalize', {
        value: function() {
            return this.charAt(0).toUpperCase() + this.slice(1);
        },
        enumerable: false
    });
</script>