<style>
  @media (min-width: 320px) and (max-width: 320px) {
    input.register_password_footer {
      /*background: red;*/
      width: 80% !important;
    }

    input.inp_number_disabled {
      width: 20% !important
    }

    input.inp_number_enabled {
      width: 80% !important;

    }
  }

  .myfooter ul li a:hover {
    color: <?= $primary_colortheme; ?>;
  }
</style>
<?php

$this->session->userdata('site_lang') == 'english' ? $this->lang->load('register_login', 'english') : $this->lang->load('register_login', 'indonesian');

?>
<style>
  .myfooter p {

    font-size: 15px;

  }
</style>
<div class="myfooter">
  <div class="wrapp2">

    <?php
    //get footer caption 1 and 2
    $footer_caption = $this->db->select('banner3_link,banner4_link,banner3_link_en,banner4_link_en')->from('home_centerbanners')->where('id_home_centerbanners', 1)->get()->row();
    $footer_caption1 = $footer_caption->banner3_link;
    $footer_caption2 = $footer_caption->banner4_link;
    $footer_caption1_en = $footer_caption->banner3_link_en;
    $footer_caption2_en = $footer_caption->banner4_link_en;
    ?>

    <div class="row">
      <div class="col-sm-12" style="font-family: 'din_next_lt_proregular'; padding-bottom: 30px;">
        <p>
          <?= $this->session->userdata('site_lang') == 'english' ? $footer_caption1_en : $footer_caption1; ?>
        </p>
      </div>

      <?php $count = 0; ?>
      <?php foreach ($footers as $footer) : ?>
        <?php $count++; ?>
        <div class="col-md-3
                    <?php if ($count == 2) : ?>
                        ctp
                    <?php elseif ($count == 4) : ?> 
                        social_footer
                    <?php endif; ?> 
                ">
          <h3><?= ucwords($footer->title); ?></h3>
          <?= $footer->description; ?>
        </div>
      <?php endforeach; ?>
      <div class="col-sm-12" style="font-family: 'din_next_lt_proregular'; padding-bottom: 30px; padding-top: 30px;">
        <p style="text-align: center;">
          <strong>
            <?= $this->session->userdata('site_lang') == 'english' ? $footer_caption2_en : $footer_caption2; ?>
          </strong>
        </p>



      </div>
    </div>

    <div class="footer_bottom">
      Copyright © <?= date('Y'); ?> <?= $website_name; ?>
    </div>
  </div>
</div>
</div>

<!-- Modal Login Box -->
<div class="modal fade modal_right" id="sigin_madal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h4><?php if ($this->session->userdata('site_lang') == 'english') {
              echo 'Sign in';
            } else {
              echo 'Masuk';
            } ?></h4>
        <h2><?php if ($this->session->userdata('site_lang') == 'english') {
              echo 'Hi, Welcome Back';
            } else {
              echo 'Hi, Selamat Datang Kembali';
            } ?></h2>
        <h4><?php if ($this->session->userdata('site_lang') == 'english') {
              echo 'Enter your account details below';
            } else {
              echo 'Masukkan detail akun Anda di bawah ini';
            } ?></h4>

        <!-- Form Login -->
        <?= form_open('login/login_password'); ?>

        <!-- <input type="hidden" name="login_page_name" value="<?= base_url(uri_string()); ?>"> -->

        <div class="form_register">
          <div class="form_item">
            <?php
            $data = array(
              'name'        => 'email',
              'id'          => 'email',
              'value'       => set_value('email'),
              'class'    => 'form-control',
              'required'  => 'required',
              'placeholder'  => 'Email address *'
            );
            echo form_input($data);
            ?>
          </div>
          <div class="form_item">

            <span style="margin-right: 0px;" class="open_password">
              <i class="i_con fa fa-eye"></i>
            </span>
            <?php
            $data = array(
              'name'        => 'password',
              'id'          => 'password',
              'value'       => set_value('password'),
              'class'    => 'form-control target_open_password',
              'required'  => 'required',
              'placeholder'  => 'Password *'
            );
            echo form_password($data);
            ?>
          </div>
          <div class="form_register_button">
            <ul>
              <li style="width: 100% !important;"><input type="submit" value="<?php if ($this->session->userdata('site_lang') == 'english') {
                                                                                echo 'Sign in';
                                                                              } else {
                                                                                echo 'Masuk';
                                                                              } ?>" name="login_password_modal">
              </li>
            </ul>
          </div>
          <?= form_close(); ?>

          <div style="text-align: center; margin: 10px 0;">
            <span><?php echo ($this->session->userdata('site_lang') == 'english') ? 'or' : 'atau'; ?></span>
          </div>
          <a href="<?= isset($googleUrl) ? $googleUrl : '#' ?>" class="google-login-btn">
            <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/google/google-original.svg" alt="Google Logo">
            <?php if ($this->session->userdata('site_lang') == 'english') {
              echo 'Sign in with Google';
            } else {
              echo 'Masuk dengan Google';
            } ?>
          </a>


          <!-- <div class="social_media_login">
            <h4>Login with your social media account</h4>
            <a href="#" class="login_fb"><i class="fa fa-facebook"></i></a>
          </div> -->
        </div>

        <div class="form_item forgot_pass"><a href="#" id="a_forgot_pass">
            <?php if ($this->session->userdata('site_lang') == 'english') {
              echo 'Forgot Password?';
            } else {
              echo 'Lupa Kata Sandi?';
            } ?></a></div>
        <div class="form_item">
          <a class="a_modal_daftar" href="<?= base_url(); ?>register">
            <?php if ($this->session->userdata('site_lang') == 'english') {
              echo 'Create Account';
            } else {
              echo 'Buat Akun';
            } ?>
          </a>
          <style>
            .a_modal_daftar {
              color: white;
              text-decoration: underline;
              transition: 0.3s;
            }

            .a_modal_daftar:hover {
              opacity: 0.8;
              color: white;

            }
          </style>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal CART BOX -->
