@extends('layouts.registrarapp')
@section('content')

<div class="container">
    <h1 class="my-4">DMMC INSTITUTE OF HEALTH SCIENCES</h1>
    <h3>Office of the Registrar / Form 2</h3>
    <h4>DOCUMENT APPLICATION FORM</h4>

    <form action="/submit-document-application" method="post">
        
        <div class="row mb-4">
            <div class="col-mb-4">
                <label><input type="radio" name="under_grad" value="graduate"> Graduate</label>
                <label><input type="radio" name="under_grad" value="undergraduate"> Undergraduate</label>
            </div>
        </div>

        <!-- Personal Information -->
        <h4>PERSONAL INFORMATION</h4>
        <div class="row mb-3">
            <div class="col-md-3">
                <label for="last_name">Last Name:</label>
                <input type="text" id="last_name" name="last_name" class="form-control" required>
            </div>
            <div class="col-md-3">
                <label for="first_name">First Name:</label>
                <input type="text" id="first_name" name="first_name" class="form-control" required>
            </div>
            <div class="col-md-3">
                <label for="middle_name">Middle Name:</label>
                <input type="text" id="middle_name" name="middle_name" class="form-control">
            </div>
        </div>

        <div class="row mb-3">
            <div class="col-md-3">
                <label for="gender">Gender:</label>
                <select id="gender" name="gender" class="form-control">
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                </select>
            </div>
            <div class="col-md-3">
                <label for="dob">Date of Birth:</label>
                <input type="date" id="dob" name="dob" class="form-control" required>
            </div>
            <div class="col-md-3">
                <label for="citizenship">Citizenship:</label>
                <input type="text" id="citizenship" name="citizenship" class="form-control" required>
            </div>
        </div>

         <!-- Clearance Section -->
         <h4>CLEARANCE</h4>
         <div class="row mb-3">
            <div class="col-md-3">
                <label for="received_by">Received by:</label>
                <input type="text" id="received_by" name="received_by" class="form-control">
            </div>
            <div class="col-md-3">
                <label for="released_by">Released by:</label>
                <input type="text" id="released_by" name="released_by" class="form-control">
            </div>
            <div class="col-md-3">
                <label for="date_submitted">Date Submitted:</label>
                <input type="date" id="date_submitted" name="date_submitted" class="form-control" required>
            </div>
        </div>

        <div class="row mb-3">
            <div class="col-md-3">
                <label for="date_received">Date Received:</label>
                <input type="date" id="date_received" name="date_received" class="form-control">
            </div>
            <div class="col-md-3">
                <label for="date_of_release">Date of Release:</label>
                <input type="date" id="date_of_release" name="date_of_release" class="form-control">
            </div>
        </div>

        <!-- Contact Information -->
        <h4>CONTACT INFORMATION</h4>
        <div class="row mb-3">
            <div class="col-md-10">
                <label for="address">Address:</label>
                <textarea id="address" name="address" rows="3" class="form-control" required></textarea>
            </div>
        </div>

        <div class="row mb-3">
            <div class="col-md-5">
                <label for="contact_no">Contact No.:</label>
                <input type="text" id="contact_no" name="contact_no" class="form-control" required>
            </div>
            <div class="col-md-5">
                <label for="email">Email Address:</label>
                <input type="email" id="email" name="email" class="form-control" required>
            </div>
        </div>

        <!-- Check if Graduated -->
        <h4>GRADUATION</h4>
        <div class="row mb-3">
            <div class="col-md-3">
            <label>Yes, I graduated on:</label>
            <input type="date" id="graduation_date" name="graduation_date" class="form-control">
            </div>
            <div class="col-md-3">
            <label>No, I last attended DMMC IHS on Term:</label>
            <input type="text" id="last_term" name="last_term" class="form-control">
            </div>
            <div class="col-md-3">
                <label>SY:</label>
                <input type="text" id="last_sy" name="last_sy" class="form-control">
            </div>
        </div>
        <h4>CHANGE OF NAME</h4>
        <div class="row mb-3">
            <div class="col-md-3">
                <label>Have you ever filed for a change/correction of name w/ DMMC IHS?</label><br>
                <label><input type="radio" name="name_change" value="yes" onclick="toggleOriginalName(true)"> YES</label>
                <label><input type="radio" name="name_change" value="no" onclick="toggleOriginalName(false)"> NO</label>
            </div>
        </div>
        
        <div class="row mb-3" >
            <div class="col-md-3" id="originalNameField" style="display: none;">
                <label for="original_name">Original Name:</label>
                <input type="text" id="original_name" name="original_name" class="form-control">
            </div>
        </div>
        <!-- Manner of Releasing -->
        <h4>MANNER OF RELEASING</h4>
        <div class="row mb-3">
            <div class="col-md-5">
                <label><input type="radio" name="release_method" value="personal" required> I will personally pick it up</label>
            
                <label><input type="radio" name="release_method" value="representative" required> I will send my representative to pick it up</label>
                <p>(Please attach authorization letter & valid ID of the requisitioner)</p>
            </div>
        </div>

        <!-- Document Type -->
        <h4>DOCUMENT TYPE</h4>
    <div id="document-request-section">
        <!-- Document Type Checkboxes -->
        <div class="row mb-3">
            <div class="col-md-5">
                <label>Select Document Type:</label><br>
                <label><input type="checkbox" name="documents[]" value="transcript" onclick="toggleDocumentFields('transcript')"> Transcript of Records</label><br>
                <label><input type="checkbox" name="documents[]" value="certification" onclick="toggleDocumentFields('certification')"> Certification</label><br>
                <label><input type="checkbox" name="documents[]" value="certified_true_copy" onclick="toggleDocumentFields('certified_true_copy')"> Certified True Copy</label><br>
                <label><input type="checkbox" name="documents[]" value="others" onclick="toggleDocumentFields('others')"> Others</label><br>
            </div>
        </div>

        <!-- Dynamic Fields for Number of Copies and Amount -->
        <div id="document_fields">
            <!-- Each document type will add fields here dynamically -->
        </div>

        <!-- Total Amount Calculation -->
        <div class="row mb-3">
            <div class="col-md-5">
                <label for="total_amount">Total Amount:</label>
                <input type="number" id="total_amount" name="total_amount" class="form-control" readonly>
            </div>
        </div>
    </div>

        <!-- Claims Stub -->
        <h4>CLAIMS STUB</h4>
        <div class="row mb-3">
            <div class="col-md-10">
                <label for="student_name">Student's Name:</label>
                <input type="text" id="student_name" name="student_name" class="form-control" required>
            </div>
        </div>

        <div class="row mb-3">
            <div class="col-md-5">
                <label for="course">Course:</label>
                <input type="text" id="course" name="course" class="form-control" required>
            </div>
            <div class="col-md-5">
                <label for="student_no">Student No.:</label>
                <input type="text" id="student_no" name="student_no" class="form-control" required>
            </div>
        </div>

        <div class="row mb-3">
            <div class="col-md-3">
                <label for="amount_paid">Amount Paid:</label>
                <input type="number" id="amount_paid" name="amount_paid" class="form-control" required>
            </div>
            <div class="col-md-3">
                <label for="or_no">OR No.:</label>
                <input type="text" id="or_no" name="or_no" class="form-control" required>
            </div>
            <div class="col-md-3">
                <label for="request_for">Request for:</label>
                <input type="text" id="request_for" name="request_for" class="form-control" required>
            </div>
        </div>

        <div class="row mb-3">
            <div class="col-md-3">
                <label for="released_date">Released Date:</label>
                <input type="date" id="released_date" name="released_date" class="form-control">
            </div>
            <div class="col-md-7">
                <label for="remarks">Remarks:</label>
                <input type="text" id="remarks" name="remarks" class="form-control">
            </div>
        </div>

        

        <div class="row mb-3">
            
            <div style="padding-top: 10px;">
                <button type="submit" class="btn btn-primary">Submit Application</button>
            </div>
            </div>
        </div>
    </form>
