<?php /* Template Name: Login Page */
get_header();
?>

<section class="login">
    <div class="container custom-container login-wrp ">
        <p class="txt top-txt">Don't have an account? <a class="register-link" style="cursor: pointer;">Register</a></p>
        <!-- <div class="top-title-sec">
                <div class="tile-sec"><span><img src="<?php echo get_template_directory_uri(); ?>/img/icon1.svg" alt="icon1"></span> <span>Join Chesed <span>Today</span></span></div>
                <div class="txt">Create your account to rent, stream, and enjoy top-quality films instantly. No subscriptions—<span>just pure movie magic when you want it.</span></div>
            </div>
            <div class="payment">
                <a href="" class="pay-btn"><span class="img"><img src="<?php echo get_template_directory_uri(); ?>/img/icon5.svg" alt="icon2"></span><span>Pay only for what you watch</span></a>
                <a href="" class="pay-btn"><span class="img"><img src="<?php echo get_template_directory_uri(); ?>/img/icon3.svg" alt="icon2"></span><span>Instant access after payment</span></a>
                <a href="" class="pay-btn"><span class="img"><img src="<?php echo get_template_directory_uri(); ?>/img/icon2.svg" alt="icon2"></span><span>Secure payments via Cardknox</span></a>
                <a href="" class="pay-btn"><span class="img"><img src="<?php echo get_template_directory_uri(); ?>/img/icon4.svg" alt="icon2"></span><span>Stream in HD</span></a>
            </div> -->

        <div class="login-inner">
            <ul class="nav nav-tabs" id="authTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="login-tab" data-bs-toggle="tab" data-bs-target="#login"
                        type="button" role="tab">
                        Login
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="signup-tab" data-bs-toggle="tab" data-bs-target="#signup" type="button"
                        role="tab">
                        Signup
                    </button>
                </li>
            </ul>


            <div class="tab-content" id="authTabContent">

                <div class="tab-pane fade show active" id="login" role="tabpanel">
                    <form class="login-form signup-form" id="loginForm" method="POST" autocomplete="off"
                        data-parsley-validate>

                        <div class="row mb-4">
                            <div class="col-md-4 form-grp">
                                <label class="form-label">Email Address</label>
                                <input type="email" class="form-control custom-input" name="email" id="email" required
                                    maxlength="50" data-parsley-trigger="change"
                                    data-parsley-required-message="Email is required."
                                    data-parsley-type-message="Enter a valid email address."
                                    placeholder="Enter your email address">
                            </div>
                            <div class="col-md-4 form-grp">
                                <label class="form-label">Password</label>
                                <input type="password" class="form-control custom-input" name="password"
                                    id="passwordField" required maxlength="20" data-parsley-trigger="change"
                                    data-parsley-minlength="8" data-parsley-maxlength="20"
                                    data-parsley-required-message="Password is required."
                                    data-parsley-minlength-message="Password must be at least 8 characters."
                                    data-parsley-maxlength-message="Password must not exceed 20 characters."
                                    placeholder="Enter your password">
                                <span class="toggle-password eye-icon">
                                    <img src="<?php echo get_template_directory_uri(); ?>/img/eye-ico.svg" alt="eye-ico"
                                        class="show">
                                </span>
                            </div>
                        </div>

                        <div class="forgot-password-sec">
                            <div class="form-check custom-checkbox">
                                <input class="form-check-input" type="checkbox" id="rememberMe">
                                <label class="form-check-label" for="rememberMe">Remember Me</label>
                            </div>
                            <a href="#" data-bs-toggle="modal" data-bs-target="#forgotModal"
                                class="forgot-password">Forgot Password?</a>
                        </div>

                        <div class="register-sec">
                            <p class="txt top-txt"></p>
                            <div class="btn-group">
                                <button type="button" class="btn back-btn">Back to Home</button>
                                <button type="submit" class="btn login-btn">Login</button>

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

                </div>

                <!-- Signup Tab -->
                <div class="tab-pane fade" id="signup" role="tabpanel">
                    <form class="login-form signup-form" id="signupForm" data-parsley-validate autocomplete="off">
                        <div class="row form-sec">
                            <div class="col-md-4 form-grp">
                                <label class="form-label">First Name</label>
                                <input class="form-control custom-input" type="text" autocomplete="off" maxlength="50"
                                    name="first_name" data-parsley-pattern="^[A-Za-z][A-Za-z '’-]*$" required
                                    data-parsley-trigger="change"
                                    data-parsley-required-message="First name is required."
                                    data-parsley-pattern-message="Only alphabets, spaces, hyphens, and apostrophes are allowed."
                                    oninput="validateName(this)" placeholder="Enter your first name">
                            </div>
                            <div class="col-md-4 form-grp">
                                <label class="form-label">Last Name</label>
                                <input class="form-control custom-input" type="text" autocomplete="off" maxlength="50"
                                    name="last_name" data-parsley-pattern="^[A-Za-z][A-Za-z '’-]*$" required
                                    data-parsley-trigger="change" data-parsley-required-message="Last name is required."
                                    data-parsley-pattern-message="Only alphabets, spaces, hyphens, and apostrophes are allowed."
                                    oninput="validateName(this)" placeholder="Enter your last name">
                            </div>
                            <div class="col-md-4 form-grp">
                                <label class="form-label">Email</label>
                                <input class="form-control custom-input" type="email" autocomplete="off" value=""
                                    name="email" id="email" required data-parsley-type="email" maxlength="50"
                                    data-parsley-trigger="change" data-parsley-required-message="Email is required."
                                    data-parsley-type-message="Enter a valid email address."
                                    placeholder="Enter your email address">
                            </div>

                            <div class="col-md-4 form-grp">
                                <label for="phone" class="form-label text-white">Phone Number</label>
                                <div class="d-flex custom-phone-wrapper">
                                    <select class="form-select custom-select-code">
                                        <?php foreach ($country_codes as $code => $label): ?>
                                            <option value="<?php echo esc_attr($code); ?>" <?php selected($code, '+1'); ?>>
                                                <?php echo esc_html($code); ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                    <input class="form-control custom-phone-input" type="text" maxlength="10"
                                        autocomplete="off" name="phone" required data-parsley-pattern="^[0-9]+$"
                                        data-parsley-length="[10,10]" data-parsley-trigger="change"
                                        data-parsley-required-message="Phone number is required."
                                        data-parsley-pattern-message="Only numeric values are allowed."
                                        data-parsley-length-message="Phone number must be exactly 10 digits long."
                                        onkeypress="return event.charCode >= 48 && event.charCode <= 57"
                                        inputmode="numeric" placeholder="Enter your phone number">
                                </div>
                            </div>
                            <div class="col-md-4 form-grp">
                                <label class="form-label">Password</label>
                                <input class="form-control custom-input" type="password" maxlength="20"
                                    autocomplete="new-password" value="" name="password" id="password" required
                                    minlength="8" data-parsley-required-message="Password is required."
                                    data-parsley-length-message="Password must be between 8 and 20 characters long."
                                    data-parsley-minlength-message="Password must be at least 8 characters long."
                                    placeholder="Enter your password">
                                <span class="toggle-password eye-icon">
                                    <img src="<?php echo get_template_directory_uri(); ?>/img/eye-ico.svg" alt="eye-ico"
                                        class="show">
                                </span>
                            </div>
                            <div class="col-md-4 form-grp">
                                <label class="form-label">Confirm Password</label>
                                <input class="form-control custom-input" type="password" maxlength="20"
                                    autocomplete="off" id="confirm_password" name="confirm_password" required
                                    data-parsley-equalto="#password" minlength="8"
                                    data-parsley-required-message="Confirm password is required."
                                    data-parsley-length-message="Password must be between 8 and 20 characters long."
                                    data-parsley-equalto-message="Passwords do not match."
                                    placeholder="Confirm your password">
                                <span class="toggle-password eye-icon">
                                    <img src="<?php echo get_template_directory_uri(); ?>/img/eye-ico.svg" alt="eye-ico"
                                        class="show">
                                </span>
                            </div>
                        </div>



                        <div class="register-sec">
                            <p class="txt"> By signing up, you agree to our <a href="#" class="register-link">Terms &
                                    Conditions </a> and <a href="#" class="register-link">Privacy Policy.</a></p>
                            <div class="btn-group">
                                <button type="button" class="btn back-btn">Back to Home</button>
                                <button class="btn login-btn" id="signUpBtn">Sign Up</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Modal -->
