@extends('layouts.state')

@section('title', 'Official Event Payments')
@section('page-title', 'Official Event 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 ?? 'Official Event' }}</h5>
                <div class="small text-muted">
                    State: {{ $state_short_name ?? 'N/A' }} &mdash; 
                    Total Paid: <strong>₹{{ number_format($totals['total_paid'] ?? 0, 2) }}</strong> &mdash; 
                    Total Pending: <strong>₹{{ number_format($totals['total_pending'] ?? 0, 2) }}</strong>
                </div>
            </div>
            <div>
                <a href="{{ route('state.events.register_event_users', ['id' => $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 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">Paid Amount</th>
                                <th class="text-end">Pending Amount</th>
                                <th class="text-end">Total Amount</th>
                                <th class="text-center">Payment Channel</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">
                                    <span class="text-success">₹{{ number_format($row->paid_amount ?? 0, 2) }}</span>
                                </td>
                                <td class="text-end">
                                    <span class="text-warning">₹{{ number_format($row->pending_amount ?? 0, 2) }}</span>
                                </td>
                                <td class="text-end fw-semibold">
                                    ₹{{ number_format($row->total_amount ?? 0, 2) }}
                                </td>
                                <td class="text-center">
                                    @php
                                        $channel = $row->payment_channel ?? 'unknown';
                                        $badgeClass = match($channel) {
                                            'razorpay' => 'bg-primary-subtle text-primary',
                                            'offline' => 'bg-warning-subtle text-warning',
                                            'mixed' => 'bg-info-subtle text-info',
                                            default => 'bg-secondary-subtle text-secondary'
                                        };
                                    @endphp
                                    <span class="badge {{ $badgeClass }}">
                                        {{ ucfirst($channel) }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    <button type="button" 
                                            class="btn btn-xs btn-outline-primary view-details-btn"
                                            data-portal-user-id="{{ $row->portal_user_id }}"
                                            data-event-id="{{ $event->id }}">
                                        <i class="uil uil-eye me-1"></i> View Details
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="text-center py-4 text-muted">
                                    No payment records found for this event and state.
                                </td>
                            </tr>
                        @endforelse
                        </tbody>
                        @if(count($rows) > 0)
                        <tfoot class="table-light">
                            <tr>
                                <th colspan="4" class="text-end">Totals:</th>
                                <th class="text-end text-success">₹{{ number_format($totals['total_paid'] ?? 0, 2) }}</th>
                                <th class="text-end text-warning">₹{{ number_format($totals['total_pending'] ?? 0, 2) }}</th>
                                <th class="text-end fw-bold">₹{{ number_format($totals['total_amount'] ?? 0, 2) }}</th>
                                <th colspan="2"></th>
                            </tr>
                        </tfoot>
                        @endif
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Payment Details Modal -->
<div class="modal fade" id="paymentDetailsModal" tabindex="-1" aria-labelledby="paymentDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="paymentDetailsModalLabel">
                    <i class="uil uil-receipt me-2"></i>Payment Details
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="paymentDetailsContent">
                <div class="text-center py-5">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </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);
    }
    .view-details-btn:hover {
        transform: scale(1.05);
    }
</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.officialPaymentsData = {
    eventTitle: @json($event->title ?? 'Official Event'),
    stateShortName: @json($state_short_name ?? 'N/A'),
    totalPaid: @json($totals['total_paid'] ?? 0),
    totalPending: @json($totals['total_pending'] ?? 0),
    totalAmount: @json($totals['total_amount'] ?? 0),
    rows: @json($rows)
};

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

    // View Details Modal Handler
    const viewDetailsBtns = document.querySelectorAll('.view-details-btn');
    viewDetailsBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const portalUserId = this.dataset.portalUserId;
            const eventId = this.dataset.eventId;
            loadPaymentDetails(eventId, portalUserId);
        });
    });
});

/**
 * Load payment details for a specific user
 */
