{% extends 'base.html' %}
{% load humanize %}

{% block title %}{{ object.quotation_number }} - Quotation Details{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title">Quotation #{{ object.quotation_number }}</h3>
                    <div class="btn-group">
                        <a href="{% url 'quotations:quotation_print' object.id %}" target="_blank" class="btn btn-primary btn-sm" data-toggle="tooltip" title="Print Quotation">
                            <i class="fas fa-print"></i> Print
                        </a>
                        <a href="{% url 'quotations:quotation_edit' object.id %}" class="btn btn-warning btn-sm" data-toggle="tooltip" title="Edit Quotation">
                            <i class="fas fa-edit"></i> Edit
                        </a>
                        <a href="{% url 'quotations:quotation_list' %}" class="btn btn-secondary btn-sm" data-toggle="tooltip" title="Back to List">
                            <i class="fas fa-arrow-left"></i> Back
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <h4>From</h4>
                            <address>
                                <strong>{{ object.branch.name }}</strong><br>
                                {{ object.branch.address|linebreaksbr }}<br>
                                {% if object.branch.phone %}
                                    <i class="fas fa-phone"></i> {{ object.branch.phone }}<br>
                                {% endif %}
                                {% if object.branch.email %}
                                    <i class="fas fa-envelope"></i> {{ object.branch.email }}
                                {% endif %}
                            </address>
                        </div>
                        <div class="col-md-6 text-md-right">
                            <h4>To</h4>
                            <address>
                                <strong>{{ object.customer.name }}</strong><br>
                                {{ object.customer.get_address_display|linebreaksbr }}<br>
                                {% if object.customer.phone %}
                                    <i class="fas fa-phone"></i> {{ object.customer.phone }}<br>
                                {% endif %}
                                {% if object.customer.email %}
                                    <i class="fas fa-envelope"></i> {{ object.customer.email }}
                                {% endif %}
                            </address>
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <h4>Quotation Details</h4>
                            <table class="table table-sm">
                                <tr>
                                    <th>Quotation #</th>
                                    <td>{{ object.quotation_number }}</td>
                                </tr>
                                <tr>
                                    <th>Date</th>
                                    <td>{{ object.quotation_date|date:"F d, Y" }}</td>
                                </tr>
                                <tr>
                                    <th>Expiry Date</th>
                                    <td>{{ object.expiry_date|date:"F d, Y" }}</td>
                                </tr>
                                <tr>
                                    <th>Status</th>
                                    <td>
                                        <span class="badge badge-{{ object.get_status_class }}">
                                            {{ object.get_status_display }}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <th>Payment Terms</th>
                                    <td>{{ object.payment_terms|default:"-" }}</td>
                                </tr>
                                <tr>
                                    <th>Notes</th>
                                    <td>{{ object.notes|linebreaksbr|default:"-" }}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <h4>Summary</h4>
                            <table class="table table-sm">
                                <tr>
                                    <th>Subtotal:</th>
                                    <td class="text-right">KSh {{ object.subtotal|intcomma }}</td>
                                </tr>
                                {% if object.tax_amount %}
                                <tr>
                                    <th>Tax ({{ object.tax_rate }}%):</th>
                                    <td class="text-right">KSh {{ object.tax_amount|intcomma }}</td>
                                </tr>
                                {% endif %}
                                {% if object.discount_amount %}
                                <tr>
                                    <th>Discount:</th>
                                    <td class="text-right">- KSh {{ object.discount_amount|intcomma }}</td>
                                </tr>
                                {% endif %}
                                <tr class="table-active">
                                    <th>Total:</th>
                                    <th class="text-right">KSh {{ object.total|intcomma }}</th>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <h4>Items</h4>
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Item</th>
                                    <th>Description</th>
                                    <th class="text-right">Quantity</th>
                                    <th class="text-right">Unit Price</th>
                                    <th class="text-right">Tax</th>
                                    <th class="text-right">Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in object.items.all %}
                                <tr>
                                    <td>{{ forloop.counter }}</td>
                                    <td>{{ item.product.name }}{% if item.product.sku %} ({{ item.product.sku }}){% endif %}</td>
                                    <td>{{ item.description|default:"-" }}</td>
                                    <td class="text-right">{{ item.quantity|floatformat:2 }} {{ item.unit }}</td>
                                    <td class="text-right">KSh {{ item.unit_price|intcomma }}</td>
                                    <td class="text-right">{{ item.tax_rate }}%</td>
                                    <td class="text-right">KSh {{ item.total|intcomma }}</td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="7" class="text-center">No items found</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>

                    {% if object.terms %}
                    <div class="mt-4">
                        <h5>Terms & Conditions</h5>
                        <div class="border p-3">
                            {{ object.terms|linebreaks }}
                        </div>
                    </div>
                    {% endif %}
                </div>
                <div class="card-footer">
                    <div class="row">
                        <div class="col-md-6">
                            <a href="{% url 'quotations:quotation_edit' object.id %}" class="btn btn-warning">
                                <i class="fas fa-edit"></i> Edit
                            </a>
                            <a href="{% url 'quotations:quotation_print' object.id %}" target="_blank" class="btn btn-primary">
                                <i class="fas fa-print"></i> Print Quotation
                            </a>
                            <a href="{% url 'quotations:quotation_list' %}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Back to List
                            </a>
                        </div>
                        <div class="col-md-6 text-right">
                            <!-- Print and Clone buttons removed - views not implemented -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascript %}
<script>
    $(document).ready(function() {
        // Initialize tooltips
        $('[data-toggle="tooltip"]').tooltip();
        
        // Handle print button click
        $('.btn-print').on('click', function(e) {
            e.preventDefault();
            window.print();
        });
    });
</script>
{% endblock %}