@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">Seva Bookings Report</h1>
                    <p class="text-gray-600 mt-1">Generate and download detailed seva booking reports</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="px-6 py-4">
            <form method="GET" action="{{ route('admin.reports.seva-bookings') }}" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
                <div>
                    <label for="booking_date" class="block text-sm font-medium text-gray-700 mb-1">Booked For Date</label>
                    <input type="date"
                           id="booking_date"
                           name="booking_date"
                           value="{{ request('booking_date') }}"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <p class="text-xs text-gray-500 mt-1">Filters by specific seva booking date from cart_data</p>
                </div>

                <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>
                    <p class="text-xs text-gray-500 mt-1">Shows temple name with category</p>
                </div>

                <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"
                            {{ !request('category_id') ? 'disabled' : '' }}>
                        <option value="">All Sevas</option>
                        @if(request('category_id'))
                            @foreach($sevas as $seva)
                                <option value="{{ $seva->id }}" {{ request('seva_id') == $seva->id ? 'selected' : '' }}>
                                    {{ $seva->name }}
                                </option>
                            @endforeach
                        @endif
                    </select>
                    <p class="text-xs text-gray-500 mt-1">Select category first to see sevas</p>
                </div>

                <div class="flex flex-col justify-end">
                    <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 mb-2">
                        Apply Filters
                    </button>
                    <a href="{{ route('admin.reports.seva-bookings') }}" class="bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400 text-center">
                        Clear
                    </a>
                </div>

                <div></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">Booking 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">Gothram</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Seva</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date & Time</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Temple</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
                            <th class="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($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 text-sm text-gray-900">
                                        {{ data_get($booking->devotee_details, 'gotram', 'N/A') }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-medium text-gray-900">
                                            {{ data_get($cartItem, 'name') }}
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-gray-900">
                                            {{ \Carbon\Carbon::parse(data_get($cartItem, 'date'))->format('d M Y') }}
                                        </div>
                                        <div class="text-sm text-gray-500">
                                            {{ data_get($cartItem, 'time_slot', 'Any Time') }}
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {{ data_get($cartItem, 'temple_name', 'N/A') }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {{ data_get($cartItem, 'category_name', 'N/A') }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full
                                            {{ $booking->status === 'confirmed' ? 'bg-green-100 text-green-800' :
                                               ($booking->status === 'pending' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800') }}">
                                            {{ ucfirst($booking->status) }}
                                        </span>
                                    </td>
                                </tr>
                            @endforeach
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <div class="px-6 py-4 border-t border-gray-200">
                {{ $bookings->appends(request()->query())->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 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>
                <h3 class="mt-2 text-sm font-medium text-gray-900">No bookings 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);

    // Create URL with parameters
    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.seva-bookings.download-excel") }}'
        : '{{ route("admin.reports.seva-bookings.download") }}';

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

// Handle category change to load sevas
document.getElementById('category_id').addEventListener('change', function() {
    const categoryId = this.value;
    const sevaSelect = document.getElementById('seva_id');

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

    if (categoryId) {
        // Enable seva select
        sevaSelect.disabled = false;

        // Fetch sevas for selected category
        fetch(`/admin/reports/seva-bookings/sevas?category_id=${categoryId}`)
            .then(response => response.json())
            .then(data => {
                data.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);
            });
    } else {
        // Disable seva select
        sevaSelect.disabled = true;
    }
});
</script>
@endsection