<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Super Admin - Payments | WEPESI HOTEL MANAGEMENT SOULUTION</title>
    
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 6 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <!-- SweetAlert2 -->
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
    <!-- Select2 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
    <!-- Moment.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    
    <style>
        :root {
            --primary-color: #059669;
            --primary-dark: #047857;
            --primary-light: #10b981;
            --primary-soft: #d1fae5;
            --secondary-color: #6b7280;
            --success-color: #10b981;
            --warning-color: #f59e0b;
            --danger-color: #ef4444;
            --info-color: #3b82f6;
            --pesapal-color: #0066b3;
        }
        
        body {
            background-color: #f8fafc;
            font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        
        /* Navbar Styles */
        .navbar {
            background: linear-gradient(135deg, #059669, #047857);
            padding: 0.75rem 1.5rem;
            box-shadow: 0 4px 12px rgba(5, 150, 105, 0.2);
        }
        
        .navbar-brand {
            font-size: 1.5rem;
            font-weight: 700;
            color: white !important;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .navbar-brand i {
            font-size: 1.8rem;
            color: #d1fae5;
        }
        
        .nav-link {
            color: rgba(255, 255, 255, 0.9) !important;
            font-weight: 500;
            padding: 0.5rem 1rem !important;
            border-radius: 0.5rem;
            transition: all 0.3s;
        }
        
        .nav-link:hover {
            color: white !important;
            background-color: rgba(209, 250, 229, 0.2);
            transform: translateY(-2px);
        }
        
        .nav-link i {
            margin-right: 0.5rem;
            color: #d1fae5;
        }
        
        .nav-link.active {
            color: white !important;
            background-color: rgba(209, 250, 229, 0.15);
            border-bottom: 3px solid #d1fae5;
        }
        
        .user-dropdown {
            background-color: rgba(209, 250, 229, 0.2);
            border-radius: 2rem;
            padding: 0.25rem 0.25rem 0.25rem 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .user-dropdown .dropdown-toggle {
            color: white;
            background-color: transparent;
            border: none;
            padding: 0.25rem 0.75rem;
            border-radius: 2rem;
        }
        
        .user-dropdown .dropdown-toggle::after {
            color: white;
        }
        
        .dropdown-menu {
            border: 2px solid #d1fae5;
            border-radius: 1rem;
            box-shadow: 0 10px 15px -3px rgba(5, 150, 105, 0.2);
        }
        
        .dropdown-item {
            padding: 0.75rem 1.5rem;
            font-weight: 500;
            color: #1f2937;
        }
        
        .dropdown-item i {
            margin-right: 0.75rem;
            color: var(--primary-color);
            width: 1.25rem;
        }
        
        .dropdown-item:hover {
            background-color: #f0fdf4;
            color: var(--primary-dark);
        }
        
        .dropdown-divider {
            border-top-color: #d1fae5;
        }
        
        /* Main Content */
        .main-content {
            padding: 2rem;
            max-width: 1600px;
            margin: 0 auto;
        }
        
        /* Page Header */
        .page-header {
            margin-bottom: 2rem;
            border-bottom: 2px solid #a7f3d0;
            padding-bottom: 1rem;
        }
        
        .page-title {
            color: var(--primary-color);
            font-weight: 700;
            margin: 0;
            font-size: 2rem;
        }
        
        .page-title i {
            color: var(--primary-color);
        }
        
        .breadcrumb {
            background: transparent;
            padding: 0;
            margin: 0;
        }
        
        .breadcrumb-item a {
            color: var(--primary-color);
            text-decoration: none;
        }
        
        .breadcrumb-item a:hover {
            color: var(--primary-dark);
            text-decoration: underline;
        }
        
        /* Stats Cards */
        .stats-row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .stat-card {
            background: white;
            border-radius: 1rem;
            padding: 1.25rem;
            box-shadow: 0 4px 6px -1px rgba(5, 150, 105, 0.1);
            border: 1px solid #d1fae5;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(5, 150, 105, 0.2);
        }
        
        .stat-icon {
            font-size: 2.5rem;
            opacity: 0.2;
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--primary-color);
        }
        
        .stat-label {
            color: var(--secondary-color);
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
            margin-bottom: 0.5rem;
        }
        
        .stat-value {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary-color);
        }
        
        /* Filter Section */
        .filter-card {
            background: white;
            border-radius: 1rem;
            padding: 1.5rem;
            margin-bottom: 2rem;
            box-shadow: 0 4px 6px -1px rgba(5, 150, 105, 0.1);
            border: 1px solid #d1fae5;
        }
        
        .filter-card h6 {
            color: var(--primary-color);
            font-weight: 600;
        }
        
        .filter-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
        }
        
        .filter-group {
            margin-bottom: 1rem;
        }
        
        .filter-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 600;
            color: var(--primary-dark);
            font-size: 0.9rem;
        }
        
        .filter-group select,
        .filter-group input {
            width: 100%;
            padding: 0.5rem 0.75rem;
            border: 1px solid #d1fae5;
            border-radius: 0.5rem;
            transition: all 0.3s;
        }
        
        .filter-group select:focus,
        .filter-group input:focus {
            outline: none;
            border-color: var(--primary-light);
            box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
        }
        
        .filter-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.5rem;
            margin-top: 1rem;
        }
        
        /* Table Card */
        .table-card {
            background: white;
            border-radius: 1rem;
            box-shadow: 0 4px 6px -1px rgba(5, 150, 105, 0.1);
            border: 1px solid #d1fae5;
            overflow: hidden;
        }
        
        .card-header {
            background: white;
            border-bottom: 2px solid #d1fae5;
            padding: 1.25rem;
        }
        
        .card-header h5 {
            color: var(--primary-color);
            font-weight: 600;
            margin: 0;
        }
        
        .table {
            margin: 0;
        }
        
        .table thead th {
            background-color: #f0fdf4;
            border-bottom: 2px solid #d1fae5;
            color: var(--primary-dark);
            font-weight: 600;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
            padding: 1rem;
        }
        
        .table td {
            padding: 1rem;
            vertical-align: middle;
            border-bottom: 1px solid #d1fae5;
        }
        
        .table tbody tr:hover {
            background-color: #f0fdf4;
        }
        
        /* Badges */
        .badge-custom {
            padding: 0.5rem 1rem;
            font-size: 0.85rem;
            font-weight: 600;
            border-radius: 2rem;
            display: inline-block;
        }
        
        .badge-active {
            background: linear-gradient(135deg, #059669, #10b981);
            color: white;
        }
        
        .badge-expiring {
            background: linear-gradient(135deg, #f59e0b, #fbbf24);
            color: white;
        }
        
        .badge-expired {
            background: linear-gradient(135deg, #6b7280, #9ca3af);
            color: white;
        }
        
        .badge-suspended {
            background: linear-gradient(135deg, #ef4444, #f87171);
            color: white;
        }
        
        .badge-trial {
            background: linear-gradient(135deg, #3b82f6, #60a5fa);
            color: white;
        }
        
        .badge-success {
            background: linear-gradient(135deg, #10b981, #34d399);
            color: white;
        }
        
        .badge-warning {
            background: linear-gradient(135deg, #f59e0b, #fbbf24);
            color: white;
        }
        
        .badge-danger {
            background: linear-gradient(135deg, #ef4444, #f87171);
            color: white;
        }
        
        .badge-info {
            background: linear-gradient(135deg, #3b82f6, #60a5fa);
            color: white;
        }
        
        .badge-secondary {
            background: linear-gradient(135deg, #6b7280, #9ca3af);
            color: white;
        }
        
        .badge-pesapal {
            background: linear-gradient(135deg, #0066b3, #004d8c);
            color: white;
        }
        
        /* Buttons */
        .btn {
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            font-weight: 600;
            transition: all 0.3s;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #059669, #10b981);
            border: none;
            color: white;
        }
        
        .btn-primary:hover {
            background: linear-gradient(135deg, #047857, #059669);
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(5, 150, 105, 0.2);
        }
        
        .btn-success {
            background: linear-gradient(135deg, #10b981, #34d399);
            border: none;
            color: white;
        }
        
        .btn-warning {
            background: linear-gradient(135deg, #f59e0b, #fbbf24);
            border: none;
            color: white;
        }
        
        .btn-danger {
            background: linear-gradient(135deg, #ef4444, #f87171);
            border: none;
            color: white;
        }
        
        .btn-info {
            background: linear-gradient(135deg, #3b82f6, #60a5fa);
            border: none;
            color: white;
        }
        
        .btn-pesapal {
            background: linear-gradient(135deg, #0066b3, #004d8c);
            border: none;
            color: white;
        }
        
        .btn-outline-primary {
            background: transparent;
            border: 2px solid #059669;
            color: #059669;
        }
        
        .btn-outline-primary:hover {
            background: #059669;
            color: white;
        }
        
        .btn-sm {
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
        }
        
        .btn-icon {
            width: 32px;
            height: 32px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            margin: 0 2px;
        }
        
        .action-group {
            display: flex;
            gap: 0.25rem;
            flex-wrap: wrap;
        }
        
        /* Modal Styles */
        .modal-content {
            border: none;
            border-radius: 1rem;
            border: 2px solid #d1fae5;
        }
        
        .modal-header {
            background: linear-gradient(135deg, #059669, #10b981);
            color: white;
            border-radius: 1rem 1rem 0 0;
            padding: 1.25rem;
        }
        
        .modal-header .btn-close {
            filter: brightness(0) invert(1);
        }
        
        .modal-title {
            font-weight: 600;
        }
        
        .modal-body {
            padding: 1.5rem;
            max-height: 70vh;
            overflow-y: auto;
        }
        
        .modal-footer {
            border-top: 2px solid #d1fae5;
            padding: 1.25rem;
        }
        
        .form-label {
            font-weight: 600;
            color: var(--primary-dark);
            margin-bottom: 0.5rem;
        }
        
        .form-control, .form-select {
            border: 1px solid #d1fae5;
            border-radius: 0.5rem;
            padding: 0.5rem 0.75rem;
        }
        
        .form-control:focus, .form-select:focus {
            border-color: var(--primary-light);
            box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
        }
        
        /* Select2 Customization */
        .select2-container--bootstrap-5 .select2-selection {
            border: 1px solid #d1fae5;
            border-radius: 0.5rem;
            min-height: 38px;
        }
        
        .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
            line-height: 36px;
            padding-left: 12px;
            color: #1f2937;
        }
        
        .select2-container--bootstrap-5 .select2-dropdown {
            border-color: #d1fae5;
            border-radius: 0.5rem;
        }
        
        .select2-container--bootstrap-5 .select2-results__option--selected {
            background-color: #f0fdf4;
            color: var(--primary-dark);
        }
        
        .select2-container--bootstrap-5 .select2-results__option--highlighted {
            background-color: var(--primary-color);
            color: white;
        }
        
        /* Detail View */
        .detail-section {
            margin-bottom: 1.5rem;
        }
        
        .detail-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #d1fae5;
        }
        
        .detail-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }
        
        .detail-item {
            margin-bottom: 0.75rem;
        }
        
        .detail-label {
            font-size: 0.85rem;
            color: var(--secondary-color);
            margin-bottom: 0.25rem;
        }
        
        .detail-value {
            font-weight: 600;
            color: #1f2937;
        }
        
        /* Receipt Styles - Optimized for Printing */
        .receipt-container {
            background: white;
            border-radius: 0;
            overflow: hidden;
            font-family: 'Courier New', Courier, monospace;
        }
        
        .receipt-header {
            background: #059669;
            padding: 1.5rem;
            color: white;
            text-align: center;
            border-bottom: 3px solid #047857;
        }
        
        .receipt-header h2 {
            font-size: 1.8rem;
            margin-bottom: 0.25rem;
            font-weight: 700;
            letter-spacing: 2px;
        }
        
        .receipt-header .receipt-id {
            background: rgba(255, 255, 255, 0.15);
            display: inline-block;
            padding: 0.5rem 1.5rem;
            border-radius: 50px;
            margin-top: 0.75rem;
            font-weight: 600;
            font-size: 1.1rem;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .receipt-body {
            padding: 1.5rem;
            background: white;
        }
        
        .receipt-hotel-info {
            text-align: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 2px dashed #059669;
        }
        
        .receipt-hotel-info h3 {
            color: #059669;
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
            font-weight: 700;
        }
        
        .receipt-hotel-info .hotel-details {
            color: #4b5563;
            font-size: 0.9rem;
        }
        
        .receipt-hotel-info .hotel-details div {
            margin-bottom: 0.25rem;
        }
        
        .receipt-amount-box {
            background: #f0fdf4;
            padding: 1.25rem;
            text-align: center;
            margin-bottom: 1.5rem;
            border: 2px solid #059669;
            border-radius: 8px;
        }
        
        .receipt-amount-box .label {
            color: #4b5563;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 0.8rem;
            margin-bottom: 0.25rem;
        }
        
        .receipt-amount-box .amount {
            font-size: 2.2rem;
            font-weight: 800;
            color: #059669;
            line-height: 1.2;
        }
        
        .receipt-amount-box .amount small {
            font-size: 1rem;
            font-weight: 400;
            color: #6b7280;
        }
        
        .receipt-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 1.5rem;
        }
        
        .receipt-table tr {
            border-bottom: 1px dashed #d1fae5;
        }
        
        .receipt-table td {
            padding: 0.75rem 0.5rem;
            vertical-align: top;
        }
        
        .receipt-table td:first-child {
            width: 40%;
            font-weight: 600;
            color: #4b5563;
        }
        
        .receipt-table td:last-child {
            width: 60%;
            font-weight: 500;
            color: #1f2937;
        }
        
        .receipt-table .section-title {
            background: #f0fdf4;
            font-weight: 700;
            color: #059669;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-size: 0.9rem;
        }
        
        .receipt-table .section-title td {
            padding: 0.5rem;
            background: #f0fdf4;
        }
        
        .receipt-footer {
            margin-top: 1.5rem;
            padding-top: 1rem;
            border-top: 2px dashed #059669;
            text-align: center;
            color: #6b7280;
            font-size: 0.85rem;
        }
        
        .receipt-footer .company {
            font-weight: 700;
            color: #059669;
            font-size: 1rem;
            margin-bottom: 0.25rem;
        }
        
        .receipt-signature {
            margin-top: 1.5rem;
            display: flex;
            justify-content: space-between;
            padding: 0 1rem;
            color: #4b5563;
            font-size: 0.9rem;
        }
        
        .receipt-signature-line {
            width: 200px;
            border-top: 1px solid #059669;
            margin-top: 2rem;
            padding-top: 0.25rem;
        }
        
        .badge-receipt {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.8rem;
        }
        
        .badge-receipt-completed {
            background: #059669;
            color: white;
        }
        
        .badge-receipt-pending {
            background: #f59e0b;
            color: white;
        }
        
        .badge-receipt-failed {
            background: #ef4444;
            color: white;
        }
        
        .badge-receipt-refunded {
            background: #6b7280;
            color: white;
        }
        
        /* Print Styles - Crucial for proper printing */
        @media print {
            body {
                background: white;
                padding: 0;
                margin: 0;
            }
            
            .navbar, .main-content > *:not(#receiptModal), .modal-header, .modal-footer, 
            .page-header, .stats-row, .filter-card, .table-card, .action-group,
            .btn, .breadcrumb, .no-print, .loading-overlay {
                display: none !important;
            }
            
            #receiptModal {
                display: block !important;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: auto;
                overflow: visible;
                background: white;
            }
            
            #receiptModal .modal-dialog {
                width: 100%;
                max-width: 100%;
                margin: 0;
                padding: 0;
                transform: none;
            }
            
            #receiptModal .modal-content {
                border: none;
                box-shadow: none;
                margin: 0;
                padding: 0;
            }
            
            #receiptModal .modal-body {
                padding: 0.5in;
                max-height: none;
                overflow: visible;
            }
            
            .receipt-container {
                box-shadow: none;
                border: 1px solid #ddd;
            }
            
            .receipt-header {
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
            
            .receipt-amount-box {
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
            
            .receipt-table .section-title td {
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
            
            .badge-receipt-completed, .badge-receipt-pending, 
            .badge-receipt-failed, .badge-receipt-refunded {
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
        }
        
        /* Pagination */
        .pagination {
            margin: 0;
        }
        
        .page-link {
            color: #059669;
            border: 1px solid #d1fae5;
        }
        
        .page-item.active .page-link {
            background-color: #059669;
            border-color: #059669;
            color: white;
        }
        
        .page-link:hover {
            color: #047857;
            background-color: #f0fdf4;
            border-color: #d1fae5;
        }
        
        /* Loading Overlay */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.8);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }
        
        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 5px solid #d1fae5;
            border-top-color: var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* Empty State */
        .empty-state {
            padding: 3rem 1rem;
            text-align: center;
        }
        
        .empty-state i {
            font-size: 4rem;
            color: #d1fae5;
            margin-bottom: 1rem;
        }
        
        .empty-state h5 {
            color: #374151;
            margin-bottom: 0.5rem;
        }
        
        .empty-state p {
            color: #6b7280;
            margin-bottom: 1.5rem;
        }
        
        /* Responsive */
        @media (max-width: 1200px) {
            .stats-row {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .filter-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .main-content {
                padding: 1rem;
            }
            
            .stats-row {
                grid-template-columns: 1fr;
            }
            
            .filter-grid {
                grid-template-columns: 1fr;
            }
            
            .navbar-brand span {
                display: none;
            }
        }
        /* 2026 elegance refresh */
        body {
            background:
                radial-gradient(circle at 12% 4%, rgba(16, 185, 129, 0.1), transparent 35%),
                radial-gradient(circle at 93% 10%, rgba(5, 150, 105, 0.08), transparent 33%),
                #f4f8f5;
            color: #0f172a;
        }

        .navbar {
            box-shadow: 0 10px 30px rgba(5, 150, 105, 0.25);
        }

        .page-header {
            background: rgba(255, 255, 255, 0.84);
            border: 1px solid rgba(5, 150, 105, 0.12);
            border-radius: 16px;
            padding: 1.2rem 1.4rem;
            backdrop-filter: blur(6px);
        }

        .stat-card,
        .card {
            border-radius: 16px !important;
            border: 1px solid rgba(5, 150, 105, 0.1) !important;
            box-shadow: 0 12px 26px rgba(5, 150, 105, 0.1) !important;
        }

        .stat-card:hover,
        .card:hover {
            transform: translateY(-4px);
            box-shadow: 0 18px 34px rgba(5, 150, 105, 0.16) !important;
        }

        .table thead th {
            background: #ecfdf5 !important;
            color: #065f46 !important;
            border-bottom-color: #a7f3d0 !important;
        }

        .btn {
            border-radius: 999px;
            font-weight: 600;
        }
    </style>
    <link rel="stylesheet" href="{{ asset('css/admin-elegant-theme.css') }}">
</head>
<body class="super-admin-elegant">
    <!-- Loading Overlay -->
    <div class="loading-overlay" id="loadingOverlay">
        <div class="loading-spinner"></div>
    </div>

    <!-- Navigation Bar -->
    <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
            <div class="navbar-brand"></div>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ route('super.admin.dashboard') }}">
                            <i class="fas fa-chart-pie"></i>Dashboard
                        </a>
                    </li>
                   
            </div>
        </div>
    </nav>
    
    <!-- Main Content -->
    <div class="main-content">
        <!-- Page Header -->
        <div class="page-header d-flex justify-content-between align-items-center">
            <div>
                <h2 class="page-title">
                    <i class="fas fa-money-bill-wave me-2"></i>
                    Payment Management
                </h2>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('super.admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Payments</li>
                    </ol>
                </nav>
            </div>
            <div>
                <a href="{{ route('super.admin.dashboard') }}" class="btn btn-outline-primary me-2">
                    <i class="fas fa-arrow-left me-2"></i>Back to Dashboard
                </a>
                <button class="btn btn-primary me-2" onclick="openCreateModal()">
                    <i class="fas fa-plus me-2"></i>Record Payment
                </button>
                <button class="btn btn-success" onclick="openExportModal()">
                    <i class="fas fa-download me-2"></i>Export
                </button>
            </div>
        </div>
        
        <!-- Statistics Cards -->
        <div class="stats-row">
            <div class="stat-card">
                <div class="stat-icon">
                    <i class="fas fa-dollar-sign"></i>
                </div>
                <div class="stat-label">Total Revenue</div>
                <div class="stat-value">{{ number_format($totalRevenue ?? 0) }} UGX</div>
                <small class="text-muted">All time</small>
            </div>
            
            <div class="stat-card">
                <div class="stat-icon">
                    <i class="fas fa-check-circle"></i>
                </div>
                <div class="stat-label">Completed</div>
                <div class="stat-value">{{ number_format($completedPayments ?? 0) }} UGX</div>
                <small class="text-muted">Paid</small>
            </div>
            
            <div class="stat-card">
                <div class="stat-icon">
                    <i class="fas fa-clock"></i>
                </div>
                <div class="stat-label">Pending</div>
                <div class="stat-value">{{ number_format($pendingPayments ?? 0) }} UGX</div>
                <small class="text-muted">Awaiting payment</small>
            </div>
            
            <div class="stat-card">
                <div class="stat-icon">
                    <i class="fas fa-calendar-alt"></i>
                </div>
                <div class="stat-label">This Month</div>
                <div class="stat-value">{{ number_format($monthlyRevenue ?? 0) }} UGX</div>
                <small class="text-muted">{{ now()->format('F Y') }}</small>
            </div>
        </div>
        
        <!-- Filter Section -->
        <div class="filter-card">
            <form method="GET" action="{{ route('super.admin.payments.index') }}" id="filterForm">
                <div class="filter-grid">
                    <div class="filter-group">
                        <label>Status</label>
                        <select name="status" class="form-select">
                            <option value="all">All Status</option>
                            <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>Completed</option>
                            <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                            <option value="failed" {{ request('status') == 'failed' ? 'selected' : '' }}>Failed</option>
                            <option value="refunded" {{ request('status') == 'refunded' ? 'selected' : '' }}>Refunded</option>
                        </select>
                    </div>
                    
                    <div class="filter-group">
                        <label>Payment Method</label>
                        <select name="payment_method" class="form-select">
                            <option value="all">All Methods</option>
                            <option value="cash" {{ request('payment_method') == 'cash' ? 'selected' : '' }}>Cash</option>
                            <option value="card" {{ request('payment_method') == 'card' ? 'selected' : '' }}>Credit Card</option>
                            <option value="bank" {{ request('payment_method') == 'bank' ? 'selected' : '' }}>Bank Transfer</option>
                            <option value="mobile" {{ request('payment_method') == 'mobile' ? 'selected' : '' }}>Mobile Money</option>
                            <option value="pesapal" {{ request('payment_method') == 'pesapal' ? 'selected' : '' }}>PesaPal</option>
                        </select>
                    </div>
                    
                    <div class="filter-group">
                        <label>Date Range</label>
                        <select name="date_range" class="form-select">
                            <option value="all">All Time</option>
                            <option value="today" {{ request('date_range') == 'today' ? 'selected' : '' }}>Today</option>
                            <option value="week" {{ request('date_range') == 'week' ? 'selected' : '' }}>This Week</option>
                            <option value="month" {{ request('date_range') == 'month' ? 'selected' : '' }}>This Month</option>
                            <option value="quarter" {{ request('date_range') == 'quarter' ? 'selected' : '' }}>This Quarter</option>
                            <option value="half_year" {{ request('date_range') == 'half_year' ? 'selected' : '' }}>Half Year</option>
                            <option value="year" {{ request('date_range') == 'year' ? 'selected' : '' }}>This Year</option>
                        </select>
                    </div>
                    
                    <div class="filter-group">
                        <label>Search</label>
                        <input type="text" name="search" class="form-control" placeholder="Transaction ID, Hotel..." value="{{ request('search') }}">
                    </div>
                </div>
                
                <div class="filter-actions">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-filter me-2"></i>Apply Filters
                    </button>
                    <a href="{{ route('super.admin.payments.index') }}" class="btn btn-outline-primary">
                        <i class="fas fa-times me-2"></i>Clear
                    </a>
                </div>
            </form>
        </div>
        
        <!-- Payments Table -->
        <div class="table-card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5>
                    <i class="fas fa-list me-2"></i>
                    Payment History
                </h5>
                <div class="d-flex gap-2">
                    <input type="text" class="form-control form-control-sm" id="tableSearch" placeholder="Search..." style="width: 200px;">
                    <select class="form-select form-select-sm" id="perPage" onchange="changePerPage(this.value)">
                        <option value="15" {{ request('per_page', 15) == 15 ? 'selected' : '' }}>15</option>
                        <option value="25" {{ request('per_page') == 25 ? 'selected' : '' }}>25</option>
                        <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</option>
                        <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100</option>
                    </select>
                </div>
            </div>
            
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Hotel</th>
                            <th>Amount</th>
                            <th>Payment Method</th>
                            <th>Transaction ID</th>
                            <th>Payment Date</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($payments ?? [] as $payment)
                        <tr id="payment-row-{{ $payment->id }}">
                            <td>#{{ $payment->id }}</td>
                            <td>
                                <div class="fw-bold">{{ $payment->subscription->hotel->name ?? 'N/A' }}</div>
                                <small class="text-muted">{{ $payment->subscription->plan_name ?? '' }}</small>
                            </td>
                            <td>
                                <div class="fw-bold">{{ number_format($payment->amount) }} UGX</div>
                            </td>
                            <td>
                                @php
                                    $methodClass = 'badge-info';
                                    if ($payment->payment_method == 'pesapal') {
                                        $methodClass = 'badge-pesapal';
                                    } elseif ($payment->payment_method == 'cash') {
                                        $methodClass = 'badge-success';
                                    } elseif ($payment->payment_method == 'bank') {
                                        $methodClass = 'badge-secondary';
                                    } elseif ($payment->payment_method == 'mobile') {
                                        $methodClass = 'badge-warning';
                                    }
                                @endphp
                                <span class="badge-custom {{ $methodClass }}">{{ ucfirst($payment->payment_method) }}</span>
                            </td>
                            <td>
                                @if($payment->transaction_id)
                                    <small>{{ $payment->transaction_id }}</small>
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </td>
                            <td>
                                {{ \Carbon\Carbon::parse($payment->payment_date)->format('M d, Y') }}
                            </td>
                            <td>
                                @php
                                    $statusClass = match($payment->status) {
                                        'completed' => 'badge-success',
                                        'pending' => 'badge-warning',
                                        'failed' => 'badge-danger',
                                        'refunded' => 'badge-secondary',
                                        default => 'badge-secondary'
                                    };
                                @endphp
                                <span class="badge-custom {{ $statusClass }}">
                                    {{ ucfirst($payment->status) }}
                                </span>
                            </td>
                            <td>
                                <div class="action-group">
                                    <button class="btn btn-info btn-sm btn-icon" title="View Details" onclick="viewPayment({{ $payment->id }})">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    @if($payment->status == 'pending')
                                    <button class="btn btn-pesapal btn-sm btn-icon" title="Pay with PesaPal" onclick="startPesapalCheckout({{ $payment->id }})">
                                        <i class="fas fa-link"></i>
                                    </button>
                                    <button class="btn btn-success btn-sm btn-icon" title="Mark as Completed" onclick="updatePaymentStatus({{ $payment->id }}, 'completed')">
                                        <i class="fas fa-check"></i>
                                    </button>
                                    <button class="btn btn-danger btn-sm btn-icon" title="Mark as Failed" onclick="updatePaymentStatus({{ $payment->id }}, 'failed')">
                                        <i class="fas fa-times"></i>
                                    </button>
                                    @endif
                                    <button class="btn btn-secondary btn-sm btn-icon" title="Receipt" onclick="showReceipt({{ $payment->id }})">
                                        <i class="fas fa-receipt"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="8" class="text-center py-5">
                                <div class="empty-state">
                                    <i class="fas fa-money-bill-wave"></i>
                                    <h5>No Payments Found</h5>
                                    <p>There are no payment records to display at the moment.</p>
                                    <button class="btn btn-primary" onclick="openCreateModal()">
                                        <i class="fas fa-plus me-2"></i>Record Payment
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            
            @if(isset($payments) && method_exists($payments, 'links'))
            <div class="card-footer bg-white d-flex justify-content-between align-items-center">
                <div class="text-muted">
                    Showing {{ $payments->firstItem() ?? 0 }} to {{ $payments->lastItem() ?? 0 }} of {{ $payments->total() ?? 0 }} entries
                </div>
                <div>
                    {{ $payments->appends(request()->query())->links() }}
                </div>
            </div>
            @endif
        </div>
    </div>
    
    <!-- Create Payment Modal -->
    <div class="modal fade" id="paymentModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="fas fa-plus-circle me-2"></i>
                        Record Payment
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="paymentForm">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">Subscription</label>
                            <select class="form-select" name="subscription_id" id="subscriptionSelect" required>
                                <option value="">Select Subscription</option>
                                @foreach($subscriptions ?? [] as $sub)
                                <option value="{{ $sub->id }}" data-hotel="{{ $sub->hotel->name ?? '' }}" data-plan="{{ $sub->plan_name }}" data-amount="{{ $sub->plan_price }}">
                                    {{ $sub->hotel->name ?? 'Unknown Hotel' }} - {{ ucfirst($sub->plan_name) }} ({{ ucfirst($sub->billing_cycle) }})
                                </option>
                                @endforeach
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Amount (UGX)</label>
                            <input type="number" class="form-control" name="amount" id="amount" step="1000" required>
                            <small class="text-muted expected-amount" style="display: none;">Expected amount: <span id="expectedAmount"></span> UGX</small>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Payment Method</label>
                            <select class="form-select" name="payment_method" required>
                                <option value="">Select Method</option>
                                <option value="cash">Cash</option>
                                <option value="card">Credit Card</option>
                                <option value="bank">Bank Transfer</option>
                                <option value="mobile">Mobile Money</option>
                                <option value="pesapal">PesaPal</option>
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Transaction ID (Optional)</label>
                            <input type="text" class="form-control" name="transaction_id">
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Payment Date</label>
                            <input type="date" class="form-control" name="payment_date" value="{{ now()->format('Y-m-d') }}" required>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Status</label>
                            <select class="form-select" name="status" required>
                                <option value="pending">Pending</option>
                                <option value="completed" selected>Completed</option>
                                <option value="failed">Failed</option>
                                <option value="refunded">Refunded</option>
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Notes</label>
                            <textarea class="form-control" name="notes" rows="2"></textarea>
                        </div>
                    </div>
                    
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-2"></i>Save Payment
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <!-- View Payment Modal -->
    <div class="modal fade" id="viewPaymentModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="fas fa-info-circle me-2"></i>
                        Payment Details
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="viewPaymentContent">
                    <div class="text-center py-4">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-2">Loading payment details...</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="printReceipt()" id="printReceiptBtn">
                        <i class="fas fa-print me-2"></i>Print Receipt
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Receipt Modal - Redesigned for Perfect Printing -->
    <div class="modal fade" id="receiptModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="fas fa-receipt me-2"></i>
                        Payment Receipt
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="receiptContent">
                    <div class="text-center py-4">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-2">Loading receipt...</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="window.print()">
                        <i class="fas fa-print me-2"></i>Print Receipt
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Export Modal - FIXED VERSION -->
    <div class="modal fade" id="exportModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="fas fa-download me-2"></i>
                        Export Payments
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="exportForm" method="GET" action="{{ route('super.admin.payments.export') }}">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">Export Format</label>
                            <select class="form-select" name="format" id="exportFormat" required>
                                <option value="csv">CSV File</option>
                                <option value="excel">Excel Spreadsheet</option>
                                <option value="pdf">PDF Document</option>
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Date Range</label>
                            <div class="row">
                                <div class="col-6">
                                    <input type="date" class="form-control" name="start_date" id="startDate" placeholder="Start Date" value="{{ request('start_date', now()->startOfMonth()->format('Y-m-d')) }}">
                                </div>
                                <div class="col-6">
                                    <input type="date" class="form-control" name="end_date" id="endDate" placeholder="End Date" value="{{ request('end_date', now()->format('Y-m-d')) }}">
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Include Filters?</label>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="include_filters" id="includeFilters" value="1" checked>
                                <label class="form-check-label" for="includeFilters">
                                    Apply current filters (status, payment method, search)
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-success" id="exportBtn">
                            <i class="fas fa-download me-2"></i>Export Now
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <!-- Select2 -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    
    <script>
        $(document).ready(function() {
            // Set up CSRF token for all AJAX requests
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // Initialize Select2 for better dropdown experience
            $('#subscriptionSelect').select2({
                theme: 'bootstrap-5',
                width: '100%',
                placeholder: 'Search for a subscription...',
                allowClear: true,
                dropdownParent: $('#paymentModal')
            });

            // When subscription is selected, show expected amount
            $('#subscriptionSelect').on('change', function() {
                var selected = $(this).find('option:selected');
                var amount = selected.data('amount');
                if (amount) {
                    $('#amount').val(amount);
                    $('#expectedAmount').text(new Intl.NumberFormat().format(amount));
                    $('.expected-amount').show();
                } else {
                    $('.expected-amount').hide();
                }
            });

            // Table search
            $('#tableSearch').on('keyup', function() {
                var value = $(this).val().toLowerCase();
                $('table tbody tr').filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
            });
            
            // Form submissions
            $('#paymentForm').on('submit', function(e) {
                e.preventDefault();
                savePayment();
            });

            // Handle modal close to destroy Select2 properly
            $('#paymentModal').on('hidden.bs.modal', function() {
                $('#subscriptionSelect').val(null).trigger('change');
                $('.expected-amount').hide();
            });
            
            // Handle export form submission - FIXED VERSION
            $('#exportForm').on('submit', function(e) {
                e.preventDefault();
                
                var format = $('#exportFormat').val();
                var startDate = $('#startDate').val();
                var endDate = $('#endDate').val();
                var includeFilters = $('#includeFilters').is(':checked');
                
                // Build the URL with parameters
                var url = '{{ route("super.admin.payments.export") }}';
                var params = new URLSearchParams();
                
                params.append('format', format);
                params.append('start_date', startDate);
                params.append('end_date', endDate);
                
                // Include current filters if checkbox is checked
                if (includeFilters) {
                    var currentUrl = new URL(window.location.href);
                    var status = currentUrl.searchParams.get('status');
                    var paymentMethod = currentUrl.searchParams.get('payment_method');
                    var dateRange = currentUrl.searchParams.get('date_range');
                    var search = currentUrl.searchParams.get('search');
                    
                    if (status && status !== 'all') params.append('status', status);
                    if (paymentMethod && paymentMethod !== 'all') params.append('payment_method', paymentMethod);
                    if (dateRange && dateRange !== 'all') params.append('date_range', dateRange);
                    if (search) params.append('search', search);
                }
                
                // Show loading
                showLoading();
                
                // Redirect to the download URL - this will trigger the file download
                window.location.href = url + '?' + params.toString();
                
                // Hide loading after a short delay and close modal
                setTimeout(function() {
                    hideLoading();
                    $('#exportModal').modal('hide');
                    
                    // Show success message
                    Swal.fire({
                        icon: 'success',
                        title: 'Export Started',
                        text: 'Your export is being generated. The file will download shortly.',
                        timer: 2000,
                        showConfirmButton: false
                    });
                }, 1000);
            });
        });
        
        // Loading overlay functions
        function showLoading() {
            $('#loadingOverlay').fadeIn();
        }
        
        function hideLoading() {
            $('#loadingOverlay').fadeOut();
        }
        
        // Change per page
        function changePerPage(value) {
            var url = new URL(window.location.href);
            url.searchParams.set('per_page', value);
            window.location.href = url.toString();
        }
        
        // Open create modal
        function openCreateModal() {
            $('#paymentForm')[0].reset();
            $('#subscriptionSelect').val(null).trigger('change');
            $('.expected-amount').hide();
            $('#paymentModal').modal('show');
        }
        
        // Open export modal
        function openExportModal() {
            $('#exportModal').modal('show');
        }
        
        // View payment
        function viewPayment(id) {
            showLoading();
            
            $.ajax({
                url: '/super-admin/payments/' + id,
                method: 'GET',
                success: function(data) {
                    let statusClass = 'badge-secondary';
                    if (data.status == 'completed') statusClass = 'badge-success';
                    else if (data.status == 'pending') statusClass = 'badge-warning';
                    else if (data.status == 'failed') statusClass = 'badge-danger';
                    
                    let methodClass = 'badge-info';
                    if (data.payment_method == 'pesapal') methodClass = 'badge-pesapal';
                    else if (data.payment_method == 'cash') methodClass = 'badge-success';
                    else if (data.payment_method == 'bank') methodClass = 'badge-secondary';
                    else if (data.payment_method == 'mobile') methodClass = 'badge-warning';
                    
                    let content = `
                        <div class="detail-section">
                            <div class="row">
                                <div class="col-6 mb-3">
                                    <div class="detail-label">Payment ID</div>
                                    <div class="detail-value">#${data.id}</div>
                                </div>
                                <div class="col-6 mb-3">
                                    <div class="detail-label">Status</div>
                                    <div class="detail-value">
                                        <span class="badge-custom ${statusClass}">${ucfirst(data.status)}</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-12 mb-3">
                                    <div class="detail-label">Hotel</div>
                                    <div class="detail-value fw-bold">${data.subscription?.hotel?.name || 'N/A'}</div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-12 mb-3">
                                    <div class="detail-label">Subscription</div>
                                    <div class="detail-value">${data.subscription?.plan_name || 'N/A'} (${ucfirst(data.subscription?.billing_cycle || '')})</div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-6 mb-3">
                                    <div class="detail-label">Amount</div>
                                    <div class="detail-value fw-bold text-primary">${new Intl.NumberFormat().format(data.amount)} UGX</div>
                                </div>
                                <div class="col-6 mb-3">
                                    <div class="detail-label">Payment Method</div>
                                    <div class="detail-value">
                                        <span class="badge-custom ${methodClass}">${ucfirst(data.payment_method)}</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-6 mb-3">
                                    <div class="detail-label">Transaction ID</div>
                                    <div class="detail-value">${data.transaction_id || 'N/A'}</div>
                                </div>
                                <div class="col-6 mb-3">
                                    <div class="detail-label">Payment Date</div>
                                    <div class="detail-value">${moment(data.payment_date).format('MMMM D, YYYY')}</div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-6 mb-3">
                                    <div class="detail-label">Created At</div>
                                    <div class="detail-value">${moment(data.created_at).format('MMMM D, YYYY h:mm A')}</div>
                                </div>
                            </div>
                    `;
                    
                    if (data.notes) {
                        content += `
                            <div class="row">
                                <div class="col-12 mb-3">
                                    <div class="detail-label">Notes</div>
                                    <div class="detail-value p-3 bg-light rounded">${data.notes}</div>
                                </div>
                            </div>
                        `;
                    }
                    
                    content += `</div>`;
                    
                    $('#viewPaymentContent').html(content);
                    window.currentPaymentId = id;
                    hideLoading();
                    $('#viewPaymentModal').modal('show');
                },
                error: function(xhr) {
                    hideLoading();
                    Swal.fire('Error', xhr.responseJSON?.message || 'Could not load payment details', 'error');
                }
            });
        }
        
        // Show receipt in modal - Redesigned for perfect printing
        function showReceipt(id) {
            showLoading();
            
            $('#receiptModal').modal('show');
            
            $.ajax({
                url: '/super-admin/payments/' + id,
                method: 'GET',
                success: function(data) {
                    let payment = data;
                    let hotel = payment.subscription?.hotel || {};
                    let subscription = payment.subscription || {};
                    
                    // Determine status badge class for receipt
                    let statusBadgeClass = 'badge-receipt-completed';
                    if (payment.status == 'pending') statusBadgeClass = 'badge-receipt-pending';
                    else if (payment.status == 'failed') statusBadgeClass = 'badge-receipt-failed';
                    else if (payment.status == 'refunded') statusBadgeClass = 'badge-receipt-refunded';
                    
                    // Format dates
                    let paymentDate = payment.payment_date ? moment(payment.payment_date).format('MMMM D, YYYY') : 'N/A';
                    let paymentTime = payment.payment_date ? moment(payment.payment_date).format('h:mm A') : '';
                    let createdDate = payment.created_at ? moment(payment.created_at).format('MMMM D, YYYY') : 'N/A';
                    
                    let receiptHtml = `
                        <div class="receipt-container">
                            <div class="receipt-header">
                                <h2>WEPESI HOTEL MANAGEMENT SOULUTION</h2>
                                <p>Official Payment Receipt</p>
                                <div class="receipt-id">Receipt No: INV-${String(payment.id).padStart(6, '0')}</div>
                            </div>
                            
                            <div class="receipt-body">
                                <div class="receipt-hotel-info">
                                    <h3>${hotel.name || 'N/A'}</h3>
                                    <div class="hotel-details">
                                        ${hotel.city ? `<div><i class="fas fa-map-marker-alt"></i> ${hotel.city}, ${hotel.country || ''}</div>` : ''}
                                        ${hotel.email ? `<div><i class="fas fa-envelope"></i> ${hotel.email}</div>` : ''}
                                        ${hotel.phone ? `<div><i class="fas fa-phone"></i> ${hotel.phone}</div>` : ''}
                                    </div>
                                </div>
                                
                                <div class="receipt-amount-box">
                                    <div class="label">TOTAL AMOUNT PAID</div>
                                    <div class="amount">${new Intl.NumberFormat().format(payment.amount)} <small>UGX</small></div>
                                </div>
                                
                                <table class="receipt-table">
                                    <tr class="section-title">
                                        <td colspan="2">SUBSCRIPTION DETAILS</td>
                                    </tr>
                                    <tr>
                                        <td>Plan Name:</td>
                                        <td><strong>${ucfirst(subscription.plan_name || 'N/A')}</strong></td>
                                    </tr>
                                    <tr>
                                        <td>Billing Cycle:</td>
                                        <td>${ucfirst(subscription.billing_cycle || 'N/A')}</td>
                                    </tr>
                                    <tr>
                                        <td>Start Date:</td>
                                        <td>${subscription.start_date ? moment(subscription.start_date).format('MMMM D, YYYY') : 'N/A'}</td>
                                    </tr>
                                    <tr>
                                        <td>End Date:</td>
                                        <td>${subscription.end_date ? moment(subscription.end_date).format('MMMM D, YYYY') : 'N/A'}</td>
                                    </tr>
                                    
                                    <tr class="section-title">
                                        <td colspan="2">PAYMENT DETAILS</td>
                                    </tr>
                                    <tr>
                                        <td>Payment ID:</td>
                                        <td><strong>#${payment.id}</strong></td>
                                    </tr>
                                    <tr>
                                        <td>Transaction ID:</td>
                                        <td>${payment.transaction_id || 'N/A'}</td>
                                    </tr>
                                    <tr>
                                        <td>Payment Method:</td>
                                        <td><span class="badge-receipt badge-receipt-${payment.payment_method}">${ucfirst(payment.payment_method)}</span></td>
                                    </tr>
                                    <tr>
                                        <td>Payment Date:</td>
                                        <td>${paymentDate} at ${paymentTime}</td>
                                    </tr>
                                    <tr>
                                        <td>Status:</td>
                                        <td><span class="badge-receipt ${statusBadgeClass}">${ucfirst(payment.status)}</span></td>
                                    </tr>
                                    <tr>
                                        <td>Recorded On:</td>
                                        <td>${createdDate}</td>
                                    </tr>
                                </table>
                    `;
                    
                    if (payment.notes) {
                        receiptHtml += `
                            <div style="margin-top: 1.5rem; padding: 1rem; background: #f9f9f9; border-left: 4px solid #059669;">
                                <strong style="color: #059669;">Notes:</strong>
                                <p style="margin-top: 0.5rem; color: #4b5563;">${payment.notes}</p>
                            </div>
                        `;
                    }
                    
                    receiptHtml += `
                                <div class="receipt-signature">
                                    <div>
                                        <div>_________________________</div>
                                        <div>Authorized Signature</div>
                                    </div>
                                    <div>
                                        <div>_________________________</div>
                                        <div>Received By</div>
                                    </div>
                                </div>
                                
                                <div class="receipt-footer">
                                    <div class="company">WEPESI HOTEL MANAGEMENT SOULUTION</div>
                                    <div>This is a computer generated receipt and is valid without signature.</div>
                                    <div style="margin-top: 0.5rem;">Generated on: ${moment().format('MMMM D, YYYY h:mm A')}</div>
                                </div>
                            </div>
                        </div>
                    `;
                    
                    $('#receiptContent').html(receiptHtml);
                    window.currentPaymentId = id;
                    hideLoading();
                },
                error: function(xhr) {
                    hideLoading();
                    let errorMsg = xhr.responseJSON?.message || 'Could not load receipt details';
                    
                    let errorHtml = `
                        <div class="text-center py-5">
                            <i class="fas fa-exclamation-circle fa-4x text-danger mb-3"></i>
                            <h5>Error Loading Receipt</h5>
                            <p class="text-muted">${errorMsg}</p>
                            <p class="text-muted small">Please try again or contact support.</p>
                        </div>
                    `;
                    
                    $('#receiptContent').html(errorHtml);
                }
            });
        }
        
        // Print receipt function
        function printReceipt() {
            if (window.currentPaymentId) {
                showReceipt(window.currentPaymentId);
                setTimeout(() => {
                    window.print();
                }, 800);
            }
        }
        
        // Save payment
        function savePayment() {
            var form = $('#paymentForm');
            var formData = form.serialize();
            
            showLoading();
            $.ajax({
                url: '{{ route("super.admin.payments.store") }}',
                type: 'POST',
                data: formData,
                success: function(response) {
                    hideLoading();
                    $('#paymentModal').modal('hide');
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: response.message || 'Payment recorded successfully',
                        timer: 2000,
                        showConfirmButton: false
                    }).then(function() {
                        location.reload();
                    });
                },
                error: function(xhr) {
                    hideLoading();
                    let errorMessage = 'Something went wrong';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    } else if (xhr.responseJSON && xhr.responseJSON.errors) {
                        errorMessage = Object.values(xhr.responseJSON.errors).flat().join(', ');
                    }
                    Swal.fire('Error', errorMessage, 'error');
                }
            });
        }
        
        // Update payment status
        function updatePaymentStatus(id, status) {
            Swal.fire({
                title: 'Update Payment Status?',
                text: 'Mark payment as ' + status + '?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: status == 'completed' ? '#10b981' : '#ef4444',
                confirmButtonText: 'Yes, mark as ' + status
            }).then((result) => {
                if (result.isConfirmed) {
                    showLoading();
                    $.ajax({
                        url: '/super-admin/payments/' + id + '/status',
                        type: 'PUT',
                        data: { 
                            _token: '{{ csrf_token() }}',
                            status: status 
                        },
                        success: function(response) {
                            hideLoading();
                            Swal.fire({
                                icon: 'success',
                                title: 'Success!',
                                text: response.message || 'Payment status updated',
                                timer: 2000
                            }).then(function() {
                                location.reload();
                            });
                        },
                        error: function(xhr) {
                            hideLoading();
                            Swal.fire('Error', xhr.responseJSON?.message || 'Something went wrong', 'error');
                        }
                    });
                }
            });
        }

        function startPesapalCheckout(id) {
            Swal.fire({
                title: 'Open PesaPal Checkout?',
                text: 'Client will complete payment on secure PesaPal page.',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Proceed',
                confirmButtonColor: '#0066b3'
            }).then((result) => {
                if (!result.isConfirmed) return;

                showLoading();
                $.ajax({
                    url: '/super-admin/payments/' + id + '/pesapal/checkout',
                    type: 'POST',
                    data: { _token: '{{ csrf_token() }}' },
                    success: function(response) {
                        hideLoading();
                        if (response.success && response.redirect_url) {
                            window.open(response.redirect_url, '_blank');
                            Swal.fire('Checkout Started', 'PesaPal checkout opened in a new tab.', 'success');
                        } else {
                            Swal.fire('Error', response.message || 'Could not start PesaPal checkout.', 'error');
                        }
                    },
                    error: function(xhr) {
                        hideLoading();
                        Swal.fire('Error', xhr.responseJSON?.message || 'Could not start PesaPal checkout.', 'error');
                    }
                });
            });
        }
        
        // Helper function to capitalize first letter
        function ucfirst(string) {
            if (!string) return '';
            return string.charAt(0).toUpperCase() + string.slice(1);
        }
    </script>
</body>
</html>