{% extends "base.html" %}

{% block content %}

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

    <div>

        <h2 class="mb-1">

            {{ customer.company_name }}

        </h2>

        <small class="text-muted">

            Customer Code :
            {{ customer.customer_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>

<hr>

<div class="row mb-4">

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

        <div class="card shadow-sm">

            <div class="card-body">

                <small class="text-muted">

                    Contact Person

                </small>

                <h5>

                    {{ customer.contact_name or "-" }}

                </h5>

            </div>

        </div>

    </div>

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

        <div class="card shadow-sm">

            <div class="card-body">

                <small class="text-muted">

                    Telephone

                </small>

                <h5>

                    {{ customer.telephone or "-" }}

                </h5>

            </div>

        </div>

    </div>

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

        <div class="card shadow-sm">

            <div class="card-body">

                <small class="text-muted">

                    Email

                </small>

                <h6>

                    {{ customer.email or "-" }}

                </h6>

            </div>

        </div>

    </div>

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

        <div class="card shadow-sm">

            <div class="card-body">

                <small class="text-muted">

                    City

                </small>

                <h5>

                    {{ customer.city or "-" }}

                </h5>

            </div>

        </div>

    </div>

</div>

<ul class="nav nav-tabs mb-4">

    <li class="nav-item">

        <a class="nav-link active">

            Overview

        </a>

    </li>

    <li class="nav-item">

        <a class="nav-link">

            Contacts

        </a>

    </li>

    <li class="nav-item">

        <a class="nav-link">

            Enquiries

        </a>

    </li>

    <li class="nav-item">

        <a class="nav-link">

            BOQs

        </a>

    </li>

    <li class="nav-item">

        <a class="nav-link">

            Estimates

        </a>

    </li>

    <li class="nav-item">

        <a class="nav-link">

            Quotations

        </a>

    </li>

    <li class="nav-item">

        <a class="nav-link">

            Projects

        </a>

    </li>

    <li class="nav-item">

        <a class="nav-link">

            Documents

        </a>

    </li>

    <li class="nav-item">

        <a class="nav-link">

            Activity

        </a>

    </li>

</ul>

<div class="row">

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

        <div class="card shadow-sm">

            <div class="card-header">

                Customer Overview

            </div>

            <div class="card-body">

                <table class="table">

                    <tr>

                        <th>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>

                </table>

            </div>

        </div>

    </div>

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

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

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

                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>

{% endblock %}