@extends('root')
@section('title', 'Topup Saldo')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Topup Saldo',
        'links' => [
            ['url' => route('client.dashboard'), 'label' => 'Dashboard'],
        ],
        'current' => 'Topup Saldo'
    ])

    <div class="row g-4">
        <!-- Saldo Saat Ini -->
        <div class="col-lg-4">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <i class="ti ti-wallet fs-4"></i>
                        <span>Saldo Saat Ini</span>
                    </div>
                    <h2 class="mb-0 text-white">Rp {{ number_format($client->balance, 0, ',', '.') }}</h2>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-body">
                    <h6 class="text-muted mb-3">Riwayat Topup</h6>
                    <a href="{{ route('client.balance') }}" class="btn btn-outline-primary w-100">
                        <i class="ti ti-history me-1"></i> Lihat Riwayat
                    </a>
                </div>
            </div>
        </div>

        <!-- Form Topup -->
        <div class="col-lg-8">
            @if(session('warning'))
                <div class="alert alert-warning alert-dismissible fade show" role="alert">
                    <i class="ti ti-alert-triangle me-2"></i>{{ session('warning') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            @if(isset($activePendingPayment))
                <div class="alert alert-warning mb-4" role="alert">
                    <div class="d-flex align-items-start">
                        <i class="ti ti-alert-triangle fs-4 me-3 mt-1"></i>
                        <div class="flex-grow-1">
                            <h6 class="alert-heading mb-1">Pembayaran Aktif</h6>
                            <p class="mb-2">
                                Anda memiliki pembayaran yang belum selesai. Silakan selesaikan pembayaran sebelumnya atau tunggu hingga expired.
                            </p>
                            <div class="small mb-2">
                                <strong>Order ID:</strong> {{ $activePendingPayment->order_id }}<br>
                                <strong>Nominal:</strong> {{ $activePendingPayment->formatted_total_amount }}<br>
                                <strong>Expired:</strong> {{ $activePendingPayment->expired_at->format('d M Y H:i') }}
                            </div>
                            @if($activePendingPayment->payment_url)
                                <a href="{{ $activePendingPayment->payment_url }}" class="btn btn-warning btn-sm" target="_blank">
                                    <i class="ti ti-external-link me-1"></i>Lanjutkan Pembayaran
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            @endif

            @if(!$isAvailable)
                <div class="card">
                    <div class="card-body text-center py-5">
                        <i class="ti ti-credit-card-off fs-1 text-muted mb-3 d-block"></i>
                        <h5>Payment Gateway Tidak Tersedia</h5>
                        <p class="text-muted">Silakan hubungi admin untuk mengaktifkan payment gateway.</p>
                    </div>
                </div>
            @else
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="ti ti-plus me-2"></i>Form Topup Saldo
                        </h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('client.topup.store') }}" method="POST" id="form-topup">
                            @csrf
                            
                            <!-- Pilihan Nominal -->
                            <div class="mb-4">
                                <label class="form-label fw-medium">Pilih Nominal</label>
                                <div class="row g-2" id="nominal-options">
                                    @foreach([10000, 20000, 50000, 100000, 200000, 500000] as $nominal)
                                    <div class="col-4 col-md-3">
                                        <div class="form-check nominal-card">
                                            <input class="form-check-input d-none" type="radio" name="preset_amount" value="{{ $nominal }}" id="nominal-{{ $nominal }}">
                                            <label class="form-check-label d-block p-3 border rounded text-center cursor-pointer" for="nominal-{{ $nominal }}">
                                                <span class="fw-medium">Rp {{ number_format($nominal / 1000, 0, ',', '.') }}rb</span>
                                            </label>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>

                            <!-- Custom Amount -->
                            <div class="mb-4">
                                <label class="form-label fw-medium">Atau Masukkan Nominal Lain</label>
                                <div class="input-group">
                                    <span class="input-group-text">Rp</span>
                                    <input type="number" name="amount" id="amount" class="form-control form-control-lg" placeholder="Minimal 1.000" min="1000" step="1000">
                                </div>
                                @error('amount')
                                    <span class="text-danger small">{{ $message }}</span>
                                @enderror
                            </div>

                            <!-- Phone Number for E-Wallet -->
                            <div class="mb-4">
                                <label class="form-label fw-medium">Nomor HP <span class="text-muted fw-normal">(untuk e-wallet)</span></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="ti ti-phone"></i></span>
                                    <input type="tel" name="phone" id="phone" class="form-control form-control-lg" 
                                        placeholder="08xxxxxxxxxx" 
                                        value="{{ old('phone', $client->phone ?? '') }}"
                                        pattern="^08[0-9]{8,12}$">
                                </div>
                                <small class="text-muted">Format: 08xxxxxxxxxx (wajib untuk DANA, OVO, ShopeePay)</small>
                                @error('phone')
                                    <span class="text-danger small d-block">{{ $message }}</span>
                                @enderror
                            </div>

                            <!-- Payment Channel -->
                            <div class="mb-4">
                                <label class="form-label fw-medium">Metode Pembayaran</label>
                                
                                @if(isset($channels['ewallet']))
                                <div class="mb-3">
                                    <h6 class="text-muted small mb-2">E-Wallet & QRIS <span class="badge bg-info">Fee 0.7%</span></h6>
                                    <div class="row g-2">
                                        @foreach($channels['ewallet'] as $channel)
                                        <div class="col-6 col-md-4">
                                            <div class="form-check channel-card">
                                                <input class="form-check-input d-none" type="radio" name="payment_channel" 
                                                    value="{{ $channel['code'] }}" 
                                                    id="channel-{{ $channel['code'] }}"
                                                    data-fee-type="{{ $channel['fee_type'] }}"
                                                    data-fee="{{ $channel['fee'] }}">
                                                <label class="form-check-label d-block p-3 border rounded cursor-pointer" for="channel-{{ $channel['code'] }}">
                                                    <span class="fw-medium d-block">{{ $channel['name'] }}</span>
                                                    <small class="text-muted">Fee: {{ $channel['fee'] }}%</small>
                                                </label>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                                @endif

                                @if(isset($channels['va']))
                                <div class="mb-3">
                                    <h6 class="text-muted small mb-2">Virtual Account <span class="badge bg-secondary">Fee Rp 4.000</span></h6>
                                    <div class="row g-2">
                                        @foreach($channels['va'] as $channel)
                                        <div class="col-6 col-md-4">
                                            <div class="form-check channel-card">
                                                <input class="form-check-input d-none" type="radio" name="payment_channel" 
                                                    value="{{ $channel['code'] }}" 
                                                    id="channel-{{ $channel['code'] }}"
                                                    data-fee-type="{{ $channel['fee_type'] }}"
                                                    data-fee="{{ $channel['fee'] }}">
                                                <label class="form-check-label d-block p-3 border rounded cursor-pointer" for="channel-{{ $channel['code'] }}">
                                                    <span class="fw-medium d-block">{{ $channel['name'] }}</span>
                                                    <small class="text-muted">Fee: Rp {{ number_format($channel['fee'], 0, ',', '.') }}</small>
                                                </label>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                                @endif

                                @error('payment_channel')
                                    <span class="text-danger small">{{ $message }}</span>
                                @enderror
                            </div>

                            <!-- Summary -->
                            <div class="card border-0 shadow-sm mb-4" id="summary-box" style="display: none;">
                                <div class="card-header bg-gradient text-white py-3" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                                    <h6 class="mb-0 d-flex align-items-center">
                                        <i class="ti ti-receipt fs-5 me-2"></i>
                                        Ringkasan Pembayaran
                                    </h6>
                                </div>
                                <div class="card-body p-4">
                                    <!-- Breakdown Section -->
                                    <div class="mb-3">
                                        <div class="d-flex justify-content-between align-items-center py-2">
                                            <span class="text-muted">
                                                <i class="ti ti-wallet me-2"></i>Nominal Topup
                                            </span>
                                            <span class="fw-semibold" id="summary-amount">Rp 0</span>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center py-2">
                                            <span class="text-muted">
                                                <i class="ti ti-building-bank me-2"></i>Biaya Admin
                                            </span>
                                            <span class="text-warning fw-semibold" id="summary-fee">Rp 0</span>
                                        </div>
                                    </div>
                                    
                                    <hr class="my-3">
                                    
                                    <!-- Total Payment -->
                                    <div class="bg-light rounded-3 p-3 mb-3">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="fw-medium">
                                                <i class="ti ti-credit-card me-2 text-primary"></i>Total Bayar
                                            </span>
                                            <span class="fw-bold text-primary fs-4" id="summary-total">Rp 0</span>
                                        </div>
                                    </div>
                                    
                                    <hr class="my-3">
                                    
                                    <!-- Service Fee & Balance Added -->
                                    <div class="alert alert-info border-0 mb-0" style="background: rgba(13, 110, 253, 0.08);">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <span class="small">
                                                <i class="ti ti-percentage me-1"></i>Biaya Layanan (11%)
                                            </span>
                                            <span class="text-danger fw-semibold" id="summary-service-fee">-Rp 0</span>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center pt-2 border-top">
                                            <span class="fw-semibold">
                                                <i class="ti ti-plus me-1 text-success"></i>Saldo Ditambahkan
                                            </span>
                                            <span class="fw-bold text-success fs-5" id="summary-balance">Rp 0</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Submit -->
                            <button type="submit" class="btn btn-primary btn-lg w-100" id="btn-submit" disabled>
                                <i class="ti ti-arrow-right me-2"></i>Lanjutkan Pembayaran
                            </button>
                        </form>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

