@extends('layout.mobile.main')
@section('mobile')
    <link rel="stylesheet" href="../../css/mobile/deposit.css">
    <style>
        .payment-form-label {
            margin-top: 0px;
            transition: margin-top 0.3s, font-size 0.3s;

        }

        .payment-form-group:hover .payment-form-label {
            margin-top: -4px;

            font-size: 1em;

        }
    </style>

    <main>
        <div class="container-deposit">
            <section class="payment-section">
                <div class="container">
                    <div class="payment-wrapper">
                        <div class="payment-left">
                            <div class="payment-header">
                                <div class="payment-header-icon">
                                    <i class="fas fa-wallet" style="color: white"></i>
                                </div>
                                <div style="background-color: #4d6283; border-radius:2px;margin-top: 20px;color: white;">
                                    <header class="page-header">
                                        <div class="payment-header-title">Withdraw</div>
                                    </header>
                                </div>
                                <div class="payment-header-title">Withdraw Details</div>
                                <p class="payment-header-description">
                                    Minimal Withdraw IDR 50.000 dan Periksa Kembali Bank Anda !
                                </p>
                            </div>
                            <div class="payment-content">
                                <div class="payment-body">
                                    <div class="payment-plan">
                                        <div class="payment-plan-type">
                                            <img src="../../image/bank.png" alt="">
                                        </div>
                                        <div class="payment-plan-info">
                                            <div class="payment-plan-info-name">
                                                Bank recipient's details
                                            </div>
                                            <div class="payment-plan-info-price">IDR 50.000 Min Withdraw</div>
                                        </div>
                                    </div>
                                    <div class="payment-summary">
                                        <div class="payment-summary-item">
                                            <div class="payment-summary-name">Sender's Bank</div>
                                            <div class="payment-summary-price" id="bank-name">
                                                {{ Auth()->user()->bank }}
                                            </div>
                                        </div>
                                        <div class="payment-summary-item">
                                            <div class="payment-summary-name">Sender's Name</div>
                                            <div class="payment-summary-price" id="bank-account">
                                                {{ Auth()->user()->accName }}
                                            </div>
                                        </div>
                                        <div class="payment-summary-divider"></div>
                                        <div class="payment-summary-item payment-summary-total">
                                            <div class="payment-summary-name">Sender's Rekening</div>
                                            <div class="payment-summary-price" id="bank-number">
                                                {{ Auth()->user()->accNumber }}
                                            </div>
                                        </div>
                                        <hr style="border-bottom: 3px solid;">
                                        <div class="payment-summary-item">
                                            <div class="payment-summary-name">Description</div>
                                            <div class="payment-summary-price" id="description-left">
                                                - -
                                            </div>
                                        </div>
                                        <div class="payment-summary-item">
                                            <div class="payment-summary-name">Saldo</div>
                                            <div class="payment-summary-price" id="saldo">
                                                IDR {{ $hiddenBalance }}
                                            </div>
                                        </div>
                                        <div class="payment-summary-item">
                                            <div class="payment-summary-name">Amount</div>
                                            <div class="payment-summary-price" id="amount-left">
                                            </div>
                                        </div>
                                        <hr style="border-bottom: 3px solid;">
                                        <div class="payment-summary-item payment-summary-total">
                                            <div class="payment-summary-name">Sisa Saldo</div>
                                            <div class="payment-summary-price" id="sisa">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="payment-right">
                            <form action="/withdraw" class="payment-form" enctype="multipart/form-data" method="POST">
                                @csrf
                                <h1 class="payment-title">Withdraw Form</h1>
                                <div class="payment-form-group">
                                    <input type="text" placeholder=" " class="payment-form-control" id="accName"
                                        name="accName" value="{{ Auth()->user()->accName }}" readonly
                                        style="background-color: rgb(192, 192, 192); color:white" />

                                </div>
                                <div class="payment-form-group">
                                    <input type="text" placeholder=" " class="payment-form-control" id="bank"
                                        name="bankMember"
                                        value="{{ Auth()->user()->bank }} - {{ Auth()->user()->accNumber }}" readonly
                                        style="background-color: rgb(192, 192, 192); color:white" />
                                </div>
                                <div class="payment-form-group">
                                    <input type="text" placeholder="Description" class="payment-form-control"
                                        id="describe" name="notes" />
                                </div>
                                <div class="payment-form-group">
                                    <input type="text" placeholder="Amount" class="payment-form-control" id="amount"
                                        name="amount" />
                                </div>
                                <button type="submit" class="payment-form-submit-button">
                                    <i class="ri-wallet-line"></i> Confirm
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </main>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script>
        function formatRupiah(angka) {
            var number_string = Math.abs(angka).toString(),
                sisa = number_string.length % 3,
                rupiah = number_string.substr(0, sisa),
                ribuan = number_string.substr(sisa).match(/\d{3}/g);

            if (ribuan) {
                separator = sisa ? '.' : '';
                rupiah += separator + ribuan.join('.');
            }

            return (angka < 0 ? '-' : '') + rupiah;
        }

        const amountInput = document.getElementById('amount');
        const amountLeftElem = document.getElementById('amount-left');
        const describeInput = document.getElementById('describe');
        const descriptionLeftElem = document.getElementById('description-left');
        const sisaElem = document.getElementById('sisa');

        function updatePaymentDetails() {
            const saldoElem = document.getElementById('saldo');
            const saldoText = saldoElem.textContent;
            const saldo = parseFloat(saldoText.replace(/\D/g, '')) ||
                0;

            saldoElem.textContent = 'IDR ' + formatRupiah(saldo);

            const amount = parseFloat(amountInput.value) || 0;
            amountLeftElem.textContent = 'IDR ' + formatRupiah(amount);

            const description = describeInput.value;
            descriptionLeftElem.textContent = description || '- -';

            const sisa = saldo - amount;
            sisaElem.textContent = 'IDR ' + formatRupiah(sisa);
        }

        updatePaymentDetails();

        describeInput.addEventListener('input', updatePaymentDetails);
        amountInput.addEventListener('input', updatePaymentDetails);
    </script>
@endsection