{% extends "base.html" %}
{% load static %}

{% block content %}
<div class="container mt-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'customer-list' %}">Customers</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ customer.name }}</li>
        </ol>
    </nav>

    {% if customer.is_deleted %}
    <div class="alert alert-danger" role="alert">
        This customer was deleted on {{ customer.deleted_at|date:"Y-m-d H:i" }} by {{ customer.deleted_by.get_full_name|default:"Unknown" }}.
    </div>
    {% endif %}

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h2 class="mb-0">{{ customer.name }}</h2>
            <div>
                <a href="{% url 'customer_edit' customer.pk %}" class="btn btn-primary me-2 {% if customer.is_deleted %}disabled{% endif %}" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit this customer's details">
                    Edit
                </a>
                <a href="{% url 'customer_delete' customer.pk %}" class="btn btn-danger {% if customer.is_deleted %}disabled{% endif %}" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete this customer" onclick="return confirm('Are you sure you want to delete this customer?');">
                    Delete
                </a>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <h4>Details</h4>
                    <table class="table table-sm">
                        <tr>
                            <th>Email:</th>
                            <td>{{ customer.email }}</td>
                        </tr>
                        <tr>
                            <th>Status:</th>
                            <td>{{ customer.get_status_display }}</td>
                        </tr>
                        <tr>
                            <th>Owner:</th>
                            <td>{{ customer.owner.get_full_name|default:"N/A" }}</td>
                        </tr>
                        <tr>
                            <th>Created At:</th>
                            <td>{{ customer.created_at|date:"Y-m-d H:i" }}</td>
                        </tr>
                         <tr>
                            <th>Tenant:</th>
                            <td>{{ customer.tenant.name }}</td>
                        </tr>
                        {% if customer.restored_at %}
                        <tr>
                            <th>Restored At:</th>
                            <td>{{ customer.restored_at|date:"Y-m-d H:i" }}</td>
                        </tr>
                        <tr>
                            <th>Restored By:</th>
                            <td>{{ customer.restored_by.get_full_name|default:"Unknown" }}</td>
                        </tr>
                        {% endif %}
                    </table>
                </div>
                <div class="col-md-6">
                    <h4>Summary</h4>
                    <ul class="list-group">
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            Opportunities
                            <span class="badge bg-primary rounded-pill">{{ opportunity_count }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            Leads
                            <span class="badge bg-primary rounded-pill">{{ lead_count }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            Notes
                            <span class="badge bg-primary rounded-pill">{{ note_count }}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs" id="customer-tabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="opportunities-tab" data-bs-toggle="tab" data-bs-target="#opportunities" type="button" role="tab" aria-controls="opportunities" aria-selected="true">Opportunities ({{ opportunity_count }})</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="leads-tab" data-bs-toggle="tab" data-bs-target="#leads" type="button" role="tab" aria-controls="leads" aria-selected="false">Leads ({{ lead_count }})</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="history-tab" data-bs-toggle="tab" data-bs-target="#history" type="button" role="tab" aria-controls="history" aria-selected="false">Contact History</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="notes-tab" data-bs-toggle="tab" data-bs-target="#notes" type="button" role="tab" aria-controls="notes" aria-selected="false">Notes ({{ note_count }})</button>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="customer-tabs-content">
                        <div class="tab-pane fade show active" id="opportunities" role="tabpanel" aria-labelledby="opportunities-tab">
                            <h4>Opportunities</h4>
                            {% if opportunities %}
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Stage</th>
                                            <th>Value</th>
                                            <th>Close Date</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    {% for op in opportunities %}
                                        <tr>
                                            <td>{{ op.name }}</td>
                                            <td>{{ op.get_stage_display }}</td>
                                            <td>${{ op.value }}</td>
                                            <td>{{ op.close_date|date:"Y-m-d" }}</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            {% else %}
                                <p>No opportunities found for this customer.</p>
                            {% endif %}
                        </div>
                        <div class="tab-pane fade" id="leads" role="tabpanel" aria-labelledby="leads-tab">
                            <h4>Leads</h4>
                             {% if leads %}
                                <table class="table table-striped">
                                     <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Status</th>
                                            <th>Source</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    {% for lead in leads %}
                                        <tr>
                                            <td>{{ lead.name }}</td>
                                            <td>{{ lead.get_status_display }}</td>
                                            <td>{{ lead.source }}</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            {% else %}
                                <p>No leads found for this customer.</p>
                            {% endif %}
                        </div>
                        <div class="tab-pane fade" id="history" role="tabpanel" aria-labelledby="history-tab">
                            <h4>Contact History</h4>
                            {% if contact_history %}
                                <ul class="list-group">
                                {% for entry in contact_history %}
                                    <li class="list-group-item">
                                        <strong>{{ entry.created_at|date:"Y-m-d H:i" }}:</strong> {{ entry.notes }} ({{ entry.get_interaction_type_display }})
                                    </li>
                                {% endfor %}
                                </ul>
                            {% else %}
                                <p>No contact history found.</p>
                            {% endif %}
                        </div>
                        <div class="tab-pane fade" id="notes" role="tabpanel" aria-labelledby="notes-tab">
                            <h4>Notes</h4>
                            {% if notes %}
                                <ul class="list-group">
                                {% for note in notes %}
                                    <li class="list-group-item">
                                        <p>{{ note.note }}</p>
                                        <small class="text-muted">By {{ note.user.get_full_name }} on {{ note.created_at|date:"Y-m-d H:i" }}</small>
                                    </li>
                                {% endfor %}
                                </ul>
                            {% else %}
                                <p>No notes found.</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        })
    });
</script>
{% endblock %}
