@extends('admin.layout.dashboard_master')

@section('content')
<main id="main" class="main">
    <div class="pagetitle mb-4 d-flex justify-content-between align-items-center">
        <div>
            <h1>Product Performance Report</h1>
            <nav>
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ route('american.plastic.admin.dashboard') }}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.analytics.index') }}">Analytics</a></li>
                    <li class="breadcrumb-item active">Product Performance</li>
                </ol>
            </nav>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.analytics.products-report.export', request()->all()) }}" class="btn btn-success btn-sm px-3 rounded-pill d-flex align-items-center">
                <i class="bi bi-file-earmark-excel me-1"></i> Export Excel
            </a>
            <a href="{{ route('admin.analytics.index') }}" class="btn btn-outline-secondary btn-sm px-3 rounded-pill d-flex align-items-center">
                <i class="bi bi-arrow-left me-1"></i> Back to Dashboard
            </a>
        </div>
    </div>

    <!-- Filter Card -->
    <div class="card mb-4" style="border: none; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.03); background: #fff;">
        <div class="card-body p-4">
            <form action="{{ route('admin.analytics.products-report') }}" method="GET" class="row g-3 align-items-end">
                <!-- Report Type / Metric -->
                <div class="col-md-2">
                    <label class="form-label fw-bold text-secondary small text-uppercase mb-2">Metric Type</label>
                    <div class="btn-group w-100" role="group">
                        <input type="radio" class="btn-check" name="type" id="type_sales" value="sales" {{ $type === 'sales' ? 'checked' : '' }} onchange="this.form.submit()">
                        <label class="btn btn-outline-primary d-flex align-items-center justify-content-center py-2" for="type_sales" style="font-weight: 600; font-size: 0.9rem;">
                            <i class="bi bi-cart3 me-2"></i> Sales
                        </label>

                        <input type="radio" class="btn-check" name="type" id="type_views" value="productview" {{ $type === 'productview' ? 'checked' : '' }} onchange="this.form.submit()">
                        <label class="btn btn-outline-primary d-flex align-items-center justify-content-center py-2" for="type_views" style="font-weight: 600; font-size: 0.9rem;">
                            <i class="bi bi-eye me-2"></i> Views
                        </label>
                    </div>
                </div>

                <!-- Date Filter Presets -->
                <div class="col-md-2">
                    <label for="filter" class="form-label fw-bold text-secondary small text-uppercase mb-2">Time Range</label>
                    <select name="filter" id="filter" class="form-select py-2" style="border-radius: 8px;" onchange="handlePresetChange(this)">
                        <option value="daily" {{ $filter === 'daily' ? 'selected' : '' }}>Last 30 Days</option>
                        <option value="monthly" {{ $filter === 'monthly' ? 'selected' : '' }}>Last 12 Months</option>
                        <option value="custom" {{ $filter === 'custom' ? 'selected' : '' }}>Custom Range</option>
                    </select>
                </div>

                <!-- Search Product -->
                <div class="col-md-3">
                    <label for="search" class="form-label fw-bold text-secondary small text-uppercase mb-2">Search Product</label>
                    <div class="input-group">
                        <span class="input-group-text bg-white" style="border-radius: 8px 0 0 8px; border-right: none; border-color: #dee2e6;">
                            <i class="bi bi-search text-muted"></i>
                        </span>
                        <input type="text" name="search" id="search" class="form-control py-2" placeholder="Search by name or SKU..." value="{{ request('search') }}" style="border-radius: 0 8px 8px 0; border-left: none; border-color: #dee2e6;">
                    </div>
                </div>

                <!-- Custom Date Inputs -->
                <div class="col-md-3 date-inputs" style="{{ $filter !== 'custom' ? 'display: none;' : '' }}">
                    <label class="form-label fw-bold text-secondary small text-uppercase mb-2">Custom Date Range</label>
                    <div class="input-group">
                        <input type="date" name="start_date" id="start_date" class="form-control py-2" value="{{ $start_date }}" style="border-radius: 8px 0 0 8px;">
                        <span class="input-group-text bg-light">to</span>
                        <input type="date" name="end_date" id="end_date" class="form-control py-2" value="{{ $end_date }}" style="border-radius: 0 8px 8px 0;">
                    </div>
                </div>

                <!-- Submit Button -->
                <div class="col text-end">
                    <button type="submit" class="btn btn-primary px-4 py-2" style="border-radius: 8px; font-weight: 600;">
                        <i class="bi bi-funnel me-1"></i> Filter
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Products Report Table -->
    <div class="card" style="border: none; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.03); overflow: hidden; background: #fff;">
        <div class="card-header bg-transparent py-3 px-4 d-flex justify-content-between align-items-center border-0">
            <h5 class="fw-bold mb-0 text-dark">
                Ranking by {{ $type === 'sales' ? 'Units Sold' : 'Views' }}
                <span class="badge bg-light-subtle text-secondary border ms-2 font-monospace" style="font-size: 0.8rem;">
                    {{ \Carbon\Carbon::parse($start_date)->format('M d, Y') }} - {{ \Carbon\Carbon::parse($end_date)->format('M d, Y') }}
                </span>
            </h5>
            <div class="text-muted small">
                Showing {{ $products->firstItem() ?? 0 }} - {{ $products->lastItem() ?? 0 }} of {{ $products->total() }} products
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light text-secondary" style="border-bottom: 2px solid #f1f3f5;">
                    <tr>
                        <th class="ps-4 py-3" style="width: 80px;">Rank</th>
                        <th class="py-3">Product Details</th>
                        <th class="py-3">Category</th>
                        <th class="py-3 text-center">Views (in Period)</th>
                        <th class="py-3 text-center">Units Sold</th>
                        <th class="py-3 text-end">Revenue Generated</th>
                        <th class="pe-4 py-3 text-center" style="width: 150px;">Status</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($products as $index => $product)
                    @php
                        $rank = $products->firstItem() + $index;
                    @endphp
                    <tr>
                        <td class="ps-4">
                            @if($rank == 1)
                                <span class="badge bg-warning text-dark rounded-circle p-2 d-inline-flex align-items-center justify-content-center" style="width: 32px; height: 32px; font-weight: 800; font-size: 0.95rem; box-shadow: 0 2px 5px rgba(255, 193, 7, 0.4);">
                                    1
                                </span>
                            @elseif($rank == 2)
                                <span class="badge bg-secondary text-white rounded-circle p-2 d-inline-flex align-items-center justify-content-center" style="width: 32px; height: 32px; font-weight: 800; font-size: 0.95rem; box-shadow: 0 2px 5px rgba(108, 117, 125, 0.4);">
                                    2
                                </span>
                            @elseif($rank == 3)
                                <span class="badge bg-danger text-white rounded-circle p-2 d-inline-flex align-items-center justify-content-center" style="width: 32px; height: 32px; font-weight: 800; font-size: 0.95rem; box-shadow: 0 2px 5px rgba(220, 53, 69, 0.4);">
                                    3
                                </span>
                            @else
                                <span class="text-secondary fw-bold ps-2">{{ $rank }}</span>
                            @endif
                        </td>
                        <td>
                            <div class="d-flex align-items-center">
                                <div class="me-3" style="width: 50px; height: 50px; border-radius: 8px; overflow: hidden; background: #f8f9fa; border: 1px solid #e9ecef; display: flex; align-items: center; justify-content: center;">
                                    @if($product->product_image)
                                        <img src="{{ asset('public/admin/assets/img/product/' . $product->product_image) }}" 
                                             onerror="this.onerror=null; this.innerHTML='<i class=bi-box-seam></i>'; this.src='{{ asset('public/admin/assets/img/product/default.png') }}';" 
                                             alt="{{ $product->product_name }}" 
                                             style="width: 100%; height: 100%; object-fit: cover;">
                                    @else
                                        <i class="bi bi-box-seam text-primary fs-4"></i>
                                    @endif
                                </div>
                                <div>
                                    <div class="fw-bold text-dark" style="font-size: 0.95rem;">{{ $product->product_name }}</div>
                                    <div class="text-muted small">SKU: {{ $product->sku ?? 'N/A' }}</div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="badge rounded-pill bg-light text-primary border border-primary-subtle px-3 py-2 small">
                                {{ $product->category->category_name ?? 'Uncategorized' }}
                            </span>
                        </td>
                        <td class="text-center fw-semibold text-secondary">
                            {{ number_format($product->view_count) }}
                        </td>
                        <td class="text-center fw-bold text-dark">
                            {{ number_format($product->total_sold) }}
                        </td>
                        <td class="text-end fw-bold text-primary">
                            LKR {{ number_format($product->revenue, 2) }}
                        </td>
                        <td class="pe-4 text-center">
                            @if($product->status == 1)
                                <span class="badge bg-success-subtle text-success px-3 py-2 rounded-pill small" style="font-weight: 600;">Active</span>
                            @else
                                <span class="badge bg-warning-subtle text-warning px-3 py-2 rounded-pill small" style="font-weight: 600;">Inactive</span>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="text-center py-5 text-muted">
                            <div class="my-4">
                                <i class="bi bi-exclamation-circle text-secondary fs-1 mb-3 d-block"></i>
                                <h5>No performance data found</h5>
                                <p class="text-muted small">Try adjusting your filters or date range.</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination Footer -->
        @if($products->hasPages())
        <div class="card-footer bg-transparent py-4 px-4 border-top">
            <div class="d-flex justify-content-between align-items-center">
                <div class="text-muted small">
                    Showing {{ $products->firstItem() }} to {{ $products->lastItem() }} of {{ $products->total() }} results
                </div>
                <div>
                    {{ $products->links('pagination::bootstrap-5') }}
                </div>
            </div>
        </div>
        @endif
    </div>
</main>

<script>
    function handlePresetChange(select) {
        const dateInputs = document.querySelector('.date-inputs');
        if (select.value === 'custom') {
            dateInputs.style.display = 'block';
        } else {
            dateInputs.style.display = 'none';
            // Automatically submit the form for presets to make interaction smoother
            select.form.submit();
        }
    }
</script>
@endsection