{% extends "base.html" %}

{% block title %}{{ cashier.first_name }} {{ cashier.last_name }} Report - AsapLoads POS{% endblock %}

{% block header_title %}Cashier Detail Report: {{ cashier.first_name }} {{ cashier.last_name }}{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">Performance Report: {{ cashier.first_name }} {{ cashier.last_name }}</h5>
                <div class="d-flex gap-2">
                    <a href="{% url 'export_cashier_sales_pdf_report' cashier.id %}?start_date={{ start_date|date:'Y-m-d' }}&end_date={{ end_date|date:'Y-m-d' }}" 
                       class="btn btn-sm btn-primary" title="Download report as PDF to share with admin">
                        <i class="fas fa-file-pdf"></i> Download PDF
                    </a>
                    <a href="{% url 'export_cashier_sales_report' cashier.id %}?start_date={{ start_date|date:'Y-m-d' }}&end_date={{ end_date|date:'Y-m-d' }}" 
                       class="btn btn-sm btn-success" title="Download report as CSV">
                        <i class="fas fa-file-csv"></i> Export CSV
                    </a>
                    {% if user.role != 'cashier' %}
                    <a href="{% url 'cashiers_report' %}?start_date={{ start_date|date:'Y-m-d' }}&end_date={{ end_date|date:'Y-m-d' }}" class="btn btn-sm btn-secondary">
                        <i class="fas fa-arrow-left"></i> Back to Cashiers Report
                    </a>
                    {% else %}
                    <a href="{% url 'dashboard' %}" class="btn btn-sm btn-secondary">
                        <i class="fas fa-tachometer-alt"></i> Back to Dashboard
                    </a>
                    {% endif %}
                </div>
            </div>
            <div class="card-body">
                <!-- Date range filter -->
                <form method="get" action="{% url 'cashier_detail_report' cashier.id %}" class="mb-4">
                    <div class="row g-3 align-items-end">
                        <div class="col-md-4">
                            <label for="start_date" class="form-label">Start Date</label>
                            <input type="date" id="start_date" name="start_date" class="form-control" 
                                value="{{ start_date|date:'Y-m-d' }}">
                        </div>
                        <div class="col-md-4">
                            <label for="end_date" class="form-label">End Date</label>
                            <input type="date" id="end_date" name="end_date" class="form-control" 
                                value="{{ end_date|date:'Y-m-d' }}">
                        </div>
                        <div class="col-md-4">
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="fas fa-filter"></i> Apply Filter
                            </button>
                        </div>
                    </div>
                </form>

                <!-- Cashier info card -->
                <div class="row mb-4">
                    <div class="col-md-12">
                        <div class="card border-0 bg-light">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-4 border-right">
                                        <div class="d-flex flex-column align-items-center text-center">
                                            <div class="user-icon mb-3">
                                                <i class="fas fa-user-circle fa-7x text-primary"></i>
                                            </div>
                                            <h4>{{ cashier.first_name }} {{ cashier.last_name }}</h4>
                                            <p class="text-muted">{{ cashier.role|capfirst }}</p>
                                            <p>{{ cashier.email }}</p>
                                            {% if cashier.branch %}
                                            <p class="badge bg-info">{{ cashier.branch.name }}</p>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="col-md-8">
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <div class="card bg-primary text-white h-100">
                                                    <div class="card-body text-center">
                                                        <h5>Total Sales</h5>
                                                        <h2>{{ metrics.total_sales }}</h2>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <div class="card bg-success text-white h-100">
                                                    <div class="card-body text-center">
                                                        <h5>Revenue Generated</h5>
                                                        <h2>{{ metrics.total_amount|floatformat:2 }}</h2>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <div class="card bg-info text-white h-100">
                                                    <div class="card-body text-center">
                                                        <h5>Average Sale</h5>
                                                        <h2>{{ metrics.average_sale|floatformat:2 }}</h2>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <div class="card bg-warning text-white h-100">
                                                    <div class="card-body text-center">
                                                        <h5>Items Sold</h5>
                                                        <h2>{{ metrics.items_sold }}</h2>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Daily sales chart -->
                <div class="row mb-4">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title">Daily Sales</h5>
                            </div>
                            <div class="card-body">
                                <canvas id="dailySalesChart" style="height: 300px;"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Sales by product category -->
                <div class="row mb-4">
                    <div class="col-md-6">
                        <div class="card h-100">
                            <div class="card-header">
                                <h5 class="card-title">Sales by Product Category</h5>
                            </div>
                            <div class="card-body">
                                <canvas id="categorySalesChart" style="height: 250px;"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card h-100">
                            <div class="card-header">
                                <h5 class="card-title">Payment Methods</h5>
                            </div>
                            <div class="card-body">
                                <canvas id="paymentMethodsChart" style="height: 250px;"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Recent sales table -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Recent Sales</h5>
                    </div>
                    <div class="card-body">
                        {% if sales %}
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead class="table-dark">
                                    <tr>
                                        <th>Date</th>
                                        <th>Receipt #</th>
                                        <th>Customer</th>
                                        <th class="text-center">Items</th>
                                        <th class="text-end">Total</th>
                                        <th class="text-center">Status</th>
                                        <th class="text-center">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for sale in sales %}
                                    <tr>
                                        <td class="align-middle">{{ sale.created_at|date:"M d, Y H:i" }}</td>
                                        <td class="align-middle">{{ sale.receipt_number }}</td>
                                        <td class="align-middle">{{ sale.customer.full_name|default:"Walk-in Customer" }}</td>
                                        <td class="text-center align-middle">{{ sale.items_count }}</td>
                                        <td class="text-end align-middle">{{ sale.total_amount|floatformat:2 }}</td>
                                        <td class="text-center align-middle">
                                            {% if sale.payment_status == 'paid' %}
                                            <span class="badge bg-success">Paid</span>
                                            {% elif sale.payment_status == 'partial' %}
                                            <span class="badge bg-warning">Partial</span>
                                            {% else %}
                                            <span class="badge bg-danger">Unpaid</span>
                                            {% endif %}
                                        </td>
                                        <td class="text-center">
                                            <a href="{% url 'sale_detail' sale.id %}" class="btn btn-sm btn-info">
                                                <i class="fas fa-eye"></i> View
                                            </a>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        {% else %}
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle"></i> No sales data available for this cashier in the selected date range.
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Daily Sales Chart
    const dailySalesCtx = document.getElementById('dailySalesChart').getContext('2d');
    new Chart(dailySalesCtx, {
        type: 'line',
        data: {
            labels: {{ daily_sales_labels|safe }},
            datasets: [{
                label: 'Sales Amount',
                data: {{ daily_sales_data|safe }},
                backgroundColor: 'rgba(78, 115, 223, 0.05)',
                borderColor: 'rgba(78, 115, 223, 1)',
                pointRadius: 3,
                pointBackgroundColor: 'rgba(78, 115, 223, 1)',
                pointBorderColor: 'rgba(78, 115, 223, 1)',
                pointHoverRadius: 3,
                pointHoverBackgroundColor: 'rgba(78, 115, 223, 1)',
                pointHoverBorderColor: 'rgba(78, 115, 223, 1)',
                pointHitRadius: 10,
                pointBorderWidth: 2,
                tension: 0.3
            }]
        },
        options: {
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return value.toFixed(2);
                        }
                    }
                }
            }
        }
    });

    // Sales by Category Chart
    const categoryCtx = document.getElementById('categorySalesChart').getContext('2d');
    new Chart(categoryCtx, {
        type: 'pie',
        data: {
            labels: {{ category_labels|safe }},
            datasets: [{
                data: {{ category_data|safe }},
                backgroundColor: [
                    '#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b',
                    '#6f42c1', '#5a5c69', '#858796', '#d1d3e2', '#bac8f3'
                ],
                hoverBackgroundColor: [
                    '#2e59d9', '#17a673', '#2c9faf', '#ebb330', '#e32c1e',
                    '#5a30a9', '#4c4d58', '#60616f', '#c7c9d9', '#a5b4ea'
                ],
                hoverBorderColor: "rgba(234, 236, 244, 1)",
            }]
        },
        options: {
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'right'
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const label = context.label || '';
                            const value = context.raw.toFixed(2);
                            return `${label}: ${value}`;
                        }
                    }
                }
            }
        }
    });

    // Payment Methods Chart
    const paymentCtx = document.getElementById('paymentMethodsChart').getContext('2d');
    new Chart(paymentCtx, {
        type: 'doughnut',
        data: {
            labels: {{ payment_labels|safe }},
            datasets: [{
                data: {{ payment_data|safe }},
                backgroundColor: [
                    '#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b'
                ],
                hoverBackgroundColor: [
                    '#2e59d9', '#17a673', '#2c9faf', '#ebb330', '#e32c1e'
                ],
                hoverBorderColor: "rgba(234, 236, 244, 1)",
            }]
        },
        options: {
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'right'
                }
            }
        }
    });
});
</script>
{% endblock %}