@extends('Admin.layout')
<style>
    /* Keep the table within the card */
.table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

/* Allow long headings to wrap */
#table thead th {
    white-space: normal;
    overflow-wrap: break-word;
    vertical-align: middle;
}

/* Keep table data on one line */
#table tbody td {
    white-space: nowrap;
    vertical-align: middle;
}
</style>
@section('content')

 <!-- PAGE HEADER -->
<div class="d-flex flex-column flex-lg-row
            justify-content-between align-items-start
            align-items-lg-center mb-3 gap-3">

    <h3 class="mb-0 text-nowrap">Followup Management</h3>

    <div class="d-flex flex-wrap gap-2">
        <a href="#" class="btn btn-primary text-white text-nowrap">
            Over Due Followup
        </a>

        <a href="#" class="btn btn-primary text-white text-nowrap">
            Closed Followup
        </a>
    </div>
</div>

    <div class="card p-3 w-100 overflow-hidden">
    <!-- FILTER -->
    <div class="row g-2 align-items-center mb-4">
        <div class="col-5 col-sm-3 col-md-1">
            <select id="pageLength" class="form-select">
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
            </select>
        </div>

        <div class="col-7 col-sm-6 col-md-4 ms-md-auto">
            <input type="search" id="bankSearch"
                   class="form-control" placeholder="Search">
        </div>
    </div>

    <!-- RESPONSIVE TABLE -->
    <div class="table-responsive w-100">
    <table id="table" class="table mb-0 w-100">
        <thead>
            <tr>
                <th>SNO</th>
                <th>GA ID</th>
                <th>Name</th>
                <th>Total Gross</th>
                <th>Total Net</th>
                <th>Eligible Loan Amount</th>
                <th>22k Rate</th>
                <th>Final Loan Amount</th>
                <th>Due Amount</th>
                <th>STATUS</th>
                <th>ACTION</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
