<div class="modal fade" id="authModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal">
                    <i class="fa fa-times" aria-hidden="true"></i>
                </button>
            </div>

            <div class="modal-body">
                <div class="container">
                    <div class="row align-items-center">

                        <!-- LEFT -->
                        <div class="col-lg-4 d-none d-lg-block">
                            <div class="log-left-sde">
                                <img src="assets/images/logo.png" class="img-fluid">
                                <h3>Sport Combine Sport</h3>
                            </div>
                        </div>

                        <!-- RIGHT -->
                        <div class="col-lg-8">
                            <div class="log-tabs-main">

                                <!-- TABS -->
                                <ul class="nav nav-tabs" id="myTab" role="tablist">
                                    <li class="nav-item">
                                        <button class="nav-link active" id="login-tab" data-bs-toggle="tab"
                                            data-bs-target="#login-tab-pane" type="button">
                                            Login
                                        </button>
                                    </li>
                                    <li class="nav-item">
                                        <button class="nav-link" id="register-tab" data-bs-toggle="tab"
                                            data-bs-target="#register-tab-pane" type="button">
                                            Register
                                        </button>
                                    </li>
                                </ul>

                                <!-- CONTENT -->
                                <div class="tab-content mt-3">

                                    <!-- LOGIN -->
                                    <div class="tab-pane fade show active" id="login-tab-pane">
                                        <h2>Welcome Back!</h2>
                                        <p>Please Enter Your Credentials To Access Your Account.</p>
                                        <form method="POST" action="auth.php" id="loginForm">
                                            <input type="hidden" name="login" value="1">
                                            <div class="form-group">
                                                <label for="email">Email</label>
                                                <input type="email" name="email" id="email"
                                                    placeholder="Enter Your Email" required>
                                            </div>
                                            <div class="form-group">
                                                <label for="password">password</label>
                                                <input type="password" id="password" name="password"
                                                    placeholder="••••••••" required>
                                            </div>
                                            <div id="login-error"></div>
                                            <button type="submit">Login</button>
                                        </form>
                                    </div>

                                    <!-- SIGNUP -->
                                    <div class="tab-pane fade" id="register-tab-pane">
                                        <h2>New Account</h2>
                                        <p>Create Your Account To Start The Journey.</p>
                                        <form method="POST" action="auth.php" id="signupForm">
                                            <input type="hidden" name="signup" value="1">
                                            <div class="form-group">
                                                <label for="name">Name</label>
                                                <input type="text" name="name" id="name" placeholder="Enter Your Name"
                                                    required>
                                            </div>
                                            <div class="form-group">
                                                <label for="email">Email</label>
                                                <input type="email" name="email" id="email"
                                                    placeholder="Enter Your Email" required>
                                            </div>
                                            <div class="form-group">
                                                <label for="phone">Phone Number <span>(Optional)</span></label>
                                                <input type="tel" name="phone" id="phone"
                                                    placeholder="+1 (555) 123-4567" minlength="11" maxlength="11"
                                                    pattern="[0-9]{11}">

                                            </div>
                                            <div class="form-group">
                                                <label for="password">password</label>
                                                <input type="password" id="password" name="password"
                                                    placeholder="••••••••" required>
                                            </div>
                                            <div id="signup-error"></div>
                                            <button type="submit" name="signup">Sign Up</button>
                                        </form>
                                    </div>

                                </div>

                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<script>
function handleFormSubmit(formId, type, msgDivId) {
    const form = document.getElementById(formId);

    if (!form) return;

    form.addEventListener("submit", function(e) {
        e.preventDefault();

        let formData = new FormData(this);
        formData.append(type, true);

        let msgDiv = document.getElementById(msgDivId);
        msgDiv.innerHTML = "";

        fetch("auth.php", {
                method: "POST",
                body: formData
            })
            .then(res => res.text())
            .then(text => {
                console.log("RAW RESPONSE:", text);

                let data;

                try {
                    data = JSON.parse(text);
                } catch (err) {
                    msgDiv.innerHTML =
                        `<div style="color: red; font-weight: bold; margin-bottom: 10px;">
                            Server error (invalid JSON)
                        </div>`;
                    console.error("JSON PARSE ERROR:", err);
                    return;
                }

                // ✅ SUCCESS
                if (data.status && data.status === "success") {
                    msgDiv.innerHTML =
                        `<div style="color: green; font-weight: bold; margin-bottom: 10px;">
                            ${data.message}
                        </div>`;

                    setTimeout(() => {
                        let modalEl = document.getElementById('authModal');
                        if (modalEl) {
                            let modal = bootstrap.Modal.getInstance(modalEl);
                            if (modal) modal.hide();
                        }

                        location.reload();
                    }, 300);

                }
                // ❌ ERROR
                else {
                    msgDiv.innerHTML =
                        `<div style="color: red; font-weight: bold; margin-bottom: 10px;">
                            ${data.message || "Something went wrong"}
                        </div>`;
                }
            })
            .catch(err => {
                msgDiv.innerHTML =
                    `<div style="color: red; font-weight: bold; margin-bottom: 10px;">
                        Network error! Please try again.
                    </div>`;
                console.error("FETCH ERROR:", err);
            });
    });
}

