{% extends 'base.html' %}

{% block title %}Booking Details{% endblock %}

{% 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">Booking Details - {{ booking.booking_id|default:'None' }}</h5>

          <table class="table table-bordered">
            <tr><th>Booking ID</th><td>{{ booking.booking_id|default:'None' }}</td></tr>
            <tr><th>User</th><td>{{ booking.user.get_full_name|default:booking.user.username }}</td></tr>
            <tr><th>Status</th><td>{{ booking.get_booking_status_display }}</td></tr>
            <tr><th>Assigned Rider</th><td>{% if booking.rider %}{{ booking.rider.display_name|default:booking.rider.full_name }}{% else %}Not Assigned{% endif %}</td></tr>
            <tr><th>Pickup Type</th><td>{{ booking.get_pickup_type_display }}</td></tr>
            <tr><th>Schedule</th><td>{% if booking.schedule_pickup_date %}{{ booking.schedule_pickup_date }} {{ booking.schedule_pickup_time }}{% endif %}</td></tr>
            <tr><th>Contact</th><td>{{ booking.contact_name }} / {{ booking.contact_mobile }}</td></tr>
            <tr><th>Quantity</th><td>{{ booking.total_quantity }}</td></tr>
            <tr><th>Total Price</th><td>{{ booking.total_final_price }} {{ booking.currency_code }}</td></tr>
            <tr>
              <th>Pickup Address</th>
              <td>
                {% if booking.pickup_address %}
                    <div class="ms-2">
                      {% if booking.pickup_address.street_address %}
                        <div><strong>Street:</strong> {{ booking.pickup_address.street_address }}</div>
                      {% endif %}
                      {% if booking.pickup_address.city %}
                        <div><strong>City:</strong> {{ booking.pickup_address.city }}</div>
                      {% endif %}
                      {% if booking.pickup_address.state %}
                        <div><strong>State:</strong> {{ booking.pickup_address.state }}</div>
                      {% endif %}
                      {% if booking.pickup_address.zip_code %}
                        <div><strong>Zip Code:</strong> {{ booking.pickup_address.zip_code }}</div>
                      {% endif %}
                      {% if booking.pickup_address.landmark %}
                        <div><strong>Landmark:</strong> {{ booking.pickup_address.landmark }}</div>
                      {% endif %}
                      
                      {% if not booking.pickup_address.street_address and booking.pickup_address.raw_address %}
                         <div>{{ booking.pickup_address.raw_address }}</div>
                      {% endif %}
                    </div>
                {% else %}
                  <div class="text-muted">No pickup address available.</div>
                {% endif %}
              </td>
            </tr>
            <tr>
              <th>Order Details (Standard)</th>
              <td>
                {% if order_details_display %}
                  {% for service_key, service_val in order_details_display.items %}
                    <div class="mb-3">
                      <strong>Service:</strong> {{ service_key }}
                      {% if service_val %}
                        {% for category_key, items in service_val.items %}
                          <div class="ms-3 mt-2">
                            <strong>Category:</strong> {{ category_key }}
                            <div class="table-responsive ms-3">
                              <table class="table table-sm table-bordered mt-2">
                                <thead>
                                  <tr>
                                    <th>Item ID</th>
                                    <th>Name</th>
                                    <th>Service</th>
                                    <th class="text-end">Qty</th>
                                    <th class="text-end">Unit Price</th>
                                    <th class="text-end">Total</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  {% for item in items %}
                                    <tr>
                                      <td>{{ item.item_id }}</td>
                                      <td>{{ item.item_name }}</td>
                                      <td>{{ item.item_service }}</td>
                                      <td class="text-end">{{ item.item_quantity }}</td>
                                      <td class="text-end">{{ item.unit_price }}</td>
                                      <td class="text-end">{{ item.total_item_price }}</td>
                                    </tr>
                                    {% if item.booking_items %}
                                    <tr>
                                      <td colspan="6">
                                        <div class="p-2 bg-light">
                                          <strong>Individual Items (Tags):</strong>
                                          <table class="table table-xs mb-0 mt-1 bg-white">
                                            <thead>
                                              <tr>
                                                <th>Tag</th>
                                                <th>Color</th>
                                                <th>Damaged?</th>
                                                <th>Description</th>
                                              </tr>
                                            </thead>
                                            <tbody>
                                              {% for tag in item.booking_items %}
                                              <tr>
                                                <td><span class="badge bg-secondary">{{ tag.tag }}</span></td>
                                                <td>{{ tag.color|default:"-" }}</td>
                                                <td>
                                                  {% if tag.is_damaged %}
                                                    <span class="text-danger fw-bold">Yes</span>
                                                  {% else %}
                                                    <span class="text-success">No</span>
                                                  {% endif %}
                                                </td>
                                                <td>{{ tag.damage_description|default:"-" }}</td>
                                              </tr>
                                              {% endfor %}
                                            </tbody>
                                          </table>
                                        </div>
                                      </td>
                                    </tr>
                                    {% endif %}
                                  {% endfor %}
                                </tbody>
                              </table>
                            </div>
                          </div>
                        {% endfor %}
                      {% else %}
                        <div class="ms-3 text-muted">No categories/items for this service.</div>
                      {% endif %}
                    </div>
                  {% endfor %}
                {% else %}
                  <div class="text-muted">No standard items.</div>
                {% endif %}
              </td>
            </tr>

            <tr>
              <th>Premium Details</th>
              <td>
                {% if premium_details_display %}
                  {% for service_key, service_val in premium_details_display.items %}
                    <div class="mb-3">
                      <strong>Service:</strong> {{ service_key }}
                      {% if service_val %}
                        {% for category_key, items in service_val.items %}
                          <div class="ms-3 mt-2">
                            <strong>Category:</strong> {{ category_key }}
                            <div class="table-responsive ms-3">
                              <table class="table table-sm table-bordered mt-2">
                                <thead>
                                  <tr>
                                    <th>Item ID</th>
                                    <th>Name</th>
                                    <th>Service</th>
                                    <th>Brand</th>
                                    <th>Material</th>
                                    <th>Note</th>
                                    <th class="text-end">Qty</th>
                                    <th class="text-end">Unit Price</th>
                                    <th class="text-end">Total</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  {% for item in items %}
                                    <tr>
                                      <td>{{ item.item_id }}</td>
                                      <td>{{ item.item_name }}</td>
                                      <td>{{ item.item_service }}</td>
                                      <td>{{ item.brand_name|default:"-" }}</td>
                                      <td>{{ item.material_name|default:"-" }}</td>
                                      <td>{{ item.note|default:"-" }}</td>
                                      <td class="text-end">{{ item.item_quantity }}</td>
                                      <td class="text-end">{{ item.unit_price }}</td>
                                      <td class="text-end">{{ item.total_item_price }}</td>
                                    </tr>
                                    {% if item.booking_items %}
                                    <tr>
                                      <td colspan="9">
                                        <div class="p-2 bg-light">
                                          <strong>Individual Items (Tags):</strong>
                                          <table class="table table-xs mb-0 mt-1 bg-white">
                                            <thead>
                                              <tr>
                                                <th>Tag</th>
                                                <th>Color</th>
                                                <th>Damaged?</th>
                                                <th>Description</th>
                                              </tr>
                                            </thead>
                                            <tbody>
                                              {% for tag in item.booking_items %}
                                              <tr>
                                                <td><span class="badge bg-secondary">{{ tag.tag }}</span></td>
                                                <td>{{ tag.color|default:"-" }}</td>
                                                <td>
                                                  {% if tag.is_damaged %}
                                                    <span class="text-danger fw-bold">Yes</span>
                                                  {% else %}
                                                    <span class="text-success">No</span>
                                                  {% endif %}
                                                </td>
                                                <td>{{ tag.damage_description|default:"-" }}</td>
                                              </tr>
                                              {% endfor %}
                                            </tbody>
                                          </table>
                                        </div>
                                      </td>
                                    </tr>
                                    {% endif %}
                                  {% endfor %}
                                </tbody>
                              </table>
                            </div>
                          </div>
                        {% endfor %}
                      {% else %}
                        <div class="ms-3 text-muted">No categories/items for this service.</div>
                      {% endif %}
                    </div>
                  {% endfor %}
                {% else %}
                  <div class="text-muted">No premium items.</div>
                {% endif %}
              </td>
            </tr>

            <tr>
              <th>Luxury Details</th>
              <td>
                {% if luxury_details_display %}
                  {% for service_key, service_val in luxury_details_display.items %}
                    <div class="mb-3">
                      <strong>Service:</strong> {{ service_key }}
                      {% if service_val %}
                        {% for category_key, items in service_val.items %}
                          <div class="ms-3 mt-2">
                            <strong>Category:</strong> {{ category_key }}
                            <div class="table-responsive ms-3">
                              <table class="table table-sm table-bordered mt-2">
                                <thead>
                                  <tr>
                                    <th>Item ID</th>
                                    <th>Name</th>
                                    <th>Service</th>
                                    <th>Brand</th>
                                    <th>Material</th>
                                    <th>Note</th>
                                    <th class="text-end">Qty</th>
                                    <th class="text-end">Unit Price</th>
                                    <th class="text-end">Total</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  {% for item in items %}
                                    <tr>
                                      <td>{{ item.item_id }}</td>
                                      <td>{{ item.item_name }}</td>
                                      <td>{{ item.item_service }}</td>
                                      <td>{{ item.brand_name|default:"-" }}</td>
                                      <td>{{ item.material_name|default:"-" }}</td>
                                      <td>{{ item.note|default:"-" }}</td>
                                      <td class="text-end">{{ item.item_quantity }}</td>
                                      <td class="text-end">{{ item.unit_price }}</td>
                                      <td class="text-end">{{ item.total_item_price }}</td>
                                    </tr>
                                    {% if item.booking_items %}
                                    <tr>
                                      <td colspan="9">
                                        <div class="p-2 bg-light">
                                          <strong>Individual Items (Tags):</strong>
                                          <table class="table table-xs mb-0 mt-1 bg-white">
                                            <thead>
                                              <tr>
                                                <th>Tag</th>
                                                <th>Color</th>
                                                <th>Damaged?</th>
                                                <th>Description</th>
                                              </tr>
                                            </thead>
                                            <tbody>
                                              {% for tag in item.booking_items %}
                                              <tr>
                                                <td><span class="badge bg-secondary">{{ tag.tag }}</span></td>
                                                <td>{{ tag.color|default:"-" }}</td>
                                                <td>
                                                  {% if tag.is_damaged %}
                                                    <span class="text-danger fw-bold">Yes</span>
                                                  {% else %}
                                                    <span class="text-success">No</span>
                                                  {% endif %}
                                                </td>
                                                <td>{{ tag.damage_description|default:"-" }}</td>
                                              </tr>
                                              {% endfor %}
                                            </tbody>
                                          </table>
                                        </div>
                                      </td>
                                    </tr>
                                    {% endif %}
                                  {% endfor %}
                                </tbody>
                              </table>
                            </div>
                          </div>
                        {% endfor %}
                      {% else %}
                        <div class="ms-3 text-muted">No categories/items for this service.</div>
                      {% endif %}
                    </div>
                  {% endfor %}
                {% else %}
                  <div class="text-muted">No luxury items.</div>
                {% endif %}
              </td>
            </tr>

            <tr>
              <th>Totals</th>
              <td>
                  <div class="ms-3">Quantity: {{ booking.total_quantity }}</div>
                  <div class="ms-3">Final Price: {{ booking.total_final_price }} {{ booking.currency_code }}</div>
              </td>
            </tr>
          </table>

          <div class="d-md-flex d-grid align-items-center gap-3">
            <a class="btn btn-light px-4" href="{% url 'booking-management' %}">Back</a>
            <a class="btn btn-primary px-4" href="{% url 'booking-edit' booking.id %}">Edit</a>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}