@extends('layouts.app')

@section('title', 'Lockers Report')

@section('no-page-header')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <!-- <h1 class="text-2xl font-bold text-gray-900">All Lockers</h1> -->
            <p class="mt-1 text-sm text-gray-600">Manage and download lockers report</p>
        </div>
    </div>

    <!-- Filter and Search -->
    <div class="bg-white rounded-lg shadow p-4">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-3 md:space-y-0">
            <div class="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
                <select id="size-filter" class="px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
                    <option value="">All Sizes</option>
                    <option value="small">Small</option>
                    <option value="medium">Medium</option>
                    <option value="large">Large</option>
                    <option value="Extra large">Extra Large</option>
                </select>

                <select id="type-filter" class="px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
                    <option value="">All Types</option>
                    <option value="Default">Default</option>
                    <option value="Fancy">Fancy</option>
                </select>

                <select id="status-filter" class="px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
                    <option value="">All Status</option>
                    <option value="available">Available</option>
                    <option value="reserved">Reserved</option>
                    <option value="occupied">Occupied</option>
                    <option value="maintenance">Maintenance</option>
                    <option value="blocked">Blocked</option>
                </select>
            </div>
            <div class="flex items-center space-x-2">
                <button onclick="generateReport()" class="px-4 py-2 bg-primary-600 text-white text-sm font-medium rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                    <i class="fas fa-chart-bar mr-2"></i>
                    View Report
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
@verbatim
<script>
    // Debounce function to limit API calls
    function debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }

    // Get current filter values
    function getFilterValues() {
        return {
            search: document.getElementById('locker-search') ? document.getElementById('locker-search').value : '',
            status: document.getElementById('status-filter').value,
            size: document.getElementById('size-filter').value,
            type: document.getElementById('type-filter').value
        };
    }

    // Build URL with parameters
    function buildUrl() {
        const params = getFilterValues();
        let baseUrl = "/lockers/api/search";

        const url = new URL(baseUrl, window.location.origin);

        Object.keys(params).forEach(key => {
            if (params[key]) {
                url.searchParams.append(key, params[key]);
            }
        });

        console.log('Built URL:', url.toString());
        return url;
    }

    // Render locker card
    function renderLockerCard(locker) {
        // Match the exact same logic as the Blade template
        const getStatusColor = (status) => {
            if (status === 'available') return 'green';
            if (status === 'occupied') return 'red';
            return 'yellow'; // for reserved, maintenance, blocked, etc.
        };

        const getStatusIcon = (status) => {
            if (status === 'available') return 'door-open';
            if (status === 'occupied') return 'lock';
            return 'tools'; // for reserved, maintenance, blocked, etc.
        };

        const color = getStatusColor(locker.status);
        const icon = getStatusIcon(locker.status);

        return `
        <div class="bg-white rounded-lg shadow hover:shadow-lg transition-shadow duration-200 overflow-hidden">
            <!-- Locker Header -->
            <div class="p-4 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 rounded-full bg-${color}-100 flex items-center justify-center">
                            <i class="fas fa-${icon} text-${color}-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-medium text-gray-900">${locker.locker_number}</h3>
                            <p class="text-sm text-gray-500">${locker.locker_type ? locker.locker_type.charAt(0).toUpperCase() + locker.locker_type.slice(1) : ''}</p>
                        </div>
                    </div>
                    <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-${color}-100 text-${color}-800">
                        ${locker.status.charAt(0).toUpperCase() + locker.status.slice(1)}
                    </span>
                </div>
            </div>

            <!-- Locker Details -->
            <div class="p-4 space-y-3">
                <div class="flex items-center justify-between text-sm">
                    <span class="text-gray-500">Size:</span>
                    <span class="font-medium text-gray-900">${locker.locker_size ? (locker.locker_size === 'Extra large' ? 'Extra Large' : locker.locker_size.charAt(0).toUpperCase() + locker.locker_size.slice(1)) : ''}</span>
                </div>
                
                ${locker.customer ? `
                <div class="flex items-center justify-between text-sm">
                    <span class="text-gray-500">Customer:</span>
                    <span class="font-medium text-gray-900">${locker.customer.name}</span>
                </div>
                ` : ''}
                
                <div class="flex items-center justify-between text-sm">
                    <span class="text-gray-500">Created:</span>
                    <span class="font-medium text-gray-900">${new Date(locker.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</span>
                </div>
            </div>

            <!-- Actions -->
            <div class="px-4 py-3 bg-gray-50 border-t border-gray-200">
                <div class="flex items-center justify-between">
                    <div class="flex space-x-2">
                        <a href="${locker.url}" class="inline-flex items-center px-2 py-1 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded hover:bg-gray-50">
                            <i class="fas fa-eye mr-1"></i>
                            View
                        </a>
                        <a href="${locker.edit_url}" class="inline-flex items-center px-2 py-1 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded hover:bg-gray-50">
                            <i class="fas fa-edit mr-1"></i>
                            Edit
                        </a>
                    </div>
                    ${locker.status === 'available' ? `
                    <button class="inline-flex items-center px-2 py-1 text-xs font-medium text-white bg-green-600 border border-transparent rounded hover:bg-green-700">
                        <i class="fas fa-key mr-1"></i>
                        Assign
                    </button>
                    ` : ''}
                </div>
            </div>
        </div>
    `;
    }

    // Render pagination
    function renderPagination(data) {
        if (!data.next_page_url && !data.prev_page_url) {
            return '';
        }

        return `
        <div class="bg-white rounded-lg shadow px-4 py-3 flex items-center justify-between border-t border-gray-200">
            <div class="flex-1 flex justify-between sm:hidden">
                ${data.prev_page_url ? `<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> Previous </a>` : ''}
                ${data.next_page_url ? `<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> Next </a>` : ''}
            </div>
            <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                <div>
                    <p class="text-sm text-gray-700">
                        Showing <span class="font-medium">${data.from || 0}</span> to 
                        <span class="font-medium">${data.to || 0}</span> of 
                        <span class="font-medium">${data.total || 0}</span> results
                    </p>
                </div>
                <div>
                    <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
                        ${data.prev_page_url ? `
                        <button onclick="loadPage(${data.current_page - 1})" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                            <i class="fas fa-chevron-left"></i>
                        </button>
                        ` : ''}
                        
                        ${data.links ? data.links.slice(1, -1).map(link => `
                        <button onclick="loadPage(${link.label})" class="${link.active ? 'z-10 bg-primary-50 border-primary-500 text-primary-600' : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'} relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                            ${link.label}
                        </button>
                        `).join('') : ''}
                        
                        ${data.next_page_url ? `
                        <button onclick="loadPage(${data.current_page + 1})" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                        ` : ''}
                    </nav>
                </div>
            </div>
        </div>
    `;
    }

    // Load lockers via AJAX
    function loadLockers(page = 1) {
        const url = buildUrl();
        url.searchParams.set('page', page);

        // Show loading state
        const grid = document.getElementById('lockers-grid');
        grid.innerHTML = `
        <div class="col-span-full text-center py-12">
            <i class="fas fa-spinner fa-spin text-gray-400 text-4xl mb-4"></i>
            <p class="text-gray-500">Loading lockers...</p>
        </div>
    `;

        console.log('Making request to:', url.toString());

        fetch(url, {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                credentials: 'same-origin'
            })
            .then(response => {
                console.log('Response status:', response.status);
                console.log('Response headers:', response.headers);

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                console.log('Response data:', data);

                // Update grid
                if (data.data && data.data.length > 0) {
                    grid.innerHTML = data.data.map(locker => renderLockerCard(locker)).join('');
                } else {
                    grid.innerHTML = `
                    <div class="col-span-full">
                        <div class="text-center py-12">
                            <i class="fas fa-door-closed text-gray-400 text-4xl mb-4"></i>
                            <h3 class="text-lg font-medium text-gray-900 mb-2">No lockers found</h3>
                            <p class="text-sm text-gray-500 mb-4">Try adjusting your search or filter criteria.</p>
                            <a href="/lockers/create" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700">
                                <i class="fas fa-plus mr-2"></i>
                                Add Locker
                            </a>
                        </div>
                    </div>
                `;
                }

                // Update pagination
                const paginationContainer = document.getElementById('pagination-container');
                if (paginationContainer) {
                    const paginationHtml = renderPagination(data);
                    if (paginationHtml) {
                        paginationContainer.innerHTML = paginationHtml;
                        paginationContainer.style.display = 'block';
                    } else {
                        paginationContainer.style.display = 'none';
                    }
                }
            })
            .catch(error => {
                console.error('Error loading lockers:', error);
                grid.innerHTML = `
                <div class="col-span-full">
                    <div class="text-center py-12">
                        <i class="fas fa-exclamation-triangle text-red-400 text-4xl mb-4"></i>
                        <h3 class="text-lg font-medium text-gray-900 mb-2">Error loading lockers</h3>
                        <p class="text-sm text-gray-500">Please try again later.</p>
                        <button onclick="loadLockers(1)" class="mt-4 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700">
                            <i class="fas fa-redo mr-2"></i>
                            Retry
                        </button>
                    </div>
                </div>
            `;
            });
    }

    // Load specific page
    function loadPage(page) {
        loadLockers(page);
    }

    // Initialize event listeners
    document.addEventListener('DOMContentLoaded', function() {
        // Search with debouncing
        const searchInput = document.getElementById('locker-search');
        const debouncedSearch = debounce(() => loadLockers(1), 300);
        searchInput.addEventListener('input', debouncedSearch);

        // Status filter
        const statusFilter = document.getElementById('status-filter');
        statusFilter.addEventListener('change', () => loadLockers(1));

        // Size filter
        const sizeFilter = document.getElementById('size-filter');
        sizeFilter.addEventListener('change', () => loadLockers(1));

        // Type filter
        const typeFilter = document.getElementById('type-filter');
        typeFilter.addEventListener('change', () => loadLockers(1));
    });

    // Generate report function
    function generateReport() {
        const filters = getFilterValues();

        // Show loading state
        const reportContainer = document.getElementById('report-container');
        if (!reportContainer) {
            // Create report container if it doesn't exist
            const container = document.createElement('div');
            container.id = 'report-container';
            container.className = 'mt-6 bg-white rounded-lg shadow p-6';
            document.querySelector('.space-y-6').appendChild(container);
        }

        document.getElementById('report-container').innerHTML = `
            <div class="text-center py-8">
                <i class="fas fa-spinner fa-spin text-primary-600 text-3xl mb-4"></i>
                <p class="text-gray-600">Generating report...</p>
            </div>
        `;

        // Build API URL
        const params = new URLSearchParams();
        Object.keys(filters).forEach(key => {
            if (filters[key]) {
                params.append(key, filters[key]);
            }
        });

        // Make AJAX call to get report data
        fetch(`/reports/lockers/report?${params.toString()}`, {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                credentials: 'same-origin'
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                displayReport(data, filters);
            })
            .catch(error => {
                console.error('Error generating report:', error);
                document.getElementById('report-container').innerHTML = `
                <div class="text-center py-8">
                    <i class="fas fa-exclamation-triangle text-red-500 text-3xl mb-4"></i>
                    <p class="text-gray-600">Error generating report. Please try again.</p>
                    <button onclick="generateReport()" class="mt-4 px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700">
                        <i class="fas fa-redo mr-2"></i>Retry
                    </button>
                </div>
            `;
            });
    }

    // Display report data
    function displayReport(data, filters) {
        const reportContainer = document.getElementById('report-container');

        // Build filter summary
        const activeFilters = [];
        if (filters.status) activeFilters.push(`Status: ${filters.status.charAt(0).toUpperCase() + filters.status.slice(1)}`);
        if (filters.size) activeFilters.push(`Size: ${filters.size === 'Extra large' ? 'Extra Large' : filters.size.charAt(0).toUpperCase() + filters.size.slice(1)}`);
        if (filters.type) activeFilters.push(`Type: ${filters.type}`);

        const filterSummary = activeFilters.length > 0 ? activeFilters.join(', ') : 'All Lockers';

        // Generate report HTML
        reportContainer.innerHTML = `
            <div class="space-y-6">
                <!-- Report Header -->
                <div class="flex items-center justify-between border-b pb-4">
                    <div>
                        <h2 class="text-xl font-bold text-gray-900">Lockers Report</h2>
                        <p class="text-sm text-gray-600 mt-1">Generated on ${new Date().toLocaleDateString()} at ${new Date().toLocaleTimeString()}</p>
                        <p class="text-sm text-gray-500 mt-1">Filters: ${filterSummary}</p>
                    </div>
                    <div class="text-right">
                        <div class="text-2xl font-bold text-primary-600">${data.count}</div>
                        <div class="text-sm text-gray-600">Total Lockers</div>
                    </div>
                </div>
                
                <!-- Action Buttons -->
                <div class="flex justify-end space-x-2">
                    <button onclick="downloadReport('xls')" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700">
                        <i class="fas fa-file-excel mr-2"></i>Download Report
                    </button>
                    <!-- <button onclick="downloadReport('pdf')" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700">
                        <i class="fas fa-file-pdf mr-2"></i>Download PDF
                    </button> -->
                    <!-- <button onclick="downloadReport('txt')" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
                        <i class="fas fa-file-alt mr-2"></i>Download
                    </button> --> 
                    <!-- <button onclick="window.print()" class="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700">
                        <i class="fas fa-print mr-2"></i>Print Report
                    </button> -->
                </div>
                
                <!-- Report Content -->
                <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">Locker Number</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Locker Group</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Size</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Location</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            ${data.data.map(locker => `
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${locker.locker_number}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Group ${locker.locker_group_id}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${locker.locker_type || '-'}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${locker.locker_size || '-'}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${locker.locker_row_column || '-'}</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusBadgeClass(locker.status)}">
                                            ${locker.status.charAt(0).toUpperCase() + locker.status.slice(1)}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$${parseFloat(locker.locker_amount || 0).toFixed(2)}</td>
                                </tr>
                            `).join('')}
                        </tbody>
                    </table>
                </div>
                
                ${data.data.length === 0 ? `
                    <div class="text-center py-8">
                        <i class="fas fa-door-closed text-gray-400 text-4xl mb-4"></i>
                        <p class="text-gray-600">No lockers found matching the selected filters.</p>
                    </div>
                ` : ''}
                
                <!-- Report Footer -->
                <div class="border-t pt-4">
                    <div class="text-sm text-gray-600">
                        Showing ${data.data.length} of ${data.count} lockers
                    </div>
                </div>
            </div>
        `;
    }

    // Download report as XLS, PDF, or TXT
    function downloadReport(format) {
        const filters = getFilterValues();

        // Build URL with parameters for export
        const params = new URLSearchParams();
        Object.keys(filters).forEach(key => {
            if (filters[key]) {
                params.append(key, filters[key]);
            }
        });

        // Determine correct endpoint based on format
        let downloadUrl;
        switch (format) {
            case 'pdf':
                downloadUrl = `/reports/lockers/export-pdf?${params.toString()}`;
                break;
            case 'txt':
                downloadUrl = `/reports/lockers/export-txt?${params.toString()}`;
                break;
            default:
                downloadUrl = `/reports/lockers/export?${params.toString()}`;
                break;
        }

        // Create download link
        const link = document.createElement('a');
        link.href = downloadUrl;
        link.style.display = 'none';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }

    // Download document
    // function downloadDocument(content, filename) {
    //     const blob = new Blob([content], {
    //         type: 'text/plain;charset=utf-8'
    //     });
    //     const url = window.URL.createObjectURL(blob);
    //     const a = document.createElement('a');
    //     a.href = url;
    //     a.download = `${filename}_${new Date().toISOString().split('T')[0]}.txt`;
    //     document.body.appendChild(a);
    //     a.click();
    //     document.body.removeChild(a);
    //     window.URL.revokeObjectURL(url);
    // }

    // Get status badge class
    function getStatusBadgeClass(status) {
        const statusClasses = {
            'available': 'bg-green-100 text-green-800',
            'occupied': 'bg-red-100 text-red-800',
            'reserved': 'bg-yellow-100 text-yellow-800',
            'maintenance': 'bg-orange-100 text-orange-800',
            'blocked': 'bg-gray-100 text-gray-800'
        };
        return statusClasses[status] || 'bg-gray-100 text-gray-800';
    }
</script>
@endverbatim
@endpush