{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-body p-4">
          <h5 class="mb-4">Create Rider</h5>
          <form method="post" enctype="multipart/form-data" class="row g-3">
            {% csrf_token %}
            {% if form %}
              {{ form.non_field_errors }}
              {{ form.as_p }}
              <div class="col-md-12">
                <div class="d-md-flex d-grid align-items-center gap-3">
                  <button type="submit" class="btn btn-primary px-4">Create</button>
                  <a class="btn btn-light px-4" href="{% url 'rider-management' %}">Cancel</a>
                </div>
              </div>
            {% else %}
              <div class="col-md-6">
                <label for="full_name" class="form-label">Full Name</label>
                <input type="text" class="form-control" id="full_name" name="full_name" placeholder="Full Name" required>
              </div>
              <div class="col-md-6">
                <label for="display_name" class="form-label">Display Name</label>
                <input type="text" class="form-control" id="display_name" name="display_name" placeholder="Display Name">
              </div>
              <div class="col-md-6">
                <label for="mobile_number" class="form-label">Mobile Number</label>
                <input type="text" class="form-control" id="mobile_number" name="mobile_number" placeholder="Mobile Number" required>
              </div>
              <div class="col-md-6">
                <label for="email" class="form-label">Email</label>
                <input type="email" class="form-control" id="email" name="email" placeholder="Email">
              </div>
              <div class="col-md-6">
                <label for="dob" class="form-label">Date of Birth</label>
                <input type="date" class="form-control" id="dob" name="dob">
              </div>
              <div class="col-md-6">
                <label for="password" class="form-label">Password</label>
                <input type="password" class="form-control" id="password" name="password" placeholder="Password">
              </div>
              <div class="col-md-12">
                <label for="status" class="form-label">Status</label>
                <select id="status" name="status" class="form-select">
                  <option value="active" selected>Active</option>
                  <option value="inactive">Inactive</option>
                </select>
              </div>
              <div class="col-md-12">
                <label for="profile_pic" class="form-label">Profile Picture</label>
                <input type="file" class="form-control" id="profile_pic" name="profile_pic" accept="image/*">
              </div>
              
              <div class="col-md-12">
                <h6 class="mt-3 mb-3">Document Uploads</h6>
              </div>
              
              <div class="col-md-6">
                <label for="aadhar_front" class="form-label">Aadhar (Front)</label>
                <input type="file" class="form-control" id="aadhar_front" name="aadhar_front" accept="image/*">
              </div>
              <div class="col-md-6">
                <label for="aadhar_back" class="form-label">Aadhar (Back)</label>
                <input type="file" class="form-control" id="aadhar_back" name="aadhar_back" accept="image/*">
              </div>
              <div class="col-md-6">
                <label for="pan_card_image" class="form-label">PAN Card</label>
                <input type="file" class="form-control" id="pan_card_image" name="pan_card_image" accept="image/*">
              </div>
              <div class="col-md-6"></div>
              <div class="col-md-6">
                <label for="driving_license_front" class="form-label">Driving License (Front)</label>
                <input type="file" class="form-control" id="driving_license_front" name="driving_license_front" accept="image/*">
              </div>
              <div class="col-md-6">
                <label for="driving_license_back" class="form-label">Driving License (Back)</label>
                <input type="file" class="form-control" id="driving_license_back" name="driving_license_back" accept="image/*">
              </div>
              
              <div class="col-md-12">
                <div class="d-md-flex d-grid align-items-center gap-3">
                  <button type="submit" class="btn btn-primary px-4">Create Rider</button>
                  <a class="btn btn-light px-4" href="{% url 'rider-management' %}">Cancel</a>
                </div>
              </div>
            {% endif %}
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}