</div>
<script>
    function toggleOriginalName(show) {
        document.getElementById('originalNameField').style.display = show ? 'block' : 'none';
    }

      // Function to add or remove fields for selected document types
      function toggleDocumentFields(docType) {
        const fieldContainer = document.getElementById('document_fields');
        const existingFields = document.getElementById(`${docType}_fields`);
        
        if (!existingFields) {
            // Create fields if they don't exist
            const fields = document.createElement('div');
            fields.id = `${docType}_fields`;
            fields.classList.add('row', 'mb-3');
            fields.innerHTML = `
                <div class="col-md-5">
                    <label for="${docType}_num_copies">No. of Copies for ${docType.charAt(0).toUpperCase() + docType.slice(1).replace(/_/g, ' ')}:</label>
                    <input type="number" id="${docType}_num_copies" name="${docType}_num_copies" class="form-control" oninput="calculateTotal()">
                </div>
                <div class="col-md-5">
                    <label for="${docType}_amount">Amount for ${docType.charAt(0).toUpperCase() + docType.slice(1).replace(/_/g, ' ')}:</label>
                    <input type="number" id="${docType}_amount" name="${docType}_amount" class="form-control" oninput="calculateTotal()">
                </div>
            `;
            fieldContainer.appendChild(fields);
        } else {
            // Remove fields if they already exist
            fieldContainer.removeChild(existingFields);
            calculateTotal();
        }
    }

    // Function to calculate the total amount based on selected document types
    function calculateTotal() {
        let total = 0;
        document.querySelectorAll('[id$="_amount"]').forEach(input => {
            total += parseFloat(input.value) || 0;
        });
        document.getElementById('total_amount').value = total.toFixed(2);
    }
</script>
@endsection