@extends('layouts.app')

@section('title', 'Referral Report')
@section('no-page-header')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <p class="mt-1 text-sm text-gray-600">Track referred members, earned commission, renewal usage, and remaining balance.</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">
                <input type="hidden" id="from-date" name="from_date">
                <input type="text" id="from-date-display" placeholder="From Date" class="px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" autocomplete="off">

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

                

                <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="pending">Pending</option>
                    <option value="active">Active</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-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" id="view-report-btn">
                    <i class="fas fa-chart-bar mr-2"></i>View Report
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<style>
    .ui-datepicker { z-index: 9999 !important; }
</style>
@endpush

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<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');
        }
    });

    // Initialize datepicker on page load
    $(document).ready(function() {
        $('#from-date-display, #to-date-display').datepicker({
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true,
            yearRange: '-10:+10',
            onSelect: function(dateText, inst) {
                var parts = dateText.split('-');
                var isoDate = parts[2] + '-' + parts[1] + '-' + parts[0];
                if (this.id === 'from-date-display') {
                    $('#from-date').val(isoDate);
                } else {
                    $('#to-date').val(isoDate);
                }
            }
        });

        // Sync display to hidden on manual input
        $('#from-date-display').on('change', function() {
            var val = $(this).val();
            if (val) {
                var parts = val.split('-');
                if (parts.length === 3) {
                    var isoDate = parts[2] + '-' + parts[1] + '-' + parts[0];
                    $('#from-date').val(isoDate);
                }
            } else {
                $('#from-date').val('');
            }
        });

        $('#to-date-display').on('change', function() {
            var val = $(this).val();
            if (val) {
                var parts = val.split('-');
                if (parts.length === 3) {
                    var isoDate = parts[2] + '-' + parts[1] + '-' + parts[0];
                    $('#to-date').val(isoDate);
                }
            } else {
                $('#to-date').val('');
            }
        });
    });

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

    const exportXlsxUrl = '{{ route('reports.referrals.export-xlsx') }}';
    const exportTxtUrl = '{{ route('reports.referrals.export-txt') }}';

    // 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-6 bg-white rounded-lg shadow p-6';
            document.querySelector('.space-y-6').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/referrals?${params.toString()}`);

            const response = await fetch(`/reports/referrals?${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');

        if (!data.success) {
            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 data</p>
                </div>
            `;
            return;
        }

        const records = data.data || [];
        const summary = data.summary || {};

        let tableRows = '';
        if (records.length === 0) {
            tableRows = `
                <tr>
                    <td colspan="8" class="px-6 py-10 text-center text-sm text-gray-500">
                        No referral records found for the selected filters.
                    </td>
                </tr>
            `;
        } else {
            tableRows = records.map(record => {
                const used = record.commission_used ?? record.total_commission_used ?? 0;
                const balance = record.commission_balance ?? ((record.referred_commission || 0) - used);
                const referrerName = record.referrer?.name || record.referrer_name || 'N/A';
                const statusColor = getStatusColor(record.status);
                
                return `
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            ${records.indexOf(record) + 1}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            ${record.registration_date ? new Date(record.registration_date).toISOString().split('T')[0] : 'N/A'}
                        </td>
                        
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            ${record.client ? record.client.name : 'N/A'}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            ${referrerName}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            ${record.client ? record.client.phone : '-'}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            ${record.referred_commission ? 'RM ' + parseFloat(record.referred_commission).toFixed(2) : 'RM 0.00'}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            ${'RM ' + parseFloat(used).toFixed(2)}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            ${'RM ' + parseFloat(balance).toFixed(2)}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-${statusColor}-100 text-${statusColor}-800">
                                ${record.status ? record.status.charAt(0).toUpperCase() + record.status.slice(1) : 'N/A'}
                            </span>
                        </td>
                        
                    </tr>
                `;
            }).join('');
        }

        const reportHtml = `
            <div class="space-y-4">
                <div class="flex justify-between items-center border-b pb-4">
                    <h3 class="text-lg font-semibold">Referral Report</h3>
                    <div class="text-sm text-gray-600">
                        Total: ${summary.total_referrals || 0} referrals
                    </div>
                    <div class="flex space-x-2">
                        <button onclick="downloadReport('xlsx')" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 text-sm">
                            <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 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">S.No</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Referrer To</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Referrer By</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Contact</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Total</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Used</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Balance</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            ${tableRows}
                        </tbody>
                    </table>
                </div>
            </div>
        `;

        reportContainer.innerHTML = reportHtml;
    }

    function getStatusColor(status) {
        if (status === 'active' || status === 'completed') return 'green';
        if (status === 'cancelled') return 'red';
        if (status === 'pending') return 'yellow';
        return 'gray';
    }

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

        const baseUrl = format === 'xlsx' ? exportXlsxUrl : exportTxtUrl;
        const url = `${baseUrl}?${params.toString()}`;

        const link = document.createElement('a');
        link.href = url;
        link.style.display = 'none';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
</script>
@endpush