// 🔥 Apply on both forms
handleFormSubmit("loginForm", "login", "login-error");
handleFormSubmit("signupForm", "signup", "signup-error");
</script>


<style>
/* PopUp Modal Css Start Here */
.modaL_order {}

#authModal .modal-content {
    background: transparent;
    border-radius: 15px;
    border: none;
    position: relative;
    z-index: 1;
}

#authModal .modal-content .btn-close {
    position: absolute;
    right: -10px;
    top: -12px;
    background: linear-gradient(to bottom, #c4851e 0%, #ecc75c 50%, #c4851e 100%);
    width: 25px;
    height: 25px;
    line-height: 16px;
    border: #001d35;
    border-radius: 100px;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    z-index: 4;
    opacity: 1;
}

#authModal .modal-content .btn-close i {
    color: #fff;
    font-weight: 600;
}

#authModal .modal-dialog {
    max-width: 800px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0px auto;
}

#authModal .modal-header {
    padding: 0px;
    border-bottom: none;
}

#authModal .modal-body {
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    display: flex;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    animation: fadeIn 0.8s ease-out;
    background: #c4851e1a;
    padding: 25px 15px;
}

#authModal .modal-body .log-left-sde {}

#authModal .modal-body .log-left-sde img {
    width: 50%;
    margin: 0 auto 10px;
    display: flex;
}

#authModal .modal-body .log-left-sde h3 {
    background: linear-gradient(to bottom, #c4851e 0%, #ecc75c 50%, #c4851e 100%);
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 19px;
    line-height: 26px;
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
}

#authModal .modal-body .log-tabs-main {}

#authModal .modal-body .log-tabs-main .nav-tabs {
    border: none;
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    margin-bottom: 30px;
    padding: 5px 10px;
    width: fit-content;
}

#authModal .modal-body .log-tabs-main .nav-tabs li button {
    padding: 7px 20px;
    width: 170px;
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
    border-radius: 10px;
    font-weight: 600;
    transition: 0.3s;
}

#authModal .modal-body .log-tabs-main .nav-tabs li button.active {
    position: relative;
    z-index: 1;
    color: #1a1917;
    background: linear-gradient(to bottom, #c4851e 0%, #ecc75c 50%, #c4851e 100%);
    /* animation: slideIn 0.4s forwards; */
}

#authModal .modal-body .log-tabs-main .tab-pane {}

#authModal .modal-body .log-tabs-main .tab-pane h2 {
    background: linear-gradient(to bottom, #c4851e 0%, #ecc75c 50%, #c4851e 100%);
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 37px;
    line-height: 45px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0;
}

#authModal .modal-body .log-tabs-main .tab-pane p {
    color: white;
    font-size: 15px;
    line-height: 22px;
}

#authModal .modal-body .log-tabs-main .tab-pane form {}

#authModal .modal-body .log-tabs-main .tab-pane form .form-group {}

#authModal .modal-body .log-tabs-main .tab-pane form .form-group label {
    background: linear-gradient(to bottom, #c4851e 0%, #ecc75c 50%, #c4851e 100%);
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 19px;
    line-height: 26px;
    margin-bottom: 5px;
    text-transform: capitalize;
}


#authModal .modal-body .log-tabs-main .tab-pane form input {
    width: 100%;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: white;
    outline: none;
    margin-bottom: 15px;
}

#authModal .modal-body .log-tabs-main .tab-pane form inputfocus {
    border-color: #c4851e;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.1);
}

#authModal .modal-body .log-tabs-main .tab-pane form button {
    width: 100%;
    background: linear-gradient(to bottom, #F5C542 0%, #E0A92D 50%, #B97A1B 100%);
    border: 2px solid #E0A92D;
    color: white;
    font-size: 21px;
    line-height: 30px;
    padding: 10px 0px;
    border-radius: 7px;
    transition: .03s all ease-in;
}

#authModal .modal-body .log-tabs-main .tab-pane form button:hover {
    background: transparent;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

#authModal .modal-body .log-tabs-main .tab-pane.show {
    animation: slideIn 0.4s forwards;
}

.modal.show {
    padding-right: 0px !important;
}

/* PopUp Modal Css End Here */
@media only screen and (min-width: 768px) and (max-width: 991px) {

    /* PopUp Modal Responsive Css Start Here */

    #authModal .modal-content .btn-close {
        right: -4px;
        top: -33px;
        border-radius: 5px 5px 0px 0px;
    }

    /* PopUp Modal Responsive Css End Here */
}

@media only screen and (min-width: 521px) and (max-width: 767px) {

    /* PopUp Modal Responsive Css Start Here */
    #authModal .modal-dialog {
        max-width: 500px !important;
        margin: 100px auto 0;
    }

    #authModal .modal-content .btn-close {
        right: -4px;
        top: -33px;
        border-radius: 5px 5px 0px 0px;
    }

    /* PopUp Modal Responsive Css End Here */
}

@media only screen and (min-width: 300px) and (max-width: 520px) {

    /* PopUp Modal Responsive Css Start Here */
    #authModal .modal-dialog {
        max-width: 100% !important;
        margin: 100px 20px 0;
    }

    #authModal .modal-content .btn-close {
        right: -4px;
        top: -33px;
        border-radius: 5px 5px 0px 0px;
    }

    /* PopUp Modal Responsive Css End Here */
}
</style>