@extends('templates.desktop.app')

@section('content')
    <div class="row g-6">
        @include('dashboard.partials.balance')
        @include('dashboard.partials.order-running')
    </div>

    <div class="row g-6 mt-2">
        <div class="col-lg-6">
            @include('dashboard.partials.order-new')
        </div>
    </div>

    @include('dashboard.components.modal-withdraw')   
@endsection
@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

            const tarikSaldoInput = document.getElementById('tarikSaldoInput');
            const amountButtons = document.querySelectorAll('.quick-amount');
            const btnConfirmWithdrawal = document.getElementById('btnConfirmWithdrawal');

            const btnEditBank = document.getElementById('btnEditBank');
            const bankInfoView = document.getElementById('bankInfoView');
            const bankEditForm = document.getElementById('bankEditForm');
            const namaPemilikRekening = document.getElementById('namaPemilikRekening');
            const accountNumber = document.getElementById('accountNumber');
            const bankSelect = document.getElementById('bankSelect');
            const btnSaveBankDetails = document.getElementById('btnSaveBankDetails');
            const btnCancelEditBank = document.getElementById('btnCancelEditBank');

            const currentBankName = document.getElementById('currentBankName');
            const currentAccountNumber = document.getElementById('currentAccountNumber');

            // --- Quick amount buttons
            amountButtons.forEach(btn => {
                btn.addEventListener('click', () => {
                    amountButtons.forEach(b => b.classList.remove('active'));
                    btn.classList.add('active');
                    tarikSaldoInput.value = btn.dataset.amount;
                });
            });

            // --- Confirm Withdraw
            btnConfirmWithdrawal?.addEventListener('click', async () => {
                const amount = parseInt(tarikSaldoInput.value);
                if (!amount || amount < 10000) {
                    return Swal.fire('Jumlah tidak valid', 'Minimal penarikan Rp 10.000', 'warning');
                }

                btnConfirmWithdrawal.disabled = true;
                const originalText = btnConfirmWithdrawal.textContent;
                btnConfirmWithdrawal.innerHTML =
                    `<span class="spinner-border spinner-border-sm"></span> Menarik...`;

                try {
                    const response = await axios.post(`{{ route('transactions.withdraw.process') }}`, {
                        amount
                    }, {
                        headers: {
                            'X-CSRF-TOKEN': csrfToken,
                            'Accept': 'application/json'
                        }
                    });

                    bootstrap.Modal.getInstance(document.getElementById('modalWithdraw')).hide();
                    await Swal.fire('Berhasil!', response.data.message, 'success');
                    location.reload();

                } catch (err) {
                    Swal.fire('Gagal', err.response?.data?.message || 'Terjadi kesalahan', 'error');
                } finally {
                    btnConfirmWithdrawal.disabled = false;
                    btnConfirmWithdrawal.textContent = originalText;
                }
            });

            // --- Edit Bank
            btnEditBank?.addEventListener('click', async () => {
                btnEditBank.disabled = true;
                try {
                    const res = await axios.get(`{{ route('user.bank.get') }}`);
                    const {
                        bank_id,
                        account_name,
                        account_number
                    } = res.data;

                    namaPemilikRekening.value = account_name;
                    accountNumber.value = account_number;

                    [...bankSelect.options].forEach(opt => {
                        opt.selected = opt.value === String(bank_id);
                    });

                    bankInfoView.style.display = 'none';
                    bankEditForm.style.display = 'block';

                } catch (err) {
                    Swal.fire('Gagal', err.response?.data?.message || 'Gagal memuat data bank.',
                        'error');
                } finally {
                    btnEditBank.disabled = false;
                }
            });

            // --- Cancel Edit
            btnCancelEditBank?.addEventListener('click', () => {
                bankEditForm.style.display = 'none';
                bankInfoView.style.display = 'block';
            });

            // --- Save Bank Details
            btnSaveBankDetails?.addEventListener('click', async () => {
                const data = {
                    bank_id: bankSelect.value,
                    account_name: namaPemilikRekening.value.trim(),
                    account_number: accountNumber.value.trim()
                };

                if (!data.bank_id || !data.account_name || !data.account_number) {
                    return Swal.fire('Lengkapi Data', 'Semua field harus diisi.', 'warning');
                }

                btnSaveBankDetails.disabled = true;
                const originalText = btnSaveBankDetails.textContent;
                btnSaveBankDetails.innerHTML =
                    `<span class="spinner-border spinner-border-sm"></span> Menyimpan...`;

                try {
                    const res = await axios.post(`{{ route('user.bank.update') }}`, data, {
                        headers: {
                            'X-CSRF-TOKEN': csrfToken,
                            'Accept': 'application/json'
                        }
                    });

                    // Update UI tanpa reload
                    currentBankName.textContent = res.data.bank;
                    currentAccountNumber.textContent =
                        `${res.data.account_number} - ${res.data.account_name}`;

                    bankEditForm.style.display = 'none';
                    bankInfoView.style.display = 'block';

                    await Swal.fire('Berhasil!', 'Data bank berhasil diperbarui!', 'success');

                } catch (err) {
                    Swal.fire('Gagal', err.response?.data?.message || 'Terjadi kesalahan.', 'error');
                } finally {
                    btnSaveBankDetails.disabled = false;
                    btnSaveBankDetails.textContent = originalText;
                }
            });
        });
    </script>
@endpush