<div class="modal fade modal_right" id="cart_madal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="cart_box">
          <div class="cart_box_header"><?php if ($this->session->userdata('site_lang') == 'english') {
                                          echo 'Your pleasure bucket';
                                        } else {
                                          echo 'Keranjang asmara';
                                        } ?> (<span class="cartCount"></span>)</div>
          <div class="cart_box_body">
            <p id="cartMessage"></p>
            <div id="cart_body"></div>
            <!-- Button -->
            <div class="form_register_button">
              <ul>
                <li><input type="button" data-dismiss="modal" value="<?php if ($this->session->userdata('site_lang') == 'english') {
                                                                        echo 'Back to Shopping';
                                                                      } else {
                                                                        echo 'Kembali Belanja';
                                                                      } ?>" /></li>
                <li id="processCheckout"><a href="<?= base_url('shipping'); ?>"><input type="button" value="<?php if ($this->session->userdata('site_lang') == 'english') {
                                                                                                              echo 'Process to Checkout';
                                                                                                            } else {
                                                                                                              echo 'Proses ke Pembayaran';
                                                                                                            } ?>" /></a></li>
              </ul>
            </div><!-- End Button -->
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="modal fade" id="myModalTOC" role="dialog" style="display: none;">

    <div class="modal-dialog" role="document">

      <div class="modal-content">

        <div class="modal-header">

          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">x</span></button>

          <h4 class="modal-title">Syarat dan Ketentuan</h4>

        </div>

        <div class="modal-body">

          <?= $toc; ?>

        </div>

        <div class="modal-footer">

          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

        </div>

      </div><!-- /.modal-content -->

    </div><!-- /.modal-dialog -->

  </div>



  <div class="modal fade" id="myModalPrivacy" role="dialog" style="display: none;">

    <div class="modal-dialog" role="document">

      <div class="modal-content">

        <div class="modal-header">

          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">x</span></button>

          <h4 class="modal-title">Kebijakan Privasi</h4>

        </div>

        <div class="modal-body">

          <?= $privacy; ?>

        </div>

        <div class="modal-footer">

          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

        </div>

      </div><!-- /.modal-content -->

    </div><!-- /.modal-dialog -->

  </div>

  <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -->
  <script>
    function view_pass(trg) {
      if (jQuery(trg).get(0).type === 'password') {
        // $(trg).removeAttr("type").attr("type","text");
        jQuery(trg).get(0).type = 'text';
      } else {
        jQuery(trg).get(0).type = 'password';

      }
    }

    jQuery(document).ready(function($) {
      if ($(".open_password").length > 0) {
        var open_pass = $(".open_password");
        open_pass.click(function(ev) {
          var t = $(this);
          var t_icon = t.find("i.i_con");
          var target_input = t.parent().find("input.target_open_password");

          if (t_icon.hasClass("fa-eye")) {
            target_input.attr('type', 'text');
            t_icon.removeClass("fa-eye").addClass("fa-eye-slash");
          } else {
            target_input.attr('type', 'password');
            t_icon.removeClass("fa-eye-slash").addClass("fa-eye");
          }

        });
      }
      $(".top_right_menu a.nav-link.dropdown-toggle").click(function(ev) {
        var dv_dropdown = $(this).parents("li.nav-item.dropdown").find("div.dropdown-menu");
        if (dv_dropdown.is(":hidden")) {
          dv_dropdown.show();
        } else {
          dv_dropdown.hide();
        }
        ev.stopPropagation();
        ev.preventDefault();
      });
      $(".top_right_menu li.nav-item.dropdown:eq(0) div.dropdown-menu").click(function(ev) {
        ev.stopPropagation();
      });

      $(window).click(function() {
        var dv_dropdown = $(".top_right_menu li.nav-item.dropdown:eq(0) div.dropdown-menu");

        if (!dv_dropdown.is(":hidden")) {
          dv_dropdown.hide();
        }
      });
      // alert($('a.togglePassword').length);
      if (jQuery('a.togglePassword_footer').length == 1) {
        jQuery('a.togglePassword_footer').click(function() {
          view_pass('input.register_password_footer');
        });
      }
      jQuery("a#a_forgot_pass").click(function() {
        sessionStorage.setItem("click_forgotPass", "true");
        window.location.href = "<?= base_url(); ?>" + 'login';
        return false;
      });
      //initial load cart and get cart count
      jQuery.ajax({
        'url': '<?= base_url(); ?>' + 'ajax/ajax_get_cart',
        'type': 'POST',
        'data': {
          '<?= $this->security->get_csrf_token_name(); ?>': '<?= $this->security->get_csrf_hash(); ?>'
        },
        'success': function(data) {
          if (data) {
            /*---success----*/
            var cart = JSON.parse(data);
            jQuery('#cart_body').html(cart.cart_content);
            jQuery('.cartCount').html(cart.cart_count);
            if (cart.cart_count == 0) {
              jQuery('#processCheckout').hide();
            } else {
              jQuery('#processCheckout').show();
            }
          };
        }
      });

    });
  </script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src='<?= base_url("themes/$theme/js/vmenuModule.js"); ?>'></script>
  <script src='<?= base_url("themes/$theme/js/custom.js"); ?>'></script>
  <link rel="stylesheet" type="text/css" href='<?= base_url("themes/$theme/css/vmenuModule.css"); ?>'>

