// FINES

function showIssueFineContent() {
    const contentArea = document.getElementById('content-area');
    
    contentArea.innerHTML = `
        <section class="home-section" id="issue-fine-section">
            <div class="issue-fine-container">
                <h2 class="form-header">Issue a Fine</h2>
                <form id="issueFine" onsubmit="handleSubmit(event)">
                    <!-- User ID Field -->
                    <div class="form-row">
                        <div class="form-group">
                            <label for="loan-id">Loan ID</label>
                            <input type="text" id="loan-id" name="loan-id" required>
                            <div class="error-message" id="loanIdError">Please enter a valid User ID</div>
                        </div>
                    </div>

                    <!-- Fine Amount Field -->
                    <div class="form-group">
                        <label for="fine-amount">Amount</label>
                        <input type="number" id="fine-amount" name="fine-amount" required>
                        <div class="error-message" id="fineAmountError">Please enter a valid fine amount</div>
                    </div>

                    <!-- Fine Reason Field (Select Dropdown) -->
                    <div class="form-group">
                        <label for="fine-reason">Fine Reason</label>
                        <select id="fine-reason" name="fine-reason" required>
                            <option value="">Select Reason</option>
                            <option value="damaged-book">Damaged Book</option>
                            <option value="lost-book">Lost Book</option>
                        </select>
                        <div class="error-message" id="fineReasonError">Please select a reason</div>
                    </div>

                    <div class="btn-container">
                        <button type="button" class="btn btn-secondary" onclick="clearForm()">Clear Form</button>
                        <button type="submit" class="btn btn-primary">Issue Fine</button>
                    </div>
                </form>
            </div>
        </section>
    `;
}

function handleSubmit(event) {
    event.preventDefault();
    
    // Handle form submission
    const loanId = document.getElementById('loan-id').value;
    const fineAmount = document.getElementById('fine-amount').value;
    const fineReason = document.getElementById('fine-reason').value;

    // Add your form submission logic here (e.g., send to the server)
    console.log(`Loan ID: ${loanId}, Fine Amount: ${fineAmount}, Reason: ${fineReason}`);
}

function clearForm() {
    document.getElementById('issueFine').reset();
}


 function searchFines(){
    const searchInput = document.querySelector('.search-input').value.toLowerCase();
    const tableRows = document.querySelectorAll('#finesTableBody tr');
    
    tableRows.forEach(row => {
        const loanid = row.cells[0].textContent.toLowerCase();
        const fineid = row.cells[1].textContent.toLowerCase();
        const amount = row.cells[2].textContent.toLowerCase();
        
        if (loanid.includes(searchInput) || fineid.includes(searchInput) || amount.includes(searchInput)) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });
    document.querySelector('.search-input').addEventListener('keyup', searchFines);
}

function clearForm() {
// Get the form element by its ID
    const form = document.getElementById("issueFine");

    // Reset the form fields
    form.reset();

    // Optionally, hide any error messages (if any)
    const errorMessages = document.querySelectorAll(".error-message");
    errorMessages.forEach((message) => {
        message.style.display = "none"; // Hide the error messages
    });
}

//Issue
function handleSubmit(event) {
    event.preventDefault(); // Prevent form from submitting the default way

    // Get form values
    const loanId = event.target['loan-id'].value;
    const fineAmount = event.target['fine-amount'].value;

    // Send data to the backend
    fetch('../Admin Actions/IssueFine.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `loan-id=${loanId}&fine-amount=${fineAmount}`
    })
    .then(response => response.json()) // Expecting a JSON response
    .then(data => {
        if (data.success) {
            alert('Fine issued successfully!');
            location.reload(); // Refresh the page to reflect the changes
        } else {
            alert('Error issuing fine: ' + data.message); // Display error message if any
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while issuing the fine.');
    });

}