@extends('customer.dashboard.layout')

@section('title', 'Top Up Credits')

@section('content')
<div class="row mb-4">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h2 class="mb-1">Top Up Credits</h2>
                <p class="text-muted">Select a credit package and payment method</p>
            </div>
            <a href="{{ route('wallet.dashboard', $subdomain ?? request()->route('subdomain')) }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> Back to Wallet
            </a>
        </div>
    </div>
</div>

<!-- Current Balance -->
<div class="content-card mb-4" style="background: #6366f1; color: white;">
    <div class="row align-items-center">
        <div class="col-md-8">
            <h4 class="mb-1">Current Balance</h4>
            <h1 class="mb-0" style="font-size: 42px; font-weight: 700;">
                {{ number_format($customer->getWalletBalance(), 0) }} <span style="font-size: 24px; opacity: 0.9;">credits</span>
            </h1>
        </div>
        <div class="col-md-4 text-end">
            <i class="bi bi-wallet2" style="font-size: 80px; opacity: 0.3;"></i>
        </div>
    </div>
</div>

@if($packages->count() > 0)
<!-- Credit Packages -->
<form method="POST" action="{{ route('wallet.topup.process', $subdomain ?? request()->route('subdomain')) }}" id="topupForm">
    @csrf

    <div class="content-card mb-4">
        <h3 class="mb-4">Select a Credit Package</h3>

        <div class="row g-3">
            @foreach($packages as $package)
            <div class="col-md-4">
                <div class="package-card {{ $package->is_popular ? 'popular' : '' }}" data-package-id="{{ $package->id }}">
                    @if($package->is_popular)
                    <div class="popular-badge">
                        <i class="bi bi-star-fill"></i> Most Popular
                    </div>
                    @endif

                    @if($package->badge_text)
                    <div class="custom-badge" style="background-color: {{ $package->badge_color_class }};">
                        {{ $package->badge_text }}
                    </div>
                    @endif

                    <div class="package-header">
                        <h4>{{ $package->name }}</h4>
                        @if($package->description)
                        <p class="text-muted small mb-0">{{ $package->description }}</p>
                        @endif
                    </div>

                    <div class="package-price">
                        <div class="price">
                            <span class="currency">RM</span>
                            <span class="amount">{{ number_format($package->price, 2) }}</span>
                        </div>
                    </div>

                    <div class="package-credits">
                        <div class="credits-display">
                            <i class="bi bi-wallet2"></i>
                            <span class="credits-number">{{ number_format($package->total_credits, 0) }}</span>
                            <span class="credits-label">credits</span>
                        </div>

                        @if($package->bonus_credits > 0)
                        <div class="bonus-badge">
                            <i class="bi bi-gift"></i> +{{ $package->bonus_credits }} Bonus Credits
                        </div>
                        @endif
                    </div>

                    <div class="package-details">
                        <div class="detail-item">
                            <i class="bi bi-check-circle text-success"></i>
                            <span>{{ number_format($package->credits, 0) }} Base Credits</span>
                        </div>
                        @if($package->bonus_credits > 0)
                        <div class="detail-item">
                            <i class="bi bi-gift text-warning"></i>
                            <span>{{ number_format($package->bonus_credits, 0) }} Bonus Credits</span>
                        </div>
                        @endif
                        <div class="detail-item">
                            <i class="bi bi-tag text-primary"></i>
                            <span>RM {{ number_format($package->price_per_credit, 2) }} per credit</span>
                        </div>
                        @if($package->savings_percentage > 0)
                        <div class="detail-item">
                            <i class="bi bi-percent text-success"></i>
                            <span>Save {{ $package->savings_percentage }}%</span>
                        </div>
                        @endif
                    </div>

                    <div class="package-select">
                        <input type="radio" name="package_id" value="{{ $package->id }}" id="package_{{ $package->id }}" class="btn-check" required>
                        <label class="btn btn-outline-primary w-100" for="package_{{ $package->id }}">
                            Select Package
                        </label>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    <!-- Payment Method Selection -->
    <div class="content-card">
        <h3 class="mb-4">Select Payment Method</h3>

        @if(count($enabledPayments) > 0)
        <div class="row g-3">
            @if(in_array('stripe', $enabledPayments))
            <div class="col-md-4">
                <div class="payment-method-card">
                    <input type="radio" name="payment_method" value="stripe" id="payment_stripe" class="btn-check" required>
                    <label class="payment-method-label" for="payment_stripe">
                        <div class="payment-icon">
                            <i class="bi bi-credit-card-2-front"></i>
                        </div>
                        <div class="payment-name">Stripe</div>
                        <div class="payment-desc">Credit/Debit Card</div>
                    </label>
                </div>
            </div>
            @endif

            @if(in_array('paypal', $enabledPayments))
            <div class="col-md-4">
                <div class="payment-method-card">
                    <input type="radio" name="payment_method" value="paypal" id="payment_paypal" class="btn-check" required>
                    <label class="payment-method-label" for="payment_paypal">
                        <div class="payment-icon" style="color: #0070ba;">
                            <i class="bi bi-paypal"></i>
                        </div>
                        <div class="payment-name">PayPal</div>
                        <div class="payment-desc">PayPal Account</div>
                    </label>
                </div>
            </div>
            @endif

            @if(in_array('chipin', $enabledPayments))
            <div class="col-md-4">
                <div class="payment-method-card">
                    <input type="radio" name="payment_method" value="chipin" id="payment_chipin" class="btn-check" required>
                    <label class="payment-method-label" for="payment_chipin">
                        <div class="payment-icon" style="color: #00bcd4;">
                            <i class="bi bi-wallet2"></i>
                        </div>
                        <div class="payment-name">Chip In</div>
                        <div class="payment-desc">Online Banking / E-Wallet</div>
                    </label>
                </div>
            </div>
            @endif
        </div>

        <div class="mt-4 text-center">
            <button type="submit" class="btn btn-primary btn-lg px-5">
                <i class="bi bi-lock-fill me-2"></i>Proceed to Payment
            </button>
        </div>
        @else
        <div class="alert alert-warning">
            <i class="bi bi-exclamation-triangle me-2"></i>
            No payment methods are currently enabled. Please contact support.
        </div>
        @endif
    </div>