</div>
<style>
  .open_password {
    position: absolute;
    display: flex;
    display: inline-flex;
    margin: 0;
    padding: 0;
    width: 30px;
    height: 100%;
    text-align: center;
    align-items: center;
    justify-content: center;
    right: 0;
    margin-right: 15px;
    border: 1px solid black;
    cursor: pointer;
    color: black;
  }

  .open_password i.i_con {
    transition: 0.3s;
  }

  .open_password:hover i.i_con {
    color: <?= $primary_colortheme; ?>;
  }

  .target_open_password {
    padding-right: 30px;
  }

  .google-login-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    background-color: white;
    color: <?= $primary_colortheme; ?>;
    border: 1px solid #ddd;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }

  .google-login-btn:hover {
    background-color: #e0e0e0;
    color: #7A4397;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  .google-login-btn img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
</style>
<style>
  @media (max-width: 500px) {

    #sigin_madal,
    #cart_madal,
    #reg_madal {
      width: 100%;
    }
  }

  @media (max-width: 768px) {

    #brand {
      display: none !important;
    }

    #best_seller {
      display: none !important;
    }

    #web {
      margin-top: 0px;
    }
  }

  @media (min-width: 1024px) {
    #banner {
      display: none !important;
    }

  }
</style>


</body>
<footer>
  <style>
    footer {
      background-color: #7A4397;
      color: white;
      text-align: center;
      padding: 10px;
      position: sticky;
      bottom: 0;
      z-index: 999;
    }

    nav {
      display: flex;
      justify-content: space-around;
      list-style: none;
      padding-left: 0;
      padding-right: 0;
      margin: 0;
    }

    nav a {
      text-decoration: none;
      color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 12px;
    }

    .dropup {
      position: relative;
      display: inline-block;
    }

    .dropup-content {
      display: none;
      position: absolute;
      bottom: 70px;
      left: 50%;
      transform: translateX(-50%);
      background-color: #7A4397;
      color: white;
      min-width: 250px;
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
      z-index: 1;
      padding: 10px;
      border-radius: 5px;
      box-sizing: border-box;
    }

    .dropup-content .column {
      flex: 1;
      min-width: 120px;
    }

    .dropup-content a {
      color: white;
      padding: 8px 16px;
      text-decoration: none;
      display: block;
      border-radius: 5px;
      transition: background-color 0.3s ease;
    }

    .dropup-content a:hover {
      background-color: white;
      color: #7A4397;
    }

    .center-button {
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
    }

    .center-button i {
      color: #7A4397;
      position: absolute;
      top: -25px;
    }

    @media (min-width: 769px) {
      footer {
        display: none;
      }
    }
  </style>
  <nav>
    <a class="col-2" href="<?= base_url(); ?>"><img style="margin-top:2px; height: 24px;" src="<?= base_url(); ?>uploads/icon/home.png" alt="Home">Home</a>
    <a class="col-2" href="<?= base_url(); ?>category/New-Arrivals"><img style="margin-top:2px; height: 24px;" src="<?= base_url(); ?>uploads/icon/new.png" alt="New">New</a>
    <div class="dropup col-3">
      <a style="color: #fff;" class="center-button" href="#" onclick="toggleDropup(event)">
        <i id="caretIcon" class="fas fa-caret-up"></i>
        <img style="margin-top:2px; height: 24px;" src="<?= base_url(); ?>uploads/icon/category.png" alt="Category">Category
      </a>
      <div class="dropup-content" id="dropupContent">
        <div class="column">
          <a style="text-decoration-line: underline;" href="<?= base_url(); ?>category/diskon"><?php if ($this->session->userdata('site_lang') == 'english') {
                                                                                                  echo 'Sale';
                                                                                                } else {
                                                                                                  echo 'Diskon';
                                                                                                } ?></a>
          <a style="text-decoration-line: underline;" href="<?= base_url(); ?>category/dildo">Dildo</a>
          <a style="text-decoration-line: underline;" href="<?= base_url(); ?>category/wellness">Wellness</a>
        </div>
        <div class="column">
          <a style="text-decoration-line: underline;" href="<?= base_url(); ?>category/vibrators">Vibrator</a>
          <a style="text-decoration-line: underline;" href="<?= base_url(); ?>category/anal">Anal</a>
          <a style="text-decoration-line: underline;" href="<?= base_url(); ?>category/male-toys"><?php if ($this->session->userdata('site_lang') == 'english') {
                                                                                                    echo 'Male Toys';
                                                                                                  } else {
                                                                                                    echo 'Mainan Pria';
                                                                                                  } ?></a>
        </div>
      </div>
    </div>
    <a class="col-2" href="<?= base_url(); ?>/page/the-story"><img style="margin-top:2px; height: 24px;" src="<?= base_url(); ?>uploads/icon/about.png" alt="About">About</a>
    <a class="col-2" href="<?= base_url(); ?>account/profile"><img style="margin-top:2px; height: 24px;" src="<?= base_url(); ?>uploads/icon/profile.png" alt="Profile">Profile</a>
  </nav>
</footer>
<?php if (isset($debug_scripts)): ?>
  <?php echo $debug_scripts; ?>
<?php endif; ?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<script>
  function toggleDropup(event) {
    event.preventDefault();
    event.stopPropagation();
    var dropupContent = document.getElementById("dropupContent");
    var caretIcon = document.getElementById("caretIcon");
    if (dropupContent.style.display === "flex") {
      dropupContent.style.display = "none";
      caretIcon.classList.remove("fa-caret-down");
      caretIcon.classList.add("fa-caret-up");
    } else {
      dropupContent.style.display = "flex";
      caretIcon.classList.remove("fa-caret-up");
      caretIcon.classList.add("fa-caret-down");
    }
  }

  document.addEventListener('click', function(event) {
    var dropupContent = document.getElementById("dropupContent");
    var dropup = document.querySelector('.dropup');
    var caretIcon = document.getElementById("caretIcon");
    if (!dropup.contains(event.target)) {
      dropupContent.style.display = "none";
      caretIcon.classList.remove("fa-caret-up");
      caretIcon.classList.add("fa-caret-down");
    }
  });
</script>

</html>