@extends('layouts.admin')

@section('content')
 <div class="flex-1 p-4 lg:p-6 w-full lg:w-auto">
            <!-- Header Section -->
            <div class="flex flex-col lg:flex-row lg:justify-between lg:items-center mb-6">
                <h1 class="text-xl lg:text-2xl font-bold text-gray-800 mb-4 lg:mb-0">Returns & Refunds Reports</h1>
                <div class="flex flex-col sm:flex-row gap-2">
                    <a href="{{ route('admin.returns.create') }}"
                       class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center justify-center text-sm lg:text-base">
                        <i class="fas fa-undo mr-2"></i> Process Return
                    </a>
                    <a href="{{ route('admin.returns.index') }}"
                       class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center justify-center text-sm lg:text-base">
                        <i class="fas fa-list mr-2"></i> View All Returns
                    </a>
                </div>
            </div>

            <!-- Date Filter -->
            <div class="bg-white rounded-lg shadow-lg p-4 lg:p-6 mb-6">
                <form method="GET" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Date Range</label>
                        <select name="date_range" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm lg:text-base">
                            <option value="today" {{ $dateRange == 'today' ? 'selected' : '' }}>Today</option>
                            <option value="yesterday" {{ $dateRange == 'yesterday' ? 'selected' : '' }}>Yesterday</option>
                            <option value="week" {{ $dateRange == 'week' ? 'selected' : '' }}>This Week</option>
                            <option value="month" {{ $dateRange == 'month' ? 'selected' : '' }}>This Month</option>
                            <option value="quarter" {{ $dateRange == 'quarter' ? 'selected' : '' }}>This Quarter</option>
                            <option value="year" {{ $dateRange == 'year' ? 'selected' : '' }}>This Year</option>
                            <option value="custom" {{ $dateRange == 'custom' ? 'selected' : '' }}>Custom Range</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Start Date</label>
                        <input type="date" name="start_date" value="{{ $startDate->format('Y-m-d') }}"
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm lg:text-base">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">End Date</label>
                        <input type="date" name="end_date" value="{{ $endDate->format('Y-m-d') }}"
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm lg:text-base">
                    </div>

                    <div class="flex items-end">
                        <button type="submit"
                                class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center justify-center text-sm lg:text-base">
                            <i class="fas fa-filter mr-2"></i> Apply Filter
                        </button>
                    </div>
                </form>
            </div>

            <!-- Summary Cards -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6 mb-6">
                <div class="stat-card bg-white rounded-lg shadow-lg p-4 lg:p-6 border-l-4 border-blue-500">
                    <div class="flex items-center">
                        <div class="p-2 lg:p-3 bg-blue-100 rounded-lg">
                            <i class="fas fa-undo text-blue-600 text-lg lg:text-xl"></i>
                        </div>
                        <div class="ml-3 lg:ml-4">
                            <h3 class="text-xs lg:text-sm font-medium text-gray-600">Total Returns</h3>
                            <p class="text-xl lg:text-2xl font-bold text-gray-900">{{ number_format($totalReturns) }}</p>
                        </div>
                    </div>
                </div>

                <div class="stat-card bg-white rounded-lg shadow-lg p-4 lg:p-6 border-l-4 border-red-500">
                    <div class="flex items-center">
                        <div class="p-2 lg:p-3 bg-red-100 rounded-lg">
                            <i class="fas fa-dollar-sign text-red-600 text-lg lg:text-xl"></i>
                        </div>
                        <div class="ml-3 lg:ml-4">
                            <h3 class="text-xs lg:text-sm font-medium text-gray-600">Total Refunds</h3>
                            <p class="text-xl lg:text-2xl font-bold text-gray-900">Rs.{{ number_format($totalRefundAmount, 2) }}</p>
                        </div>
                    </div>
                </div>

                <div class="stat-card bg-white rounded-lg shadow-lg p-4 lg:p-6 border-l-4 border-yellow-500">
                    <div class="flex items-center">
                        <div class="p-2 lg:p-3 bg-yellow-100 rounded-lg">
                            <i class="fas fa-clock text-yellow-600 text-lg lg:text-xl"></i>
                        </div>
                        <div class="ml-3 lg:ml-4">
                            <h3 class="text-xs lg:text-sm font-medium text-gray-600">Pending</h3>
                            <p class="text-xl lg:text-2xl font-bold text-gray-900">{{ number_format($pendingReturns) }}</p>
                        </div>
                    </div>
                </div>

                <div class="stat-card bg-white rounded-lg shadow-lg p-4 lg:p-6 border-l-4 border-green-500">
                    <div class="flex items-center">
                        <div class="p-2 lg:p-3 bg-green-100 rounded-lg">
                            <i class="fas fa-check-circle text-green-600 text-lg lg:text-xl"></i>
                        </div>
                        <div class="ml-3 lg:ml-4">
                            <h3 class="text-xs lg:text-sm font-medium text-gray-600">Approved</h3>
                            <p class="text-xl lg:text-2xl font-bold text-gray-900">{{ number_format($approvedReturns) }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-6 mb-6">
                <!-- Returns by Reason -->
                <div class="bg-white rounded-lg shadow-lg p-4 lg:p-6">
                    <h3 class="text-base lg:text-lg font-semibold text-gray-800 mb-4">Returns by Reason</h3>
                    <div class="space-y-3">
                        @foreach($returnsByReason as $reason => $data)
                        <div class="flex justify-between items-center p-2 hover:bg-gray-50 rounded">
                            <span class="text-sm font-medium text-gray-700 flex-1">{{ ucfirst($reason) }}</span>
                            <div class="flex items-center space-x-3 lg:space-x-4 text-right">
                                <span class="text-xs lg:text-sm text-gray-600 whitespace-nowrap">{{ $data['count'] }} returns</span>
                                <span class="text-xs lg:text-sm font-semibold text-red-600 whitespace-nowrap">Rs.{{ number_format($data['total_refund'], 2) }}</span>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>

                <!-- Returns Trend -->
                <div class="bg-white rounded-lg shadow-lg p-4 lg:p-6">
                    <h3 class="text-base lg:text-lg font-semibold text-gray-800 mb-4">Monthly Returns Trend</h3>
                    <div class="chart-container">
                        @if($monthlyReturns->count() > 0)
                            <canvas id="returnsTrendChart"></canvas>
                        @else
                            <div class="flex items-center justify-center h-full">
                                <div class="text-center">
                                    <i class="fas fa-chart-bar text-4xl text-gray-400 mb-2"></i>
                                    <p class="text-gray-500">No data available</p>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Recent Returns -->
            <div class="bg-white rounded-lg shadow-lg overflow-hidden">
                <div class="px-4 lg:px-6 py-4 border-b border-gray-200">
                    <h3 class="text-base lg:text-lg font-semibold text-gray-800">Recent Returns</h3>
                </div>

                <!-- Desktop Table View -->
                <div class="hidden lg:block">
                    <div class="table-container overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Return Code</th>
                                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th>
                                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Quantity</th>
                                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Refund Amount</th>
                                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Reason</th>
                                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @foreach($returns->take(10) as $return)
                                <tr class="hover:bg-gray-50">
                                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                        {{ $return->return_code }}
                                    </td>
                                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {{ $return->created_at->format('M d, Y') }}
                                    </td>
                                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {{ $return->product->product_name }}
                                    </td>
                                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {{ number_format($return->quantity_returned) }}
                                    </td>
                                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm font-semibold text-red-600">
                                        Rs.{{ number_format($return->refund_amount, 2) }}
                                    </td>
                                    <td class="px-4 lg:px-6 py-4 text-sm text-gray-900">
                                        <div class="max-w-xs truncate" title="{{ $return->reason }}">
                                            {{ Str::limit($return->reason, 50) }}
                                        </div>
                                    </td>
                                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap">
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                            {{ $return->status === 'approved' ? 'bg-green-100 text-green-800' :
                                               ($return->status === 'pending' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800') }}">
                                            {{ ucfirst($return->status) }}
                                        </span>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Mobile Card View -->
                <div class="lg:hidden space-y-4 p-4">
                    @foreach($returns->take(10) as $return)
                    <div class="bg-gray-50 rounded-lg p-4">
                        <div class="flex justify-between items-start mb-3">
                            <div>
                                <h4 class="font-semibold text-gray-800">{{ $return->return_code }}</h4>
                                <p class="text-sm text-gray-600">{{ $return->created_at->format('M d, Y') }}</p>
                            </div>
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                {{ $return->status === 'approved' ? 'bg-green-100 text-green-800' :
                                   ($return->status === 'pending' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800') }}">
                                {{ ucfirst($return->status) }}
                            </span>
                        </div>

                        <div class="space-y-2">
                            <div class="flex justify-between">
                                <span class="text-sm text-gray-600">Product:</span>
                                <span class="text-sm font-medium text-gray-800">{{ $return->product->product_name }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-sm text-gray-600">Quantity:</span>
                                <span class="text-sm text-gray-800">{{ number_format($return->quantity_returned) }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-sm text-gray-600">Refund:</span>
                                <span class="text-sm font-semibold text-red-600">Rs.{{ number_format($return->refund_amount, 2) }}</span>
                            </div>
                            <div>
                                <span class="text-sm text-gray-600">Reason:</span>
                                <p class="text-sm text-gray-800 mt-1">{{ Str::limit($return->reason, 80) }}</p>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Returns Trend Chart
    const returnsCtx = document.getElementById('returnsTrendChart').getContext('2d');
    const returnsChart = new Chart(returnsCtx, {
        type: 'bar',
        data: {
            labels: @json($monthlyReturns->map(fn($item) => \Carbon\Carbon::create($item->year, $item->month)->format('M Y'))),
            datasets: [{
                label: 'Number of Returns',
                data: @json($monthlyReturns->pluck('returns_count')),
                backgroundColor: 'rgba(239, 68, 68, 0.6)',
                borderColor: 'rgb(239, 68, 68)',
                borderWidth: 1
            }, {
                label: 'Refund Amount',
                data: @json($monthlyReturns->pluck('refund_total')),
                type: 'line',
                borderColor: 'rgb(16, 185, 129)',
                backgroundColor: 'rgba(16, 185, 129, 0.1)',
                fill: true,
                yAxisID: 'y1'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Number of Returns'
                    }
                },
                y1: {
                    beginAtZero: true,
                    position: 'right',
                    title: {
                        display: true,
                        text: 'Refund Amount ($)'
                    },
                    ticks: {
                        callback: function(value) {
                            return '$' + value.toLocaleString();
                        }
                    }
                }
            },
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            if (context.datasetIndex === 0) {
                                return 'Returns: ' + context.parsed.y;
                            } else {
                                return 'Refund: $' + context.parsed.y.toLocaleString();
                            }
                        }
                    }
                }
            }
        }
    });
});
</script>
@endpush