<style>
    .result-container {
        max-width: 400px;
        margin: 20px auto;
        background: white;
        /* padding: 20px; */
        border-radius: 5px;
        /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
    }
    /* Scoped styles for the registration form */
    .registration-container {
        max-width: 400px;
        margin: 20px auto;
        background: white;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    .registration-title {
        text-align: center;
        font-size: 24px;
    }
    .registration-input {
        width: 100%;
        padding: 10px;
        margin: 10px 0;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box; /* Include padding in width */
    }
    .registration-button {
        width: 100%;
        padding: 10px;
        background-color: #c22126;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
    }
    .registration-button:hover {
        background-color: #c22126;
    }
    .registration-button:disabled {
        background-color: #6c757d; /* Grey out when disabled */
        cursor: not-allowed;
    }
    .registration-result {
        margin-top: 20px;
        padding: 10px;
        border-radius: 5px;
        display: none;
    }
    table, th, td {
        border: 1px solid black;
    }
    th, td {
        padding: 10px;
    }
    .registration-success {
        background-color: #d4edda;
        color: #155724;
    }
    .registration-error {
        background-color: #f8d7da;
        color: #721c24;
    }

    /* Responsive Styles */
    @media (max-width: 480px) {
        .registration-container {
            padding: 15px;
        }
        .registration-button {
            font-size: 14px;
        }
    }
</style>
<!-- Page Header Start -->
<div class="container-fluid page-header py-5 mb-5">
    <div class="container py-5">
        <h1 class="display-3 text-white mb-3 animated slideInDown">Verification</h1>
    </div>
</div>
<!-- Page Header End -->

<!-- Verification Start -->
<div class="container-xxl py-5 wow fadeInUp" data-wow-delay="0.1s">
    <div class="container text-center">
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <form class="form-horizontal row registration-form " id="apply-form" method="post" action="<?= $this->Url->build(['controller' => 'Student', 'action' => 'verification']) ?>">
                <div class="registration-container">
                    <h2 class="registration-title">Check Registration Status</h2>
                    <input type="text" class="registration-input" name="reference_number" id="referenceNumber" placeholder="Enter your Reference Number" required />
                    <input type="text" class="registration-input" name="passport_number" id="passportNumber" placeholder="Enter your Passport Number" required />
                    <button class="registration-button" id="checkBtn">Check Status</button>
                    <div id="error" class="registration-result"></div>
                    <div id="result_msg" class="registration-result"></div>
                </div>
                </form>
            </div>
            <div class="col-lg-6">
                <?php if(!empty($tudent)){?>
                <div class="result-container">
                    <div id="result" class="registration-result">
                        <table style="width:100%">
                            <tbody style="text-align:left">
                            <tr>

                                <th>Ref. No.:</th>
                                <td><?php $student['reference_number'] ?></td>
                            </tr>
                            <tr>
                                <th>Name:</th>
                                <td><?php $student['first_name'] ?></td>
                            </tr>
                            <tr>
                                <th>Surname:</th>
                                <td><?php $student['surname'] ?></td>
                            </tr>

                            <tr>
                                <th>Nationality:</th>
                                <td><?php $student['nationality'] ?></td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
                <?php }?>
            </div>
        </div>
    </div>
</div>
<!-- Verification End -->