Tiny File Manager

File "test.php"
Full path: /home/fsibplc/public_html/fsib/remittance/test.php
File size: 5.55 B (5.55 KB bytes)
MIME-type: text/html
Charset: utf-8
Download Open Edit Advanced Editor Back
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Applicant Information</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <h1>Account Request Information</h1>
    <table id="request-table">
        <thead>
            <tr>
                <th>SL</th>
                <th>Applicant Name</th>
                <th>Father Name</th>
                <th>Mother Name</th>
                <th>Date Of Birth</th>
                <th>Status</th>
                <th>Informed</th>
                <th>ID</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody id="applicant-body">
            <!-- Dynamic rows will be added here -->
        </tbody>
    </table>
    <div id="content" class="hidden"></div>

    <script>
        // Function to fetch applicant data
        async function fetchApplicantData() {
            try {
                const response = await fetch('fetch_applicants.php'); // PHP endpoint
                const data = await response.json();
                populateTable(data);
            } catch (error) {
                console.error('Error fetching applicant data:', error);
            }
        }

        // Function to populate the table with applicant data
        function populateTable(applicants) {
            const tbody = document.getElementById('applicant-body');
            applicants.forEach((applicant, index) => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${index + 1}</td>
                    <td>${applicant.name}</td>
                    <td>${applicant.father_name}</td>
                    <td>${applicant.mother_name}</td>
                    <td>${applicant.dob}</td>
                    <td>${applicant.status}</td>
                    <td>${applicant.inform}</td>
                    <td>${applicant.id}</td>
                    <td><button onclick="showContent(${index})">View</button></td>
                `;
                tbody.appendChild(row);
            });
        }

        // Function to show applicant details
        function showContent(index) {
            const applicant = document.querySelectorAll('#applicant-body tr')[index].children;
            const contentDiv = document.getElementById('content');
            const accountNumber = applicant[6].innerText; // Assuming this is the column for ac_number
            const informed = applicant[5].innerText === 'Yes'; // Assuming this is the column for inform


            const applicantDetails = `
                <h2>Details for ${applicant[1].innerText}</h2>
                <p><strong>Father Name:</strong> ${applicant[2].innerText}</p>
                <p><strong>Mother Name:</strong> ${applicant[3].innerText}</p>
                <p><strong>Date Of Birth:</strong> ${applicant[4].innerText}</p>
                <p><strong>Status:</strong> ${applicant[5].innerText}</p>
                <p><strong>Informed:</strong> ${applicant[6].innerText}</p>
                <p><strong>ID:</strong> ${applicant[7].innerText}</p>

                <h2>Update Information for ${applicant[1].innerText}</h2>
                <form id="updateForm" onsubmit="submitForm(event, ${applicant[7].innerText})">
                    <label for="accountNumber">Account Number:</label>
                    <input type="text" id="accountNumber" value="${accountNumber}" required>
                    <br>
                    <label for="informed">Informed:</label>
                    <input type="checkbox" id="informed" ${informed ? "checked" : ""}>
                    <br>
                    <button type="submit">Submit</button>
                </form>

                <button onclick="goBack()">Go Back</button>
            `;
            document.getElementById('request-table').classList.add('hidden');
            contentDiv.classList.remove('hidden');
            contentDiv.innerHTML = applicantDetails;

        }

        async function submitForm(event, index) {
            event.preventDefault();
            const accountNumber = document.getElementById('accountNumber').value;
            const informed = document.getElementById('informed').checked ? 'Yes' : '';

            const response = await fetch('update_applicant.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ accountNumber, informed, index }),
            });

            const result = await response.json();
            if (result.success) {
                alert('Applicant updated successfully!');
                fetchApplicantData(); // Refresh the table data
            } else {
                alert('Error updating applicant: ' + result.error);
            }
        }



        // Function to go back to the table
        function goBack() {
            document.getElementById('content').classList.add('hidden');
            document.getElementById('request-table').classList.remove('hidden');
        }

        // Fetch applicant data when the page loads
        window.onload = fetchApplicantData;
    </script>
</body>
</html>