<?php
$all_course_category = $this->course_model->get_all_course_category();
$notice = $this->Front_model->get_front_top_notification_for_home_page();
$visual_setting = $this->setting_model->get_visual_setting();
if (isset($meta_title)) {
    $title = $meta_title;
} else {
    if ($app_setting->app_meta_title) {
        $title = $app_setting->app_meta_title;
    } else {
        $title = $app_setting->app_name;
    }
}

if (isset($meta_descrition)) {
    $decription = $meta_descrition;
} else {
    $decription = $app_setting->app_meta_description;
}

if (isset($meta_keyword)) {
    $keyword = $meta_keyword;
} else {
    $keyword = $app_setting->app_keywords;
}
$actual_link = (empty($_SERVER['HTTPS']) ? 'http' : 'https') . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
if (isset($og_image)) {
    $fev_image = $og_image;
} else {
    $fev_image = $app_setting->fevicon;
}
?>
<!DOCTYPE html>
<html class="no-js" lang="zxx">

<head>
    <!-- Meta Data -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title><?php echo $title; ?></title>
    <meta name="description" content="<?php echo $decription; ?>">
    <meta name="keywords" content="<?php echo $keyword; ?>">
    <meta name="author" content="<?php echo $app_setting->app_name; ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <meta property="og:title" content="<?php echo $title; ?>" />
    <meta property="og:type" content="website" />
    <meta property="og:URL" content="<?php echo $actual_link; ?>" />
    <meta property="og:site_name" content="<?php echo $app_setting->app_name; ?>" />
    <meta property="og:image" content="<?php echo base_url(); ?><?php echo $fev_image; ?>" />
    <meta property="og:description" content="<?php echo $decription; ?>" />
    <meta name="google-site-verification" content="lNT-W8tKuLXZ-Q_XMYxj9ukLR2ed7PNsWrDeuIY0hMU" />

    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="<?php echo base_url(); ?><?php echo $app_setting->fevicon; ?>">
    <!-- CSS
  ============================================ -->
    <link rel="stylesheet" href="<?php echo front_css(); ?>css/vendor/bootstrap.min.css">
    <link rel="stylesheet" href="<?php echo front_css(); ?>css/vendor/icomoon.css">
    <link rel="stylesheet" href="<?php echo front_css(); ?>css/vendor/remixicon.css">
    <link rel="stylesheet" href="<?php echo front_css(); ?>css/vendor/magnifypopup.min.css">
    <link rel="stylesheet" href="<?php echo front_css(); ?>css/vendor/odometer.min.css">
    <link rel="stylesheet" href="<?php echo front_css(); ?>css/vendor/lightbox.min.css">
    <link rel="stylesheet" href="<?php echo front_css(); ?>css/vendor/animation.min.css">
    <link rel="stylesheet" href="<?php echo front_css(); ?>css/vendor/jqueru-ui-min.css">
    <link rel="stylesheet" href="<?php echo front_css(); ?>css/vendor/swiper-bundle.min.css">
    <link rel="stylesheet" href="<?php echo front_css(); ?>css/vendor/tipped.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <!-- <script src="https://www.gstatic.com/firebasejs/9.1.0/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.1.0/firebase-auth-compat.js"></script> -->

    <link rel="stylesheet" href="<?php echo admin_css() ?>plugins/sweetalert/sweetalert.min.css">
    <script src="<?php echo admin_css() ?>plugins/sweetalert/sweetalert.min.js"></script>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>

    <!-- Site Stylesheet -->
    <link rel="stylesheet" href="<?php echo front_css(); ?>css/app.css">
    <script type="text/javascript">
        var front_css = "<?php echo front_css(); ?>";
    </script>
    <style>
        :root {
            --color-primary: <?php echo $visual_setting->color_1; ?>;
            --color-secondary: <?php echo $visual_setting->color_2; ?>;
            --gradient-primary: linear-gradient(-90deg, <?php echo $visual_setting->color_1; ?> 0%, <?php echo $visual_setting->color_2; ?> 100%);
        }

        .features-area-2 {
            background: -webkit-linear-gradient(right, <?php echo $visual_setting->color_1; ?> 0%, <?php echo $visual_setting->color_2; ?> 100%);
            background: linear-gradient(-90deg, <?php echo $visual_setting->color_1; ?> 0%, <?php echo $visual_setting->color_2; ?> 100%);
        }
    </style>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-9XXZ8KNWKQ"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());

        gtag('config', 'G-9XXZ8KNWKQ');
    </script>