</div>

    <!-- DELETE MODAL -->
    <div class="modal fade" id="delete" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Delete Followup</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    Are you sure you want to delete this followup?
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        Cancel
                    </button>

                    <form id="deleteBankForm" method="POST" action="">
                        @csrf
                        <input type="hidden" name="id" id="deleteFollowupId">

                        <button type="submit" class="btn btn-danger" id="deleteBankSubmit">
                            Yes, Sure
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- UPDATE STATUS MODAL -->
    <div class="modal fade" id="update" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Update Status</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    Are you sure you want to change the status?
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        Cancel
                    </button>

                    <form id="updateBankStatusForm" method="POST" action="">
                        @csrf
                        <input type="hidden" name="is_active" id="updateStatusValue">
                        <input type="hidden" name="id" id="updateFollowupId">

                        <button type="submit" class="btn btn-danger" id="updateStatusSubmit">
                            Yes, Sure
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- DATATABLE CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

    <!-- JQUERY -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- DATATABLE JS -->
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

    <style>
        /* TABLE RESPONSIVENESS */
        .followup-table-wrapper {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        #table {
            width: 100% !important;
            min-width: 1000px;
        }

        #table th,
        #table td {
            white-space: nowrap;
            vertical-align: middle;
        }

        /* HEADER BUTTONS */
        @media (max-width: 575.98px) {
            .followup-table-wrapper {
                margin-left: 0;
                margin-right: 0;
            }

            #table {
                min-width: 1000px;
            }
        }
    </style>

    <script>
        $(document).ready(function () {

            const dummyData = [
                {
                    DT_RowIndex: 1,
                    id: 1,
                    ga_id: 'GA/0001',
                    name: 'Arun Kumar',
                    total_gross: '25.500 g',
                    total_net: '24.800 g',
                    eligible_loan_amount: '₹1,50,000',
                    gold_22k_amount: '₹6,250',
                    final_loan_amount: '₹1,40,000',
                    due_amount: '₹7,000',
                    status: 1
                },
                {
                    DT_RowIndex: 2,
                    id: 2,
                    ga_id: 'GA/0002',
                    name: 'Priya Devi',
                    total_gross: '18.750 g',
                    total_net: '18.100 g',
                    eligible_loan_amount: '₹1,10,000',
                    gold_22k_amount: '₹6,250',
                    final_loan_amount: '₹1,00,000',
                    due_amount: '₹5,000',
                    status: 1
                },
                {
                    DT_RowIndex: 3,
                    id: 3,
                    ga_id: 'GA/0003',
                    name: 'Rajesh Kumar',
                    total_gross: '32.250 g',
                    total_net: '31.500 g',
                    eligible_loan_amount: '₹1,90,000',
                    gold_22k_amount: '₹6,250',
                    final_loan_amount: '₹1,75,000',
                    due_amount: '₹8,750',
                    status: 0
                },
                {
                    DT_RowIndex: 4,
                    id: 4,
                    ga_id: 'GA/0004',
                    name: 'Meena Lakshmi',
                    total_gross: '15.800 g',
                    total_net: '15.200 g',
                    eligible_loan_amount: '₹90,000',
                    gold_22k_amount: '₹6,250',
                    final_loan_amount: '₹85,000',
                    due_amount: '₹4,250',
                    status: 1
                }
            ];

            const table = $('#table').DataTable({
                data: dummyData,
                processing: false,
                serverSide: false,
                pageLength: 10,
                lengthChange: false,
                searching: true,
                ordering: true,
                info: true,
                autoWidth: false,
                dom: 'rtip',

                columns: [
                    {
                        data: null,
                        orderable: false,
                        searchable: false,
                        render: function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    { data: 'ga_id', defaultContent: '-' },
                    { data: 'name', defaultContent: '-' },
                    { data: 'total_gross', defaultContent: '-' },
                    { data: 'total_net', defaultContent: '-' },
                    { data: 'eligible_loan_amount', defaultContent: '-' },
                    { data: 'gold_22k_amount', defaultContent: '-' },
                    { data: 'final_loan_amount', defaultContent: '-' },
                    { data: 'due_amount', defaultContent: '-' },
                    {
                        data: 'status',
                        orderable: false,
                        searchable: false,
                        render: function (data, type, row) {
                            if (type !== 'display') {
                                return data;
                            }

                            const isActive = Number(data) === 1;
                            const statusText = isActive ? 'Active' : 'Closed';
                            const statusClass = isActive ? 'active-status' : 'inactive-status';

                            return `
                                <span class="status-btn ${statusClass}"
                                      data-id="${row.id}"
                                      data-status="${data}"
                                      role="button"
                                      data-bs-toggle="modal"
                                      data-bs-target="#update">
                                    ${statusText}
                                </span>
                            `;
                        }
                    },
                    {
                        data: null,
                        orderable: false,
                        searchable: false,
                        render: function (data, type, row) {
                            if (type !== 'display') {
                                return '';
                            }

                            return `
                                <div class="action-buttons">
                                    <button type="button"
                                            class="action-btn edit-btn"
                                            data-id="${row.id}">
                                        <i class="ti ti-edit"></i>
                                    </button>

                                    <button type="button"
                                            class="action-btn delete-btn"
                                            data-id="${row.id}"
                                            data-bs-toggle="modal"
                                            data-bs-target="#delete">
                                        <i class="ti ti-trash"></i>
                                    </button>
                                </div>
                            `;
                        }
                    }
                ]
            });

            // Search
            $('#bankSearch').on('input', function () {
                table.search(this.value).draw();
            });

            // Page length
            $('#pageLength').on('change', function () {
                table.page.len(parseInt(this.value, 10)).draw();
            });

            // Update status modal
            $(document).on('click', '.status-btn', function () {
                const id = $(this).data('id');
                const currentStatus = Number($(this).data('status'));
                const newStatus = currentStatus === 1 ? 0 : 1;

                $('#updateFollowupId').val(id);
                $('#updateStatusValue').val(newStatus);
            });

            // Delete modal
            $(document).on('click', '.delete-btn', function () {
                $('#deleteFollowupId').val($(this).data('id'));
            });

            // Status form loading state
            $('#updateBankStatusForm').on('submit', function () {
                $('#updateStatusSubmit')
                    .prop('disabled', true)
                    .html(`
                        <span class="spinner-border spinner-border-sm me-1"
                              role="status" aria-hidden="true"></span>
                        Processing...
                    `);
            });

            // Delete form loading state
            $('#deleteBankForm').on('submit', function () {
                $('#deleteBankSubmit')
                    .prop('disabled', true)
                    .html(`
                        <span class="spinner-border spinner-border-sm me-1"
                              role="status" aria-hidden="true"></span>
                        Processing...
                    `);
            });
        });
    </script>

@endsection