@extends('layouts.admin')

@section('content')
 <div class="flex-1 p-4 lg:p-6 w-full lg:w-auto">
            <!-- Header Section -->
            <div class="flex justify-between items-center mb-6">
                <h1 class="text-xl lg:text-2xl font-bold text-gray-800">Customer Reports</h1>
            </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="all" {{ $dateRange == 'all' ? 'selected' : '' }}>All Time</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-3 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-users 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 Customers</h3>
                            <p class="text-xl lg:text-2xl font-bold text-gray-900">{{ number_format($totalCustomers) }}</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-user-plus 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">New Customers</h3>
                            <p class="text-xl lg:text-2xl font-bold text-gray-900">{{ number_format($newCustomers) }}</p>
                        </div>
                    </div>
                </div>

                <div class="stat-card bg-white rounded-lg shadow-lg p-4 lg:p-6 border-l-4 border-purple-500">
                    <div class="flex items-center">
                        <div class="p-2 lg:p-3 bg-purple-100 rounded-lg">
                            <i class="fas fa-star text-purple-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">Active Customers</h3>
                            <p class="text-xl lg:text-2xl font-bold text-gray-900">{{ number_format($topCustomers->count()) }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-6 mb-6">
                <!-- Top Customers -->
                <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">Top Customers by Spending</h3>
                    <div class="space-y-3">
                        @foreach($topCustomers as $customer)
                        <div class="customer-card flex items-center justify-between p-3 lg:p-4 bg-gray-50 rounded-lg">
                            <div class="flex-1 min-w-0">
                                <h4 class="font-semibold text-gray-800 text-sm lg:text-base truncate">{{ $customer->name }}</h4>
                                <p class="text-xs lg:text-sm text-gray-600 truncate">
                                    @if($customer->phone){{ $customer->phone }}@endif
                                    @if($customer->email && $customer->phone) • @endif
                                    @if($customer->email)<span class="hidden sm:inline">{{ $customer->email }}</span>@endif
                                </p>
                            </div>
                            <div class="text-right ml-3">
                                <p class="font-bold text-green-600 text-sm lg:text-base">Rs.{{ number_format($customer->total_spent, 2) }}</p>
                                <p class="text-xs lg:text-sm text-gray-600">{{ $customer->total_transactions }} trans</p>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>

                <!-- Customer Acquisition 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">Customer Acquisition Trend</h3>
                    <div class="chart-container">
                        @if($customerAcquisition->count() > 0)
                            <canvas id="customerAcquisitionChart"></canvas>
                        @else
                            <div class="flex items-center justify-center h-full">
                                <div class="text-center">
                                    <i class="fas fa-chart-line text-4xl text-gray-400 mb-2"></i>
                                    <p class="text-gray-500">No data available</p>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Loyal Customers -->
            <div class="bg-white rounded-lg shadow-lg overflow-hidden mb-6">
                <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">Loyal Customers</h3>
                    <p class="text-xs lg:text-sm text-gray-600">Customers with loyalty points</p>
                </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">Customer</th>
                                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contact</th>
                                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Loyalty Points</th>
                                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Spent</th>
                                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Purchase</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @foreach($loyalCustomers as $customer)
                                <tr class="hover:bg-gray-50">
                                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                        {{ $customer->name }}
                                    </td>
                                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        @if($customer->phone)
                                            {{ $customer->phone }}<br>
                                        @endif
                                        @if($customer->email)
                                            <span class="text-gray-500 text-xs">{{ $customer->email }}</span>
                                        @endif
                                    </td>
                                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                            {{ number_format($customer->loyalty_points) }} points
                                        </span>
                                    </td>
                                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm font-semibold text-green-600">
                                        @php
                                            $totalSpent = $customer->sales()->where('status', 'completed')->sum('total');
                                        @endphp
                                        Rs.{{ number_format($totalSpent, 2) }}
                                    </td>
                                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        @php
                                            $lastSale = $customer->sales()->where('status', 'completed')->latest()->first();
                                        @endphp
                                        @if($lastSale)
                                            {{ $lastSale->created_at->diffForHumans() }}
                                        @else
                                            Never
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Mobile Card View -->
                <div class="lg:hidden space-y-4 p-4">
                    @foreach($loyalCustomers as $customer)
                    <div class="customer-card bg-gray-50 rounded-lg p-4">
                        <div class="flex justify-between items-start mb-3">
                            <div class="flex-1">
                                <h4 class="font-semibold text-gray-800 text-sm">{{ $customer->name }}</h4>
                                <div class="flex flex-wrap gap-1 mt-1">
                                    @if($customer->phone)
                                        <span class="text-xs text-gray-600">{{ $customer->phone }}</span>
                                    @endif
                                    @if($customer->email)
                                        <span class="text-xs text-gray-500 truncate">{{ $customer->email }}</span>
                                    @endif
                                </div>
                            </div>
                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                {{ number_format($customer->loyalty_points) }} pts
                            </span>
                        </div>

                        <div class="grid grid-cols-2 gap-3 text-xs">
                            <div>
                                <span class="text-gray-600">Total Spent:</span>
                                <span class="font-semibold text-green-600 ml-1">
                                    @php
                                        $totalSpent = $customer->sales()->where('status', 'completed')->sum('total');
                                    @endphp
                                    Rs.{{ number_format($totalSpent, 2) }}
                                </span>
                            </div>
                            <div>
                                <span class="text-gray-600">Last Purchase:</span>
                                <span class="font-medium ml-1">
                                    @php
                                        $lastSale = $customer->sales()->where('status', 'completed')->latest()->first();
                                    @endphp
                                    @if($lastSale)
                                        {{ $lastSale->created_at->diffForHumans() }}
                                    @else
                                        Never
                                    @endif
                                </span>
                            </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() {
    // Customer Acquisition Chart
    const customerCtx = document.getElementById('customerAcquisitionChart').getContext('2d');
    const customerChart = new Chart(customerCtx, {
        type: 'line',
        data: {
            labels: @json($customerAcquisition->pluck('date')->map(fn($date) => \Carbon\Carbon::parse($date)->format('M d'))),
            datasets: [{
                label: 'New Customers',
                data: @json($customerAcquisition->pluck('new_customers')),
                borderColor: '#8B5CF6',
                backgroundColor: 'rgba(139, 92, 246, 0.1)',
                fill: true,
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            }
        }
    });
});
</script>
@endpush