@extends('Admin.layout')

@section('content')

<style>
    /* Table Styling */
    .table-responsive {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
    }

    #table thead th {
        white-space: normal;
        overflow-wrap: break-word;
        vertical-align: middle;
    }

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

    .action-buttons {
        display: flex;
        gap: 6px;
        align-items: center;
    }

    .action-btn {
        border: none;
        background: transparent;
        cursor: pointer;
        padding: 5px 8px;
        font-size: 18px;
    }

    .edit-btn {
        color: #0d6efd;
    }

    .history-btn {
        color: #198754;
    }

    .delete-btn {
        color: #dc3545;
    }

    .action-btn:hover {
        opacity: 0.75;
    }

    /* Custom Toast Notification Styling */
    .toast-container-custom {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
    }

    .custom-toast {
        display: flex;
        align-items: center;
        gap: 15px;
        min-width: 300px;
        max-width: 380px;
        padding: 16px 18px;
        border-radius: 14px;
        color: #fff;
        font-family: 'Segoe UI', sans-serif;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        position: relative;
        overflow: hidden;
        animation: slideIn 0.5s ease, fadeOut 0.5s ease 3s forwards;
    }

    .toast-success {
        background: linear-gradient(135deg, #00c853, #43a047);
    }

    .toast-error {
        background: linear-gradient(135deg, #ff5252, #d32f2f);
    }

    .toast-icon {
        font-size: 22px;
        font-weight: bold;
    }

    .toast-content {
        flex: 1;
    }

    .toast-title {
        font-weight: 600;
        font-size: 14px;
        margin-bottom: 2px;
    }

    .toast-message {
        font-size: 13px;
        opacity: 0.9;
    }

    .toast-close {
        background: transparent;
        border: none;
        color: #fff;
        font-size: 18px;
        cursor: pointer;
    }

    .toast-progress {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 3px;
        width: 100%;
        background: rgba(255,255,255,0.6);
        animation: progressBar 3s linear forwards;
    }

    @keyframes slideIn {
        from {
            transform: translateX(120%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes fadeOut {
        to {
            opacity: 0;
            transform: translateX(120%);
        }
    }

    @keyframes progressBar {
        from { width: 100%; }
        to { width: 0%; }
    }
</style>

<!-- Container for dynamically spawned toasts -->
<div id="toastContainer" class="toast-container-custom">
    @if (session('success') || session('error') || $errors->any())
        <div id="liveToast" class="custom-toast {{ session('success') ? 'toast-success' : 'toast-error' }}">
            <div class="toast-icon">
                {{ session('success') ? '✓' : '⚠' }}
            </div>
            <div class="toast-content">
                <div class="toast-title">
                    {{ session('success') ? 'Success' : 'Error' }}
                </div>
                <div class="toast-message">
                    @if (session('success'))
                        {{ session('success') }}
                    @elseif (session('error'))
                        {{ session('error') }}
                    @elseif ($errors->any())
                        {{ $errors->first() }}
                    @endif
                </div>
            </div>
            <button class="toast-close" onclick="closeToast(this.parentElement)">×</button>
            <div class="toast-progress"></div>
        </div>
    @endif
</div>

<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>

    <!-- TABLE -->
    <div class="table-responsive w-100">
        <table id="table" class="table mb-0 w-100">
            <thead>
                <tr>
                    <th>SNO</th>
                    <th>ID</th>
                    <th>TYPE</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>

<!-- EDIT FOLLOWUP MODAL -->
<div class="modal fade" id="editFollowupModal" tabindex="-1" aria-labelledby="editFollowupModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editFollowupModalLabel">Update Follow-up</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="edit_followup_id">
                <div class="mb-3">
                    <label class="form-label">Type</label>
                    <input type="text" id="edit_type" class="form-control" readonly>
                </div>
                <div class="mb-3">
                    <label class="form-label">Status</label>
                    <select id="edit_status" class="form-select">
                        <option value="Pending">Pending</option>
                        <option value="Not Picked Up">Not Picked Up</option>
                        <option value="Not Completed">Not Completed</option>
                        <option value="Closed">Closed</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Next Follow-up Date</label>
                    <input type="date" id="edit_next_followup_date" class="form-control">
                </div>
                <div class="mb-3">
                    <label class="form-label">Remarks</label>
                    <textarea id="edit_remarks" class="form-control" rows="3" placeholder="Enter follow-up remarks"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="updateFollowupBtn">Update</button>
            </div>
        </div>
    </div>
</div>



<div class="modal fade" id="historyFollowupModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">
                    Follow-up History
                </h5>

                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal">
                </button>
            </div>

            <div class="modal-body">

                <div id="historyContent">
                    <div class="text-center text-muted py-4">
                        Loading...
                    </div>
                </div>

            </div>

            <div class="modal-footer">

                <button type="button"
                        class="btn btn-secondary"
                        data-bs-dismiss="modal">
                    Close
                </button>

            </div>

        </div>
    </div>
</div>

<!-- DATATABLE CSS & JS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<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 () {

    // Initial check for server-side rendered toast
    const initialToast = document.getElementById('liveToast');
    if (initialToast) {
        setTimeout(() => closeToast(initialToast), 3000);
    }

    /*
    |--------------------------------------------------------------------------
    | DATATABLE INITIALIZATION
    |--------------------------------------------------------------------------
    */
    const table = $('#table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('followup_management') }}",
        pageLength: 10,
        lengthChange: false,
        searching: true,
        ordering: true,
        info: true,
        autoWidth: false,
        dom: 'rtip',
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'id_code', name: 'id' },
            { data: 'ins_type', name: 'ins_type', defaultContent: 'GA' },
            { data: 'name', name: 'customer_name' },
            { data: 'eligible_net_weight', name: 'eligible_net_weight', defaultContent: '-' },
            { data: 'eligible_net_weight', name: 'eligible_net_weight', defaultContent: '-' },
            { data: 'eligible_loan_amount', name: 'eligible_loan_amount', defaultContent: '-' },
            { data: 'gold_22k_amount', name: 'gold_22k_amount', defaultContent: '-' },
            { data: 'final_loan_amount', name: 'final_loan_amount', defaultContent: '-' },
            { data: 'due_amount', name: 'due_amount', orderable: false, searchable: false },
            { data: 'status_badge', name: 'status', orderable: false, searchable: false },
            {
    data: null,
    orderable: false,
    searchable: false,

    render: function (data, type, row) {

        return `
            <div class="action-buttons">

                <button type="button"
                        class="action-btn edit-btn"
                        data-id="${row.followup_id || ''}">
                    <i class="ti ti-edit"></i>
                </button>

                <button type="button"
                        class="action-btn history-btn"
                        data-id="${row.followup_id || ''}">
                    <i class="ti ti-eye"></i>
                </button>

            </div>
        `;
    }
}
        ]
    });

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

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

    /*
    |--------------------------------------------------------------------------
    | EDIT FOLLOWUP BUTTON
    |--------------------------------------------------------------------------
    */
    $(document).on('click', '.edit-btn', function () {
        const followupId = $(this).data('id');

        if (!followupId) {
            showToast('Follow-up ID not found.', 'error');
            return;
        }

        $('#edit_followup_id').val('');
        $('#edit_type').val('');
        $('#edit_status').val('Pending');
        $('#edit_next_followup_date').val('');
        $('#edit_remarks').val('');

        $.ajax({
            url: "{{ route('edit_followup', ':id') }}".replace(':id', followupId),
            type: "GET",
            beforeSend: function () {
                $('#editFollowupModal').modal('show');
            },
            success: function (response) {
                if (!response.status) {
                    $('#editFollowupModal').modal('hide');
                    showToast(response.message || 'Unable to fetch record.', 'error');
                    return;
                }

                const data = response.data;
                $('#edit_followup_id').val(data.id);
                $('#edit_type').val(data.type);
                $('#edit_status').val(data.status);
                $('#edit_next_followup_date').val(data.next_followup_date ?? '');
                $('#edit_remarks').val(data.remarks ?? '');
            },
            error: function (xhr) {
                $('#editFollowupModal').modal('hide');
                const response = xhr.responseJSON;
                const message = (response && response.message) ? response.message : 'Unable to load follow-up.';
                showToast(message, 'error');
            }
        });
    });

    /*
    |--------------------------------------------------------------------------
    | UPDATE FOLLOWUP SUBMIT BUTTON
    |--------------------------------------------------------------------------
    */
    $(document).on('click', '#updateFollowupBtn', function () {
        const followupId = $('#edit_followup_id').val();
        const status = $('#edit_status').val();
        const nextFollowupDate = $('#edit_next_followup_date').val();
        const remarks = $('#edit_remarks').val();

        if (!followupId) {
            showToast('Follow-up ID not found.', 'error');
            return;
        }

        $.ajax({
            url: "{{ route('update_followup') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                id: followupId,
                status: status,
                next_followup_date: nextFollowupDate,
                remarks: remarks
            },
            success: function (response) {
                if (response.status) {
                    $('#editFollowupModal').modal('hide');
                    $('#table').DataTable().ajax.reload(null, false);
                    showToast(response.message || 'Updated successfully!', 'success');
                } else {
                    showToast(response.message || 'Failed to update.', 'error');
                }
            },
            error: function (xhr) {
                if (xhr.status === 422) {
                    let errors = xhr.responseJSON.errors;
                    $.each(errors, function (key, value) {
                        showToast(value[0], 'error');
                    });
                } else {
                    let message = 'Unable to update follow-up.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        message = xhr.responseJSON.message;
                    }
                    showToast(message, 'error');
                }
            }
        });
    });

    /*
    |--------------------------------------------------------------------------
    | HISTORY BUTTON
    |--------------------------------------------------------------------------
    */
    $(document).on('click', '.history-btn', function () {
        const followupId = $(this).data('id');

        if (!followupId) {
            showToast('Follow-up ID not found.', 'error');
            return;
        }

        $('#followupHistoryContent').html(`
            <div class="text-center py-4">Loading...</div>
        `);
        $('#followupHistoryModal').modal('show');

        $.ajax({
            url: "{{ url('/followup-management') }}/" + followupId + "/history",
            type: "GET",
            success: function (response) {
                if (!response.status) {
                    $('#followupHistoryContent').html(`
                        <div class="alert alert-danger">${response.message}</div>
                    `);
                    showToast(response.message, 'error');
                    return;
                }

                const history = response.data.status_history || [];
                if (!history.length) {
                    $('#followupHistoryContent').html(`
                        <div class="text-center text-muted py-4">No follow-up history found.</div>
                    `);
                    return;
                }

                let html = `
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Date</th>
                                    <th>Status</th>
                                    <th>Next Follow-up</th>
                                    <th>Remarks</th>
                                    <th>Updated By</th>
                                </tr>
                            </thead>
                            <tbody>
                `;

                history.forEach(function (item, index) {
                    let badgeClass = 'bg-warning text-dark';
                    if (item.status === 'Closed') {
                        badgeClass = 'bg-success';
                    } else if (item.status === 'Not Picked Up') {
                        badgeClass = 'bg-danger';
                    } else if (item.status === 'Not Completed') {
                        badgeClass = 'bg-secondary';
                    }

                    html += `
                        <tr>
                            <td>${index + 1}</td>
                            <td>${item.date ?? '-'}</td>
                            <td><span class="badge ${badgeClass}">${item.status ?? '-'}</span></td>
                            <td>${item.next_followup_date ?? '-'}</td>
                            <td>${item.remarks ?? '-'}</td>
                            <td>${item.updated_by ?? '-'}</td>
                        </tr>
                    `;
                });

                html += `
                            </tbody>
                        </table>
                    </div>
                `;

                $('#followupHistoryContent').html(html);
            },
            error: function (xhr) {
                $('#followupHistoryContent').html(`
                    <div class="alert alert-danger">Unable to load follow-up history.</div>
                `);
                showToast('Unable to load follow-up history.', 'error');
            }
        });
    });

});

