<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multiplex Safe Farms</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>

<style>
body{
  font-family: Inter, system-ui, -apple-system;
  background: linear-gradient(180deg, #f4fbff 0%, #ffffff 60%);
}
.mobile-wrap{
  max-width:420px;
  margin:auto;
  min-height:95vh;
  position:relative;
}
.marquee{
  width:max-content;
  display:flex;
}
.marquee-fast{
  animation: scrollLeft 10s linear infinite;
}
.marquee-slow{
  animation: scrollLeft 16s linear infinite;
}
@keyframes scrollLeft{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
</style>
</head>

<body>
<div class="mobile-wrap">

  <div class="h-8"></div>

  <!-- MARQUEE 1 -->
  <div class="overflow-hidden px-4">
    <div class="marquee marquee-fast gap-3">
      <?php for($i=1;$i<=12;$i++): ?>
      <div class="bg-[#eaf6fb] rounded-3xl p-3 flex items-center justify-center min-w-[90px] h-[90px]">
        <img src="<?= base_url("uploads/Loginimages/$i.png") ?>" class="h-14 object-contain">
      </div>
      <?php endfor; ?>
    </div>
  </div>

  <!-- MARQUEE 2 -->
  <div class="overflow-hidden px-4 mt-4">
    <div class="marquee marquee-slow gap-3">
      <?php for($i=13;$i<=24;$i++): ?>
      <div class="bg-[#eaf6fb] rounded-3xl p-3 flex items-center justify-center min-w-[90px] h-[90px]">
        <img src="<?= base_url("uploads/Loginimages/$i.png") ?>" class="h-10 object-contain">
      </div>
      <?php endfor; ?>
    </div>
  </div>

  <!-- LOGO -->
  <div class="flex justify-center mt-6">
    <img src="<?= base_url('uploads/MSFFLogo.png') ?>" class="h-16">
  </div>

  <!-- BRAND -->
  <div class="text-center mt-4 px-6">
    <h1 class="text-2xl font-extrabold">Multiplex Safe Farms</h1>
    <p class="text-sm text-gray-500">Safe Farms · Fresh Store · Trusted Quality</p>
  </div>

  <!-- BOTTOM LOGIN SHEET -->
  <div class="absolute bottom-0 w-full px-5 pb-5">
    <div class="bg-white rounded-3xl px-6 py-6 shadow-2xl">

      <div id="message" class="mb-3 text-xs"></div>

      <!-- PHONE FORM -->
      <form id="phoneForm" class="space-y-4">
        <input id="phone" maxlength="10" type="tel"
          placeholder="Enter mobile number"
          class="w-full border rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-green-500">

        <button type="button" id="sendOtpBtn"
          class="w-full bg-[#ef4f5f] text-white py-3 rounded-xl font-semibold">
          Continue
        </button>
      </form>

      <!-- OTP FORM -->
      <form id="otpForm" style="display:none;" class="space-y-4">
        <input type="hidden" id="otpPhone">

        <input id="otpInput" maxlength="6" type="tel"
          placeholder="Enter OTP"
          class="w-full border rounded-xl px-4 py-3 text-center text-lg tracking-widest">

        <button type="button" id="verifyOtpBtn"
          class="w-full bg-black text-white py-3 rounded-xl font-semibold">
          Verify
        </button>
      </form>

      <!-- APARTMENT -->
      <form id="apartmentForm" style="display:none;" class="space-y-4">
        <select id="apartmentSelect"
          class="w-full border rounded-xl px-4 py-3 text-sm">
          <option value="">Select apartment</option>
        </select>

        <button type="button" id="goNextBtn"
          class="w-full bg-green-600 text-white py-3 rounded-xl font-semibold">
          Continue
        </button>
      </form>

      <p class="text-[10px] text-gray-400 text-center mt-4">
        By continuing, you agree to our Terms & Privacy Policy
      </p>

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

<!-- JS -->
<script>
$(function(){

  $('#phone').on('input',function(){
    this.value=this.value.replace(/[^0-9]/g,'').slice(0,10);
  });

  $('#sendOtpBtn').click(function(){
    let phone=$('#phone').val();
    if(phone.length!==10){
      $('#message').html('<span class="text-red-500">Invalid phone number</span>');
      return;
    }

    $.post("<?= site_url('sendOTP') ?>",{phone},res=>{
      if(res.success){
        $('#message').html(
          '<div class="bg-green-50 text-green-700 p-2 rounded-lg">' +
          'OTP Sent Successfully<br><b>OTP:</b> '+res.otp+
          '</div>'
        );
        $('#phoneForm').hide();
        $('#otpForm').show();
        $('#otpPhone').val(phone);
      }
    },'json');
  });

  $('#verifyOtpBtn').click(function(){
    $.post("<?= site_url('verifyOTP') ?>",{
      phone:$('#otpPhone').val(),
      otp:$('#otpInput').val()
    },res=>{
      if(res.success){
        $('#otpForm').hide();
        $('#apartmentForm').show();
        $('#apartmentSelect').empty()
          .append('<option value="">Select apartment</option>');
        res.apartments.forEach(a=>{
          $('#apartmentSelect').append(
            `<option value="${a.id}">${a.apartName}</option>`
          );
        });
      }
    },'json');
  });

  $('#goNextBtn').click(function(){
    $.post("<?= site_url('saveApartment') ?>",
      {apartId:$('#apartmentSelect').val()},
      res=>{
        if(res.success) window.location.href=res.redirect;
      },'json');
  });

});
</script>

</body>
</html>
