@extends('admin.layout')

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

    <style>
        /* =========================================================
                                           DUE CUSTOMERS DISPLAY TABLE
                                        ========================================================= */

        #dueCustomersTable {
            width: 100% !important;
        }

        #dueCustomersTable th,
        #dueCustomersTable td {
            vertical-align: middle;
            text-align: center;
            white-space: nowrap;
        }

        #dueCustomersTable th {
            font-weight: 600;
        }

        .page-title {
            font-weight: 700;
            margin-bottom: 0;
        }

        .table-card {
            border-radius: 12px;
        }

        /* Amount styling */
        .amount {
            font-weight: 600;
        }

        /* Balance */
        .balance-amount {
            font-weight: 700;
        }

        /* DataTables search */
        .dataTables_wrapper .dataTables_filter input {
            border: 1px solid #ddd;
            border-radius: 6px;
            padding: 7px 12px;
            margin-left: 8px;
        }

        .dataTables_wrapper .dataTables_length select {
            border: 1px solid #ddd;
            border-radius: 6px;
            padding: 5px 25px 5px 8px;
        }

        /* Responsive */
        @media (max-width: 768px) {

            .page-header-row {
                flex-direction: column;
                align-items: flex-start !important;
                gap: 10px;
            }

            #dueCustomersTable th,
            #dueCustomersTable td {
                font-size: 13px;
            }
        }
    </style>


    {{-- =========================================================
         PAGE HEADER
    ========================================================== --}}

    <div class="d-flex align-items-center justify-content-between mb-3 page-header-row">

        <h5 class="mb-0">
            <a href="{{ route('due_customers') }}"
                class="btn btn-icon bg-white me-2 d-inline-flex align-items-center justify-content-center"
                style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <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">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M15 6l-6 6l6 6" />
                </svg>
            </a>
            Due Customers History
        </h5>



    </div>


    {{-- =========================================================
         TABLE
    ========================================================== --}}

    <div class="card p-3 shadow-sm table-card">
        <div class="row mb-3 align-items-center">

            {{-- PAGE LENGTH --}}

            <div class="col-auto mb-3">



                <select id="pageLength" class="form-select">



                    <option value="10">10</option>

                    <option value="25">25</option>

                    <option value="50">50</option>

                    <option value="100">100</option>

                    <option value="All">All</option>



                </select>



            </div>
            <div class="col-lg-6 col-md-5 col-12 mb-3">
                <input type="text" id="sheetSearch" placeholder="Search customer..." class="form-control w-100">
            </div>
        </div>
        <div class="table-responsive">

            <table id="dueCustomersTable" class="table table-bordered align-middle w-100">

                <thead>
                    <tr>

                        <th>S.No</th>

                        <th>Name</th>

                        <th>Number</th>

                        <th>Vehicle Details</th>

                        <th>Vehicle Amount</th>

                        <th>Due Amount</th>

                        <th>Due Date</th>

                        <th>Per Month Due</th>

                        <th>Paid Amount</th>
                        <th>Action</th>


                    </tr>
                </thead>

            </table>

        </div>

    </div>


    {{-- =========================================================
         JQUERY
    ========================================================== --}}

    <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() {

            let table = $('#dueCustomersTable').DataTable({

                processing: true,
                serverSide: true,
                lengthChange: false,
                searching: true,
                dom: 'rtip',

                language: {
                    lengthMenu: "_MENU_",
                    search: "",
                    searchPlaceholder: "Search..."
                },

                columnDefs: [{
                    targets: '_all',
                    className: 'text-nowrap'
                }],

                ajax: "{{ route('history_due_customers_data') }}",

                columns: [{
                        data: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'name',
                        name: 'name',
                        className: 'p-3 text-center'
                    },
                    {
                        data: 'mobile_number',
                        name: 'mobile_number',
                        className: 'p-3 text-center'
                    },
                    {
                        data: 'vehicle_details',
                        name: 'vehicle_details',
                        className: 'p-3 text-center'
                    },
                    {
                        data: 'total_amount',
                        name: 'total_amount',
                        className: 'p-3 text-center amount'
                    },
                    {
                        data: 'due_amount',
                        name: 'due_amount',
                        className: 'p-3 text-center amount',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'due_date',
                        name: 'due_date',
                        className: 'p-3 text-center'
                    },
                    {
                        data: 'monthly_due',
                        name: 'monthly_due',
                        className: 'p-3 text-center amount',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'paid_amount',
                        name: 'paid_amount',
                        className: 'p-3 text-center amount'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        className: 'p-3 text-center'
                    }
                ]
            });

            // Custom search
            $('#sheetSearch').on('keyup', function() {
                table.search(this.value).draw();
            });

        });
    </script>
@endsection