@extends('admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<style>
    .dt-search {
        display: none;
    }
</style>
@section('content')
    <div class="d-flex align-items-center justify-content-between mb-3">
        <h5 class="fw-bold mb-0">Due Customers</h5>

        <div class="d-flex gap-2">

            <a href="{{ route('due_customer_history') }}" class="btn btn-primary">
                <i class="ti tabler-history me-1"></i>
                History
                <i class="ti tabler-arrow-right ms-1"></i>
            </a>

            <a href="{{ route('ready_cash_customers') }}" class="btn btn-primary">
                ReadyCash
                <i class="ti tabler-arrow-right ms-1"></i>
            </a>

        </div>
    </div>

    <div class="card p-3 shadow-sm">
        <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>Created&nbsp;Date</th>
                        <th>Name</th>
                        <th>Number</th>
                        <th>Vehicle Details</th>
                        <th>Vehicle Amount</th>
                        <th class="text-nowrap">By-hand Cash</th>
                        <th>Due Amount</th>
                        <th>Due Date</th>
                        <th>Total&nbsp;Months</th>
                        <th>Per Month Due</th>
                        <th>Paid Amount</th>
                        <th>Balance</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    {{-- 1. ADD INTEREST MODAL --}}
    <div class="modal fade" id="interestModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <form id="interestForm">
                @csrf
                <input type="hidden" name="vehicle_sell_id" id="interest_sell_id">
                <input type="hidden" name="customer_id" id="interest_customer_id">
                <input type="hidden" name="vehicle_id" id="interest_vehicle_id">

                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Add Interest Entry</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Interest Amount <span class="text-danger">*</span></label>
                            <input type="number" step="0.01" name="interest_amount" class="form-control" required
                                placeholder="Enter amount">
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Remarks / Description</label>
                            <textarea name="remarks" class="form-control" rows="3" placeholder="Enter interest reason"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" id="saveInterestBtn" class="btn btn-primary">Save Interest</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- 2. PAYMENT MODAL --}}
    <div class="modal fade" id="payModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <form id="payForm" action="{{ route('payment_store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="vehicle_id" id="pay_vehicle_id">
                <input type="hidden" name="customer_id" id="pay_customer_id">

                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Pay Monthly Due</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Current Pending Balance</label>
                            <input type="text" id="displayBalance" class="form-control bg-light" readonly>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold">Payment Date <span class="text-danger">*</span></label>
                            <input type="date" name="payment_date" class="form-control" value="{{ date('Y-m-d') }}"
                                required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold">Amount <span class="text-danger">*</span></label>
                            <input type="number" step="0.01" name="amount" id="amount_paid" class="form-control"
                                required placeholder="Enter amount">
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold">Receipt Upload (Optional)</label>
                            <input type="file" name="receipt" class="form-control" accept="image/*,.pdf">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" id="savePaymentBtn" class="btn btn-success">Submit Payment</button>
                    </div>
                </div>
            </form>
        </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() {
            let table = $('#dueCustomersTable').DataTable({
                processing: true,
                serverSide: true,
                lengthChange: false,

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

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

                ajax: "{{ route('due_customers_data') }}",
                columns: [{
                        data: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'created_date',
                        name: 'created_date'
                    },
                    {
                        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: 'text-center text-nowrap'
                    },
                    {
                        data: 'total_amount',
                        name: 'total_amount'
                    },
                    {
                        data: 'by_hand',
                        name: 'by_hand'
                    },
                    {
                        data: 'due_amount',
                        name: 'due_amount',
                        className: 'p-3 text-center',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'due_date',
                        name: 'due_date',
                        className: 'p-3 text-center text-nowrap'
                    },
                    {
                        data: 'months',
                        name: 'months'
                    },
                    {
                        data: 'monthly_due',
                        name: 'monthly_due',
                        className: 'p-3 text-center',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'paid_amount',
                        name: 'paid_amount',
                        className: 'text-center text-nowrap'
                    },
                    {
                        data: 'pending_due_amount',
                        name: 'pending_due_amount',
                        className: 'p-3 text-center'
                    },
                    {
                        data: 'action',
                        orderable: false,
                        searchable: false
                    }
                ]

            });

            // Open Add Interest Modal
            $(document).on('click', '.openInterestModal', function() {
                $('#interest_sell_id').val($(this).data('sell-id'));
                $('#interest_customer_id').val($(this).data('customer-id'));
                $('#interest_vehicle_id').val($(this).data('vehicle-id'));
                $('#interestModal').modal('show');
            });

            // Save Interest Entry via AJAX
            $('#interestForm').on('submit', function(e) {
                e.preventDefault();
                $('#saveInterestBtn').prop('disabled', true).html(
                    '<span class="spinner-border spinner-border-sm me-1"></span> Processing...');

                $.ajax({
                    url: "{{ route('interest.store') }}",
                    type: "POST",
                    data: $(this).serialize(),
                    success: function(res) {
                        $('#interestModal').modal('hide');
                        $('#interestForm')[0].reset();
                        $('#saveInterestBtn').prop('disabled', false).text('Save Interest');
                        table.ajax.reload(null, false);
                    },
                    error: function(err) {
                        alert('Error adding interest. Please try again.');
                        $('#saveInterestBtn').prop('disabled', false).text('Save Interest');
                    }
                });
            });
            $('#sheetSearch').on('keyup search input', function() {
                table.search($(this).val()).draw();
            });
            // Open Payment Modal
            // Open Payment Modal
            $(document).on('click', '.openPayModal', function() {
                let vehicleId = $(this).data('vehicle-id');
                let customerId = $(this).data('customer-id');
                let monthlyDue = $(this).data('monthly-due');
                let remaining = $(this).data('remaining');

                $('#pay_vehicle_id').val(vehicleId);
                $('#pay_customer_id').val(customerId);
                $('#amount_paid').val(monthlyDue);
                $('#displayBalance').val('₹' + remaining);

                $('#payModal').modal('show');
            });


            // =====================================================
            // PAYMENT SUBMIT - SHOW PROCESSING
            // =====================================================

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

                let button = $('#savePaymentBtn');

                // Prevent multiple submissions
                if (button.prop('disabled')) {
                    e.preventDefault();
                    return false;
                }

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

                // Show Processing...
                button.html(`
                <span class="spinner-border spinner-border-sm me-1"
                      role="status"
                      aria-hidden="true"></span>
                Processing...
            `);

                // Do NOT use e.preventDefault()
                // Allow the form to submit normally
            });
        });
    </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('Customer 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