@extends('mobile.template.app')

@section('content')
    <div class="px-4 bg-white sticky z-10 border-b border-gray-100 shadow-sm">
        <div class="flex">
            <a href="penarikan.html"
                class="flex-1 text-center py-3 px-1 border-b-2 border-primary transition-all text-sm text-primary font-semibold">
                Tarik Dana
            </a>
            <a href="riwayat.html"
                class="flex-1 text-center py-3 px-1 border-b-2 border-transparent transition-all text-sm text-gray-500 hover:text-primary">
                Riwayat
            </a>
        </div>
    </div>
    <div class="p-4 pb-20 bg-f7f7f7 space-y-4">

        <!-- Saldo Card - Lebih Kompak -->
        <section class="bg-primary p-4 rounded-xl text-white shadow-lg transition-all">
            <p class="text-xs font-medium opacity-90 mb-1">Saldo Komisi Anda saat ini:</p>
            <div class="flex justify-between items-center">
                <span class="text-3xl font-extrabold tracking-tight">Rp 3.750.000</span>
            </div>
            <p class="text-[10px] mt-2 opacity-75">Batas Minimum Penarikan: Rp 50.000</p>
        </section>

        <!-- Feedback Message -->
        <div id="penarikanMessage" class="hidden p-3 rounded-xl text-sm font-medium transition-all"></div>

        <!-- Withdrawal Form -->
        <form onsubmit="handleWithdrawal(event)"
            class="space-y-3 bg-white p-4 rounded-xl border border-gray-100 shadow-md transition-all">
            <h2 class="text-base font-semibold text-gray-800 mb-3 border-b pb-2 border-gray-100">Ajukan Penarikan Dana</h2>

            <div>
                <label for="withdrawalAmount" class="block text-xs font-medium text-gray-600 mb-1">Jumlah Penarikan
                    (IDR)</label>
                <input type="number" id="withdrawalAmount" placeholder="Contoh: 500000" required min="50000"
                    class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all text-base font-medium">
            </div>

            <div>
                <label for="bankAccount" class="block text-xs font-medium text-gray-600 mb-1">Tujuan Rekening Bank</label>
                <select id="bankAccount" required
                    class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all bg-white text-sm text-gray-700">
                    <option value="">Pilih Bank Tujuan</option>
                    <option value="BCA-1234">BCA - John Doe (123456789)</option>
                    <option value="Mandiri-9876">Mandiri - John Doe (987654321)</option>
                </select>
                <p class="text-[10px] text-gray-500 mt-2 flex items-center">
                    <i data-lucide="info" class="w-3 h-3 mr-1"></i>
                    Belum ada bank? <a href="bank_saya.html" class="text-primary hover:underline">Tambah di sini</a>.
                </p>
            </div>

            <button type="submit"
                class="w-full flex justify-center items-center px-4 py-2.5 text-base font-semibold rounded-xl text-white bg-primary hover:bg-primary-dark focus:ring-4 focus:ring-primary/50 transition-all transform active:scale-[0.99] mt-6">
                Tarik Sekarang
            </button>
        </form>
    </div>
@endsection
@push('scripts')
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'primary': '#880d1e', // Maroon
                        'primary-light': '#a22134',
                        'primary-dark': '#6d0a18',
                    },
                }
            }
        }

        // Fungsi untuk menampilkan pesan feedback
        function displayMessage(message, isSuccess = true) {
            const messageEl = document.getElementById('penarikanMessage');
            if (!messageEl) return;

            messageEl.textContent = message;
            messageEl.classList.remove('hidden', 'bg-red-100', 'text-red-700', 'bg-green-100', 'text-green-700');
            messageEl.classList.add(
                isSuccess ? 'bg-green-100' : 'bg-red-100',
                isSuccess ? 'text-green-700' : 'text-red-700'
            );

            setTimeout(() => {
                messageEl.classList.add('hidden');
            }, 3500);
        }

        // Fungsi simulasi penarikan dengan validasi kuat
        function handleWithdrawal(event) {
            event.preventDefault();
            const amount = document.getElementById('withdrawalAmount').value;
            const bank = document.getElementById('bankAccount').value;
            const currentBalance = 3750000;
            const minWithdrawal = 50000;

            const button = event.target.querySelector('button[type="submit"]');
            const originalText = button.textContent.trim();

            // Validasi input
            if (!amount || parseInt(amount) <= 0) {
                return displayMessage('Gagal: Masukkan jumlah penarikan yang valid.', false);
            }
            if (!bank) {
                return displayMessage('Gagal: Pilih rekening bank tujuan.', false);
            }
            if (parseInt(amount) < minWithdrawal) {
                return displayMessage('Gagal: Jumlah penarikan kurang dari minimum (Rp ' + new Intl.NumberFormat('id-ID')
                    .format(minWithdrawal) + ').', false);
            }
            if (parseInt(amount) > currentBalance) {
                return displayMessage('Gagal: Saldo tidak mencukupi.', false);
            }

            // Tampilkan status loading
            button.innerHTML = '<i data-lucide="loader-circle" class="w-4 h-4 mr-2 animate-spin"></i> Memproses...';
            button.disabled = true;
            lucide.createIcons();

            setTimeout(() => {
                button.innerHTML = originalText;
                button.disabled = false;
                lucide.createIcons();

                // Jika sukses (Simulasi)
                displayMessage('Permintaan penarikan Rp' + new Intl.NumberFormat('id-ID').format(amount) +
                    ' telah diajukan. Cek Riwayat!', true);
                document.getElementById('withdrawalAmount').value = '';

            }, 1500);
        }

        document.addEventListener('DOMContentLoaded', () => {
            lucide.createIcons();
        });
    </script>
@endpush