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

{% block content %}
<div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
    <div class="breadcrumb-title pe-3">Service Request Detail</div>
    <div class="ps-3">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0 p-0">
                <li class="breadcrumb-item"><a href="{% url 'service-request-management' %}"><i class="bx bx-home-alt"></i></a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ service_request.request_id }}</li>
            </ol>
        </nav>
    </div>
</div>

<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title mb-4">Request Information</h5>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label text-muted">Request ID</label>
                        <p class="fw-bold">{{ service_request.request_id }}</p>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label text-muted">Status</label>
                        <p>
                            <span class="badge bg-primary">{{ service_request.get_status_display }}</span>
                        </p>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label text-muted">Category</label>
                        <p>{{ service_request.category.name }}</p>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label text-muted">Service Date & Time</label>
                        <p>{{ service_request.service_date }} at {{ service_request.service_time }}</p>
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label text-muted">Notes</label>
                    <p>{{ service_request.notes|default:"-" }}</p>
                </div>
                
                <hr>
                <h5 class="card-title mb-3">Items Requested</h5>
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Item Name</th>
                                <th>Price</th>
                                <th>Quantity</th>
                                <th>Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in service_request.items %}
                            <tr>
                                <td>{{ item.name }}</td>
                                <td>{{ item.price }}</td>
                                <td>{{ item.qty|default:1 }}</td>
                                <td>{{ item.total|default:item.price }}</td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="4" class="text-center">No items listed.</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                        <tfoot>
                            <tr>
                                <th colspan="3" class="text-end">Total Price</th>
                                <th>{{ service_request.total_price }}</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
        
        <div class="card">
            <div class="card-body">
                <h5 class="card-title mb-3">Service Address</h5>
                {% if service_request.service_address %}
                    <div class="ms-2">
                      {% if service_request.service_address.street_address %}
                        <div><strong>Street:</strong> {{ service_request.service_address.street_address }}</div>
                      {% endif %}
                      {% if service_request.service_address.city %}
                        <div><strong>City:</strong> {{ service_request.service_address.city }}</div>
                      {% endif %}
                      {% if service_request.service_address.state %}
                        <div><strong>State:</strong> {{ service_request.service_address.state }}</div>
                      {% endif %}
                      {% if service_request.service_address.zip_code %}
                        <div><strong>Zip Code:</strong> {{ service_request.service_address.zip_code }}</div>
                      {% endif %}
                      {% if service_request.service_address.landmark %}
                        <div><strong>Landmark:</strong> {{ service_request.service_address.landmark }}</div>
                      {% endif %}
                      
                      {% if not service_request.service_address.street_address and service_request.service_address.raw_address %}
                         <div>{{ service_request.service_address.raw_address }}</div>
                      {% endif %}
                    </div>
                {% else %}
                  <div class="text-muted">No service address available.</div>
                {% endif %}

                {% if service_request.geo_location %}
                <hr>
                <h5 class="card-title mb-3">Geo Location</h5>
                <div class="ms-2">
                    {% if service_request.geo_location.latitude and service_request.geo_location.longitude %}
                        <div><strong>Latitude:</strong> {{ service_request.geo_location.latitude }}</div>
                        <div><strong>Longitude:</strong> {{ service_request.geo_location.longitude }}</div>
                    {% else %}
                        <pre>{{ service_request.geo_location|pprint }}</pre>
                    {% endif %}
                </div>
                {% endif %}
            </div>
        </div>
        <div class="mb-3 d-flex gap-2">
             <a href="{% url 'service-request-management' %}" class="btn btn-light px-4">Back to List</a>
             <a href="{% url 'service-request-edit' service_request.pk %}" class="btn btn-primary px-4">Edit Details</a>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title mb-3">Contact Details</h5>
                <div class="mb-3">
                    <label class="form-label text-muted">Contact Name</label>
                    <p class="fw-bold">{{ service_request.contact_name }}</p>
                </div>
                <div class="mb-3">
                    <label class="form-label text-muted">Contact Mobile</label>
                    <p class="fw-bold">{{ service_request.contact_mobile }}</p>
                </div>
                <hr>
                <h6 class="text-muted mb-2">Registered User</h6>
                <div class="d-flex align-items-center mb-3">
                    <div>
                        <h6 class="mb-0">{{ service_request.user.get_full_name|default:service_request.user.username }}</h6>
                        <p class="mb-0 text-muted">{{ service_request.user.email }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <h5 class="card-title mb-3">Update Request</h5>
                <form method="post">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label class="form-label">Change Status</label>
                        <select name="status" class="form-select">
                            {% for code, label in status_choices %}
                                <option value="{{ code }}" {% if service_request.status == code %}selected{% endif %}>{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Total Price (After Inspection)</label>
                        <input type="number" step="0.01" name="total_price" class="form-control" value="{{ service_request.total_price }}">
                    </div>
                    <button type="submit" class="btn btn-primary w-100">Update</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}