@extends('layouts.panel')

@section('title', app(\App\Services\TitleService::class)->generate())

@section('content')
<main class="w-full">
    <header class="flex flex-col sm:flex-row justify-between items-start sm:items-center border-b pb-4 mb-6 border-slate-700">
        <h1 class="text-2xl font-bold text-slate-100">گزارش گیری</h1>
        <a href="{{ route('admin.inventory.index') }}" class="px-6 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-medium rounded-xl transition-all duration-200 transform hover:scale-105 shadow-lg hover:shadow-xl">
            بازگشت به صفحه اصلی
        </a>
    </header>

    <!-- Products with Near Expiration Date -->
    <section class="glass rounded-2xl p-6 mb-8">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-xl font-bold text-slate-200">محصولات با تاریخ انقضای نزدیک</h2>
            <div class="flex items-center gap-4">
                <label class="text-sm text-slate-400">فیلتر بر اساس روز:</label>
                <select id="expiration-filter" class="px-4 py-2 rounded-lg bg-white/5 border border-slate-700 text-slate-200 focus:border-blue-500 focus:ring-blue-500">
                    <option value="30">30 روز آینده</option>
                    <option value="60">60 روز آینده</option>
                    <option value="90">90 روز آینده</option>
                    <option value="180">180 روز آینده</option>
                </select>
            </div>
        </div>
        
        <div class="table-card">
            <div class="table-wrapper">
                <table id="expiration-table" class="min-w-full text-sm">
                    <thead>
                        <tr>
                            <th style="width:60px">ردیف</th>
                            <th>نام محصول</th>
                            <th>برند</th>
                            <th>بچ نامبر</th>
                            <th>تاریخ انقضا</th>
                            <th>روزهای باقی‌مانده</th>
                        </tr>
                    </thead>
                    <tbody id="expiration-table-body">
                        <tr>
                            <td colspan="6" class="text-center py-8 text-slate-400">در حال بارگذاری...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div id="expiration-empty" class="empty-state hidden">موردی یافت نشد</div>
        </div>
    </section>
</main>
@endsection

@push('styles')
<style>
    .table-card {
        @apply glass rounded-xl overflow-hidden;
    }
    
    .table-wrapper {
        @apply overflow-x-auto;
    }
    
    .table-wrapper table {
        @apply w-full;
    }
    
    .table-wrapper thead {
        @apply bg-slate-800/50;
    }
    
    .table-wrapper th {
        @apply px-4 py-3 text-right text-xs font-medium text-slate-300 uppercase tracking-wider border-b border-slate-700;
    }
    
    .table-wrapper tbody tr {
        @apply hover:bg-white/5 transition duration-150 ease-in-out border-b border-slate-800;
    }
    
    .table-wrapper td {
        @apply px-4 py-4 whitespace-nowrap text-sm;
    }
    
    .empty-state {
        @apply text-center py-12 text-slate-400;
    }
    
    .expiration-badge {
        @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
    }
    
    .expiration-critical {
        @apply bg-red-500/20 text-red-400 border border-red-500/30;
    }
    
    .expiration-warning {
        @apply bg-yellow-500/20 text-yellow-400 border border-yellow-500/30;
    }
    
    .expiration-safe {
        @apply bg-green-500/20 text-green-400 border border-green-500/30;
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const tableBody = document.getElementById('expiration-table-body');
    const emptyState = document.getElementById('expiration-empty');
    const filterSelect = document.getElementById('expiration-filter');
    
    let currentDays = 30;
    
    // Load data
    function loadExpiringProducts(days = 30) {
        tableBody.innerHTML = '<tr><td colspan="6" class="text-center py-8 text-slate-400">در حال بارگذاری...</td></tr>';
        emptyState.classList.add('hidden');
        
        fetch(`/admin/inventory/expiring-products?days=${days}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('خطا در ارتباط با سرور');
                }
                return response.json();
            })
            .then(data => {
                if (data && data.products && data.products.length > 0) {
                    renderTable(data.products);
                } else {
                    tableBody.innerHTML = '<tr><td colspan="6" class="text-center py-8 text-slate-400">هیچ محصولی با تاریخ انقضای نزدیک یافت نشد</td></tr>';
                    emptyState.classList.remove('hidden');
                }
            })
            .catch(error => {
                console.error('Error loading expiring products:', error);
                // Only show error if it's a real network/server error
                if (error.message && error.message.includes('خطا در ارتباط با سرور')) {
                    tableBody.innerHTML = '<tr><td colspan="6" class="text-center py-8 text-red-400">خطا در ارتباط با سرور</td></tr>';
                } else {
                    tableBody.innerHTML = '<tr><td colspan="6" class="text-center py-8 text-slate-400">هیچ محصولی با تاریخ انقضای نزدیک یافت نشد</td></tr>';
                }
            });
    }
    
    // Render table
    function renderTable(products) {
        tableBody.innerHTML = '';
        emptyState.classList.add('hidden');
        
        products.forEach((product, index) => {
            const daysRemaining = product.days_remaining || 0;
            let badgeClass = 'expiration-safe';
            let badgeText = `${daysRemaining} روز`;
            
            if (daysRemaining <= 7) {
                badgeClass = 'expiration-critical';
                badgeText = `⚠️ ${daysRemaining} روز`;
            } else if (daysRemaining <= 30) {
                badgeClass = 'expiration-warning';
                badgeText = `${daysRemaining} روز`;
            }
            
            const expirationDate = product.expiration_date ? 
                new Date(product.expiration_date).toLocaleDateString('fa-IR') : 
                '-';
            
            const row = `
                <tr class="hover:bg-white/5 transition duration-150 ease-in-out">
                    <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-slate-300">${index + 1}</td>
                    <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-slate-200">${product.product_name || '-'}</td>
                    <td class="px-4 py-4 whitespace-nowrap text-sm text-slate-300">${product.brand || '-'}</td>
                    <td class="px-4 py-4 whitespace-nowrap text-sm text-slate-300">${product.batch_number || '-'}</td>
                    <td class="px-4 py-4 whitespace-nowrap text-sm text-slate-300">${expirationDate}</td>
                    <td class="px-4 py-4 whitespace-nowrap">
                        <span class="expiration-badge ${badgeClass}">${badgeText}</span>
                    </td>
                </tr>
            `;
            tableBody.insertAdjacentHTML('beforeend', row);
        });
    }
    
    // Filter change
    if (filterSelect) {
        filterSelect.addEventListener('change', function() {
            currentDays = parseInt(this.value);
            loadExpiringProducts(currentDays);
        });
    }
    
    // Initial load
    loadExpiringProducts(currentDays);
});
</script>
@endpush