</head>

<body class="sticky-header ">


    <!--[if lte IE 9]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
    <![endif]-->

    <!-- <div id="edublink-preloader">
        <div class="loading-spinner">
            <div class="preloader-spin-1"></div>
            <div class="preloader-spin-2"></div>
        </div>
        <div class="preloader-close-btn-wraper">
            <span class="btn btn-primary preloader-close-btn">
                Cancel Preloader</span>
        </div>
    </div> -->

    <div id="main-wrapper" class="main-wrapper">

        <!--=====================================-->
        <!--=        Header Area Start        =-->
        <!--=====================================-->
        <header class="edu-header header-style-1 header-fullwidth">
            <div class="header-top-bar">
                <div class="container-fluid">
                    <div class="header-top">
                        <div class="header-top-left">
                            <div class="header-notify">
                                <a href="<?php echo $notice->notification_url; ?>"><?php echo $notice->notification_content; ?> </a>
                            </div>
                        </div>
                        <div class="header-top-right">
                            <ul class="header-info">
                                <li><a href="#" data-bs-toggle="modal" data-bs-target="#quiz_modal">Take Free Quiz</a></li>
                                <li><a href="#" onclick="load_link()">Login</a></li>
                                <!-- <li class="social-icon">
                                    <a href="#"><i class="icon-facebook"></i></a>
                                    <a href="#"><i class="icon-instagram"></i></a>
                                    <a href="#"><i class="icon-twitter"></i></a>
                                    <a href="#"><i class="icon-linkedin2"></i></a>
                                </li> -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div id="edu-sticky-placeholder"></div>
            <div class="header-mainmenu">
                <div class="container-fluid">
                    <div class="header-navbar">
                        <div class="header-brand">
                            <div class="logo">
                                <a href="<?php echo base_url(); ?>">
                                    <img width="150px" class="logo-light" src="<?php echo base_url(); ?><?php echo $app_setting->app_sticky_logo; ?>" alt="<?php echo $app_setting->app_name; ?>">
                                    <img width="150px" class="logo-dark" src="<?php echo base_url(); ?><?php echo $app_setting->app_sticky_logo; ?>" alt="<?php echo $app_setting->app_name; ?>">
                                </a>
                            </div>
                            <!-- <div class="header-category">
                                <nav class="mainmenu-nav">
                                    <ul class="mainmenu">
                                        <li class="has-droupdown">
                                            <a href="#"><i class="icon-1"></i>Category</a>
                                            <ul class="submenu">
                                                <li><a href="course-one.html">Design</a></li>
                                                <li><a href="course-one.html">Development</a></li>
                                                <li><a href="course-one.html">Architecture</a></li>
                                                <li><a href="course-one.html">Life Style</a></li>
                                                <li><a href="course-one.html">Data Science</a></li>
                                                <li><a href="course-one.html">Marketing</a></li>
                                                <li><a href="course-one.html">Music</a></li>
                                                <li><a href="course-one.html">Photography</a></li>
                                                <li><a href="course-one.html">Finance</a></li>
                                                <li><a href="course-one.html">Motivation</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </nav>
                            </div> -->
                        </div>
                        <div class="header-mainnav">
                            <nav class="mainmenu-nav">
                                <ul class="mainmenu">
                                    <li><a href="<?php echo base_url(); ?>">Home</a></li>
                                    <li><a href="<?php echo base_url(); ?>about_us">About Us</a></li>
                                    <li class="has-droupdown"><a href="#">Courses</a>
                                        <ul class="submenu">
                                            <?php foreach ($all_course_category as $key => $course_cat) : ?>
                                                <li><a href="<?php echo base_url(); ?>course-category/<?php echo $course_cat->category_slug; ?>"><?php echo $course_cat->category_name; ?></a></li>
                                            <?php endforeach; ?>
                                        </ul>
                                    </li>
                                    <li class="has-droupdown"><a href="#">Gallery</a>
                                        <ul class="submenu">
                                            <li><a href="<?php echo base_url(); ?>gallery/image">Image</a></li>
                                            <li><a href="<?php echo base_url(); ?>gallery/video">Video</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="<?php echo base_url(); ?>career">Career</a></li>
                                    <li class=""><a href="<?php echo base_url(); ?>blog">Blog</a></li>
                                    <li><a href="<?php echo base_url(); ?>contact">Contact</a></li>
                                </ul>
                            </nav>
                        </div>
                        <div class="header-right">
                            <ul class="header-action">

                                <li class="header-btn">
                                    <a href="#" data-bs-toggle="modal" data-bs-target="#book_free_modal" class="edu-btn btn-medium">Book Free Enquiry<i class="icon-4"></i></a>
                                </li>
                                <li class="mobile-menu-bar d-block d-xl-none">
                                    <button class="hamberger-button">
                                        <i class="icon-54"></i>
                                    </button>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="popup-mobile-menu">
                <div class="inner">
                    <div class="header-top">
                        <div class="logo">
                            <a href="<?php echo base_url(); ?>">
                                <img class="logo-light" src="<?php echo base_url(); ?><?php echo $app_setting->app_sticky_logo; ?>" alt="<?php echo $app_setting->app_name; ?>">
                                <img class="logo-dark" src="<?php echo base_url(); ?><?php echo $app_setting->app_sticky_logo; ?>" alt="<?php echo $app_setting->app_name; ?>">
                            </a>
                        </div>
                        <div class="close-menu">
                            <button class="close-button">
                                <i class="icon-73"></i>
                            </button>
                        </div>
                    </div>
                    <ul class="mainmenu">
                        <li><a href="<?php echo base_url(); ?>">Home</a></li>
                        <li><a href="<?php echo base_url(); ?>about_us">About Us</a></li>
                        <li class="has-droupdown"><a href="#">Courses</a>
                            <ul class="submenu">
                                <?php foreach ($all_course_category as $key => $course_cat) : ?>
                                    <li><a href="<?php echo base_url(); ?>course-category/<?php echo $course_cat->category_slug; ?>"><?php echo $course_cat->category_name; ?></a></li>
                                <?php endforeach; ?>
                            </ul>
                        </li>

                        <li class=""><a href="<?php echo base_url(); ?>blog">Blog</a></li>
                        <li><a href="<?php echo base_url(); ?>contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </header>

        <div class="modal fade" id="book_free_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Fill Below Form For Free Enquiry</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <?php echo
                        form_open(base_url() . 'home/submit_free_quiz_form', ['class' => 'p-5 pt-2']);
                        ?>
                        <div class="form-group col-12">
                            <input type="text" name="lead_name" required placeholder="Your Full Name *">
                        </div>
                        <div class="form-group col-12">
                            <input type="email" name="lead_email" id="book_free_email" required placeholder="Your Email ID *">
                            <span class="text-danger" id="book_free_message_email"></span>
                        </div>
                        <div class="form-group col-12">
                            <input type="text" name="lead_mobile" id="book_free_mobile" required placeholder="Your Mobile No *">
                            <span class="text-danger" id="book_free_message_phone"></span>
                        </div>
                        <div class="form-group col-12">
                            <select type="text" name="lead_course" required placeholder="Your Mobile No *">
                                <option value="">Select A Course</option>
                                <?php
                                $all_course = $this->db->get('course')->result();
                                foreach ($all_course as $course) :
                                ?>
                                    <option value="<?php echo $course->title; ?>"><?php echo $course->title; ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <div class="form-group col-12">
                            <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
                        </div>
                        <input type="hidden" name="lead_source" value="Free Demo Class">
                        <div class="form-group col-12">
                            <button style="width: 100%;" class="rn-btn edu-btn btn-small submit-btn" name="submit" type="submit">Submit Now<i class="icon-4"></i></button>
                        </div>
                        <?php echo form_close(); ?>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="quiz_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Fill Below Form</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <?php echo 
                        form_open(base_url().'home/submit_free_quiz_form', ['class' => 'p-5 pt-2']);
                        ?>
                            <div class="form-group col-12">
                                <input type="text" name="lead_name" required placeholder="Your Full Name *">
                            </div>
                            <div class="form-group col-12">
                                <input type="email" name="lead_email" id="quiz_email" onchange="get_email(this.value)" required placeholder="Your Email ID *">
                                <span class="text-danger" id="message_email"></span>
                            </div>
                            <div class="form-group col-12">
                                <input type="text" name="lead_mobile" id="quiz_mobile" onkeyup="get_mobile(this.value)" required placeholder="Your Mobile No *">
                                <span class="text-danger" id="message_phone"></span>
                            </div>
                            <input type="hidden" name="lead_source" value="Free Quiz">
                            <div class="form-group col-12">
                                <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
                            </div>
                            <div class="form-group col-12" id="quizbutton">
                                <button style="width: 100%;" class="rn-btn edu-btn btn-small submit-btn" name="submit" type="submit">Go Quiz Section<i class="icon-4"></i></button>
                            </div>
                        <?php echo 
                        form_close();
                        ?>
                    </div>
                </div>
            </div>
        </div>
        <script>
            // const firebaseConfig = {
            //     apiKey: "AIzaSyAVUxydS6tPVjO26tTv3YJc07eNkRY2efU",
            //     authDomain: "v2gether-61caa.firebaseapp.com",
            //     projectId: "v2gether-61caa",
            //     storageBucket: "v2gether-61caa.appspot.com",
            //     messagingSenderId: "803127765658",
            //     appId: "1:803127765658:web:61cf1032991ecdc0b14d23"
            // };

            // Function to initialize Firebase and perform phone authentication
            // function performPhoneAuthentication() {
            //     firebase.initializeApp(firebaseConfig);
            //     var phoneNumber = "+91" + $('#quiz_mobile').val();
            //     var appVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
            //     firebase
            //         .auth()
            //         .signInWithPhoneNumber(phoneNumber, appVerifier)
            //         .then(function(confirmationResult) {
            //             var code = prompt("Enter the code from the SMS: ");
            //             return confirmationResult.confirm(code);
            //         })
            //         .then(function(result) {
            //             $.ajax({
            //                 url: '<?php echo base_url(); ?>home/submit_free_quiz_form',
            //                 type: 'POST',
            //                 data: $('#quiz_form_submit').serialize(),
            //                 success: function(response) {
            //                     if (response != 0) {
            //                         window.location = "<?php echo base_url(); ?>free_quiz/" + response;
            //                     } else {
            //                         alert('System Error');
            //                         location.reload();
            //                     }
            //                 },
            //                 error: function(error) {
            //                     console.error(error);
            //                 }
            //             });
            //         })
            //         .catch(function(error) {
            //             $('#btn_sumit_quiz').hide();
            //             $('#mwessage').html('Invalid OTP');
            //             console.log(error);
            //         });
            // }

            // Function to initialize Firebase and perform phone authentication
            // function performPhoneAuthenticationForBookDemo() {
            //     firebase.initializeApp(firebaseConfig);
            //     var phoneNumber = "+91" + $('#book_free_mobile').val();
            //     var appVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
            //     firebase
            //         .auth()
            //         .signInWithPhoneNumber(phoneNumber, appVerifier)
            //         .then(function(confirmationResult) {
            //             var code = prompt("Enter the code from the SMS: ");
            //             return confirmationResult.confirm(code);
            //         })
            //         .then(function(result) {
            //             $.ajax({
            //                 url: '<?php echo base_url(); ?>home/submit_free_quiz_form',
            //                 type: 'POST',
            //                 data: $('#book_demo_form_submit').serialize(),
            //                 success: function(response) {
            //                     if (response != 0) {
            //                         window.location = "<?php echo base_url(); ?>thank_you/" + response;
            //                     } else {
            //                         alert('System Error');
            //                         location.reload();
            //                     }
            //                 },
            //                 error: function(error) {
            //                     console.error(error);
            //                 }
            //             });
            //         })
            //         .catch(function(error) {
            //             $('#btn_sumit_quiz').hide();
            //             $('#mwessage').html('Invalid OTP');
            //             console.log(error);
            //         });
            // }

            // Attach the function to the form submission
            // $('#book_demo_form_submit').submit(function(event) {
            //     event.preventDefault();
            //     if (isValidIndianPhoneNumber($('#book_free_mobile').val())) {
            //         if (isValidIndianEmail($('#book_free_email').val())) {
            //             performPhoneAuthenticationForBookDemo();
            //         } else {
            //             $('#book_free_message_email').html('<span class"text-danger>Invalid Email ID.</span>')
            //         }

            //     } else {
            //         $('#book_free_message_phone').html('<span class"text-danger>Invalid Mobile No.</span>')
            //     }
            // });

            // Attach the function to the form submission
            $('#quiz_form_submit').submit(function(event) {
                event.preventDefault();
                if (isValidIndianPhoneNumber($('#quiz_mobile').val())) {
                    if (isValidIndianEmail($('#quiz_email').val())) {
                        performPhoneAuthentication();
                    } else {
                        $('#message_email').html('<span class"text-danger>Invalid Email ID.</span>')
                    }

                } else {
                    $('#message_phone').html('<span class"text-danger>Invalid Mobile No.</span>')
                }
            });

            function isValidIndianPhoneNumber(phoneNumber) {
                phoneNumber = phoneNumber.replace(/\D/g, '');
                if (/^[6789]\d{9}$/.test(phoneNumber)) {
                    return true;
                } else {
                    return false;
                }
            }

            function isValidIndianEmail(email) {
                var emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
                return emailPattern.test(email);
            }

            function get_email(email) {
                if (isValidIndianEmail(email)) {
                    $.ajax({
                        type: "POST",
                        dataType: "JSON",
                        async: true,
                        data: {
                            email: email
                        },
                        url: '<?php echo base_url(); ?>/home/check_email_id_for_free_quiz',
                        success: function(data) {
                            if (data.status == 6) {
                                $('#message_email').html('<span class"text-danger>Email ID Already Exits.</span>');
                                $('#quizbutton').hide();
                            } else {
                                $('#quizbutton').show();
                                $('#message_email').hide();
                            }
                        },
                        error: function() {
                            $(".loader").hide();
                        }
                    });
                } else {
                    $('#message_email').html('<span class"text-danger>Invalid Email ID.</span>')
                }
            }

            function get_mobile(mobile) {
                if (mobile.length == 10) {
                    if (isValidIndianPhoneNumber(mobile)) {
                        $.ajax({
                            type: "POST",
                            dataType: "JSON",
                            async: true,
                            data: {
                                mobile: mobile
                            },
                            url: '<?php echo base_url(); ?>/home/check_mobile_no_for_free_quiz',
                            success: function(data) {
                                if (data.status == 6) {
                                    $('#message_phone').html('<span class"text-danger>Mobile No Already Exits.</span>');
                                    $('#quizbutton').hide();
                                } else {
                                    $('#quizbutton').show();
                                    $('#message_phone').hide();
                                }
                            },
                            error: function() {
                                $(".loader").hide();
                            }
                        });
                    } else {
                        $('#message_phone').html('<span class"text-danger>Invalid Mobile No.</span>')
                    }
                }
            }

            function load_link() {
                location.replace("<?php echo base_url(); ?>admin")
            }
        </script>


        <style type="text/css">
            #quiz_modal .form-group input,
            #book_free_modal .form-group input,
            #book_free_modal .form-group textarea,
            #quiz_modal .form-group textarea {
                border-bottom: 1px solid var(--color-border);
                border-radius: 0;
                padding: 20px 0 10px;
            }

            #btn_sumit_quiz {
                display: none;
            }
        </style>
        <?php
    $errors = $this->session->userdata('errors');
    if (isset($errors)) {
        ?>
        <script>
            swal ( "Oops" ,  "<?php echo $errors ?>" ,  "error" )
        </script>
        <?php echo $errors ?>
        <?php
        $this->session->unset_userdata('errors');
    }
    $error = $this->session->userdata('error');
    if (isset($error)) {
        ?>
         <script>
            swal ( "Oops" ,  "<?php echo $error ?>" ,  "error" )
        </script>
        <?php
        $this->session->unset_userdata('error');
    }
    $success = $this->session->userdata('success');
    if (isset($success)) {
        ?>
         <script>
            swal({
          title: "Done!",
          text: "<?php echo $success ?>",
          icon: "success",
        });
        </script>
        <?php
        $this->session->unset_userdata('success');
    }
    ?>