<div class="modal fade otp-modal forgot-modal custom-modal" id="forgotModal" tabindex="-1"
    aria-labelledby="forgotModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-0">
                <button type="button" class="close-btn" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="icon-bx modal-title">
                    <span class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/icon1.svg"></span>
                    <span>Forgot <span class="light">your password</span></span>
                </div>

                <div class="content">
                    Your password will be reset by mail
                </div>

                <form class="login-form" id="forgot-password-form" data-parsley-validate>
                    <div class="form-grp">
                        <label for="email" class="form-label ">Email Address</label>
                        <input class="form-control" type="email" autocomplete="off" value="" name="email"
                            id="user_email" required data-parsley-type="email" maxlength="50"
                            data-parsley-trigger="change" data-parsley-required-message="Email is required."
                            data-parsley-type-message="Enter a valid email address."
                            placeholder="Enter your email address">
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn verify-btn" id="forget_id">Forgot Password</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade otp-modal setpassword custom-modal" id="resetPasswordModal" tabindex="-1"
    aria-labelledby="setpasswordLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-0">
                <button type="button" class="close-btn" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="icon-bx modal-title">
                    <span class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/icon1.svg"></span>
                    <span>Reset <span class="light">Password</span></span>
                </div>


                <form class="login-form" id="reset-password-form" data-parsley-validate>
                    <input type="hidden" id="reset_key" name="reset_key" value="">
                    <input type="hidden" id="user_login" name="user_login" value="">
                    <div class="form-group  position-relative">
                        <label class="form-label">New password</label>
                        <input class="form-control password-input" type="password" maxlength="50" id="new_password"
                            name="new_password" placeholder="Enter your new password" required
                            data-parsley-maxlength="50" data-parsley-required="true" data-parsley-minlength="8"
                            data-parsley-minlength-message="New password must be at least 8 characters long."
                            data-parsley-trigger="keyup" data-parsley-required-message="New password is required."
                            data-parsley-length-message="Password must be between 8 and 20 characters long."
                            data-parsley-errors-container="#password-error">
                        <span class="toggle-password eye-ico">
                            <img src="<?php echo get_template_directory_uri(); ?>/img/eye-ico.svg" alt="eye-ico"
                                class="show">
                            <!-- <img src="img/eye-ico.svg" alt="eye-ico" class="hide"> -->
                        </span>
                    </div>
                    <div class="form-group position-relative">
                        <label class="form-label">Confirm Password</label>
                        <input class="form-control password-input" type="password" maxlength="50" id="confirm_passwords"
                            name="confirm_password" placeholder="Confirm your password" data-parsley-maxlength="50"
                            required data-parsley-required="true" data-parsley-equalto="#new_password"
                            data-parsley-equalto-message="Passwords do not match." data-parsley-trigger="keyup"
                            data-parsley-required-message="Confirm password is required."
                            data-parsley-length-message="Password must be between 8 and 20 characters long."
                            data-parsley-errors-container="#confirm-password-error">
                        <span class="toggle-password eye-ico">
                            <img src="<?php echo get_template_directory_uri(); ?>/img/eye-ico.svg" alt="eye-ico"
                                class="show">
                            <!-- <img src="img/eye-ico.svg" alt="eye-ico" class="hide"> -->
                        </span>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn back-btn" data-bs-dismiss="modal">Back to Home</button>
                        <button type="submit" class="btn submit-btn" id="reset-btn">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<?php get_footer(); ?>
<?php if (isset($_GET['action']) && $_GET['action'] === 'rp' && !empty($_GET['key']) && !empty($_GET['login'])): ?>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            // Assuming you're using Bootstrap Modal
            const resetModal = new bootstrap.Modal(document.getElementById('resetPasswordModal'));
            resetModal.show();
        });
    </script>
<?php endif; ?>