<style>
.nominal-card .form-check-label,
.channel-card .form-check-label {
    cursor: pointer;
    transition: all 0.2s ease;
}
.nominal-card .form-check-label:hover,
.channel-card .form-check-label:hover {
    border-color: var(--bs-primary) !important;
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}
.nominal-card .form-check-input:checked + .form-check-label,
.channel-card .form-check-input:checked + .form-check-label {
    border-color: var(--bs-primary) !important;
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
}
</style>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    const formatRupiah = (num) => 'Rp ' + parseFloat(num || 0).toLocaleString('id-ID');
    
    function calculateFee(amount, feeType, feeValue) {
        if (feeType === 'percent') {
            return Math.ceil(amount * (feeValue / 100));
        }
        return feeValue;
    }
    
    function updateSummary() {
        const amount = parseFloat($('#amount').val()) || 0;
        const $selectedChannel = $('input[name="payment_channel"]:checked');
        const channel = $selectedChannel.val();
        
        if (amount >= 1000 && channel) {
            const feeType = $selectedChannel.data('fee-type');
            const feeValue = parseFloat($selectedChannel.data('fee'));
            const fee = calculateFee(amount, feeType, feeValue);
            const serviceFee = calculateFee(amount, 'percent', 11);
            const total = amount + fee;
            
            $('#summary-box').show();
            $('#summary-amount').text(formatRupiah(amount));
            $('#summary-fee').text('+' + formatRupiah(fee));
            $('#summary-service-fee').text('-' + formatRupiah(serviceFee));
            $('#summary-total').text(formatRupiah(total));
            $('#summary-balance').text(formatRupiah(amount - serviceFee));
            $('#btn-submit').prop('disabled', false);
        } else {
            $('#summary-box').hide();
            $('#btn-submit').prop('disabled', true);
        }
    }

    // Preset amount selection
    $('input[name="preset_amount"]').on('change', function() {
        $('#amount').val($(this).val());
        updateSummary();
    });

    // Custom amount input
    $('#amount').on('input', function() {
        $('input[name="preset_amount"]').prop('checked', false);
        updateSummary();
    });

    // Channel selection
    $('input[name="payment_channel"]').on('change', function() {
        updateSummary();
    });

    // Form submit
    $('#form-topup').on('submit', function() {
        $('#btn-submit').prop('disabled', true).html('<i class="ti ti-loader ti-spin me-2"></i>Memproses...');
    });
});
</script>
@endpush