<?php
$settings = settings();
$google_client_id = $this->social_auth->get('google')['client_id'];
$is_google_login = $this->social_auth->get('google')['is_google_login'];
?>
<section class="signupSection modern-login-section"
    style="background-image: url('<?= base_url('assets/frontend/images/login_banner2.jpg') ?>');">
    <div class="modern-login-overlay"></div>
    <div class="container relative z-index-1">
        <div class="row h-full justify-content-center align-items-center">
            <div class="col-md-8 col-lg-6 col-xs-12 position-relative">
                <div class="modern-login-card">
                    <div class="login-header text-center">
                        <h4 class="heading font-weight-bold">
                            <?= !empty(lang('sign_in')) ? lang('sign_in') : "Welcome Back"; ?>
                        </h4>
                        <p class="text-muted">
                            <?= !empty(lang('sign_in_text')) ? lang('sign_in_text') : "Please enter your details to sign in"; ?>
                        </p>
                    </div>

                    <div class="form_content login">
                        <?php if ($this->session->flashdata('verify')) { ?>
                            <div class="single_alert text-left alert alert-success alert-dismissible mb-4"
                                id="successMessage">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                                <h4><i class="icon fa fa-check"></i> <?= lang('success'); ?></h4>
                                <?= $this->session->flashdata('verify'); ?>
                            </div>
                        <?php } ?>
                        <span class="reg_msg"></span>

                        <div class="social-login-area text-center mb-4">
                            <?php if (!empty($google_client_id) && $is_google_login == 1): ?>
                                <?php include VIEWPATH . 'common_layouts/google_login_btn.php'; ?>
                                <div class="login-divider mt-4 mb-4">
                                    <span><?= __('or_sign_in_with_email'); ?></span>
                                </div>
                            <?php endif; ?>
                        </div>

                        <form action="<?= base_url('login/user_login') ?>" class="" method="post" id="user_login_form"
                            autocomplete="off">
                            <?= csrf(); ?>
                            <div class="login_form">
                                <div class="form-group modern-input-group mb-4">
                                    <label class="font-weight-bold text-muted small text-uppercase letter-spacing-1">
                                        <?= !empty(lang('username')) ? lang('username') : "username"; ?> /
                                        <?= !empty(lang('email')) ? lang('email') : "email"; ?>
                                    </label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text modern-addon"><i
                                                    class="fa fa-envelope text-muted"></i></span>
                                        </div>
                                        <input type="text" name="email" class="form-control usermail modern-control"
                                            placeholder="example@email.com">
                                    </div>
                                </div>

                                <div class="form-group modern-input-group mb-4">
                                    <label
                                        class="font-weight-bold text-muted small text-uppercase letter-spacing-1 d-flex justify-content-between align-items-center w-100">
                                        <span><?= !empty(lang('password')) ? lang('password') : "password"; ?></span>
                                        <?php if ((isset($type) && $type == 'customer') || !isset($type)): ?>
                                            <a href="<?= base_url('login/forgot'); ?>"
                                                class="forgot-link text-primary text-capitalize"
                                                style="letter-spacing:0;"><?= !empty(lang('forgot')) ? lang('forgot') : "Forgot Password?"; ?></a>
                                        <?php endif ?>
                                    </label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text modern-addon"><i
                                                    class="fa fa-lock text-muted"></i></span>
                                        </div>
                                        <input type="password" name="password" class="form-control pass modern-control"
                                            placeholder="••••••••">
                                        <span class="passwordToggle"><i class="fa fa-eye"></i></span>
                                    </div>
                                </div>

                                <div class="form-group mb-4">
                                    <?php include VIEWPATH . 'common_layouts/recaptcha.php'; ?>
                                </div>

                                <div class="form-group mt-4">
                                    <button type="submit"
                                        class="btn btn-primary btn-block _signIn_btn modern-submit-btn d-flex justify-content-center align-items-center">
                                        <?= !empty(lang('sign_in')) ? lang('sign_in') : "Sign In"; ?> <i
                                            class="fas fa-arrow-right ml-2"></i>
                                    </button>
                                </div>

                                <div class="form-group text-center mt-4 mb-0">
                                    <p class="text-muted mb-0">
                                        <?= !empty(lang('dont_have_account')) ? lang('dont_have_account') : "Don't have an account?"; ?>
                                        <a href="<?= base_url('sign-up'); ?>"
                                            class="font-weight-bold text-primary ml-1 signup-link"><?= !empty(lang('sign-up')) ? lang('sign-up') : "Sign Up"; ?></a>
                                    </p>
                                </div>
                            </div>
                        </form>
                    </div>

                    <?php if (is_demo() == 1): ?>
                        <div class="demo-login-area mt-5 pt-4 border-top">
                            <h6 class="text-center text-muted mb-3">Demo Credentials</h6>
                            <div class="d-flex justify-content-center flex-wrap mb-3 gap-2">
                                <a href="javascript:;" data-user="admin" data-pas="1234"
                                    class="btn btn-sm btn-outline-info m-1 loginBTN">Admin Login</a>
                                <a href="javascript:;" data-user="phplime" data-pas="1234"
                                    class="btn btn-sm btn-outline-info m-1 loginBTN">Restaurant Login</a>
                            </div>
                            <div class="d-flex justify-content-center flex-wrap text-center text-muted small">
                                <div class="mx-3 mb-2">
                                    <strong>Admin:</strong> admin / 1234
                                </div>
                                <div class="mx-3 mb-2">
                                    <strong>Restaurant:</strong> phplime / 1234
                                </div>
                            </div>
                        </div>
                    <?php endif; ?>

                </div>

                <div class="othersLogin modern-others-login mt-4">
                    <ul class="d-flex flex-wrap justify-content-center list-unstyled p-0 m-0">
                        <li class="m-2"><a href="<?= base_url('staff-login/staff'); ?>"
                                class="badge badge-light px-3 py-2 text-muted shadow-sm"><i
                                    class="icofont-users-social mr-1"></i> <?= lang('staff_login'); ?></a></li>
                        <li class="m-2"><a href="<?= base_url('staff-login/customer'); ?>"
                                class="badge badge-light px-3 py-2 text-muted shadow-sm"><i
                                    class="icofont-users-alt-4 mr-1"></i>
                                <?= !empty(lang('customer_login')) ? lang('customer_login') : "Customer Login"; ?></a>
                        </li>
                        <?php if (check() == 1): ?>
                            <li class="m-2"><a href="<?= base_url('staff-login/delivery'); ?>"
                                    class="badge badge-light px-3 py-2 text-muted shadow-sm"><i
                                        class="icofont-fast-delivery mr-1"></i>
                                    <?= !empty(lang('delivery_guy_login')) ? lang('delivery_guy_login') : "Delivery Guy Login"; ?></a>
                            </li>
                        <?php endif; ?>
                    </ul>
                </div>

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

