@extends('layouts.app')

@section('title', 'Pilih Metode Pembayaran')
@section('page-title', 'Pilih Metode Pembayaran')

@section('content')
    <div class="max-w-2xl mx-auto w-full px-0 sm:px-0">
        {{-- Card utama --}}
        <div class="bg-white rounded-xl shadow-md border border-gray-200 overflow-hidden">
            <div class="p-4 sm:p-6 border-b bg-gradient-to-r from-gray-50 to-gray-100">
                <h2 class="text-fluid-lg sm:text-xl font-semibold text-gray-800">Pilih Metode untuk Tagihan</h2>
            </div>

            {{-- Info Tagihan --}}
            <div class="p-4 sm:p-6 space-y-3 sm:space-y-4 border-b">
                <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-1">
                    <span class="text-fluid-sm text-gray-500">Tagihan</span>
                    <span class="font-semibold text-gray-900 text-left sm:text-right break-words">{{ $tagihan->jenis_tampilan }}</span>
                </div>
                <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-1">
                    <span class="text-fluid-sm text-gray-500">Jumlah Tagihan</span>
                    <span class="text-fluid-xl sm:text-2xl font-bold text-blue-600">Rp. {{ number_format($tagihan->jumlah_tagihan, 0, ',', '.') }}</span>
                </div>
                @if($tagihan->total_angsuran > 0)
                <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-500">Sudah Dibayar</span>
                    <span class="font-semibold text-green-600">Rp. {{ number_format($tagihan->total_angsuran, 0, ',', '.') }}</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-500">Sisa Pokok</span>
                    <span class="font-semibold text-orange-600">Rp. {{ number_format($tagihan->sisa_pokok ?? $tagihan->jumlah_tagihan, 0, ',', '.') }}</span>
                </div>
                @endif
                <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-500">Jatuh Tempo</span>
                    <span class="font-medium text-gray-900">{{ \Carbon\Carbon::parse($tagihan->tanggal_jatuh_tempo)->isoFormat('D MMMM YYYY') }}</span>
                </div>
            </div>

            {{-- Form Pilihan Metode --}}
            <form id="form-pilih-metode" action="{{ route('mahasiswa.pembayaran.proses-metode', $tagihan->tagihan_id) }}" method="POST">
                @csrf
                <div class="p-4 sm:p-6 space-y-3 sm:space-y-4">
                    <p class="text-fluid-sm text-gray-600">Silakan pilih salah satu metode pembayaran yang Anda inginkan:</p>

                    @php
                        $isWajibLunas = $tagihan->isWajibLunas();
                        $sisaPokok = $tagihan->sisa_pokok ?? $tagihan->jumlah_tagihan;
                    @endphp

                    @if(!$isWajibLunas)
                    <button type="submit" name="metode" value="cicil"
                            class="group w-full flex items-center justify-between gap-3 min-h-touch p-4 border-2 border-purple-200 rounded-xl sm:rounded-lg hover:border-purple-500 hover:bg-purple-50 focus:outline-none focus:ring-2 focus:ring-purple-500 transition-all duration-200 shadow-sm hover:shadow-md text-left">
                        <div class="text-left">
                            <p class="font-semibold text-gray-800 group-hover:text-purple-700">Bayar Cicilan</p>
                            <p class="text-sm text-gray-500">Bayar sebagian tagihan sesuai kemampuan Anda.</p>
                            @if($tagihan->total_angsuran > 0)
                            <p class="text-xs text-purple-600 mt-1">Sisa: Rp. {{ number_format($sisaPokok, 0, ',', '.') }}</p>
                            @endif
                        </div>
                        <div class="bg-gradient-to-br from-purple-100 to-purple-200 p-3 rounded-lg group-hover:from-purple-200 group-hover:to-purple-300 transition-all duration-200">
                            <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                        </div>
                    </button>
                    @endif

                    {{-- Pilihan 1: Transfer --}}
                    <button type="submit" name="metode" value="transfer"
                            class="group w-full flex items-center justify-between gap-3 min-h-touch p-4 border-2 border-gray-200 rounded-xl sm:rounded-lg hover:border-primary-500 hover:bg-primary-50 focus:outline-none focus:ring-2 focus:ring-primary-500 transition-all duration-200 shadow-sm hover:shadow-md text-left">
                        <div class="text-left">
                            <p class="font-semibold text-gray-800 group-hover:text-primary-700">Bayar {{ $isWajibLunas ? 'Penuh' : 'Lunas' }} via Transfer Bank</p>
                            <p class="text-sm text-gray-500">Upload bukti transfer untuk diverifikasi oleh kasir.</p>
                        </div>
                        <div class="bg-gradient-to-br from-primary-100 to-primary-200 p-3 rounded-lg group-hover:from-primary-200 group-hover:to-primary-300 transition-all duration-200">
                            <svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                        </div>
                    </button>

                    {{-- Pilihan 2: Tunai --}}
                    <button type="button" id="btn-metode-tunai"
                            class="group w-full flex items-center justify-between gap-3 min-h-touch p-4 border-2 border-gray-200 rounded-xl sm:rounded-lg hover:border-success-500 hover:bg-success-50 focus:outline-none focus:ring-2 focus:ring-success-500 transition-all duration-200 shadow-sm hover:shadow-md text-left">
                        <div class="text-left">
                            <p class="font-semibold text-gray-800 group-hover:text-success-700">Bayar {{ $isWajibLunas ? 'Penuh' : 'Lunas' }} Tunai di Kasir</p>
                            <p class="text-sm text-gray-500">Pilih ini dan datang ke kasir untuk pembayaran tunai.</p>
                        </div>
                        <div class="bg-gradient-to-br from-success-100 to-success-200 p-3 rounded-lg group-hover:from-success-200 group-hover:to-success-300 transition-all duration-200">
                            <svg class="w-6 h-6 text-success-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path></svg>
                        </div>
                    </button>
                </div>
            </form>
        </div>

        {{-- Tombol Kembali --}}
        <div class="mt-4 sm:mt-6 text-center">
            <a href="{{ route('mahasiswa.pembayaran.index') }}" class="inline-flex items-center justify-center min-h-touch px-2 text-fluid-sm font-medium text-primary-600 hover:text-primary-800 transition-colors duration-200 rounded-lg">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
                Kembali ke Daftar Tagihan
            </a>
        </div>
    </div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('form-pilih-metode');
    const btnTunai = document.getElementById('btn-metode-tunai');
    if (!form || !btnTunai) return;

    btnTunai.addEventListener('click', async function () {
        const title = 'Bayar Tunai di Kasir?';
        const text = 'Status tagihan akan diubah menjadi Menunggu Pembayaran Tunai. Silakan datang ke kasir untuk melunasi tagihan ini.';

        let confirmed = false;
        if (window.App?.alert?.confirm) {
            confirmed = await App.alert.confirm(title, text, 'Ya, Lanjutkan');
        } else if (window.Swal) {
            const result = await Swal.fire({
                icon: 'warning',
                title,
                text,
                showCancelButton: true,
                confirmButtonText: 'Ya, Lanjutkan',
                cancelButtonText: 'Batal',
            });
            confirmed = result.isConfirmed;
        } else {
            confirmed = confirm(title + '\n\n' + text);
        }

        if (!confirmed) return;

        let metodeInput = form.querySelector('input[name="metode"]');
        if (!metodeInput) {
            metodeInput = document.createElement('input');
            metodeInput.type = 'hidden';
            metodeInput.name = 'metode';
            form.appendChild(metodeInput);
        }
        metodeInput.value = 'tunai';
        form.submit();
    });
});
</script>
@endpush