function loadPaymentDetails(eventId, portalUserId) {
    const modal = new bootstrap.Modal(document.getElementById('paymentDetailsModal'));
    const content = document.getElementById('paymentDetailsContent');
    
    // Show loading state
    content.innerHTML = `
        <div class="text-center py-5">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-3 text-muted">Loading payment details...</p>
        </div>
    `;
    
    modal.show();
    
    // Fetch payment details
    fetch(`/state/events/official/${eventId}/payments/user/${portalUserId}`, {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            renderPaymentDetails(data);
        } else {
            throw new Error(data.message || 'Failed to load payment details');
        }
    })
    .catch(error => {
        console.error('Error loading payment details:', error);
        content.innerHTML = `
            <div class="alert alert-danger">
                <i class="uil uil-exclamation-triangle me-2"></i>
                Failed to load payment details. Please try again.
            </div>
        `;
    });
}

/**
 * Render payment details in modal
 */
function renderPaymentDetails(data) {
    const content = document.getElementById('paymentDetailsContent');
    const user = data.user;
    const summary = data.summary;
    const participants = data.participants || [];
    const payments = data.payments || [];
    
    let html = `
        <!-- User Info Section -->
        <div class="row mb-4">
            <div class="col-md-6">
                <div class="card border-0 bg-light">
                    <div class="card-body">
                        <h6 class="card-subtitle mb-2 text-muted">User Information</h6>
                        <p class="mb-1"><strong>Name:</strong> ${user.name || 'N/A'}</p>
                        <p class="mb-1"><strong>UID:</strong> ${user.uid || 'N/A'}</p>
                        <p class="mb-0"><strong>Event:</strong> ${data.event.title || 'N/A'}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card border-0 bg-light">
                    <div class="card-body">
                        <h6 class="card-subtitle mb-2 text-muted">Payment Summary</h6>
                        <p class="mb-1"><strong>Total Participants:</strong> ${summary.participants_count || 0}</p>
                        <p class="mb-1"><strong>Paid Amount:</strong> <span class="text-success">₹${parseFloat(summary.paid_amount || 0).toFixed(2)}</span></p>
                        <p class="mb-0"><strong>Pending Amount:</strong> <span class="text-warning">₹${parseFloat(summary.pending_amount || 0).toFixed(2)}</span></p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Participants Section -->
        <div class="mb-4">
            <h6 class="mb-3"><i class="uil uil-users-alt me-2"></i>Registered Participants</h6>
            <div class="table-responsive">
                <table class="table table-sm table-bordered align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>#</th>
                            <th>Category</th>
                            <th>Sub Category</th>
                            <th>Option</th>
                            <th>Weight Category</th>
                            <th class="text-end">Fee per Person</th>
                        </tr>
                    </thead>
                    <tbody>
    `;
    
    participants.forEach((p, index) => {
        html += `
            <tr>
                <td>${index + 1}</td>
                <td>${p.category_name || 'N/A'}</td>
                <td>${p.sub_category_name || 'N/A'}</td>
                <td>${p.option_name || 'N/A'}</td>
                <td>${p.weight_category_name || 'N/A'}</td>
                <td class="text-end">₹${parseFloat(p.per_person_amount || 0).toFixed(2)}</td>
            </tr>
        `;
    });
    
    html += `
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Payment Records Section -->
        <div class="mb-3">
            <h6 class="mb-3"><i class="uil uil-receipt me-2"></i>Payment Records</h6>
    `;
    
    if (payments.length === 0) {
        html += `
            <div class="alert alert-info">
                <i class="uil uil-info-circle me-2"></i>No payment records found for this user.
            </div>
        `;
    } else {
        html += `
            <div class="table-responsive">
                <table class="table table-sm table-bordered align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>#</th>
                            <th>Payment ID</th>
                            <th>Order ID</th>
                            <th>Channel</th>
                            <th class="text-end">Amount</th>
                            <th class="text-center">Status</th>
                            <th>Date</th>
                        </tr>
                    </thead>
                    <tbody>
        `;
        
        payments.forEach((payment, index) => {
            const status = payment.payment_status || payment.status || 'unknown';
            const statusBadge = getStatusBadge(status);
            const channel = payment.payment_channel || 'unknown';
            const channelBadge = getChannelBadge(channel);
            
            html += `
                <tr>
                    <td>${index + 1}</td>
                    <td><code class="small">${payment.razorpay_payment_id || payment.payment_id || '-'}</code></td>
                    <td><code class="small">${payment.razorpay_order_id || payment.order_id || '-'}</code></td>
                    <td>${channelBadge}</td>
                    <td class="text-end fw-semibold">₹${parseFloat(payment.amount || 0).toFixed(2)}</td>
                    <td class="text-center">${statusBadge}</td>
                    <td>${formatDate(payment.created_at)}</td>
                </tr>
            `;
        });
        
        html += `
                    </tbody>
                </table>
            </div>
        `;
    }
    
    html += `</div>`;
    
    content.innerHTML = html;
}

