@extends('layouts.admin')

@section('title', 'Purchase Report')

@section('page-title', 'Purchase Report')

@section('breadcrumbs')
    <a href="#" class="hover:text-primary">Reports</a>
    <span class="material-symbols-outlined text-xs">chevron_right</span>
    <span class="text-primary font-medium">Purchase Report</span>
@endsection

@section('content')
<div class="max-w-[1400px] mx-auto">
    <!-- Tabs -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 mb-6">
        <div class="border-b border-gray-200">
            <nav class="flex -mb-px">
                <button onclick="showTab('purchase')" id="tab-purchase" class="tab-btn px-6 py-4 text-sm font-medium border-b-2 border-primary text-primary transition-colors">Purchase</button>
                <button onclick="showTab('orders')" id="tab-orders" class="tab-btn px-6 py-4 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-primary transition-colors">Purchase Order</button>
            </nav>
        </div>
    </div>

    <!-- Purchase Tab Content -->
    <div id="content-purchase" class="tab-content">
        <!-- Stats Cards -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-gray-500">Total Purchases</p>
                        <p class="text-2xl font-bold text-gray-900 text-gray-900 mt-1">{{ number_format($totalPurchases ?? 0, 2) }}</p>
                    </div>
                    <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center">
                        <span class="material-symbols-outlined text-purple-600">shopping_cart</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filter and Export -->
        <div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
            <div class="flex gap-3">
                <input type="date" class="h-10 px-4 rounded-lg border border-gray-200 bg-white text-gray-900 text-gray-900">
                <input type="date" class="h-10 px-4 rounded-lg border border-gray-200 bg-white text-gray-900 text-gray-900">
                <button class="px-4 h-10 bg-primary text-white rounded-lg hover:bg-blue-600 transition-colors text-sm font-medium">Filter</button>
            </div>
            <div class="flex gap-2">
                <button class="flex items-center gap-2 px-4 h-10 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm font-medium">
                    <span class="material-symbols-outlined text-lg">description</span>
                    Export CSV
                </button>
                <button class="flex items-center gap-2 px-4 h-10 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium">
                    <span class="material-symbols-outlined text-lg">picture_as_pdf</span>
                    Export PDF
                </button>
            </div>
        </div>

        <!-- Table -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-left">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">#</th>
                            <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">Purchase #</th>
                            <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">Supplier</th>
                            <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">Date</th>
                            <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">Amount</th>
                            <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        <tr>
                            <td colspan="6" class="py-12 px-6 text-center text-gray-500">
                                <span class="material-symbols-outlined text-4xl mb-2 block">analytics</span>
                                <p>No purchase data available</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Purchase Orders Tab Content -->
    <div id="content-orders" class="tab-content hidden">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-left">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">#</th>
                            <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">PO #</th>
                            <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">Supplier</th>
                            <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">Date</th>
                            <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">Amount</th>
                            <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        <tr>
                            <td colspan="6" class="py-12 px-6 text-center text-gray-500">
                                <span class="material-symbols-outlined text-4xl mb-2 block">shopping_bag</span>
                                <p>No purchase orders data available</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    function showTab(tabName) {
        document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
        document.querySelectorAll('.tab-btn').forEach(el => {
            el.classList.remove('border-primary', 'text-primary');
            el.classList.add('border-transparent', 'text-gray-500');
        });
        document.getElementById('content-' + tabName).classList.remove('hidden');
        const activeTab = document.getElementById('tab-' + tabName);
        activeTab.classList.remove('border-transparent', 'text-gray-500');
        activeTab.classList.add('border-primary', 'text-primary');
    }
</script>
@endpush
@endsection