</form>
@else
<!-- No Packages Available -->
<div class="content-card text-center py-5">
    <i class="bi bi-inbox text-muted" style="font-size: 48px;"></i>
    <h3 class="mt-3 mb-2">No Credit Packages Available</h3>
    <p class="text-muted">Credit packages are not currently available. Please check back later.</p>
    <a href="{{ route('wallet.dashboard', $subdomain ?? request()->route('subdomain')) }}" class="btn btn-outline-primary mt-3">
        <i class="bi bi-arrow-left"></i> Back to Wallet
    </a>
</div>
@endif
@endsection

@push('styles')
<style>
    .package-card {
        background: white;
        border: 2px solid #e0e0e0;
        border-radius: 12px;
        padding: 25px;
        transition: all 0.3s;
        cursor: pointer;
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .package-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        border-color: #667eea;
    }

    .package-card.popular {
        border-color: #667eea;
        border-width: 3px;
        box-shadow: 0 5px 20px rgba(102, 126, 234, 0.2);
    }

    .popular-badge {
        position: absolute;
        top: -12px;
        right: 20px;
        background: #6366f1;
        color: white;
        padding: 5px 15px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
    }

    .custom-badge {
        position: absolute;
        top: 15px;
        right: 15px;
        padding: 5px 12px;
        border-radius: 15px;
        font-size: 11px;
        font-weight: 600;
        color: white;
    }

    .package-header {
        margin-bottom: 20px;
    }

    .package-header h4 {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 5px;
        color: #333;
    }

    .package-price {
        text-align: center;
        padding: 20px 0;
        border-bottom: 2px solid #f0f0f0;
        margin-bottom: 20px;
    }

    .package-price .price {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 5px;
    }

    .package-price .currency {
        font-size: 20px;
        font-weight: 600;
        color: #999;
    }

    .package-price .amount {
        font-size: 42px;
        font-weight: 800;
        color: #667eea;
    }

    .package-credits {
        text-align: center;
        margin-bottom: 25px;
    }

    .credits-display {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-size: 32px;
        font-weight: 700;
        color: #333;
        margin-bottom: 10px;
    }

    .credits-display i {
        color: #667eea;
        font-size: 28px;
    }

    .credits-label {
        font-size: 16px;
        color: #999;
        font-weight: 500;
    }

    .bonus-badge {
        display: inline-block;
        background-color: #fff3cd;
        color: #856404;
        padding: 5px 15px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 600;
    }

    .package-details {
        flex: 1;
        margin-bottom: 20px;
    }

    .detail-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 0;
        font-size: 14px;
        color: #666;
    }

    .detail-item i {
        font-size: 16px;
    }

    .package-select .btn-check:checked + label {
        background-color: #667eea;
        border-color: #667eea;
        color: white;
    }

    .payment-method-card {
        height: 100%;
    }

    .payment-method-label {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px;
        border: 2px solid #e0e0e0;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s;
        background: white;
        height: 100%;
    }

    .payment-method-label:hover {
        border-color: #667eea;
        transform: translateY(-3px);
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    }

    .payment-method-card .btn-check:checked + .payment-method-label {
        border-color: #667eea;
        border-width: 3px;
        background-color: #f0f3ff;
    }

    .payment-icon {
        font-size: 48px;
        color: #667eea;
        margin-bottom: 15px;
    }

    .payment-name {
        font-size: 18px;
        font-weight: 700;
        color: #333;
        margin-bottom: 5px;
    }

    .payment-desc {
        font-size: 13px;
        color: #999;
    }
</style>
@endpush

@push('scripts')
<script>
    // Auto-select package card when radio is clicked
    document.querySelectorAll('.package-card').forEach(card => {
        card.addEventListener('click', function() {
            const packageId = this.getAttribute('data-package-id');
            document.getElementById('package_' + packageId).checked = true;

            // Remove selected class from all cards
            document.querySelectorAll('.package-card').forEach(c => {
                c.style.borderColor = c.classList.contains('popular') ? '#667eea' : '#e0e0e0';
                c.style.borderWidth = c.classList.contains('popular') ? '3px' : '2px';
            });

            // Add selected styling to clicked card
            this.style.borderColor = '#667eea';
            this.style.borderWidth = '3px';
        });
    });

    // Form validation
    document.getElementById('topupForm').addEventListener('submit', function(e) {
        const packageSelected = document.querySelector('input[name="package_id"]:checked');
        const paymentSelected = document.querySelector('input[name="payment_method"]:checked');

        if (!packageSelected) {
            e.preventDefault();
            alert('Please select a credit package');
            return false;
        }

        if (!paymentSelected) {
            e.preventDefault();
            alert('Please select a payment method');
            return false;
        }
    });
</script>
@endpush