<!DOCTYPE html>
<html lang="en">

<head>
    <?php include("include/meta.php");?>
    <?php include("include/css.php");?>
</head>

<body>
    <!-- header area -->
    <?php include("include/header.php");?>
    <!-- header area end -->

    <?php
    $admission_sql = mysqli_query($con, "SELECT * FROM data_table WHERE up_by = $x && page_type = 'admission' && recycle = '1' ORDER BY id DESC");
    if($admission_row = mysqli_fetch_assoc($admission_sql)){}
    ?>

    <main class="main">

        <!-- breadcrumb -->
        <div class="site-breadcrumb" style="background: url(./login/upload/<?= $admission_row["image_thumbnail"];?>)">
            <div class="container">
                <h2 class="breadcrumb-title">Admission Form</h2>
                <ul class="breadcrumb-menu">
                    <li><a href="index.php">Home</a></li>
                    <li class="active">Admission Form</li>
                </ul>
            </div>
        </div>
        <!-- breadcrumb end -->


        <!-- application -->
        <div class="application py-120">
            <div class="container">
                <div class="application-form">
                    <h3 class="text-center">Admission Form</h3>
                    <form action="submit_admission.php" method="POST" enctype="multipart/form-data">
                        <div class="row">
                            <h5 class="mb-3">Student Information</h5>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label>Name</label>
                                    <input type="text" class="form-control" name="stu_name"
                                        placeholder="Your First Name">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label>Date Of Birth</label>
                                    <input type="date" class="form-control" name="stu_dob">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label>Blood Group</label>
                                    <select class="form-select" name="stu_blood">
                                        <option value="">Choose Blood Group</option>
                                        <option value="A+">A+</option>
                                        <option value="A-">A-</option>
                                        <option value="B+">B+</option>
                                        <option value="B-">B-</option>
                                        <option value="O+">O+</option>
                                        <option value="O-">O-</option>
                                        <option value="AB+">AB+</option>
                                        <option value="AB-">AB-</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label>
                                        Nationality
                                        <span id="otherNationalityLabel" class="text-danger" style="display:none;">
                                            (Other than Indian)
                                        </span>
                                    </label>

                                    <!-- Default select -->
                                    <select class="form-select" name="stu_nationality" id="stu_nationality">
                                        <option value="Indian">Indian</option>
                                        <option value="Others">Others</option>
                                    </select>

                                    <!-- Hidden input for custom nationality -->
                                    <input type="text" class="form-control mt-2" name="stu_nationality_other"
                                        id="stu_nationality_other" placeholder="Enter your nationality"
                                        style="display:none;">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label>Religion</label>
                                    <input type="text" class="form-control" name="stu_religion" placeholder="Religion">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label>Gender</label>
                                    <select class="form-select" name="stu_gender">
                                        <option value="">Choose Gender</option>
                                        <option value="Male">Male</option>
                                        <option value="Female">Female</option>
                                        <option value="Others">Others</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label>Aadhar Number</label>
                                    <input type="number" class="form-control" name="stu_aadhar"
                                        placeholder="Aadhar card number" inputmode="numeric"
                                        oninput="this.value = this.value.replace(/\D/g,'').slice(0,12)">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label>Student Photo</label>
                                    <input type="file" class="form-control" name="stu_photo" id="stu_photo"
                                        accept="image/*">
                                    <div id="photohelp" class="form-text">PP Size, Max 1MB.</div>
                                    <div id="photoPreview" class="mt-2"></div>
                                </div>
                            </div>

                            <h5 class="mt-4 mb-3">Guardian Information</h5>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label>Father's Name</label>
                                    <input type="text" class="form-control" name="father_name">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label>Father's Occupation</label>
                                    <input type="text" class="form-control" name="father_occupation">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label>Mother's Name</label>
                                    <input type="text" class="form-control" name="mother_name">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label>Mother's Occupation</label>
                                    <input type="text" class="form-control" name="mother_occupation">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label>Phone Number</label>
                                    <input type="text" class="form-control" name="guardian_phone">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label>Email Address</label>
                                    <input type="email" class="form-control" name="guardian_email">
                                </div>
                            </div>

                            <h5 class="mt-4 mb-3">Address Information</h5>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label>Permanent Address</label>
                                    <input type="text" class="form-control" name="permanent_address">
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label>Present Address</label>
                                    <input type="text" class="form-control" name="present_address">
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label>District</label>
                                    <input type="text" class="form-control" name="district">
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label>State</label>
                                    <input type="text" class="form-control" name="state">
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label>Pin Code</label>
                                    <input type="text" class="form-control" name="pincode">
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label>Emergency Contact No</label>
                                    <input type="text" class="form-control" name="emergency_contact">
                                </div>
                            </div>

                            <h5 class="mt-4 mb-3">Admission Details</h5>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label>Class For Admission</label>
                                    <input type="text" class="form-control" name="admission_class">
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label>Previous School Attended</label>
                                    <input type="text" class="form-control" name="previous_school">
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label>Do you want hostel accommodation?</label><br>
                                    <input type="radio" name="hostel" value="Yes"> Yes
                                    <input type="radio" name="hostel" value="No"> No
                                </div>
                            </div>

                            <h5 class="mt-4 mb-3">Medical Information</h5>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label>Medical Conditions</label><br>
                                    <input type="radio" name="medical_condition" value="Yes" id="med_yes"> Yes
                                    <input type="radio" name="medical_condition" value="No" id="med_no"> No
                                </div>
                            </div>

                            <!-- Hidden details div -->
                            <div class="col-md-9" id="medical_details_div" style="display:none;">
                                <div class="form-group">
                                    <label>Please specify the condition</label>
                                    <input type="text" class="form-control" name="medical_condition_details"
                                        placeholder="Enter details">
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label>Allergies</label>
                                    <input type="text" class="form-control" name="allergies">
                                </div>
                            </div>

                            <h5 class="mt-4 mb-3">Consent & Agreement</h5>
                            <div class="col-lg-12">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="agree" name="agree" value="1">
                                    <label class="form-check-label" for="agree">
                                        I certify that the above information is correct. <a href="#">Privacy Policy</a>.
                                    </label>
                                </div>
                            </div>

                            <h5 class="mt-4 mb-3">Documents Submitted</h5>

                            <div class="col-lg-4">
                                <div class="form-check">
                                    <input class="form-check-input doc-check" type="checkbox" id="birthCertCheck">
                                    <label class="form-check-label" for="birthCertCheck">Birth Certificate</label>
                                    <input type="file" class="form-control mt-2 d-none doc-input" id="birthCertFile"
                                        name="birth_certificate" accept="image/*,.pdf">
                                    <div id="birthCertPreview" class="mt-2"></div>
                                </div>
                            </div>

                            <div class="col-lg-4">
                                <div class="form-check">
                                    <input class="form-check-input doc-check" type="checkbox" id="tcCheck">
                                    <label class="form-check-label" for="tcCheck">Transfer Certificate (TC)</label>
                                    <input type="file" class="form-control mt-2 d-none doc-input" id="tcFile"
                                        name="transfer_certificate" accept="image/*,.pdf">
                                    <div id="tcPreview" class="mt-2"></div>
                                </div>
                            </div>

                            <div class="col-lg-4">
                                <div class="form-check">
                                    <input class="form-check-input doc-check" type="checkbox" id="guardianIdCheck">
                                    <label class="form-check-label" for="guardianIdCheck">Parent/Guardian ID
                                        Proof</label>
                                    <input type="file" class="form-control mt-2 d-none doc-input" id="guardianIdFile"
                                        name="guardian_id" accept="image/*,.pdf">
                                    <div id="guardianIdPreview" class="mt-2"></div>
                                </div>
                            </div>

                            <div class="col-lg-4">
                                <div class="form-check">
                                    <input class="form-check-input doc-check" type="checkbox" id="reportCardCheck">
                                    <label class="form-check-label" for="reportCardCheck">Report Card Of Last
                                        Class</label>
                                    <input type="file" class="form-control mt-2 d-none doc-input" id="reportCardFile"
                                        name="report_card" accept="image/*,.pdf">
                                    <div id="reportCardPreview" class="mt-2"></div>
                                </div>
                            </div>

                            <div class="col-lg-4">
                                <div class="form-check">
                                    <input class="form-check-input doc-check" type="checkbox" id="aadharCheck">
                                    <label class="form-check-label" for="aadharCheck">Student Aadhar Card</label>
                                    <input type="file" class="form-control mt-2 d-none doc-input" id="aadharFile"
                                        name="student_aadhar" accept="image/*,.pdf">
                                    <div id="aadharPreview" class="mt-2"></div>
                                </div>
                            </div>


                            <div class="col-lg-4">
                                <div class="form-group text-end">
                                    <label>Upload Signature</label>
                                    <input type="file" class="form-control" name="signature" id="signature"
                                        accept="image/*">
                                    <div id="signaturePreview" class="mt-2"></div>
                                </div>
                            </div>

                            <div class="col-lg-12 text-center">
                                <button type="submit" class="theme-btn" name="submit">Submit Application</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
        <!-- application end-->

    </main>


    <!-- footer area -->
    <?php include("include/footer.php");?>
    <!-- footer area end -->


    <!-- js -->
    <?php include("include/js.php");?>


    <script>
    document.getElementById("stu_photo").addEventListener("change", function() {
        const preview = document.getElementById("photoPreview");
        preview.innerHTML = "";
        const file = this.files[0];
        if (file) {
            let img = document.createElement("img");
            img.src = URL.createObjectURL(file);
            img.width = 120;
            img.classList.add("me-2", "mb-2", "border", "p-1");
            preview.appendChild(img);
        }
    });

    document.getElementById("signature").addEventListener("change", function() {
        const preview = document.getElementById("signaturePreview");
        preview.innerHTML = "";
        const file = this.files[0];
        if (file) {
            let img = document.createElement("img");
            img.src = URL.createObjectURL(file);
            img.width = 120;
            img.classList.add("border", "p-1");
            preview.appendChild(img);
        }
    });

    function setupDocUpload(checkId, fileId, previewId) {
        const check = document.getElementById(checkId);
        const fileInput = document.getElementById(fileId);
        const preview = document.getElementById(previewId);

        // Show/hide file input when checkbox changes
        check.addEventListener("change", function() {
            if (this.checked) {
                fileInput.classList.remove("d-none");
                fileInput.click(); // open file dialog
            } else {
                fileInput.value = "";
                fileInput.classList.add("d-none");
                preview.innerHTML = "";
            }
        });

        // Preview file
        fileInput.addEventListener("change", function() {
            preview.innerHTML = "";
            const file = this.files[0];
            if (file) {
                if (file.type.startsWith("image/")) {
                    let div = document.createElement("div");
                    div.classList.add("position-relative", "d-inline-block", "me-2", "mb-2");

                    let img = document.createElement("img");
                    img.src = URL.createObjectURL(file);
                    img.width = 100;
                    img.classList.add("border", "p-1");

                    let btn = document.createElement("button");
                    btn.innerHTML = "✖";
                    btn.type = "button";
                    btn.classList.add("btn", "btn-sm", "btn-danger", "position-absolute", "top-0", "end-0");
                    btn.onclick = () => {
                        fileInput.value = "";
                        preview.innerHTML = "";
                        check.checked = false;
                        fileInput.classList.add("d-none");
                    };

                    div.appendChild(img);
                    div.appendChild(btn);
                    preview.appendChild(div);
                } else {
                    let p = document.createElement("p");
                    p.textContent = "📄 " + file.name;
                    preview.appendChild(p);
                }
            }
        });
    }

    // Initialize all
    setupDocUpload("birthCertCheck", "birthCertFile", "birthCertPreview");
    setupDocUpload("tcCheck", "tcFile", "tcPreview");
    setupDocUpload("guardianIdCheck", "guardianIdFile", "guardianIdPreview");
    setupDocUpload("reportCardCheck", "reportCardFile", "reportCardPreview");
    setupDocUpload("aadharCheck", "aadharFile", "aadharPreview");
    </script>


    <script>
    const selectNationality = document.getElementById("stu_nationality");
    const inputNationality = document.getElementById("stu_nationality_other");
    const otherLabel = document.getElementById("otherNationalityLabel");

    // When select changes
    selectNationality.addEventListener("change", function() {
        if (this.value === "Others") {
            this.style.display = "none";
            inputNationality.style.display = "block";
            inputNationality.required = true;
            otherLabel.style.display = "inline";
            inputNationality.focus();
        }
    });

    // When user types/clears input
    inputNationality.addEventListener("input", function() {
        if (this.value.trim() === "") {
            this.style.display = "none";
            this.required = false;
            otherLabel.style.display = "none";

            selectNationality.style.display = "block";
            selectNationality.value = "Indian"; // reset to default
        }
    });
    </script>

    <script>
    document.getElementById("med_yes").addEventListener("change", function() {
        document.getElementById("medical_details_div").style.display = "block";
        document.querySelector("[name='medical_condition_details']").required = true;
    });

    document.getElementById("med_no").addEventListener("change", function() {
        document.getElementById("medical_details_div").style.display = "none";
        document.querySelector("[name='medical_condition_details']").required = false;
        document.querySelector("[name='medical_condition_details']").value = ""; // clear input
    });
    </script>


</body>

</html>