@extends('layouts.admin')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">Account Report</h1>
                    <p class="text-gray-600 mt-1">Generate and download detailed account reports with booking information</p>
                </div>
                <div class="flex space-x-3">
                    <button onclick="downloadReport('pdf')" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 flex items-center">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                        </svg>
                        Download PDF
                    </button>
                    <button onclick="downloadReport('excel')" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 flex items-center">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                        </svg>
                        Download Excel
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-semibold text-gray-900">Filters</h2>
        </div>
        <div class="p-6">
            <form method="GET" action="{{ route('admin.reports.account-report') }}" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <!-- Date Range -->
                <div>
                    <label for="from_date" class="block text-sm font-medium text-gray-700 mb-1">Booking From Date</label>
                    <input type="date" id="from_date" name="from_date" value="{{ request('from_date') }}"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>
                <div>
                    <label for="to_date" class="block text-sm font-medium text-gray-700 mb-1">Booking To Date</label>
                    <input type="date" id="to_date" name="to_date" value="{{ request('to_date') }}"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>

                <!-- Category -->
                <div>
                    <label for="category_id" class="block text-sm font-medium text-gray-700 mb-1">Category</label>
                    <select id="category_id" name="category_id"
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <option value="">All Categories</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}" {{ request('category_id') == $category->id ? 'selected' : '' }}>
                                {{ $category->name }} ({{ $category->temple->name }})
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Seva -->
                <div>
                    <label for="seva_id" class="block text-sm font-medium text-gray-700 mb-1">Seva</label>
                    <select id="seva_id" name="seva_id"
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <option value="">All Sevas</option>
                        @foreach($sevas as $seva)
                            <option value="{{ $seva->id }}" {{ request('seva_id') == $seva->id ? 'selected' : '' }}>
                                {{ $seva->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Filter Buttons -->
                <div class="flex space-x-3 col-span-full">
                    <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700">
                        Apply Filters
                    </button>
                    <a href="{{ route('admin.reports.account-report') }}" class="bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600">
                        Clear Filters
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Results -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
            <div class="flex items-center justify-between">
                <h2 class="text-lg font-semibold text-gray-900">Account Records</h2>
                <span class="text-sm text-gray-500">{{ $bookings->sum(function($booking) { return count($booking->cart_data ?? []); }) }} total seva items across {{ $bookings->total() }} bookings</span>
            </div>
        </div>

        @if($bookings->count() > 0)
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category & Temple</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Booking Details</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Booking Date</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Gateway Reference ID</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Transaction ID</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach($bookings as $booking)
                            @foreach($booking->cart_data ?? [] as $cartItem)
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-medium text-gray-900">
                                            {{ $booking->user->name }}
                                        </div>
                                        <div class="text-sm text-gray-500">
                                            {{ $booking->user->email }}
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-medium text-gray-900">
                                            {{ data_get($cartItem, 'category_name', 'N/A') }}
                                        </div>
                                        <div class="text-sm text-gray-500">
                                            {{ data_get($cartItem, 'temple_name', 'N/A') }}
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-medium text-gray-900">
                                            {{ data_get($cartItem, 'name') }}
                                        </div>
                                        <div class="text-sm text-gray-500">
                                            <div>Date: {{ \Carbon\Carbon::parse(data_get($cartItem, 'date'))->format('d M Y') }}</div>
                                            <div>Time: {{ data_get($cartItem, 'time_slot', 'Any Time') }}</div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {{ \Carbon\Carbon::parse($booking->created_at)->setTimezone('Asia/Kolkata')->format('d M Y H:i') }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                        ₹{{ number_format($booking->total_amount, 2) }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {{ $booking->order->gateway_reference_id ?? 'N/A' }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {{ $booking->order->transaction_id ?? 'N/A' }}
                                    </td>
                                </tr>
                            @endforeach
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <div class="px-6 py-4 border-t border-gray-200">
                {{ $bookings->links() }}
            </div>
        @else
            <div class="px-6 py-12 text-center">
                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                </svg>
                <h3 class="mt-2 text-sm font-medium text-gray-900">No records found</h3>
                <p class="mt-1 text-sm text-gray-500">Try adjusting your filters to see more results.</p>
            </div>
        @endif
    </div>
</div>

<script>
function downloadReport(format) {
    // Get current form data
    const form = document.querySelector('form');
    const formData = new FormData(form);

    // Build query string
    const params = new URLSearchParams();
    for (let [key, value] of formData.entries()) {
        if (value) {
            params.append(key, value);
        }
    }

    // Choose download route based on format
    const downloadRoute = format === 'excel'
        ? '{{ route("admin.reports.account-report.download-excel") }}'
        : '{{ route("admin.reports.account-report.download") }}';

    // Redirect to download URL
    window.location.href = downloadRoute + '?' + params.toString();
}

// Load sevas when category changes
document.getElementById('category_id').addEventListener('change', function() {
    const categoryId = this.value;
    const sevaSelect = document.getElementById('seva_id');

    // Clear existing options
    sevaSelect.innerHTML = '<option value="">All Sevas</option>';

    if (categoryId) {
        fetch(`{{ route('admin.reports.account-report.sevas') }}?category_id=${categoryId}`)
            .then(response => response.json())
            .then(sevas => {
                sevas.forEach(seva => {
                    const option = document.createElement('option');
                    option.value = seva.id;
                    option.textContent = seva.name;
                    sevaSelect.appendChild(option);
                });
            })
            .catch(error => console.error('Error loading sevas:', error));
    }
});
</script>
@endsection