@extends('admin.layouts.app')

@section('title', 'Product Performance')
@section('page-title', 'Product Performance')

@section('content')
<!-- Search & Filter Form -->
<div class="mb-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-soft dark:border-slate-800 dark:bg-slate-950">
    <form method="GET" action="{{ route('admin.reports.products') }}" class="flex flex-col md:flex-row items-end justify-between gap-4">
        <div class="flex-1 grid grid-cols-1 sm:grid-cols-2 gap-4 w-full">
            <div>
                <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Start Date</label>
                <input type="date" name="date_from" value="{{ $dateFrom }}"
                       class="w-full py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent">
            </div>
            <div>
                <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">End Date</label>
                <input type="date" name="date_to" value="{{ $dateTo }}"
                       class="w-full py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent">
            </div>
        </div>
        <div class="flex items-center gap-3 w-full md:w-auto">
            <button type="submit" class="btn-primary w-full md:w-auto">
                <i class="fas fa-sync mr-2 text-xs"></i> Update Report
            </button>
            <button type="button" onclick="window.print()" class="btn-secondary w-full md:w-auto">
                <i class="fas fa-print mr-2 text-xs"></i> Print Report
            </button>
        </div>
    </form>
</div>

<!-- Product Metrics Cards -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
    <!-- Active Sales Products -->
    <div class="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-lg p-5">
        <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider block mb-1">On Sale Catalog Items</span>
        <h3 class="text-2xl font-extrabold text-blue-600 dark:text-blue-400">{{ $onSaleCount }}</h3>
    </div>

    <!-- Products Out of Stock -->
    <div class="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-lg p-5">
        <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider block mb-1">Out Of Stock Products</span>
        <h3 class="text-2xl font-extrabold {{ $lowStockProducts->count() > 0 ? 'text-rose-600 dark:text-rose-400' : 'text-gray-950 dark:text-white' }}">
            {{ $lowStockProducts->count() }}
        </h3>
    </div>

    <!-- Distinct Best Sellers -->
    <div class="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-lg p-5">
        <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider block mb-1">Unique Sold Products</span>
        <h3 class="text-2xl font-extrabold text-green-600 dark:text-green-400">{{ $productStats->count() }}</h3>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Best Sellers Table -->
    <div class="lg:col-span-2 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden flex flex-col justify-between">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-800">
            <h3 class="text-base font-bold text-gray-900 dark:text-white">Product Sales Performance</h3>
        </div>
        
        <div class="p-6 flex-1">
            <div class="overflow-visible">
                <table id="productReportTable" class="dataTable">
                    <thead>
                        <tr>
                            <th>Product Name</th>
                            <th>Regular Price</th>
                            <th>Stock Status</th>
                            <th>Units Sold</th>
                            <th>Gross Income</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($productStats as $stat)
                            <tr>
                                <td class="font-semibold text-gray-900 dark:text-white">
                                    {{ $stat->name }}
                                </td>
                                <td class="text-gray-500 dark:text-gray-400">
                                    ${{ number_format($stat->price, 2) }}
                                </td>
                                <td>
                                    @if($stat->in_stock)
                                        <span class="px-2 py-0.5 rounded bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-400 text-xs font-semibold border border-green-200 dark:border-green-800">In Stock</span>
                                    @else
                                        <span class="px-2 py-0.5 rounded bg-rose-50 text-rose-700 dark:bg-rose-900/20 dark:text-rose-400 text-xs font-semibold border border-rose-200 dark:border-rose-800">Out of Stock</span>
                                    @endif
                                </td>
                                <td class="text-gray-900 dark:text-white font-medium">
                                    {{ $stat->units_sold }} units
                                </td>
                                <td class="font-bold text-gray-900 dark:text-white">
                                    ${{ number_format($stat->gross_revenue, 2) }}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Low Stock Catalog Alerts -->
    <div class="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden mt-6">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-800">
            <h3 class="text-base font-bold text-gray-900 dark:text-white flex items-center">
                <i class="bi bi-exclamation-triangle-fill text-rose-500 mr-2"></i> Out Of Stock Checklist
            </h3>
        </div>
        <div class="p-6">
            @if($lowStockProducts->count() > 0)
                <div class="space-y-4 max-h-[360px] overflow-y-auto pr-1">
                    @foreach($lowStockProducts as $product)
                        <div class="flex items-center justify-between p-3 rounded-lg border border-rose-100 dark:border-rose-900/30 bg-rose-50/20 dark:bg-rose-950/10">
                            <div>
                                <h4 class="text-xs font-bold text-gray-900 dark:text-white">{{ $product->name }}</h4>
                                <span class="text-[10px] text-gray-400 dark:text-gray-500">ID: #{{ $product->id }} | Category: {{ $product->categoryRelation->name ?? 'Default' }}</span>
                            </div>
                            <a href="{{ route('admin.products.edit', $product->id) }}" class="text-[10px] font-bold text-blue-600 dark:text-blue-400 hover:underline">
                                Edit Stock
                            </a>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="text-center py-20 text-gray-500 dark:text-gray-400 text-sm">
                    <i class="bi bi-check-circle-fill text-emerald-500 text-3xl mb-3 block"></i>
                    <p>All catalog products are in stock!</p>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- jQuery and DataTables JS -->
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>

@include('admin.partials.datatables-styles')
<script>
$(document).ready(function() {
    $('#productReportTable').DataTable({
        responsive: true,
        pageLength: 25,
        order: [[3, 'desc']],
        dom: '<"flex justify-between items-center mb-4"<"flex items-center gap-2"l><"flex items-center gap-2"f>>rt<"flex justify-between items-center mt-4"<"text-sm text-gray-600 dark:text-gray-400"i><"flex items-center gap-1"p>>'
    });
});
</script>
@endsection