@extends('layouts.app')

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

@section('no-page-header')

@section('content')
<div id="appointments-report-page" class="space-y-3">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <!-- <h1 class="text-2xl font-bold text-gray-900">All Lockers</h1> -->
            <p class="text-xs text-gray-500">Manage and download appointment report</p>
        </div>
    </div>

    <!-- Filter and Search -->
    <div class="bg-white rounded-lg border border-gray-200 shadow-sm p-3">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-2">
            <div class="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
                <input type="hidden" id="from-date" value="">
                <input type="text" id="from-date-display" class="px-2 py-1.5 text-xs border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" placeholder="From Date" autocomplete="off">

                <input type="hidden" id="to-date" value="">
                <input type="text" id="to-date-display" class="px-2 py-1.5 text-xs border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" placeholder="To Date" autocomplete="off">

                <select id="status-filter" class="px-2 py-1.5 text-xs border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
                    <option value="">All Status</option>
                    <option value="pending">Pending</option>
                    <option value="confirmed">Confirmed</option>
                    <option value="completed">Completed</option>
                    <option value="cancelled">Cancelled</option>
                </select>
            </div>
            <div class="flex items-center space-x-2">
                <button onclick="generateReport()" class="px-3 py-1.5 bg-primary-600 text-white text-xs font-medium rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500" id="view-report-btn">
                    <i class="fas fa-chart-bar mr-2"></i>
                    View Report
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

<style>
    .ui-datepicker {
        z-index: 9999 !important;
    }
</style>

