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

{% block content %}
<div class="container">
  <!-- Page Header -->
  <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-4 justify-content-between">
    <div class="breadcrumb-title pe-3">
      <h4 class="mb-0">Rider Details</h4>
    </div>
    <div class="d-flex gap-2">
      <a href="{% url 'rider-edit' rider.id %}" class="btn btn-primary">
        <i class="bx bx-edit me-1"></i>Edit Rider
      </a>
      <a href="{% url 'rider-management' %}" class="btn btn-outline-secondary">
        <i class="bx bx-arrow-back me-1"></i>Back to List
      </a>
    </div>
  </div>

  <!-- Single Unified Card -->
  <div class="card">
    <div class="card-body p-4">
      <!-- Profile Section -->
      <div class="row mb-4">
        <div class="col-12 col-md-4 text-center mb-4 mb-md-0">
          <div class="profile-avatar mx-auto mb-3">
            {% if rider.profile_pic %}
              <img src="{{ rider.profile_pic.url }}" alt="{{ rider.full_name }}" 
                   class="rounded-circle img-fluid" 
                   style="width: 150px; height: 150px; object-fit: cover;">
            {% else %}
              <div class="bg-light rounded-circle d-flex align-items-center justify-content-center mx-auto" 
                   style="width: 150px; height: 150px;">
                <i class="bx bx-user" style="font-size: 4rem; color: #6c757d;"></i>
              </div>
            {% endif %}
          </div>
          <h5 class="mb-1">{{ rider.full_name }}</h5>
          <p class="text-muted mb-2">{{ rider.display_name|default:"No display name" }}</p>
          <span class="badge {% if rider.status == 'active' %}bg-success{% else %}bg-secondary{% endif %} mb-3">
            {{ rider.status|capfirst }}
          </span>
          {% if rider.trash %}
            <div class="alert alert-warning py-2 mb-0">
              <i class="bx bx-trash me-1"></i>This rider is in trash
            </div>
          {% endif %}
        </div>

        <!-- Personal Information -->
        <div class="col-12 col-md-8">
          <h6 class="mb-3 text-primary">Personal Information</h6>
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label text-muted small">Full Name</label>
              <p class="mb-0 fw-medium">{{ rider.full_name }}</p>
            </div>
            <div class="col-md-6">
              <label class="form-label text-muted small">Display Name</label>
              <p class="mb-0 fw-medium">{{ rider.display_name|default:"Not provided" }}</p>
            </div>
            <div class="col-md-6">
              <label class="form-label text-muted small">Mobile Number</label>
              <p class="mb-0 fw-medium">
                {% if rider.mobile_number %}
                  <a href="tel:{{ rider.mobile_number }}" class="text-decoration-none">
                    <i class="bx bx-phone me-1"></i>{{ rider.mobile_number }}
                  </a>
                {% else %}
                  Not provided
                {% endif %}
              </p>
            </div>
            <div class="col-md-6">
              <label class="form-label text-muted small">Email</label>
              <p class="mb-0 fw-medium">
                {% if rider.email %}
                  <a href="mailto:{{ rider.email }}" class="text-decoration-none">
                    <i class="bx bx-envelope me-1"></i>{{ rider.email }}
                  </a>
                {% else %}
                  Not provided
                {% endif %}
              </p>
            </div>
            <div class="col-md-6">
              <label class="form-label text-muted small">Date of Birth</label>
              <p class="mb-0 fw-medium">
                {% if rider.dob %}
                  <i class="bx bx-calendar me-1"></i>{{ rider.dob|date:"F d, Y" }}
                {% else %}
                  Not provided
                {% endif %}
              </p>
            </div>
            <div class="col-md-6">
              <label class="form-label text-muted small">Status</label>
              <p class="mb-0">
                <span class="badge {% if rider.status == 'active' %}bg-success{% else %}bg-secondary{% endif %}">
                  {{ rider.status|capfirst }}
                </span>
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- Divider -->
      <hr class="my-4">

      <!-- Documents Section -->
      <div class="documents-section">
        <h6 class="mb-4 text-primary">Documents</h6>
        <div class="row g-4">
          {% if rider.aadhar_front or rider.aadhar_back %}
            <div class="col-md-6 col-lg-4">
              <div class="document-section">
                <h6 class="text-muted mb-3">Aadhar Card</h6>
                {% if rider.aadhar_front %}
                  <div class="mb-3">
                    <label class="small text-muted">Front Side</label>
                    <div class="document-preview">
                      <img src="{{ rider.aadhar_front.url }}" 
                           alt="Aadhar Front" 
                           class="img-fluid rounded border"
                           style="max-height: 200px; width: 100%; object-fit: cover;"
                           data-bs-toggle="modal" 
                           data-bs-target="#imageModal"
                           data-image-src="{{ rider.aadhar_front.url }}"
                           data-image-title="Aadhar Card - Front">
                    </div>
                  </div>
                {% endif %}
                {% if rider.aadhar_back %}
                  <div class="mb-3">
                    <label class="small text-muted">Back Side</label>
                    <div class="document-preview">
                      <img src="{{ rider.aadhar_back.url }}" 
                           alt="Aadhar Back" 
                           class="img-fluid rounded border"
                           style="max-height: 200px; width: 100%; object-fit: cover;"
                           data-bs-toggle="modal" 
                           data-bs-target="#imageModal"
                           data-image-src="{{ rider.aadhar_back.url }}"
                           data-image-title="Aadhar Card - Back">
                    </div>
                  </div>
                {% endif %}
              </div>
            </div>
          {% endif %}

          {% if rider.pan_card_image %}
            <div class="col-md-6 col-lg-4">
              <div class="document-section">
                <h6 class="text-muted mb-3">PAN Card</h6>
                <div class="document-preview">
                  <img src="{{ rider.pan_card_image.url }}" 
                       alt="PAN Card" 
                       class="img-fluid rounded border"
                       style="max-height: 200px; width: 100%; object-fit: cover;"
                       data-bs-toggle="modal" 
                       data-bs-target="#imageModal"
                       data-image-src="{{ rider.pan_card_image.url }}"
                       data-image-title="PAN Card">
                </div>
              </div>
            </div>
          {% endif %}

          {% if rider.driving_license_front or rider.driving_license_back %}
            <div class="col-md-6 col-lg-4">
              <div class="document-section">
                <h6 class="text-muted mb-3">Driving License</h6>
                {% if rider.driving_license_front %}
                  <div class="mb-3">
                    <label class="small text-muted">Front Side</label>
                    <div class="document-preview">
                      <img src="{{ rider.driving_license_front.url }}" 
                           alt="Driving License Front" 
                           class="img-fluid rounded border"
                           style="max-height: 200px; width: 100%; object-fit: cover;"
                           data-bs-toggle="modal" 
                           data-bs-target="#imageModal"
                           data-image-src="{{ rider.driving_license_front.url }}"
                           data-image-title="Driving License - Front">
                    </div>
                  </div>
                {% endif %}
                {% if rider.driving_license_back %}
                  <div class="mb-3">
                    <label class="small text-muted">Back Side</label>
                    <div class="document-preview">
                      <img src="{{ rider.driving_license_back.url }}" 
                           alt="Driving License Back" 
                           class="img-fluid rounded border"
                           style="max-height: 200px; width: 100%; object-fit: cover;"
                           data-bs-toggle="modal" 
                           data-bs-target="#imageModal"
                           data-image-src="{{ rider.driving_license_back.url }}"
                           data-image-title="Driving License - Back">
                    </div>
                  </div>
                {% endif %}
              </div>
            </div>
          {% endif %}

          {% if not rider.aadhar_front and not rider.aadhar_back and not rider.pan_card_image and not rider.driving_license_front and not rider.driving_license_back %}
            <div class="col-12">
              <div class="text-center text-muted py-4">
                <i class="bx bx-file" style="font-size: 3rem;"></i>
                <p class="mb-0">No documents uploaded</p>
              </div>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Image Modal -->
