<!DOCTYPE html>
<html lang="en">
<head>
    <?php echo $this->include('include/header'); ?>
</head>
<body>

<div class="shell">

  <?php echo $this->include('include/sidebar'); ?>

  <!-- ===== MAIN ===== -->
 <main class="main">
    <div class="topbar">
      <div>
        <h1>Register &amp; invite architect</h1>
        <p class="crumb">Dashboard / Register architect</p>
      </div>
    </div>

    <div class="stepper" aria-hidden="true">
      <div class="step now"><span class="dot">1</span> <span>Fill details</span></div>
      <span class="step-bar"></span>
      <div class="step"><span class="dot">2</span> <span>Credentials generated</span></div>
      <span class="step-bar"></span>
      <div class="step"><span class="dot">3</span> <span>Shared &amp; mapped</span></div>
    </div>

    <!-- ============================================================
      DEVELOPER (PHP): <form action="register_architect.php" method="POST">
      Backend must:
        1. save the architect record
        2. generate a login ID + temporary password
        3. send an SMS with the app links and credentials
        4. map the architect to the logged-in AID ($_SESSION['aid_email'])
    ============================================================ -->
    <section class="panel">
      <h2>Architect details</h2>
      <p class="sub">These details create the architect's Designer Club account. The contact number becomes the login ID.</p>

      <form id="regForm" class="form-grid" novalidate>

        <div class="field full" id="f-name">
          <label for="arch_name">Full Name <span class="req">*</span></label>
          <input type="text" id="arch_name" name="arch_name" placeholder="e.g. Sanjay R Vishwakarma" required>
          <p class="err">Full name is required.</p>
        </div>

        <div class="field" id="f-mobile">
          <label for="arch_mobile">Contact No. <span class="req">*</span></label>
          <input type="tel" id="arch_mobile" name="arch_mobile" placeholder="10-digit mobile number" maxlength="10" inputmode="numeric" required>
          <p class="hint">This becomes the architect's login ID.</p>
          <p class="err">Enter a valid 10-digit mobile number.</p>
        </div>

        <div class="field" id="f-email">
          <label for="arch_email">Email ID <span class="req">*</span></label>
          <input type="email" id="arch_email" name="arch_email" placeholder="name@gmail.com" required>
          <p class="err">Enter a valid email address.</p>
        </div>

        <div class="field" id="f-state">
          <label for="arch_state">State</label>
          <select id="arch_state" name="arch_state"></select>
        </div>

        <div class="field" id="f-city">
          <label for="arch_city">City</label>
          <select id="arch_city" name="arch_city">
            <option value="">Select state first</option>
          </select>
        </div>

        <div class="field" id="f-pin">
          <label for="arch_pin">Pincode</label>
          <input type="text" id="arch_pin" name="arch_pin" placeholder="6-digit pincode" maxlength="6" inputmode="numeric">
          <p class="err">Enter a valid 6-digit pincode.</p>
        </div>

        <div class="field full" id="f-address">
          <label for="arch_address">Address <span class="req">*</span></label>
          <textarea id="arch_address" name="arch_address" rows="3" placeholder="Office / flat no., building, street, landmark, area, city - pincode" required></textarea>
          <p class="err">Address is required.</p>
        </div>

        <div class="form-actions full">
          <a class="btn btn-ghost" href="dashboard.html">Cancel</a>
          <button type="submit" class="btn btn-primary">Submit &amp; generate credentials</button>
        </div>

      </form>
    </section>
  </main>

</div>

<?php echo $this->include('include/script'); ?>

</body>
</html>