/**
 * Get status badge HTML
 */
function getStatusBadge(status) {
    const statusLower = String(status).toLowerCase();
    let badgeClass = 'bg-secondary-subtle text-secondary';
    let icon = 'uil-question-circle';
    
    if (['paid', 'completed', 'captured'].includes(statusLower)) {
        badgeClass = 'bg-success-subtle text-success';
        icon = 'uil-check-circle';
    } else if (statusLower === 'pending') {
        badgeClass = 'bg-warning-subtle text-warning';
        icon = 'uil-clock';
    } else if (['failed', 'rejected'].includes(statusLower)) {
        badgeClass = 'bg-danger-subtle text-danger';
        icon = 'uil-times-circle';
    }
    
    return `<span class="badge ${badgeClass}"><i class="uil ${icon} me-1"></i>${status.toUpperCase()}</span>`;
}

/**
 * Get channel badge HTML
 */
function getChannelBadge(channel) {
    const channelLower = String(channel).toLowerCase();
    let badgeClass = 'bg-secondary-subtle text-secondary';
    
    if (channelLower === 'razorpay') {
        badgeClass = 'bg-primary-subtle text-primary';
    } else if (channelLower === 'offline') {
        badgeClass = 'bg-warning-subtle text-warning';
    } else if (channelLower === 'mixed') {
        badgeClass = 'bg-info-subtle text-info';
    }
    
    return `<span class="badge ${badgeClass}">${channel.toUpperCase()}</span>`;
}

/**
 * Format date string
 */
function formatDate(dateString) {
    if (!dateString) return 'N/A';
    try {
        const date = new Date(dateString);
        return date.toLocaleString('en-IN', {
            year: 'numeric',
            month: 'short',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        });
    } catch (e) {
        return dateString;
    }
}

/**
 * Generate Excel Report
 */
function generatePaymentsExcelReport() {
    const data = window.officialPaymentsData;
    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(['Official Event - Payment Summary']);
        wsData.push(['Event:', data.eventTitle]);
        wsData.push(['State:', data.stateShortName]);
        wsData.push(['Total Paid:', '₹' + parseFloat(data.totalPaid).toFixed(2)]);
        wsData.push(['Total Pending:', '₹' + parseFloat(data.totalPending).toFixed(2)]);
        wsData.push(['Total Amount:', '₹' + parseFloat(data.totalAmount).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',
            'Paid Amount (₹)',
            'Pending Amount (₹)',
            'Total Amount (₹)',
            'Payment Channel'
        ]);
        
        // 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.paid_amount).toFixed(2),
                parseFloat(row.pending_amount).toFixed(2),
                parseFloat(row.total_amount).toFixed(2),
                row.payment_channel || 'unknown'
            ]);
        });
        
        // 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: 18 },  // Paid Amount
            { wch: 18 },  // Pending Amount
            { wch: 18 },  // Total Amount
            { wch: 15 }   // Payment Channel
        ];
        
        // Add worksheet to workbook
        XLSX.utils.book_append_sheet(wb, ws, 'Payment Summary');
        
        // Generate filename
        const timestamp = new Date().toISOString().slice(0, 10).replace(/-/g, '');
        const filename = `Official_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