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

{% block title %}{% trans "Customers" %} | {{ site_settings.business_name }}{% endblock %}

{% block content %}
<div class="container">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold mb-1">{% trans "Customers" %}</h2>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'index' %}">{% trans "Dashboard" %}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{% trans "Customers" %}</li>
                </ol>
            </nav>
        </div>
        <button class="btn btn-primary shadow-sm" data-bs-toggle="modal" data-bs-target="#addCustomerModal">
            <i class="bi bi-person-plus me-2"></i>{% trans "Add Customer" %}
        </button>
    </div>

    {% if messages %}
    <div class="mb-4">
        {% for message in messages %}
        <div class="alert alert-{{ message.tags }} alert-dismissible fade show rounded-3" role="alert">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <div class="card border-0 shadow-sm rounded-4">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0" id="customersTable">
                    <thead class="bg-light">
                        <tr>
                            <th class="ps-4">{% trans "Name" %}</th>
                            <th>{% trans "Phone" %}</th>
                            <th>{% trans "Email" %}</th>
                            <th>{% trans "Total Sales" %}</th>
                            <th class="text-end pe-4">{% trans "Actions" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for customer in customers %}
                        <tr>
                            <td class="ps-4 fw-bold text-dark">{{ customer.name }}</td>
                            <td>{{ customer.phone|default:"-" }}</td>
                            <td>{{ customer.email|default:"-" }}</td>
                            <td><span class="badge bg-primary bg-opacity-10 text-primary">{{ site_settings.currency_symbol }}{{ customer.total_sales|default:"0.000"|floatformat:3 }}</span></td>
                            <td class="text-end pe-4">
                                <div class="btn-group">
                                    <button class="btn btn-sm btn-light rounded-pill px-2 me-1" data-bs-toggle="modal" data-bs-target="#viewCustomerModal{{ customer.id }}" title="{% trans 'View' %}">
                                        <i class="bi bi-eye text-primary"></i>
                                    </button>
                                    <button class="btn btn-sm btn-light rounded-pill px-2 me-1" data-bs-toggle="modal" data-bs-target="#editCustomerModal{{ customer.id }}" title="{% trans 'Edit' %}">
                                        <i class="bi bi-pencil text-success"></i>
                                    </button>
                                    <a href="{% url 'delete_customer' customer.id %}" class="btn btn-sm btn-light rounded-pill px-2" onclick="return confirm('{% trans 'Are you sure you want to delete this customer?' %}')" title="{% trans 'Delete' %}">
                                        <i class="bi bi-trash text-danger"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
                {% include "core/pagination.html" with page_obj=customers %}
        </div>
    </div>
</div>

<!-- Add Customer Modal -->
<div class="modal fade" id="addCustomerModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content rounded-4 border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold">{% trans "Add New Customer" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label small fw-bold">{% trans "Full Name" %}</label>
                    <input type="text" id="addCustName" class="form-control rounded-3" required>
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-bold">{% trans "Phone Number" %}</label>
                    <input type="text" id="addCustPhone" class="form-control rounded-3">
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-bold">{% trans "Email Address" %}</label>
                    <input type="email" id="addCustEmail" class="form-control rounded-3">
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-bold">{% trans "Address" %}</label>
                    <textarea id="addCustAddress" class="form-control rounded-3" rows="3"></textarea>
                </div>
            </div>
            <div class="modal-footer border-0">
                <button type="button" class="btn btn-light rounded-3" data-bs-dismiss="modal">{% trans "Close" %}</button>
                <button type="button" class="btn btn-outline-primary rounded-3" id="saveAndAddAnotherCust">{% trans "Save & Add Another" %}</button>
                <button type="button" class="btn btn-primary rounded-3 px-4" id="saveCust">{% trans "Save" %}</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        async function saveCustomer(stayOpen = false) {
            const name = document.getElementById('addCustName').value;
            const phone = document.getElementById('addCustPhone').value;
            const email = document.getElementById('addCustEmail').value;
            const address = document.getElementById('addCustAddress').value;

            if (!name) return alert('Please fill customer name');

            const response = await fetch('{% url "add_customer_ajax" %}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ name, phone, email, address })
            });
            const data = await response.json();
            if (data.success) {
                if (stayOpen) {
                    document.getElementById('addCustName').value = '';
                    document.getElementById('addCustPhone').value = '';
                    document.getElementById('addCustEmail').value = '';
                    document.getElementById('addCustAddress').value = '';
                    alert('{% trans "Customer added. You can add another one." %}');
                } else {
                    window.location.reload();
                }
            } else {
                alert('Error: ' + data.error);
            }
        }

        document.getElementById('saveCust').onclick = () => saveCustomer(false);
        document.getElementById('saveAndAddAnotherCust').onclick = () => saveCustomer(true);
    });
</script>
{% endblock %}