<?php include "template/header.php" ?>

<?php if ($mobile): ?>
    <div style="padding: 20px 0; background-color:var(--secondary-color);">
        <div
            style="width: 90%; margin: 0 auto 10px auto; color: transparent !important; -webkit-background-clip: text; background-image: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #e99c05 0%, #f4ae00 8%, #f8bf33 25%, #f8ce19 62.5%, #ffdc02 100%); font-family: Teko-SemiBold; text-align: center; font-size: 24px;">
            MASUK
        </div>

        <div class="error-check-mobile"></div>
        <form method="post" action="./function/proses_login.php" class="form-login" style="width: 90%; margin: 0 auto;">
            <input type="hidden" autocomplete="off">
            <div style="opacity: 0.66; font-size: 13px; margin-bottom: 4px;">
                Username
            </div>

            <div style="margin-bottom: 12px;">
                <input type="text" name="username" class="form-control" placeholder="Username">
                <div class="error-username-mobile" style="color: red; font-size: 13px;"></div>
            </div>

            <div style="opacity: 0.66; font-size: 13px; margin-bottom: 4px;">
                Password
            </div>

            <div style="margin-bottom: 12px;">
                <input type="password" name="password" class="form-control" placeholder="Password">
                <div class="error-password-mobile" style="color: red; font-size: 13px;"></div>
            </div> 
            
            
            <div style="opacity: 0.66; font-size: 13px; margin-bottom: 4px;">
                Kode Verifikasi
            </div>
            <div style="margin-bottom: 12px;">
                <div style="display: flex;">
                    <div style="margin-right: 8px;">
                        <input type="text" name="captcha" class="form-control" placeholder="Kode Verifikasi" maxlength="4">
                    </div>
                    <img src="captcha/default.php" onclick="this.src='captcha/default.php?'+Math.random()" id="captchaCode"
                        alt="" class="captcha"
                        style="margin: auto 0; border: 2px solid #FFD700; border-radius: 4px; cursor: pointer;">
                    <a rel="nofollow" href="javascript:;" class="refresh-captcha"
                        onclick="document.getElementById('captchaCode').src='captcha/default.php?'+Math.random()"
                        style="margin: auto 5px;"><i class="fas fa-sync-alt"
                            style="color: #FFD700; font-size: 20px;"></i></a>
                </div>
                <div class="error-captcha" style="color: red; font-size: 13px; margin-top: 6px;"></div>
            </div>

            <div style="margin-top: 20px;">
                <button type="submit" class="glowing2 btn btn-primary submit"
                    style="background-image: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #e99c05 0%, #f4ae00 8%, #f8bf33 25%, #f8ce19 62.5%, #ffdc02 100%); color: #fff; border: 0; width: 100%; font-weight: bold; border-radius: 25px; padding: 10px 0;">
                    Masuk
                </button>
            </div>
        </form>

        <div style="margin: 20px auto 0 auto; text-align: center;">
            <div style="opacity: 0.78; font-size: 13px;">Belum punya akun?</div>
            <a href="register.php" style="color: #FFD700; font-weight: bold;">
                <u>Daftar sekarang</u>
            </a>
        </div>
    </div>
<?php else: ?>
    <div style="margin-top: 170px;">
        <div class="background-top" style="padding: 30px 0 50px 0;">
            <div style="width: 95%; margin: 0 auto; max-width: 1280px;">
                <div
                    style="margin-bottom: 20px; color: var(--primary-color); font-family: Teko-SemiBold; font-size: 24px; text-align: center;">
                    MASUK
                </div>

                <div class="error-check-mobile"></div>
                <form method="post" action="./function/proses_login.php" class="form-login"
                    style="width: 50%; margin: 0 auto; background-color: var(--secondary-color); padding: 3% 8%;">
                    <table style="width: 100%;">
                        <tbody>
                            <tr>
                                <td style="padding-bottom: 20px; font-size: 14px;">Username</td>
                                <td style="padding-bottom: 20px;">
                                    <input type="text" name="username" class="form-control" placeholder="Username">
                                    <div class="error-username-mobile" style="color: red; font-size: 14px;"></div>
                                </td>
                            </tr>
                            <tr>
                                <td style="padding-bottom: 20px; font-size: 14px;">Password</td>
                                <td style="padding-bottom: 20px;">
                                    <input type="password" name="password" class="form-control" placeholder="Password">
                                    <div class="error-password-mobile" style="color: red; font-size: 14px;"></div>
                                </td>
                            </tr>
                            <!-- Kode Verifikasi -->
                            <tr>
                                <td colspan="2" style="padding-bottom: 20px;">
                                    <div style="opacity: 0.66; font-size: 13px; margin-bottom: 4px;">Kode Verifikasi</div>
                                    <div style="display: flex; align-items: center;">
                                        <div style="margin-right: 8px;">
                                            <input type="text" name="captcha" class="form-control" placeholder="Kode Verifikasi" maxlength="4">
                                        </div>
                                        <img src="captcha/default.php" onclick="this.src='captcha/default.php?'+Math.random()" id="captchaCode"
                                            alt="" class="captcha"
                                            style="margin-right: 8px; border: 2px solid #FFD700; border-radius: 4px; cursor: pointer;">
                                        <a rel="nofollow" href="javascript:;" class="refresh-captcha"
                                            onclick="document.getElementById('captchaCode').src='captcha/default.php?'+Math.random()"
                                            style="text-decoration: none;"><i class="fas fa-sync-alt"
                                                style="color: #FFD700; font-size: 20px;"></i></a>
                                    </div>
                                    <div class="error-captcha" style="color: red; font-size: 13px; margin-top: 6px;"></div>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" style="margin-top: 20px; text-align: center;">
                                    <input type="submit" class="btn btn-primary submit" value="Masuk"
                                        style="background-color: var(--primary-color); color: #001739; border: 0; width: 50%; font-weight: bold; border-radius: 6px; padding: 10px 0;">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </form>

                <div style="margin: 20px auto 0 auto; text-align: center;">
                    <div style="opacity: 0.78; font-size: 13px;">Belum punya akun?</div>
                    <a href="register" style="color: var(--primary-color); font-weight: bold;">
                        <u>Daftar sekarang</u>
                    </a>
                </div>
            </div>
        </div>
    </div>
<?php endif; ?>

<?php include "template/footer.php" ?>