<!-- templates/admin/stock_report.html -->
{% extends "admin/base_site.html" %}
{% load static %}

{% block extrastyle %}
<script src="https://cdn.tailwindcss.com"></script>
{% endblock %}

{% block content %}
<div class="p-6">
    <div class="mb-6">
        <h2 class="text-2xl font-bold mb-4">Laporan Stock</h2>
        
        <!-- Form Filter -->
        <form method="get" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
            <div class="flex gap-4">
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="start_date">
                        Tanggal Awal
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                           type="date" name="start_date" value="{{ start_date }}">
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="end_date">
                        Tanggal Akhir
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                           type="date" name="end_date" value="{{ end_date }}">
                </div>
                <div class="mb-4 flex items-end">
                    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                            type="submit">
                        Generate Laporan
                    </button>
                </div>
            </div>
        </form>
        
        {% if stocks %}
        <!-- Tabel Laporan -->
        <div class="overflow-x-auto">
            <table class="min-w-full bg-white">
                <thead>
                    <tr class="bg-gray-100">
                        <th class="px-6 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                            Tanggal
                        </th>
                        <th class="px-6 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                            Produk
                        </th>
                        <th class="px-6 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                            Kategori
                        </th>
                        <th class="px-6 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                            Supplier
                        </th>
                        <th class="px-6 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                            Qty
                        </th>
                        <th class="px-6 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                            Harga
                        </th>
                        <th class="px-6 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                            Subtotal
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {% for stock in stocks %}
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap border-b border-gray-200">
                            {{ stock.date_in }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap border-b border-gray-200">
                            {{ stock.product.name }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap border-b border-gray-200">
                            {{ stock.product.category.name }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap border-b border-gray-200">
                            {{ stock.supplier.name }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap border-b border-gray-200">
                            {{ stock.qty }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap border-b border-gray-200">
                            {{ stock.product.price }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap border-b border-gray-200">
                            {{ stock.subtotal }}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
                <tfoot>
                    <tr class="bg-gray-50">
                        <td colspan="6" class="px-6 py-4 text-right font-bold">
                            Total:
                        </td>
                        <td class="px-6 py-4 font-bold">
                            {{ total }}
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
        
        <!-- Tombol Print -->
        <div class="mt-4">
            <button onclick="window.print()" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                Print Laporan
            </button>
        </div>
        {% endif %}
    </div>
</div>

<!-- Print Styles -->
<style>
    @media print {
        .no-print {
            display: none;
        }
        body {
            padding: 0;
            margin: 0;
        }
    }
</style>
{% endblock %}