<?php if (!empty($google_client_id) && $is_google_login == 1): ?>
    <script>
        let client;
        window.onload = function () {
            if (typeof google !== 'undefined') {
                client = google.accounts.oauth2.initCodeClient({
                    client_id: '<?= htmlspecialchars($google_client_id); ?>',
                    scope: 'openid email profile',
                    ux_mode: 'popup',
                    callback: (response) => {
                        if (response.code) {
                            handleAuthCodeResponse(response.code);
                        }
                    },
                });

                document.getElementById('custom-google-login-btn').addEventListener('click', function (e) {
                    e.preventDefault();
                    client.requestCode();
                });
            }
        };

        function handleAuthCodeResponse(code) {
            const formData = new FormData();
            formData.append('code', code);
            formData.append('<?= $this->security->get_csrf_token_name(); ?>', '<?= $this->security->get_csrf_hash(); ?>');

            const card = document.querySelector('.modern-login-card');
            card.classList.add('load');

            fetch('<?= base_url("login/google_callback") ?>', {
                method: 'POST',
                body: formData
            })
                .then(res => res.json())
                .then(data => {
                    card.classList.remove('load');
                    if (data.st === 1) {
                        window.location.href = data.url;
                    } else {
                        const msgArea = document.querySelector('.reg_msg');
                        if (msgArea) {
                            msgArea.innerHTML = data.msg;
                            msgArea.style.display = 'block';
                        }
                    }
                })
                .catch(err => {
                    card.classList.remove('load');
                    console.error(err);
                });
        }
    </script>
<?php endif; ?>