<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><?php echo setting('company_name') ?> | Login</title>
  <?= $this->include("admin/layout/partials/styles") ?>
  <style>
    .hero-card {
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0,0,0,.08);
      overflow: hidden;
      background: #fff;
    }
    .hero-top {
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0,0,0,.08);
      background: #fff;
      padding: 18px;
      margin-bottom: 20px;
      max-width: 700px;
    }
    .hero-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      background-color: #fcefde;
      border-radius: 16px;
    }
    .feature-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .feature-item {
      display: flex;
      align-items: center;
      font-size: 16px;
      margin: 10px 0;
      font-weight: 600;
    }
    .check-dot {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #ff6a00;
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      font-size: 14px;
    }
    .hero-image img {
      width: 100%;
      max-width: 420px;
      border-radius: 10px;
    }
    .otp-title {
      font-weight: 700;
    }
    .btn-orange {
      background: #ff6a00;
      border-color: #ff6a00;
      color: #fff;
    }
    .btn-orange:hover {
      background: #e85f00;
      border-color: #e85f00;
      color: #fff;
    }
    .form-control {
      border-radius: 8px;
      height: 44px;
    }
    @media (max-width: 768px) {
      .hero-banner {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
      .hero-points { padding-left: 0 !important; }
      .feature-item { justify-content: center; }
      .hero-image img {
        max-width: 100%;
        margin: 0 auto;
      }
    }
  </style>
</head>
<body class="hold-transition layout-top-nav">
<div class="wrapper">
  <nav class="main-header navbar navbar-expand olx-header" style="background:#002f34;border-bottom:1px solid rgba(255,255,255,.08);">
    <div class="container">
      <a href="<?php echo url('/') ?>" class="navbar-brand olx-brand" style="color:#fff !important;font-weight:700;letter-spacing:.3px;">
        <?php echo setting('company_name') ?>
      </a>
    </div>
  </nav>
  <div class="content-wrapper">
    <section class="content">
      <div class="container py-4">
        <div class="row justify-content-center">
          <div class="col-md-10 col-lg-8">
            <div class="hero-top">
              <div class="text-center mb-3">
                <?php if (setting('company_logo_type')): ?>
                  <img src="<?php echo urlUpload('company/logo.' . setting('company_logo_type'), true) ?>" alt="<?php echo esc(setting('company_name')) ?>" style="height:56px;">
                <?php else: ?>
                  <h3 class="mb-0"><?php echo esc(setting('company_name')) ?></h3>
                <?php endif ?>
              </div>
              <div class="hero-banner">
                <div class="hero-points" style="padding-left:15px">
                  <ul class="feature-list">
                    <li class="feature-item"><span class="check-dot"><i class="fas fa-check"></i></span>Best Discount and Reward Application</li>
                    <li class="feature-item"><span class="check-dot"><i class="fas fa-check"></i></span>Easy Interface For User and Shopkeeper</li>
                    <li class="feature-item"><span class="check-dot"><i class="fas fa-check"></i></span>Boost Your Turnover With Rewarder App</li>
                  </ul>
                </div>
                <div class="hero-image">
                  <img src="<?= assets_url('mob_show_face.jpg') ?>" alt="App" style="height: 300px;">
                </div>
              </div>
              <div class="mt-4">
                <h3 class="text-center mb-2 otp-title">Register with Mobile</h3>
                <p class="text-center text-muted mb-4">Enter your mobile number to receive OTP and start instantly.</p>
                <?php echo form_open('auth/otp/send', ['method' => 'POST', 'autocomplete' => 'off', 'id' => 'sendForm']); ?>
                  <?= csrf_field() ?>
                  <input type="hidden" name="phone" id="send_phone_full" value="<?php echo esc(old('phone') ?? '') ?>">
                  <input type="hidden" name="country_id" id="send_country_id" value="">
                  <input type="hidden" name="redirect" id="send_redirect" value="<?php echo esc($redirect ?? '') ?>">
                  <div class="form-group d-flex">
                    <select class="form-control" id="send_phone_cc" style="max-width:110px;">
                      <?php $countryRows = is_array($countries ?? null) ? $countries : []; ?>
                      <?php $countryOptionCount = 0; ?>
                      <?php if (empty($countryRows)): ?>
                        <option value="+91" data-country-id="91">🇮🇳 +91</option>
                      <?php else: ?>
                        <?php foreach ($countryRows as $country): ?>
                          <?php
                            $isdDigits = preg_replace('/\D+/', '', (string) ($country->isdcode ?? ''));
                            if ($isdDigits === '') {
                                $isdDigits = preg_replace('/\D+/', '', (string) ($country->code ?? ''));
                            }
                            if ($isdDigits === '') {
                                continue;
                            }
                            $codeLabel = '+' . $isdDigits;
                            $optionLabel = trim((string) ($country->name ?? 'Country')) . ' (' . $codeLabel . ')';
                            $countryOptionCount++;
                          ?>
                          <option value="<?php echo esc($codeLabel) ?>" data-country-id="<?php echo esc($isdDigits) ?>"><?php echo esc($optionLabel) ?></option>
                        <?php endforeach ?>
                        <?php if ($countryOptionCount < 1): ?>
                          <option value="+91" data-country-id="91">🇮🇳 +91</option>
                        <?php endif ?>
                      <?php endif ?>
                    </select>
                    <input type="text" class="form-control ml-2" id="send_phone_local" placeholder="Enter mobile number" value="" required>
                  </div>
                  <input type="hidden" name="purpose" value="register">
                  <div class="form-group mb-0">
                    <button type="submit" class="btn btn-orange btn-block" style="font-weight:600;">Send OTP</button>
                  </div>
                <?php echo form_close(); ?>
                <p class="text-center text-muted mt-3 mb-0">After registering you will be logged in automatically.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>
<?= $this->include("admin/layout/partials/scripts") ?>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var form = document.getElementById('sendForm');
    if (form) {
      form.addEventListener('submit', function() {
        var ccEl = document.getElementById('send_phone_cc');
        var cc = ccEl ? (ccEl.value || '+91') : '+91';
        var selected = ccEl && ccEl.options ? ccEl.options[ccEl.selectedIndex] : null;
        var selectedCountryId = selected ? (selected.getAttribute('data-country-id') || '') : '91';
        var local = (document.getElementById('send_phone_local').value || '').replace(/\D+/g, '');
        document.getElementById('send_phone_full').value = cc + local;
        document.getElementById('send_country_id').value = selectedCountryId;
      });
    }
  });
</script>
</body>
</html>
