@extends('admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

@section('content')
    <div class="row align-items-center justify-content-between mb-3 mt-3">

        <div class="col-auto">

            <h5>

                <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">

                    <a href="{{ route('due_customers') }}">

                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="icon icon-tabler">

                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />

                            <path d="M15 6l-6 6l6 6" />

                        </svg>

                    </a>

                </button>

                Ready Cash Customers

            </h5>

        </div>

    </div>

    <div class="card p-3 shadow-sm">
        <div class="table-responsive">
            <table id="readyCashTable" class="table table-bordered w-100">
                <thead>
                    <tr>
                        <th>S.No</th>
                        <th>Name</th>
                        <th>Number</th>
                        <th>Vehicle Details</th>
                        <th>Payment Method</th>
                        <th>Total Amount Paid</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#readyCashTable').DataTable({
                processing: true,
                serverSide: true,
                language: {
                    lengthMenu: "_MENU_",
                    search: "",
                    searchPlaceholder: "Search..."
                },

                columnDefs: [

                    {
                        targets: '_all',
                        className: 'text-nowrap'
                    }

                ],
                ajax: "{{ route('ready_cash_customers_data') }}",
                columns: [{
                        data: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'mobile_number',
                        name: 'mobile_number'
                    },
                    {
                        data: 'vehicle_details',
                        name: 'vehicle_details'
                    },
                    {
                        data: 'payment_method',
                        name: 'payment_method'
                    },
                    {
                        data: 'total_amount',
                        name: 'total_amount'
                    },
                    {
                        data: 'action',
                        orderable: false,
                        searchable: false
                    }
                ]
            });
            $('#customSearchInput').on('keyup search input', function() {
                table.search($(this).val()).draw();
            });
        });
    </script>
    <script>
        $(document).ready(function() {

            let deleteId = null;

            // =====================================================
            // CLICK DELETE ICON
            // =====================================================

            $(document).on('click', '.deleteCustomer', function() {

                deleteId = $(this).data('id');

                console.log('Delete Customer ID:', deleteId);

                // Set delete form action
                $('#deleteForm').attr(
                    'action',
                    "{{ url('admin/delete_customer') }}/" + deleteId
                );

            });


            // =====================================================
            // CONFIRM DELETE
            // =====================================================

            $('#deleteForm').on('submit', function(e) {

                e.preventDefault();

                if (!deleteId) {

                    alert('Vehicle ID not found.');

                    return false;
                }

                let form = this;

                let button = $('#confirmDelete');

                // Disable button
                button.prop('disabled', true);

                // Loading
                button.html(`
                <span class="spinner-border spinner-border-sm me-1"
                      role="status"></span>
                Deleting...
            `);

                // Submit normally
                form.submit();

            });

        });
    </script>
@endsection