$(document).on('click', '.history-btn', function () {

    const followupId = $(this).data('id');

    if (!followupId) {
        alert('Follow-up ID not found.');
        return;
    }

    let url = "{{ route('history_followup', ':id') }}";
    url = url.replace(':id', followupId);

    $.ajax({
        url: url,
        type: "GET",

        success: function (response) {

            if (!response.status) {
                alert(response.message);
                return;
            }

            const data = response.data;
            const history = data.status_history || [];

            let html = '';

            if (history.length === 0) {

                html = `
                    <div class="text-center text-muted py-4">
                        No follow-up history found.
                    </div>
                `;

            } else {

                history.reverse().forEach(function (item, index) {

                    let badgeClass = 'bg-warning text-dark';

                    if (item.status === 'Closed') {
                        badgeClass = 'bg-success';
                    } else if (item.status === 'Not Picked Up') {
                        badgeClass = 'bg-danger';
                    } else if (item.status === 'Not Completed') {
                        badgeClass = 'bg-secondary';
                    }

                    html += `
                        <div class="border rounded p-3 mb-3">

                            <div class="d-flex justify-content-between align-items-center mb-2">

                                <strong>
                                    Follow-up #${history.length - index}
                                </strong>

                                <span class="badge ${badgeClass}">
                                    ${item.status || '-'}
                                </span>

                            </div>

                            <div class="row">

                                <div class="col-md-6 mb-2">
                                    <strong>Date:</strong><br>
                                    ${item.date || '-'}
                                </div>

                                <div class="col-md-6 mb-2">
                                    <strong>Next Follow-up:</strong><br>
                                    ${item.next_followup_date || '-'}
                                </div>

                                <div class="col-12">
                                    <strong>Remarks:</strong><br>
                                    ${item.remarks || '-'}
                                </div>

                            </div>

                        </div>
                    `;
                });
            }

            $('#historyContent').html(html);

            $('#historyFollowupModal').modal('show');
        },

        error: function (xhr) {

            console.log(
                'Followup History Error:',
                xhr.responseText
            );

            let message = 'Unable to load follow-up history.';

            if (xhr.responseJSON && xhr.responseJSON.message) {
                message = xhr.responseJSON.message;
            }

            alert(message);
        }
    });
});
</script>

@endsection