{% extends "base.html" %}

{% block content %}

<div class="container-fluid">

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">

        <div>

            <h2 class="mb-1">
                <i class="bi bi-building text-primary"></i>
                {{ customer.company_name }}
            </h2>

            <small class="text-muted">
                Customer Code: <code>{{ customer.customer_code }}</code>
            </small>

        </div>

        <div>

            <a href="/customers/{{ customer.id }}/edit" class="btn btn-warning">

                <i class="bi bi-pencil"></i>

                Edit Customer

            </a>

            <a href="/customers" class="btn btn-secondary">

                <i class="bi bi-arrow-left"></i>

                Back

            </a>

        </div>

    </div>

    <!-- Quick Stats -->
    <div class="row g-3 mb-4">

        <div class="col-md-3">

            <div class="card shadow-sm">

                <div class="card-body">

                    <small class="text-muted">Total Enquiries</small>

                    <h2 class="text-primary">{{ enquiry_count }}</h2>

                </div>

            </div>

        </div>

        <div class="col-md-3">

            <div class="card shadow-sm">

                <div class="card-body">

                    <small class="text-muted">Total BOQs</small>

                    <h2 class="text-success">{{ boq_count }}</h2>

                </div>

            </div>

        </div>

        <div class="col-md-3">

            <div class="card shadow-sm">

                <div class="card-body">

                    <small class="text-muted">Total Value</small>

                    <h2 class="text-warning">{{ "%.2f"|format(total_boq_value) }}</h2>

                </div>

            </div>

        </div>

        <div class="col-md-3">

            <div class="card shadow-sm">

                <div class="card-body">

                    <small class="text-muted">Documents</small>

                    <h2 class="text-info">{{ document_count }}</h2>

                </div>

            </div>

        </div>

    </div>

    <!-- Navigation Tabs -->
    <ul class="nav nav-tabs mb-4" id="customerTabs">

        <li class="nav-item">

            <a class="nav-link {% if section == 'overview' %}active{% endif %}" 
               href="/customers/{{ customer.id }}?section=overview">

                <i class="bi bi-grid"></i> Overview

            </a>

        </li>

        <li class="nav-item">

            <a class="nav-link {% if section == 'contacts' %}active{% endif %}" 
               href="/customers/{{ customer.id }}?section=contacts">

                <i class="bi bi-person-lines-fill"></i> Contacts

            </a>

        </li>

        <li class="nav-item">

            <a class="nav-link {% if section == 'enquiries' %}active{% endif %}" 
               href="/customers/{{ customer.id }}?section=enquiries">

                <i class="bi bi-envelope"></i> Enquiries

                <span class="badge bg-primary">{{ enquiry_count }}</span>

            </a>

        </li>

        <li class="nav-item">

            <a class="nav-link {% if section == 'boqs' %}active{% endif %}" 
               href="/customers/{{ customer.id }}?section=boqs">

                <i class="bi bi-file-earmark-text"></i> BOQs

                <span class="badge bg-success">{{ boq_count }}</span>

            </a>

        </li>

        <li class="nav-item">

            <a class="nav-link {% if section == 'quotations' %}active{% endif %}" 
               href="/customers/{{ customer.id }}?section=quotations">

                <i class="bi bi-file-earmark-pdf"></i> Quotations

                <span class="badge bg-warning">{{ quotation_count }}</span>

            </a>

        </li>

        <li class="nav-item">

            <a class="nav-link {% if section == 'projects' %}active{% endif %}" 
               href="/customers/{{ customer.id }}?section=projects">

                <i class="bi bi-folder"></i> Projects

                <span class="badge bg-info">{{ project_count }}</span>

            </a>

        </li>

        <li class="nav-item">

            <a class="nav-link {% if section == 'documents' %}active{% endif %}" 
               href="/customers/{{ customer.id }}?section=documents">

                <i class="bi bi-paperclip"></i> Documents

                <span class="badge bg-secondary">{{ document_count }}</span>

            </a>

        </li>

    </ul>

    <!-- Tab Content -->
    <div class="tab-content">

        <!-- ========================================================== -->
        <!-- OVERVIEW TAB -->
        <!-- ========================================================== -->

        {% if section == 'overview' %}

        <div class="row">

            <div class="col-md-8">

                <div class="card shadow-sm">

                    <div class="card-header bg-primary text-white">

                        <i class="bi bi-info-circle"></i> Customer Overview

                    </div>

                    <div class="card-body">

                        <table class="table">

                            <tr>

                                <th width="200">Company</th>

                                <td>{{ customer.company_name }}</td>

                            </tr>

                            <tr>

                                <th>Trading Name</th>

                                <td>{{ customer.trading_name or "-" }}</td>

                            </tr>

                            <tr>

                                <th>Registration No</th>

                                <td>{{ customer.registration_number or "-" }}</td>

                            </tr>

                            <tr>

                                <th>VAT Number</th>

                                <td>{{ customer.vat_number or "-" }}</td>

                            </tr>

                            <tr>

                                <th>Address</th>

                                <td>

                                    {{ customer.street or "" }}<br>

                                    {{ customer.city or "" }} {{ customer.postal_code or "" }}<br>

                                    {{ customer.province or "" }}

                                </td>

                            </tr>

                            <tr>

                                <th>Contact Person</th>

                                <td>{{ customer.contact_name or "-" }}</td>

                            </tr>

                            <tr>

                                <th>Email</th>

                                <td>{{ customer.email or "-" }}</td>

                            </tr>

                            <tr>

                                <th>Telephone</th>

                                <td>{{ customer.telephone or "-" }}</td>

                            </tr>

                        </table>

                    </div>

                </div>

            </div>

            <div class="col-md-4">

                <!-- Summary Cards -->
                <div class="card shadow-sm mb-3">

                    <div class="card-header bg-success text-white">

                        <i class="bi bi-bar-chart"></i> Summary

                    </div>

                    <div class="card-body">

                        <div class="d-flex justify-content-between">

                            <span>Enquiries</span>

                            <strong>{{ enquiry_count }}</strong>

                        </div>

                        <hr>

                        <div class="d-flex justify-content-between">

                            <span>BOQs</span>

                            <strong>{{ boq_count }}</strong>

                        </div>

                        <hr>

                        <div class="d-flex justify-content-between">

                            <span>Quotations</span>

                            <strong>{{ quotation_count }}</strong>

                        </div>

                        <hr>

                        <div class="d-flex justify-content-between">

                            <span>Total Value</span>

                            <strong class="text-success">{{ "%.2f"|format(total_boq_value) }}</strong>

                        </div>

                        <hr>

                        <div class="d-flex justify-content-between">

                            <span>Documents</span>

                            <strong>{{ document_count }}</strong>

                        </div>

                    </div>

                </div>

                <!-- Quick Actions -->
                <div class="card shadow-sm">

                    <div class="card-header bg-dark text-white">

                        <i class="bi bi-lightning-fill"></i> Quick Actions

                    </div>

                    <div class="card-body d-grid gap-2">

                        <a href="/enquiries/new?customer={{ customer.id }}" class="btn btn-primary">

                            <i class="bi bi-envelope-plus"></i> New Enquiry

                        </a>

                        <a href="/boq/builder?customer={{ customer.id }}" class="btn btn-success">

                            <i class="bi bi-file-earmark-text"></i> New BOQ

                        </a>

                        <a href="/customers/{{ customer.id }}/edit" class="btn btn-warning">

                            <i class="bi bi-pencil"></i> Edit Customer

                        </a>

                    </div>

                </div>

            </div>

        </div>

        {% endif %}

        <!-- ========================================================== -->
        <!-- CONTACTS TAB -->
        <!-- ========================================================== -->

        {% if section == 'contacts' %}

        <div class="card shadow-sm">

            <div class="card-header bg-primary text-white">

                <i class="bi bi-person-lines-fill"></i> Contacts

            </div>

            <div class="card-body">

                <table class="table">

                    <tr>

                        <th width="200">Primary Contact</th>

                        <td>{{ customer.contact_name or "-" }}</td>

                    </tr>

                    <tr>

                        <th>Email</th>

                        <td>{{ customer.email or "-" }}</td>

                    </tr>

                    <tr>

                        <th>Telephone</th>

                        <td>{{ customer.telephone or "-" }}</td>

                    </tr>

                    <tr>

                        <th>Alternative Phone</th>

                        <td>{{ customer.alternative_phone or "-" }}</td>

                    </tr>

                </table>

            </div>

        </div>

        {% endif %}

        <!-- ========================================================== -->
        <!-- ENQUIRIES TAB -->
        <!-- ========================================================== -->

        {% if section == 'enquiries' %}

        <div class="card shadow-sm">

            <div class="card-header bg-primary text-white d-flex justify-content-between">

                <span><i class="bi bi-envelope"></i> Enquiries</span>

                <a href="/enquiries/new?customer={{ customer.id }}" class="btn btn-light btn-sm">

                    <i class="bi bi-plus-circle"></i> New Enquiry

                </a>

            </div>

            <div class="card-body p-0">

                {% if enquiries %}

                <table class="table table-hover mb-0">

                    <thead class="table-light">

                        <tr>

                            <th>Enquiry No</th>

                            <th>Subject</th>

                            <th>Type</th>

                            <th>Status</th>

                            <th>Priority</th>

                            <th>Date</th>

                            <th></th>

                        </tr>

                    </thead>

                    <tbody>

                    {% for enquiry in enquiries %}

                        <tr>

                            <td><code>{{ enquiry.enquiry_number }}</code></td>

                            <td>{{ enquiry.subject }}</td>

                            <td>{{ enquiry.enquiry_type or "-" }}</td>

                            <td>

                                <span class="badge bg-{% if enquiry.status == 'New' %}primary{% elif enquiry.status == 'Quoted' %}success{% else %}secondary{% endif %}">

                                    {{ enquiry.status }}

                                </span>

                            </td>

                            <td>

                                <span class="badge bg-{% if enquiry.priority == 'Urgent' %}danger{% elif enquiry.priority == 'High' %}warning{% else %}secondary{% endif %}">

                                    {{ enquiry.priority }}

                                </span>

                            </td>

                            <td>{{ enquiry.created_at.strftime('%d %b %Y') }}</td>

                            <td>

                                <a href="/enquiries/{{ enquiry.id }}" class="btn btn-sm btn-outline-primary">

                                    <i class="bi bi-eye"></i>

                                </a>

                            </td>

                        </tr>

                    {% endfor %}

                    </tbody>

                </table>

                {% else %}

                <p class="text-center text-muted py-4">

                    <i class="bi bi-inbox fs-1 d-block"></i>

                    No enquiries for this customer.

                </p>

                {% endif %}

            </div>

        </div>

        {% endif %}

        <!-- ========================================================== -->
        <!-- BOQS TAB -->
        <!-- ========================================================== -->

        {% if section == 'boqs' %}

        <div class="card shadow-sm">

            <div class="card-header bg-success text-white d-flex justify-content-between">

                <span><i class="bi bi-file-earmark-text"></i> BOQs</span>

                <a href="/enquiries/new?customer={{ customer.id }}" class="btn btn-light btn-sm">

                    <i class="bi bi-plus-circle"></i> New BOQ

                </a>

            </div>

            <div class="card-body p-0">

                {% if boqs %}

                <table class="table table-hover mb-0">

                    <thead class="table-light">

                        <tr>

                            <th>Quotation No</th>

                            <th>Enquiry</th>

                            <th>Status</th>

                            <th>Total</th>

                            <th>Date</th>

                            <th></th>

                        </tr>

                    </thead>

                    <tbody>

                    {% for boq in boqs %}

                        <tr>

                            <td><code>{{ boq.quotation_number }}</code></td>

                            <td>{{ boq.enquiry.enquiry_number }}</td>

                            <td>

                                <span class="badge bg-{% if boq.status == 'Draft' %}warning{% elif boq.status == 'Approved' %}success{% else %}secondary{% endif %}">

                                    {{ boq.status }}

                                </span>

                            </td>

                            <td><strong>{{ "%.2f"|format(boq.grand_total) }}</strong></td>

                            <td>{{ boq.created_at.strftime('%d %b %Y') }}</td>

                            <td>

                                <a href="/boq/view/{{ boq.id }}" class="btn btn-sm btn-outline-primary">

                                    <i class="bi bi-eye"></i>

                                </a>

                            </td>

                        </tr>

                    {% endfor %}

                    </tbody>

                </table>

                {% else %}

                <p class="text-center text-muted py-4">

                    <i class="bi bi-inbox fs-1 d-block"></i>

                    No BOQs for this customer.

                </p>

                {% endif %}

            </div>

        </div>

        {% endif %}

        <!-- ========================================================== -->
        <!-- QUOTATIONS TAB -->
        <!-- ========================================================== -->

        {% if section == 'quotations' %}

        <div class="card shadow-sm">

            <div class="card-header bg-warning text-dark d-flex justify-content-between">

                <span><i class="bi bi-file-earmark-pdf"></i> Quotations</span>

                <a href="/enquiries/new?customer={{ customer.id }}" class="btn btn-dark btn-sm">

                    <i class="bi bi-plus-circle"></i> New Quotation

                </a>

            </div>

            <div class="card-body p-0">

                {% if quotations %}

                <table class="table table-hover mb-0">

                    <thead class="table-light">

                        <tr>

                            <th>Quotation No</th>

                            <th>Enquiry</th>

                            <th>Status</th>

                            <th>Total</th>

                            <th>Date</th>

                            <th></th>

                        </tr>

                    </thead>

                    <tbody>

                    {% for boq in quotations %}

                        <tr>

                            <td><code>{{ boq.quotation_number }}</code></td>

                            <td>{{ boq.enquiry.enquiry_number }}</td>

                            <td>

                                <span class="badge bg-{% if boq.status == 'Draft' %}warning{% elif boq.status == 'Approved' %}success{% else %}secondary{% endif %}">

                                    {{ boq.status }}

                                </span>

                            </td>

                            <td><strong>{{ "%.2f"|format(boq.grand_total) }}</strong></td>

                            <td>{{ boq.created_at.strftime('%d %b %Y') }}</td>

                            <td>

                                <a href="/boq/view/{{ boq.id }}" class="btn btn-sm btn-outline-primary">

                                    <i class="bi bi-eye"></i>

                                </a>

                            </td>

                        </tr>

                    {% endfor %}

                    </tbody>

                </table>

                {% else %}

                <p class="text-center text-muted py-4">

                    <i class="bi bi-inbox fs-1 d-block"></i>

                    No quotations for this customer.

                </p>

                {% endif %}

            </div>

        </div>

        {% endif %}

        <!-- ========================================================== -->
        <!-- PROJECTS TAB -->
        <!-- ========================================================== -->

        {% if section == 'projects' %}

        <div class="card shadow-sm">

            <div class="card-header bg-info text-white">

                <i class="bi bi-folder"></i> Projects

                <span class="badge bg-light text-dark float-end">Coming Soon</span>

            </div>

            <div class="card-body">

                <p class="text-center text-muted py-5">

                    <i class="bi bi-folder fs-1 d-block"></i>

                    Projects module coming soon.

                </p>

            </div>

        </div>

        {% endif %}

        <!-- ========================================================== -->
        <!-- DOCUMENTS TAB -->
        <!-- ========================================================== -->

        {% if section == 'documents' %}

        <div class="card shadow-sm">

            <div class="card-header bg-secondary text-white">

                <i class="bi bi-paperclip"></i> Documents

                <span class="badge bg-light text-dark float-end">{{ document_count }}</span>

            </div>

            <div class="card-body p-0">

                {% if documents %}

                <table class="table table-hover mb-0">

                    <thead class="table-light">

                        <tr>

                            <th>Filename</th>

                            <th>Enquiry</th>

                            <th>Uploaded By</th>

                            <th>Date</th>

                            <th></th>

                        </tr>

                    </thead>

                    <tbody>

                    {% for doc in documents %}

                        <tr>

                            <td><i class="bi bi-file-earmark-text"></i> {{ doc.original_filename }}</td>

                            <td>{{ doc.enquiry.enquiry_number }}</td>

                            <td>{{ doc.uploaded_by or "-" }}</td>

                            <td>{{ doc.uploaded_at.strftime('%d %b %Y') }}</td>

                            <td>

                                <a href="/enquiries/{{ doc.enquiry_id }}/documents/{{ doc.id }}/download" class="btn btn-sm btn-outline-primary">

                                    <i class="bi bi-download"></i>

                                </a>

                            </td>

                        </tr>

                    {% endfor %}

                    </tbody>

                </table>

                {% else %}

                <p class="text-center text-muted py-4">

                    <i class="bi bi-inbox fs-1 d-block"></i>

                    No documents for this customer.

                </p>

                {% endif %}

            </div>

        </div>

        {% endif %}

    </div>

</div>

{% endblock %}