@extends('layouts.state')

@section('title', 'Federation Cup Payments')
@section('page-title', 'Federation Cup Payments Summary')

@section('content')
<div class="row g-3">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
                <h5 class="mb-1">{{ $event->title ?? 'Federation Cup' }}</h5>
                <div class="small text-muted">
                    State: {{ $state_short_name ?? 'N/A' }} &mdash; Total Pending: <strong>{{ number_format($totals['total_pending'] ?? 0, 2) }}</strong>
                </div>
            </div>
            <div>
                <a href="{{ route('state.events.federation.register', ['eventId' => $event->id]) }}" class="btn btn-sm btn-outline-secondary">
                    <i class="uil uil-arrow-left"></i> Back to Registration
                </a>
            </div>
        </div>

        <div class="card border-0 shadow-sm">
            <div class="card-header bg-body d-flex justify-content-between align-items-center">
                <span class="small text-body-secondary"><i class="uil uil-users-alt me-1"></i> Users with Offline Pending Payments</span>
                <button type="button" id="download_payments_excel_btn" class="btn btn-sm btn-success">
                    <i class="uil uil-file-download-alt me-1"></i> Download Excel
                </button>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-sm align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 40px;">#</th>
                                <th>User</th>
                                <th>UID</th>
                                <th class="text-end">Participants</th>
                                <th class="text-end">Pending Amount</th>
                                <th class="text-center" style="width: 140px;">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        @forelse ($rows as $index => $row)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>
                                    <div class="fw-semibold">{{ $row->full_name ?? 'N/A' }}</div>
                                    <div class="small text-muted">{{ $row->email ?? '' }}</div>
                                </td>
                                <td>{{ $row->reg_uid ?? '-' }}</td>
                                <td class="text-end">{{ $row->participants_count ?? 0 }}</td>
                                <td class="text-end">{{ number_format($row->pending_amount ?? 0, 2) }}</td>
                                <td class="text-center">
                                    <a href="{{ route('state.events.federation.view_user_payment_details', ['eventId' => $event->id, 'portalUserId' => $row->portal_user_id]) }}" class="btn btn-xs btn-outline-primary">
                                        <i class="uil uil-eye me-1"></i> View Details
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center py-4 text-muted">
                                    No offline pending payments found for this event and state.
                                </td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    #download_payments_excel_btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
    }
</style>
@endpush

@push('scripts')
<!-- SheetJS for Excel export -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

<script>
// Embed payment data for Excel export
window.federationCupPaymentsData = {
    eventTitle: @json($event->title ?? 'Federation Cup'),
    stateShortName: @json($state_short_name ?? 'N/A'),
    totalPending: @json($totals['total_pending'] ?? 0),
    rows: @json($rows)
};

document.addEventListener('DOMContentLoaded', function() {
    const downloadBtn = document.getElementById('download_payments_excel_btn');
    if (downloadBtn) {
        downloadBtn.addEventListener('click', generatePaymentsExcelReport);
    }
});

function generatePaymentsExcelReport() {
    const data = window.federationCupPaymentsData;
    if (!data || !Array.isArray(data.rows)) {
        Swal.fire({
            icon: 'error',
            title: 'Export Failed',
            text: 'No payment data available to export.',
            confirmButtonColor: '#dc3545'
        });
        return;
    }

    try {
        // Create workbook
        const wb = XLSX.utils.book_new();
        
        // Create worksheet data
        const wsData = [];
        
        // Title rows
        wsData.push(['Federation Cup - Offline Pending Payments']);
        wsData.push(['Event:', data.eventTitle]);
        wsData.push(['State:', data.stateShortName]);
        wsData.push(['Total Pending Amount:', '₹' + parseFloat(data.totalPending).toFixed(2)]);
        wsData.push(['Generated:', new Date().toLocaleString('en-IN')]);
        wsData.push([]); // Empty row
        
        // Header row
        wsData.push([
            'S.No.',
            'User Name',
            'Email',
            'UID',
            'Participants Count',
            'Pending Amount (₹)',
            'Portal User ID'
        ]);
        
        // Data rows
        data.rows.forEach((row, index) => {
            wsData.push([
                index + 1,
                row.full_name || 'N/A',
                row.email || '',
                row.reg_uid || '-',
                parseInt(row.participants_count) || 0,
                parseFloat(row.pending_amount).toFixed(2),
                row.portal_user_id || ''
            ]);
        });
        
        // Create worksheet
        const ws = XLSX.utils.aoa_to_sheet(wsData);
        
        // Set column widths
        ws['!cols'] = [
            { wch: 8 },   // S.No.
            { wch: 25 },  // User Name
            { wch: 30 },  // Email
            { wch: 20 },  // UID
            { wch: 18 },  // Participants Count
            { wch: 20 },  // Pending Amount
            { wch: 15 }   // Portal User ID
        ];
        
        // Style title rows (rows 0-5)
        const titleStyle = {
            font: { bold: true, sz: 12 },
            alignment: { horizontal: 'left' }
        };
        
        // Style header row (row 6)
        const headerStyle = {
            font: { bold: true, color: { rgb: 'FFFFFF' } },
            fill: { fgColor: { rgb: '28A745' } },
            alignment: { horizontal: 'center', vertical: 'center' }
        };
        
        // Apply styles to header (row index 6 in zero-based)
        const headerRow = 6;
        for (let col = 0; col < 7; col++) {
            const cellRef = XLSX.utils.encode_cell({ r: headerRow, c: col });
            if (!ws[cellRef]) ws[cellRef] = { t: 's', v: '' };
            ws[cellRef].s = headerStyle;
        }
        
        // Add worksheet to workbook
        XLSX.utils.book_append_sheet(wb, ws, 'Pending Payments');
        
        // Generate filename
        const timestamp = new Date().toISOString().slice(0, 10).replace(/-/g, '');
        const filename = `FC_Payments_${data.stateShortName}_${timestamp}.xlsx`;
        
        // Download file
        XLSX.writeFile(wb, filename);
        
        Swal.fire({
            icon: 'success',
            title: 'Export Successful',
            text: 'Payment data has been exported to Excel.',
            confirmButtonColor: '#28a745',
            timer: 2000
        });
        
    } catch (error) {
        console.error('Excel export error:', error);
        Swal.fire({
            icon: 'error',
            title: 'Export Failed',
            text: 'An error occurred while generating the Excel file.',
            confirmButtonColor: '#dc3545'
        });
    }
}
</script>
@endpush