<script>
    // Initialize on page load
    document.addEventListener('DOMContentLoaded', function() {
        console.log('Page loaded, initializing...');

        // Test button click
        const viewBtn = document.getElementById('view-report-btn');
        if (viewBtn) {
            console.log('View Report button found');
            viewBtn.addEventListener('click', function(e) {
                console.log('View Report button clicked');
                e.preventDefault();
                generateReport();
            });
        } else {
            console.error('View Report button not found');
        }
    });

    // Get filter values
    function getFilterValues() {
        const filters = {
            from_date: document.getElementById('from-date').value,
            to_date: document.getElementById('to-date').value,
            status: document.getElementById('status-filter').value
        };
        console.log('Filter values:', filters);
        return filters;
    }

    function formatIsoToDisplay(isoDate) {
        if (!isoDate) return '';
        var parts = isoDate.split('-');
        if (parts.length !== 3) return '';
        return parts[2] + '-' + parts[1] + '-' + parts[0];
    }

    function formatDisplayToIso(displayDate) {
        if (!displayDate) return '';
        var parts = displayDate.split('-');
        if (parts.length !== 3) return '';
        return parts[2] + '-' + parts[1] + '-' + parts[0];
    }

    function initDatepickers() {
        const fromIsoEl = document.getElementById('from-date');
        const toIsoEl = document.getElementById('to-date');
        const fromDisplayEl = document.getElementById('from-date-display');
        const toDisplayEl = document.getElementById('to-date-display');

        if (!fromIsoEl || !toIsoEl || !fromDisplayEl || !toDisplayEl) return;

        fromDisplayEl.value = formatIsoToDisplay(fromIsoEl.value);
        toDisplayEl.value = formatIsoToDisplay(toIsoEl.value);

        if (!window.jQuery || !jQuery.fn || !jQuery.fn.datepicker) return;

        jQuery(fromDisplayEl).datepicker({
            dateFormat: 'dd-mm-yy',
            onSelect: function(dateText) {
                fromIsoEl.value = formatDisplayToIso(dateText);
            }
        });

        jQuery(toDisplayEl).datepicker({
            dateFormat: 'dd-mm-yy',
            onSelect: function(dateText) {
                toIsoEl.value = formatDisplayToIso(dateText);
            }
        });

        fromDisplayEl.addEventListener('change', function() {
            fromIsoEl.value = formatDisplayToIso(this.value);
        });

        toDisplayEl.addEventListener('change', function() {
            toIsoEl.value = formatDisplayToIso(this.value);
        });
    }

    document.addEventListener('DOMContentLoaded', function() {
        initDatepickers();
    });

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

        // Create container if doesn't exist
        let reportContainer = document.getElementById('report-container');
        if (!reportContainer) {
            reportContainer = document.createElement('div');
            reportContainer.id = 'report-container';
            reportContainer.className = 'mt-3 bg-white rounded-lg border border-gray-200 shadow-sm p-3';
            document.getElementById('appointments-report-page').appendChild(reportContainer);
        }

        // Show loading
        reportContainer.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">Loading report...</p>
            </div>
        `;

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

            console.log('Making request to:', `/reports/appointments/report?${params.toString()}`);

            const response = await fetch(`/reports/appointments/report?${params.toString()}`, {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            });

            console.log('Response status:', response.status);

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const data = await response.json();
            console.log('Response data:', data);

            displayReport(data, filters);

        } catch (error) {
            console.error('Error:', error);
            reportContainer.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 loading report: ${error.message}</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');

        const reportHtml = `
            <div class="space-y-2">
                <div class="flex justify-between items-center border-b pb-2">
                    <h3 class="text-sm font-semibold">Appointment Report</h3>
                    <div class="text-xs text-gray-600">
                        Total: ${data.count} appointments
                    </div>
                    <div class="flex space-x-2">
                        <button onclick="downloadReport('xlsx')" class="px-3 py-1.5 bg-green-600 text-white rounded-md hover:bg-green-700 text-xs">
                            <i class="fas fa-file-excel mr-2"></i>Download Report
                        </button>
                        <button onclick="downloadReport('txt')" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm" style="display:none;">
                            <i class="fas fa-download mr-2"></i>Download TXT
                        </button>
                    </div>
                </div>
                
                <div class="overflow-x-auto">
                    <table class="min-w-full table-auto divide-y divide-gray-200 text-xs">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-3 py-2 text-left text-[10px] font-semibold text-gray-500 uppercase">Client</th>
                                <th class="px-3 py-2 text-left text-[10px] font-semibold text-gray-500 uppercase">Account No.</th>
                                <th class="px-3 py-2 text-left text-[10px] font-semibold text-gray-500 uppercase">Authentication Details</th>
                                <th class="px-3 py-2 text-left text-[10px] font-semibold text-gray-500 uppercase">Purpose</th>
                                <th class="px-3 py-2 text-left text-[10px] font-semibold text-gray-500 uppercase">Date</th>
                                <th class="px-3 py-2 text-left text-[10px] font-semibold text-gray-500 uppercase">Time</th>
                                <th class="px-3 py-2 text-left text-[10px] font-semibold text-gray-500 uppercase">Status</th>
                                <th class="px-3 py-2 text-left text-[10px] font-semibold text-gray-500 uppercase">Contact</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            ${data.data.map(appointment => `
                                <tr>
                                    <td class="px-3 py-2 whitespace-nowrap">${escapeHtml(appointment.client?.name || 'N/A')}</td>
                                    <td class="px-3 py-2 whitespace-nowrap">${formatAccountNumber(appointment.client)}</td>
                                    <td class="px-3 py-2 max-w-xs leading-4">${escapeHtml((appointment.authentication_details || []).join('; ') || 'N/A')}</td>
                                    <td class="px-3 py-2 max-w-[180px] leading-4">${escapeHtml(appointment.appointment_title || 'N/A')}</td>
                                    <td class="px-3 py-2 whitespace-nowrap">${appointment.appointment_date ? appointment.appointment_date.split('T')[0] : 'N/A'}</td>
                                    <td class="px-3 py-2 whitespace-nowrap">${appointment.appointment_time || 'N/A'}</td>
                                    <td class="px-3 py-2 whitespace-nowrap">
                                        <span class="px-2 py-0.5 text-[10px] rounded-full bg-${getStatusColor(appointment.status)}-100 text-${getStatusColor(appointment.status)}-800">
                                            ${appointment.status || 'N/A'}
                                        </span>
                                    </td>
                                    <td class="px-3 py-2 whitespace-nowrap">${escapeHtml(appointment.client?.phone || 'N/A')}</td>
                                </tr>
                            `).join('')}
                        </tbody>
                    </table>
                </div>
                
                ${data.data.length === 0 ? `
                    <div class="text-center py-8">
                        <p class="text-gray-600">No appointments found matching the selected filters.</p>
                    </div>
                ` : ''}
            </div>
        `;

        reportContainer.innerHTML = reportHtml;
    }

    function getStatusColor(status) {
        if (status === 'confirmed') return 'blue';
        if (status === 'completed') return 'green';
        if (status === 'cancelled') return 'red';
        return 'yellow';
    }

    function escapeHtml(value) {
        const element = document.createElement('div');
        element.textContent = value;
        return element.innerHTML;
    }

    function formatAccountNumber(client) {
        if (!client || !client.id) return 'N/A';
        const clientId = String(client.id).padStart(4, '0');
        const accountTypeId = String(client.account_type_id || 0).padStart(2, '0');
        return `${clientId}-${accountTypeId}`;
    }

    function downloadReport(format) {
        const filters = getFilterValues();
        const params = new URLSearchParams();
        Object.keys(filters).forEach(key => {
            if (filters[key]) {
                params.append(key, filters[key]);
            }
        });

        // Create a temporary link element for direct download
        const link = document.createElement('a');
        link.href = `/reports/appointments/export-${format}?${params.toString()}`;
        link.style.display = 'none';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
</script>
@endpush