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

{% block title %}Sales - POS System{% endblock %}

{% block page_pretitle %}
<div class="page-pretitle">
    <span class="badge badge-purple-light">
        <i class="ti ti-building-store me-1"></i>POS System
    </span>
</div>
{% endblock %}

{% block page_title %}
<i class="ti ti-receipt me-2"></i>Sales
{% endblock %}

{% block page_actions %}
<a href="{% url 'pos:dashboard' %}" class="btn btn-outline-secondary">
    <i class="ti ti-arrow-left me-1"></i> Back to Dashboard
</a>
<a href="{% url 'pos:sale_create' %}" class="btn btn-primary">
    <i class="ti ti-plus"></i> New Sale
</a>
{% endblock %}

{% block content %}
<div class="animate-fade-in-up">
    <!-- Summary Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card dashboard-card card-success hover-lift">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-2">
                        <div class="stat-icon success me-3" style="width: 48px; height: 48px;">
                            <i class="ti ti-cash"></i>
                        </div>
                        <div class="flex-grow-1">
                            <div class="text-muted small mb-1">Today's Sales</div>
                            <div class="stat-value text-success">RM {{ today_sales|floatformat:2 }}</div>
                        </div>
                    </div>
                    <div class="text-muted small">{{ today_count }} transaction{{ today_count|pluralize }}</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card dashboard-card card-primary hover-lift">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-2">
                        <div class="stat-icon primary me-3" style="width: 48px; height: 48px;">
                            <i class="ti ti-calendar-week"></i>
                        </div>
                        <div class="flex-grow-1">
                            <div class="text-muted small mb-1">This Week</div>
                            <div class="stat-value text-primary">RM {{ week_sales|floatformat:2 }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card dashboard-card card-info hover-lift">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-2">
                        <div class="stat-icon info me-3" style="width: 48px; height: 48px;">
                            <i class="ti ti-calendar-month"></i>
                        </div>
                        <div class="flex-grow-1">
                            <div class="text-muted small mb-1">This Month</div>
                            <div class="stat-value text-info">RM {{ month_sales|floatformat:2 }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card dashboard-card hover-lift">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-2">
                        <div class="stat-icon" style="width: 48px; height: 48px; background: linear-gradient(135deg, #6c757d 0%, #495057 100%);">
                            <i class="ti ti-chart-bar"></i>
                        </div>
                        <div class="flex-grow-1">
                            <div class="text-muted small mb-1">Total Sales</div>
                            <div class="stat-value">RM {{ total_sales|floatformat:2 }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="card shadow-sm mb-4">
        <div class="card-header bg-gradient-primary text-white">
            <h3 class="card-title mb-0">
                <i class="ti ti-filter me-2"></i>Search & Filter
            </h3>
        </div>
        <div class="card-body">
            <form method="get" action="" class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">
                        <i class="ti ti-search me-1"></i>Search
                    </label>
                    <input type="text" name="search" class="form-control" placeholder="Sale number or customer..." value="{{ request.GET.search }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">
                        <i class="ti ti-flag me-1"></i>Status
                    </label>
                    <select name="status" class="form-select">
                        <option value="">All Status</option>
                        <option value="DRAFT" {% if request.GET.status == "DRAFT" %}selected{% endif %}>Draft</option>
                        <option value="COMPLETED" {% if request.GET.status == "COMPLETED" %}selected{% endif %}>Completed</option>
                        <option value="CANCELLED" {% if request.GET.status == "CANCELLED" %}selected{% endif %}>Cancelled</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">
                        <i class="ti ti-calendar me-1"></i>From Date
                    </label>
                    <input type="date" name="date_from" class="form-control" value="{{ request.GET.date_from }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">
                        <i class="ti ti-calendar me-1"></i>To Date
                    </label>
                    <input type="date" name="date_to" class="form-control" value="{{ request.GET.date_to }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label">&nbsp;</label>
                    <div class="btn-group w-100">
                        <button type="submit" class="btn btn-primary">
                            <i class="ti ti-search"></i> Search
                        </button>
                        <a href="{% url 'pos:sale_list' %}" class="btn btn-outline-secondary">
                            <i class="ti ti-x"></i> Clear
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Sales Table -->
    <div class="card shadow-sm">
        <div class="table-responsive">
            <table class="table table-modern">
                <thead>
                    <tr>
                        <th><i class="ti ti-hash me-1"></i>Sale #</th>
                        <th><i class="ti ti-calendar me-1"></i>Date</th>
                        <th><i class="ti ti-user me-1"></i>Customer</th>
                        <th><i class="ti ti-package me-1"></i>Items</th>
                        <th><i class="ti ti-calculator me-1"></i>Subtotal</th>
                        <th><i class="ti ti-percentage me-1"></i>SST</th>
                        <th><i class="ti ti-cash me-1"></i>Total</th>
                        <th><i class="ti ti-flag me-1"></i>Status</th>
                        <th class="w-1">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for sale in sales %}
                    <tr class="transaction-row" onclick="window.location='{% url 'pos:sale_detail' sale.id %}'">
                        <td>
                            <a href="{% url 'pos:sale_detail' sale.id %}" class="text-reset fw-bold">
                                {{ sale.sale_number }}
                            </a>
                        </td>
                        <td>
                            <div class="fw-medium">{{ sale.sale_date|date:"d M Y" }}</div>
                            <div class="text-muted small">{{ sale.sale_date|time:"H:i" }}</div>
                        </td>
                        <td>
                            {% if sale.customer %}
                            <div class="d-flex align-items-center">
                                <span class="avatar avatar-sm me-2" style="background-image: url(https://ui-avatars.com/api/?name={{ sale.customer.name|urlencode }}&background=667eea&color=fff)"></span>
                                <span>{{ sale.customer.name }}</span>
                            </div>
                            {% else %}
                            <span class="text-muted">
                                <i class="ti ti-user-question me-1"></i>Walk-in Customer
                            </span>
                            {% endif %}
                        </td>
                        <td>
                            <span class="badge badge-primary-light">
                                <i class="ti ti-package me-1"></i>{{ sale.items.count }} item{{ sale.items.count|pluralize }}
                            </span>
                        </td>
                        <td class="fw-medium">RM {{ sale.subtotal|floatformat:2 }}</td>
                        <td>
                            {% if sale.total_sst > 0 %}
                            <span class="badge badge-info-light">
                                RM {{ sale.total_sst|floatformat:2 }}
                            </span>
                            {% else %}
                            <span class="text-muted">—</span>
                            {% endif %}
                        </td>
                        <td class="fw-bold text-success">RM {{ sale.total_amount|floatformat:2 }}</td>
                        <td>
                            {% if sale.status == 'DRAFT' %}
                            <span class="badge badge-secondary">
                                <i class="ti ti-file-text me-1"></i>Draft
                            </span>
                            {% elif sale.status == 'COMPLETED' %}
                            <span class="badge badge-success-light">
                                <i class="ti ti-check me-1"></i>Completed
                            </span>
                            {% elif sale.status == 'CANCELLED' %}
                            <span class="badge badge-danger-light">
                                <i class="ti ti-x me-1"></i>Cancelled
                            </span>
                            {% endif %}
                        </td>
                        <td onclick="event.stopPropagation()">
                            <div class="btn-group">
                                <a href="{% url 'pos:sale_detail' sale.id %}" class="btn btn-sm btn-primary" title="View Details">
                                    <i class="ti ti-eye"></i>
                                </a>
                                <a href="{% url 'pos:terminal_receipt' sale.id %}" target="_blank" class="btn btn-sm btn-success" title="Print Receipt">
                                    <i class="ti ti-printer"></i>
                                </a>
                                {% if sale.status != 'COMPLETED' %}
                                <a href="{% url 'pos:sale_update' sale.id %}" class="btn btn-sm btn-outline-secondary" title="Edit Sale">
                                    <i class="ti ti-edit"></i>
                                </a>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="9">
                            <div class="empty-state">
                                <i class="ti ti-receipt-off"></i>
                                <h3>No sales found</h3>
                                <p class="text-muted">
                                    {% if request.GET.search or request.GET.status or request.GET.date_from or request.GET.date_to %}
                                        Try adjusting your filters or search terms.
                                    {% else %}
                                        Start making sales to see them here.
                                    {% endif %}
                                </p>
                                <div class="btn-list">
                                    {% if request.GET.search or request.GET.status or request.GET.date_from or request.GET.date_to %}
                                        <a href="{% url 'pos:sale_list' %}" class="btn btn-outline-secondary">
                                            <i class="ti ti-x"></i> Clear Filters
                                        </a>
                                    {% endif %}
                                    <a href="{% url 'pos:sale_create' %}" class="btn btn-primary">
                                        <i class="ti ti-plus"></i> Create Sale
                                    </a>
                                </div>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        {% if sales.has_other_pages %}
        <div class="card-footer d-flex justify-content-center">
            <ul class="pagination">
                {% if sales.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ sales.previous_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.date_from %}&date_from={{ request.GET.date_from }}{% endif %}{% if request.GET.date_to %}&date_to={{ request.GET.date_to }}{% endif %}">
                        <i class="ti ti-chevron-left"></i> Previous
                    </a>
                </li>
                {% endif %}

                <li class="page-item active">
                    <a class="page-link">{{ sales.number }} of {{ sales.paginator.num_pages }}</a>
                </li>

                {% if sales.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ sales.next_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.date_from %}&date_from={{ request.GET.date_from }}{% endif %}{% if request.GET.date_to %}&date_to={{ request.GET.date_to }}{% endif %}">
                        Next <i class="ti ti-chevron-right"></i>
                    </a>
                </li>
                {% endif %}
            </ul>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}