@extends('layouts.app')

@section('title', 'Pilih Metode Pembayaran Tripay')

@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <!-- Header -->
            <div class="card mb-4">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-money-bill-wave me-2"></i>
                        Pembayaran via Tripay
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6><strong>Invoice:</strong> {{ $invoice->nomor_invoice ?? 'INV-' . $invoice->id }}</h6>
                            <p><strong>Pelanggan:</strong> {{ $invoice->pelanggan->nama_lengkap }}</p>
                            <p><strong>Layanan:</strong> {{ $invoice->pelanggan->nomer_layanan }}</p>
                        </div>
                        <div class="col-md-6 text-md-end">
                            <h4 class="text-success"><strong>Rp {{ number_format($invoice->total_amount, 0, ',', '.') }}</strong></h4>
                            <small class="text-muted">Total yang harus dibayar</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Payment Method Selection -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-credit-card me-2"></i>
                        Pilih Metode Pembayaran
                    </h5>
                    @if($channelsFromApi)
                        <small class="text-success">
                            <i class="fas fa-check-circle me-1"></i>
                            Data payment channel diambil dari Tripay API
                        </small>
                    @else
                        <small class="text-warning">
                            <i class="fas fa-exclamation-triangle me-1"></i>
                            Menggunakan payment channel default (API tidak tersedia)
                        </small>
                    @endif
                </div>
                <div class="card-body">
                    <form action="{{ route('payment.create.page') }}" method="GET" id="paymentMethodForm">
                        <input type="hidden" name="invoice_id" value="{{ $invoice->id }}">
                        <input type="hidden" name="gateway" value="tripay">
                        <input type="hidden" name="payment_method" id="selectedPaymentMethod">

                        @foreach($availableChannels as $type => $channels)
                            <div class="payment-category mb-4">
                                <h6 class="text-muted mb-3">
                                    <i class="fas fa-{{ $type === 'Virtual Account' ? 'university' : ($type === 'E-Wallet' ? 'wallet' : 'store') }} me-2"></i>
                                    {{ $type }}
                                </h6>
                                
                                <div class="row">
                                    @foreach($channels as $channel)
                                        <div class="col-md-6 col-lg-4 mb-3">
                                            <div class="payment-method-card" data-method="{{ $channel['code'] }}">
                                                <div class="card h-100 border-2 payment-option" style="cursor: pointer; transition: all 0.3s;">
                                                    <div class="card-body text-center p-3">
                                                        <!-- Channel Icon -->
                                                        <div class="payment-icon mb-3">
                                                            @if(isset($channel['icon_url']) && $channel['icon_url'])
                                                                <img src="{{ $channel['icon_url'] }}" alt="{{ $channel['name'] }}" style="height: 40px; width: auto;">
                                                            @else
                                                                @switch($type)
                                                                    @case('Virtual Account')
                                                                        <i class="fas fa-university text-primary" style="font-size: 2rem;"></i>
                                                                        @break
                                                                    @case('E-Wallet')
                                                                        <i class="fas fa-wallet text-success" style="font-size: 2rem;"></i>
                                                                        @break
                                                                    @case('Convenience Store')
                                                                        <i class="fas fa-store text-info" style="font-size: 2rem;"></i>
                                                                        @break
                                                                    @default
                                                                        <i class="fas fa-credit-card text-secondary" style="font-size: 2rem;"></i>
                                                                @endswitch
                                                            @endif
                                                        </div>

                                                        <!-- Channel Name -->
                                                        <h6 class="card-title mb-2">{{ $channel['name'] }}</h6>
                                                        <small class="text-muted">{{ $channel['code'] }}</small>

                                                        <!-- Fee Information (if available) -->
                                                        @if(isset($channel['fee_customer']) && !empty($channel['fee_customer']))
                                                            <div class="fee-info mt-2">
                                                                <small class="text-muted d-block">
                                                                    @if(isset($channel['fee_customer']['flat']))
                                                                        Biaya: Rp {{ number_format($channel['fee_customer']['flat'], 0, ',', '.') }}
                                                                    @elseif(isset($channel['fee_customer']['percent']))
                                                                        Biaya: {{ $channel['fee_customer']['percent'] }}%
                                                                    @endif
                                                                </small>
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach

                        <!-- Submit Button -->
                        <div class="text-center mt-4">
                            <button type="submit" class="btn btn-success btn-lg px-5" id="submitBtn" disabled>
                                <i class="fas fa-arrow-right me-2"></i>
                                Lanjut Pembayaran
                            </button>
                        </div>

                        <!-- Back Button -->
                        <div class="text-center mt-3">
                            <a href="{{ route('payment.create.page', ['invoice_id' => $invoice->id]) }}" class="btn btn-outline-secondary">
                                <i class="fas fa-arrow-left me-2"></i>
                                Kembali ke Pilihan Gateway
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .payment-method-card .payment-option {
        transition: all 0.3s ease;
        border-color: #dee2e6;
    }

    .payment-method-card .payment-option:hover {
        border-color: #28a745;
        box-shadow: 0 4px 12px rgba(40, 167, 69, 0.15);
        transform: translateY(-2px);
    }

    .payment-method-card .payment-option.selected {
        border-color: #28a745;
        background-color: #f8f9fa;
        box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
    }

    .payment-category {
        border-bottom: 1px solid #eee;
        padding-bottom: 1rem;
    }

    .payment-category:last-child {
        border-bottom: none;
    }

    .fee-info {
        background: #f8f9fa;
        padding: 5px;
        border-radius: 4px;
    }
</style>
@endpush

@push('scripts')
<script>
let selectedMethod = null;

function selectPaymentMethod(methodCode, element) {
    // Remove previous selection
    document.querySelectorAll('.payment-option').forEach(card => {
        card.classList.remove('selected');
    });
    
    // Add selection to clicked card
    element.querySelector('.payment-option').classList.add('selected');
    
    // Set selected method
    selectedMethod = methodCode;
    document.getElementById('selectedPaymentMethod').value = methodCode;
    
    // Enable submit button
    document.getElementById('submitBtn').disabled = false;
    
    // Add haptic feedback
    if (navigator.vibrate) {
        navigator.vibrate(10);
    }
    
    console.log('Selected payment method:', methodCode);
}

document.addEventListener('DOMContentLoaded', function() {
    // Add click handlers to payment cards
    document.querySelectorAll('.payment-method-card').forEach(card => {
        card.addEventListener('click', function() {
            const methodCode = this.getAttribute('data-method');
            selectPaymentMethod(methodCode, this);
        });
    });
});
</script>
@endpush