{% 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">Edit 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">Save</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" value="{{ rider.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" value="{{ rider.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" value="{{ rider.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" value="{{ rider.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" value="{{ rider.dob|date:'Y-m-d' }}">
              </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="Leave blank to keep existing">
              </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" {% if rider.status == 'active' %}selected{% endif %}>Active</option>
                  <option value="inactive" {% if rider.status == 'inactive' %}selected{% endif %}>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/*">
                {% if rider.profile_pic %}
                  <div class="mt-2">
                    <img src="{{ rider.profile_pic.url }}" class="img-thumbnail" style="max-width: 150px; max-height: 150px;" alt="Current profile picture">
                    <small class="d-block text-muted mt-1">Current profile picture</small>
                  </div>
                {% endif %}
              </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/*">
                {% if rider.aadhar_front %}
                  <div class="mt-2">
                    <img src="{{ rider.aadhar_front.url }}" class="img-thumbnail" style="max-width: 200px; max-height: 120px;" alt="Current Aadhar front">
                    <small class="d-block text-muted mt-1">Current document</small>
                  </div>
                {% endif %}
              </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/*">
                {% if rider.aadhar_back %}
                  <div class="mt-2">
                    <img src="{{ rider.aadhar_back.url }}" class="img-thumbnail" style="max-width: 200px; max-height: 120px;" alt="Current Aadhar back">
                    <small class="d-block text-muted mt-1">Current document</small>
                  </div>
                {% endif %}
              </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/*">
                {% if rider.pan_card_image %}
                  <div class="mt-2">
                    <img src="{{ rider.pan_card_image.url }}" class="img-thumbnail" style="max-width: 200px; max-height: 120px;" alt="Current PAN card">
                    <small class="d-block text-muted mt-1">Current document</small>
                  </div>
                {% endif %}
              </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/*">
                {% if rider.driving_license_front %}
                  <div class="mt-2">
                    <img src="{{ rider.driving_license_front.url }}" class="img-thumbnail" style="max-width: 200px; max-height: 120px;" alt="Current license front">
                    <small class="d-block text-muted mt-1">Current document</small>
                  </div>
                {% endif %}
              </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/*">
                {% if rider.driving_license_back %}
                  <div class="mt-2">
                    <img src="{{ rider.driving_license_back.url }}" class="img-thumbnail" style="max-width: 200px; max-height: 120px;" alt="Current license back">
                    <small class="d-block text-muted mt-1">Current document</small>
                  </div>
                {% endif %}
              </div>
              
              <div class="col-md-12">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" name="trash" id="trash" {% if rider.trash %}checked{% endif %}>
                  <label class="form-check-label" for="trash">Move to Trash</label>
                </div>
              </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">Save Changes</button>
                  <a class="btn btn-light px-4" href="{% url 'rider-management' %}">Cancel</a>
                </div>
              </div>
            {% endif %}
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}