<div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="imageModalLabel">Document Preview</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body text-center">
        <img id="modalImage" src="" alt="Document" class="img-fluid">
      </div>
    </div>
  </div>
</div>

<style>
.document-preview img {
  cursor: pointer;
  transition: transform 0.2s;
}
.document-preview img:hover {
  transform: scale(1.02);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const imageModal = document.getElementById('imageModal');
  const modalImage = document.getElementById('modalImage');
  const modalTitle = document.getElementById('imageModalLabel');
  
  imageModal.addEventListener('show.bs.modal', function(event) {
    const trigger = event.relatedTarget;
    const imageSrc = trigger.getAttribute('data-image-src');
    const imageTitle = trigger.getAttribute('data-image-title');
    
    modalImage.src = imageSrc;
    modalTitle.textContent = imageTitle;
  });
});
</script>
</div>

<!-- Image Modal -->
<div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="imageModalLabel">Document Preview</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body text-center">
        <img id="modalImage" src="" alt="Document" class="img-fluid">
      </div>
    </div>
  </div>
</div>

<style>
.document-preview img {
  cursor: pointer;
  transition: transform 0.2s;
}
.document-preview img:hover {
  transform: scale(1.02);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const imageModal = document.getElementById('imageModal');
  const modalImage = document.getElementById('modalImage');
  const modalTitle = document.getElementById('imageModalLabel');
  
  imageModal.addEventListener('show.bs.modal', function(event) {
    const trigger = event.relatedTarget;
    const imageSrc = trigger.getAttribute('data-image-src');
    const imageTitle = trigger.getAttribute('data-image-title');
    
    modalImage.src = imageSrc;
    modalTitle.textContent = imageTitle;
  });
});
</script>
{% endblock content %}