@extends('backend.app')

@section('content')
<style>
    /* ✅ Premium Responsive Table Styling */
    .premium-table {
        width: 100%;
        min-width: 800px; /* মোবাইলে স্ক্রল আনার জন্য নির্দিষ্ট ওয়াইড */
        margin-bottom: 0;
    }
    .premium-table th {
        background-color: #f8fafc;
        color: #475569;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 0.5px;
        border-bottom: 2px solid #e2e8f0;
        padding: 12px 10px;
        vertical-align: middle;
        white-space: nowrap;
    }
    .premium-table td {
        vertical-align: middle;
        padding: 12px 10px;
        color: #334155;
        font-size: 13px;
        border-bottom: 1px solid #f1f5f9;
    }
    .premium-table tbody tr:hover {
        background-color: #f8fafc;
    }
    .product-name-text {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.4;
        font-weight: 600;
        color: #1e293b;
        font-size: 13px;
        white-space: normal;
    }
    .stat-badge {
        padding: 4px 6px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 600;
        display: inline-block;
        margin-top: 3px;
    }
    .img-thumbnail-custom {
        width: 40px;
        height: 40px;
        object-fit: cover;
        border-radius: 6px;
        border: 1px solid #e2e8f0;
    }
    /* মোবাইল স্ক্রল ফিক্স */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
</style>

<div class="row mb-4">
    <div class="col-12">
        <div class="card border-0 shadow-sm rounded-3">
            <div class="card-header bg-white border-bottom-0 pt-4 pb-0">
                <h5 class="card-title fw-bold text-dark mb-0">
                    <i class="mdi mdi-chart-areaspline text-primary me-2"></i>Product Performance
                </h5>
            </div>
            
            <div class="card-body">
                <form action="{{ route('admin.report.product_performance') }}" method="GET" class="mb-3">
                    <div class="row g-2 align-items-end bg-light p-2 rounded-3 border">
                        <div class="col-md-4 col-sm-6">
                            <label for="start_date" class="form-label text-muted small fw-bold mb-1">Start Date</label>
                            <input type="date" name="start_date" id="start_date" class="form-control form-control-sm" value="{{ request('start_date', $startDate->format('Y-m-d')) }}">
                        </div>
                        <div class="col-md-4 col-sm-6">
                            <label for="end_date" class="form-label text-muted small fw-bold mb-1">End Date</label>
                            <input type="date" name="end_date" id="end_date" class="form-control form-control-sm" value="{{ request('end_date', $endDate->format('Y-m-d')) }}">
                        </div>
                        <div class="col-md-2 col-sm-6 mt-2 mt-md-0">
                            <button type="submit" class="btn btn-primary btn-sm w-100 fw-bold">Filter</button>
                        </div>
                        <div class="col-md-2 col-sm-6 mt-2 mt-md-0">
                            <a href="{{ route('admin.report.product_performance') }}" class="btn btn-secondary btn-sm w-100 fw-bold">Reset</a>
                        </div>
                    </div>
                </form>

                <div class="table-responsive border rounded-3">
                    <table class="table premium-table">
                        <colgroup>
                            <col style="width: 5%;">
                            <col style="width: 32%;">
                            <col style="width: 12%;">
                            <col style="width: 12%;">
                            <col style="width: 15%;">
                            <col style="width: 12%;">
                            <col style="width: 12%;">
                        </colgroup>
                        <thead>
                            <tr>
                                <th class="text-center">#</th>
                                <th>Product Details</th>
                                <th class="text-center">Ordered</th>
                                <th class="text-center">Delivered</th>
                                <th class="text-center">Returned</th>
                                <th class="text-end">Revenue</th>
                                <th class="text-end">Net Profit</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($productPerformance as $key => $item)
                                @php
                                    $ratio = ($item->total_ordered_qty > 0) ? round(($item->returned_qty / $item->total_ordered_qty) * 100, 1) : 0;
                                @endphp
                                <tr>
                                    <td class="text-center text-muted fw-bold">{{ $productPerformance->firstItem() + $key }}</td>
                                    
                                    <td>
                                        <div class="d-flex align-items-center">
                                            @if($item->image)
                                                <img src="{{ asset('products/'.$item->image) }}" alt="img" class="img-thumbnail-custom me-3">
                                            @endif
                                            <div>
                                                <div class="product-name-text" title="{{ $item->name }}">
                                                    {{ $item->name }}
                                                </div>
                                                <small class="text-muted" style="font-size: 11px;">ID: #{{ $item->id }}</small>
                                            </div>
                                        </div>
                                    </td>

                                    <td class="text-center fw-bold">{{ $item->total_ordered_qty }}</td>
                                    
                                    <td class="text-center text-success fw-bold">{{ $item->delivered_qty }}</td>
                                    
                                    <td class="text-center">
                                        <span class="fw-bold text-danger">{{ $item->returned_qty }}</span><br>
                                        @if($ratio > 30) 
                                            <span class="stat-badge bg-danger text-white">{{ $ratio }}%</span>
                                        @elseif($ratio > 0) 
                                            <span class="stat-badge bg-warning text-dark">{{ $ratio }}%</span>
                                        @else 
                                            <span class="stat-badge bg-success text-white">0%</span> 
                                        @endif
                                    </td>

                                    <td class="text-end text-secondary fw-bold">
                                        ৳{{ number_format($item->total_revenue, 0) }}
                                    </td>
                                    
                                    <td class="text-end text-primary fw-bold">
                                        ৳{{ number_format($item->total_profit, 0) }}
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center py-4 text-muted">No data found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            
            <div class="card-footer bg-white border-top p-3 d-flex justify-content-between align-items-center">
                <div class="text-muted" style="font-size: 12px;">
                    Showing {{ $productPerformance->firstItem() ?? 0 }} - {{ $productPerformance->lastItem() ?? 0 }} of {{ $productPerformance->total() }}
                </div>
                <div>
                    {{ $productPerformance->appends(request()->query())->links('pagination::bootstrap-4') }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection