{% extends 'base.html' %}
{% block content %}

<style>
  /* Scoped styles so we don't affect other pages */
  .onboard-card {
    border: 1px solid #e9ecef;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
    overflow: hidden;
    background: #fff;
  }
  .onboard-header {
    background: linear-gradient(90deg, #0d6efd 0%, #0aa2ff 100%);
    color: #fff;
    padding: .9rem 1.25rem;
    display: flex; align-items: center; gap: .6rem;
  }
  .onboard-header .bi {
    font-size: 1.2rem;
  }
  .onboard-body {
    padding: 1.15rem 1.25rem 1.25rem;
  }
  .req-badge {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    color: #dc3545;
    margin-left: .2rem;
  }
  .hint {
    font-size: .8rem;
    color: #6c757d;
  }
  .section-gap { margin-top: 1rem; }
  .divider {
    height: 1px; background: #f0f3f6; margin: .75rem 0 1rem;
  }
  .btn-primary {
    background: #ff7a00; border-color: #ff7a00;
  }
  .btn-primary:hover {
    background: #e46f00; border-color: #e46f00;
  }
  .accent-chip {
    background: #e8f3ff; color: #0d6efd; border-radius: 999px; padding: .25rem .55rem; font-size: .75rem;
  }
  .input-group-text { background: #f8f9fc; }
  label.form-label { font-weight: 600; }
</style>

<div class="container py-3">
  <div class="d-flex align-items-center justify-content-between flex-wrap mb-3">
    <div>
      <h2 class="mb-1">Employee Onboarding</h2>
      <div class="hint">Fields marked with <span class="req-badge">*</span> are mandatory</div>
    </div>
    <span class="accent-chip mt-2 mt-md-0"><i class="bi bi-shield-check me-1"></i> Secure form</span>
  </div>

  <form method="POST" enctype="multipart/form-data">

    <!-- PERSONAL -->
    <div class="onboard-card section-gap">
      <div class="onboard-header">
        <i class="bi bi-person-badge"></i>
        <span>Personal Details</span>
      </div>
      <div class="onboard-body">
        <div class="row g-3">
          <div class="col-md-6">
            <label class="form-label">Full Name <span class="req-badge">*</span></label>
            <div class="input-group">
              <span class="input-group-text"><i class="bi bi-person"></i></span>
              <input type="text" name="full_name" class="form-control" minlength="3" required>
            </div>
          </div>
          <div class="col-md-6">
            <label class="form-label">Gender <span class="req-badge">*</span></label>
            <div class="input-group">
              <span class="input-group-text"><i class="bi bi-gender-ambiguous"></i></span>
              <select name="gender" class="form-select" required>
                <option value="">Select</option>
                <option>Male</option><option>Female</option><option>Other</option>
              </select>
            </div>
          </div>

          <div class="col-md-6">
            <label class="form-label">Date of Birth <span class="req-badge">*</span></label>
            <div class="input-group">
              <span class="input-group-text"><i class="bi bi-calendar-event"></i></span>
              <input type="date" name="dob" class="form-control" required>
            </div>
          </div>
          <div class="col-md-6">
            <label class="form-label">Marital Status</label>
            <select name="marital_status" class="form-select">
              <option value="">Select</option>
              <option>Single</option><option>Married</option>
            </select>
          </div>

          <div class="col-md-6">
            <label class="form-label">Father/Spouse Name</label>
            <input type="text" name="father_spouse_name" class="form-control">
          </div>
          <div class="col-md-6">
            <label class="form-label">Personal Number <span class="req-badge">*</span></label>
            <div class="input-group">
              <span class="input-group-text"><i class="bi bi-telephone"></i></span>
              <input type="tel" name="personal_number" class="form-control" pattern="[0-9]{10}" maxlength="10" required>
            </div>
            <div class="hint mt-1">10-digit mobile number</div>
          </div>

          <div class="col-md-6">
            <label class="form-label">Emergency Contact Name</label>
            <input type="text" name="emergency_contact_name" class="form-control">
          </div>
          <div class="col-md-6">
            <label class="form-label">Emergency Contact Number <span class="req-badge">*</span></label>
            <input type="tel" name="emergency_contact_number" class="form-control" pattern="[0-9]{10}" maxlength="10" required>
          </div>

          <div class="col-md-6">
            <label class="form-label">Work Email <span class="req-badge">*</span></label>
            <div class="input-group">
              <span class="input-group-text"><i class="bi bi-envelope"></i></span>
              <input type="email" name="email" class="form-control" required>
            </div>
            <div class="hint mt-1">Use your official email (e.g., name@company.com)</div>
          </div>
          <div class="col-12">
            <label class="form-label">Permanent Address <span class="req-badge">*</span></label>
            <textarea name="address" class="form-control" rows="2" required></textarea>
          </div>
          <div class="col-12">
            <label class="form-label">Temporary Address</label>
            <textarea name="temporary_address" class="form-control" rows="2"></textarea>
          </div>
        </div>
      </div>
    </div>

    <!-- ID & BANK -->
    <div class="onboard-card section-gap">
      <div class="onboard-header">
        <i class="bi bi-credit-card-2-front"></i>
        <span>ID & Bank Details</span>
      </div>
      <div class="onboard-body">
        <div class="row g-3">
          <div class="col-md-6">
            <label class="form-label">Name on Aadhar</label>
            <input type="text" name="aadhar_name" class="form-control">
          </div>
          <div class="col-md-6">
            <label class="form-label">Aadhar Number</label>
            <input type="text" name="aadhar_number" class="form-control" pattern="[0-9]{12}" maxlength="12">
          </div>

          <div class="col-md-6">
            <label class="form-label">Name on PAN</label>
            <input type="text" name="pan_name" class="form-control">
          </div>
          <div class="col-md-6">
            <label class="form-label">PAN Number</label>
            <input type="text" name="pan_number" class="form-control" pattern="[A-Z]{5}[0-9]{4}[A-Z]{1}" maxlength="10">
          </div>

          <div class="col-md-6">
            <label class="form-label">UAN Number</label>
            <input type="text" name="uan" class="form-control" pattern="[0-9]{12}" maxlength="12">
          </div>
          <div class="col-md-6">
            <label class="form-label">Last Company PF Number</label>
            <input type="text" name="last_company_pf_number" class="form-control">
          </div>

          <div class="divider"></div>

          <div class="col-md-6">
            <label class="form-label">Account Holder Name <span class="req-badge">*</span></label>
            <input type="text" name="bank_account_name" class="form-control" required>
          </div>
          <div class="col-md-6">
            <label class="form-label">Bank Account Number <span class="req-badge">*</span></label>
            <input type="text" name="bank_account_number" class="form-control" pattern="[0-9]{9,20}" required>
          </div>
          <div class="col-md-6">
            <label class="form-label">IFSC Code <span class="req-badge">*</span></label>
            <input type="text" name="ifsc_code" class="form-control" pattern="^[A-Z]{4}0[A-Z0-9]{6}$" maxlength="11" required>
            <div class="hint mt-1">Format: AAAA0BBBBBB</div>
          </div>
          <div class="col-md-6">
            <label class="form-label">Bank Name</label>
            <input type="text" name="bank_name" class="form-control">
          </div>
        </div>
      </div>
    </div>

    <!-- EDUCATION -->
    <div class="onboard-card section-gap">
      <div class="onboard-header">
        <i class="bi bi-mortarboard"></i>
        <span>Educational Details</span>
      </div>
      <div class="onboard-body">
        {% for level, label in {
          'secondary':'Secondary',
          'higher_secondary':'Higher Secondary',
          'graduation':'Graduation',
          'post_graduation':'Post Graduation'
        }.items() %}
        <div class="row g-3 mb-2">
          <div class="col-md-4">
            <label class="form-label">{{ label }} — Institute</label>
            <input type="text" name="{{ level }}_name" class="form-control">
          </div>
          <div class="col-md-4">
            <label class="form-label">Marks</label>
            <input type="number" name="{{ level }}_marks" class="form-control" min="0" max="100" step="0.01">
          </div>
          <div class="col-md-4">
            <label class="form-label">Year</label>
            <input type="text" name="{{ level }}_year" class="form-control" pattern="\d{4}" maxlength="4">
          </div>
        </div>
        {% if not loop.last %}<div class="divider"></div>{% endif %}
        {% endfor %}
      </div>
    </div>

    <!-- PROFESSIONAL -->
    <div class="onboard-card section-gap">
      <div class="onboard-header">
        <i class="bi bi-briefcase"></i>
        <span>Professional Details</span>
      </div>
      <div class="onboard-body">
        <div class="row g-3">
          <div class="col-md-6">
            <label class="form-label">Last Company Name</label>
            <input type="text" name="last_company_name" class="form-control">
          </div>
          <div class="col-md-6">
            <label class="form-label">Last Company Employee Code</label>
            <input type="text" name="last_company_code" class="form-control">
          </div>
          <div class="col-md-6">
            <label class="form-label">Last Designation</label>
            <input type="text" name="last_company_designation" class="form-control">
          </div>
        </div>
      </div>
    </div>

    <!-- DOCUMENTS -->
    <div class="onboard-card section-gap">
      <div class="onboard-header">
        <i class="bi bi-folder2-open"></i>
        <span>Document Uploads</span>
      </div>
      <div class="onboard-body">
        <div class="hint mb-2">Allowed: JPG, JPEG, PNG, PDF, DOC, DOCX • Max 2MB each</div>

        <div class="row g-3">
          <div class="col-md-6">
            <label class="form-label fw-semibold">Resume</label>
            <input type="file" name="resume" class="form-control" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx">
          </div>
          <div class="col-md-6">
            <label class="form-label fw-semibold">ID Proof</label>
            <input type="file" name="id_proof" class="form-control" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx">
          </div>

          <div class="col-md-6">
            <label class="form-label fw-semibold">Qualification Documents</label>
            <input type="file" name="doc_qualification" class="form-control" multiple accept=".jpg,.jpeg,.png,.pdf,.doc,.docx">
          </div>
          <div class="col-md-6">
            <label class="form-label fw-semibold">Employment Documents</label>
            <input type="file" name="doc_employment_proof" class="form-control" multiple accept=".jpg,.jpeg,.png,.pdf,.doc,.docx">
          </div>

          <div class="col-md-6">
            <label class="form-label fw-semibold">Photographs</label>
            <input type="file" name="doc_photographs" class="form-control" multiple accept=".jpg,.jpeg,.png,.pdf,.doc,.docx">
          </div>
        </div>
      </div>
    </div>

    <div class="d-flex justify-content-end mt-3">
      <button type="submit" class="btn btn-primary btn-lg">
        <i class="bi bi-send-fill me-1"></i> Submit
      </button>
    </div>
  </form>
</div>

<script>
  // 2 MB per file limit
  document.querySelector("form").addEventListener("submit", function(e) {
    const maxSize = 2 * 1024 * 1024;
    let valid = true;
    document.querySelectorAll("input[type='file']").forEach(input => {
      for (const file of input.files) {
        if (file.size > maxSize) {
          alert(`File "${file.name}" exceeds 2MB limit.`);
          valid = false; break;
        }
      }
    });
    if (!valid) e.preventDefault();
  });
</script>
{% endblock %}