{% extends "base.html" %}
{% load static %}
{% block title %}Rider Management{% endblock %}

{% block extra_css %}
  <link href="{% static 'assets/plugins/datatable/css/dataTables.bootstrap5.min.css' %}" rel="stylesheet" />
{% endblock %}

{% block content %}
<div class="page-breadcrumb d-none d-sm-flex align-items-center mb-1 justify-content-between">
  <div class="breadcrumb-title pe-3">Rider Management</div>
  <a href="{% url 'rider-create' %}" class="btn btn-success ms-auto">Add Rider</a>
</div>

<div class="row">
  <hr>
  <div class="card">
    <div class="card-body">
      <div class="table-responsive">
        <table id="rider_management" class="table table-striped table-bordered table-hover" style="width:100%">
          <thead>
            <tr>
              <th>Full Name</th>
              <th>Mobile</th>
              <th>Email</th>
              <th>Profile</th>
              <th>Status</th>
              <th>Trash</th>
              <th>Created</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for rider in riders %}
            <tr>
              <td>{{ rider.full_name }}</td>
              <td>{{ rider.mobile_number }}</td>
              <td>{{ rider.email }}</td>
              <td>
                {% if rider.profile_pic %}
                  <img src="{{ rider.profile_pic.url }}" width="60" style="object-fit:cover;max-height:60px;max-width:100px;border-radius:4px;">
                {% endif %}
              </td>
              <td>
                {% if rider.status == 'active' %}
                  <span class="badge bg-success">Active</span>
                {% else %}
                  <span class="badge bg-secondary">Inactive</span>
                {% endif %}
              </td>
              <td>
                {% if rider.trash %}
                  <span class="badge bg-warning text-dark">
                    <i class="bi bi-trash"></i> Trashed
                  </span>
                {% else %}
                  <span class="badge bg-light text-dark">Normal</span>
                {% endif %}
              </td>
              <td>{{ rider.created_at|date:"M d, Y H:i" }}</td>
              <td>
                <div class="d-flex gap-1">
                  <a href="{% url 'rider-view' rider.id %}" class="btn btn-info btn-sm" title="View">
                    <i class="bi bi-eye"></i>
                  </a>
                  <a href="{% url 'rider-edit' rider.id %}" class="btn btn-warning btn-sm" title="Edit">
                    <i class="bi bi-pencil"></i>
                  </a>
                  <form method="post" action="{% url 'rider-delete' rider.id %}" style="display:inline;">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger btn-sm" title="Delete" onclick="return confirm('Are you sure you want to delete this rider?');">
                      <i class="bi bi-trash"></i>
                    </button>
                  </form>
                </div>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
  <script src="{% static 'assets/plugins/datatable/js/jquery.dataTables.min.js' %}"></script>
  <script src="{% static 'assets/plugins/datatable/js/dataTables.bootstrap5.min.js' %}"></script>
  <script>
    $(document).ready(function() {
      $('#rider_management').DataTable();
    });
  </script>
{% endblock %}