@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">Deposit</div>
                                    </header>
                                </div>
                                <div class="payment-header-title">Payment Details</div>
                                <p class="payment-header-description">
                                    Pilih Bank Tujuan Terlebih Dahulu !

                                </p>
                                <p class="payment-header-description">
                                    Minimal Deposite IDR 50.000 dan Periksa Kembali Bank Tujuan 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="bca" id="bank-image" />
                                        </div>
                                        <div class="payment-plan-info">
                                            <div class="payment-plan-info-name">Payment details</div>
                                            <div class="payment-plan-info-price">0% fee transfer</div>
                                        </div>
                                        <a href="#" class="payment-plan-change"><i class="ri-camera-line"></i></a>
                                    </div>
                                    <div class="payment-summary">
                                        <div class="payment-summary-item">
                                            <div class="payment-summary-name">Bank name</div>
                                            <div class="payment-summary-price" id="bank-name-right">
                                                --
                                            </div>
                                        </div>
                                        <div class="payment-summary-item">
                                            <div class="payment-summary-name">recipient's name</div>
                                            <div class="payment-summary-price" id="bank-account-right">
                                                --
                                            </div>
                                        </div>
                                        <div class="payment-summary-divider"></div>
                                        <div class="payment-summary-item payment-summary-total">
                                            <div class="payment-summary-name">Account</div>
                                            <div class="payment-summary-price" id="bank-number-right">
                                                Pilih Rekening Tujuan
                                            </div>
                                        </div>
                                        <hr style="border-bottom: 3px solid;">
                                        <div class="payment-summary-item">
                                            <div class="payment-summary-name">Sender's Name</div>
                                            <div class="payment-summary-price" id="sender-name">
                                                --
                                            </div>
                                        </div>
                                        <div class="payment-summary-item">
                                            <div class="payment-summary-name">Sender's Bank</div>
                                            <div class="payment-summary-price" id="sender-bank">
                                                --
                                            </div>
                                        </div>
                                        <div class="payment-summary-item">
                                            <div class="payment-summary-name">Bonus</div>
                                            <div class="payment-summary-price" id="bonus-left">
                                                --
                                            </div>
                                        </div>
                                        <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">Amount</div>
                                            <div class="payment-summary-price" id="amount-left">
                                                --
                                            </div>
                                        </div>
                                        <div class="payment-summary-item">
                                            <div class="payment-summary-name">Bukti Transfer</div>
                                            <div class="payment-summary-price" id="image-left">
                                                <img class="img-preview img-fluid" width="50">
                                            </div>
                                        </div>
                                        <hr style="border-bottom: 3px solid;">
                                        <div class="payment-summary-item payment-summary-total">
                                            <div class="payment-summary-name">Total Payment</div>
                                            <div class="payment-summary-price" id="total-payment">
                                                --
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="payment-right">
                            <form action="/deposit" class="payment-form" enctype="multipart/form-data" method="post">
                                @csrf
                                <input type="hidden" id="hiddenBank" name="hiddenBank">
                                <input type="hidden" id="hiddenPenerima" name="hiddenPenerima">
                                <input type="hidden" id="hiddenAccount" name="hiddenAccount">
                                <h1 class="payment-title">Deposite Form</h1>
                                <div class="payment-method">
                                    @foreach ($banks as $bank)
                                        <input type="radio" name="payment-method" id="method-{{ $bank->id }}"
                                            data-bank-name="{{ $bank->nama_bank }}"
                                            data-recipient-name="{{ $bank->nama_penerima }}"
                                            data-account="{{ $bank->no_rek }}"
                                            data-image-qr="{{ asset('storage/' . $bank->image_qr) }}" />
                                        <label for="method-{{ $bank->id }}" class="payment-method-item">
                                            <img src="{{ asset('storage/' . $bank->image_qr) }}"
                                                alt="{{ $bank->nama_bank }}" />
                                        </label>
                                    @endforeach
                                </div>
                                <div class="payment-form-group">
                                    <input type="accName" placeholder="" class="payment-form-control" id="accName"
                                        name="accName" value="{{ Auth()->User()->accName }}" readonly
                                        style="background: rgb(192, 190, 190);color: rgb(23, 22, 22);" />

                                </div>
                                <div class="payment-form-group">
                                    <input type="accNumber" placeholder=" " class="payment-form-control" id="accNumber"
                                        value="{{ Auth()->User()->bank }} - {{ Auth()->User()->accNumber }}"
                                        name="bankMember" readonly
                                        style="background: rgb(192, 190, 190);color: rgb(33, 32, 32);" />
                                </div>
                                <style>
                                    .payment-form-group {
                                        margin-bottom: 20px;
                                    }

                                    .payment-form-label {
                                        display: block;
                                        font-size: 1.2rem;
                                        margin-bottom: 5px;
                                    }

                                    .payment-form-label-required::after {
                                        content: " *";
                                        color: red;
                                    }

                                    .payment-form-control-bonus {
                                        width: 100%;
                                        padding: 8px;
                                        font-size: 1.4rem;
                                        border: 1px solid #ccc;
                                        border-radius: 5px;
                                        box-sizing: border-box;
                                    }
                                </style>
                                <div class="payment-form-group">
                                    <select name="bonus" class="payment-form-control-bonus" id="bonusSelect">
                                        <option value="" style="color: rgb(36, 35, 35);font-size: 1rem">Select Bonus
                                        </option>
                                        @foreach ($promotion as $promo)
                                            <option value="{{ $promo->bonus }}" data-promo-id="{{ $promo->id }}"
                                                style="color: rgb(36, 35, 35);">
                                                {{ $promo->keterangan }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <input type="hidden" name="promo_id" id="promo_id">
                                <div class="payment-form-group">
                                    <input type="text" placeholder="Catatan" id="describe"
                                        class="payment-form-control" data-description="" name="notes" />

                                </div>
                                <div class="payment-form-group">
                                    <input type="number" placeholder="Amount" class="payment-form-control"
                                        id="amount" data-amount="" name="amount" />
                                </div>
                                <div class="payment-form-group">
                                    <input class="form-control" type="file" id="image" name="img"
                                        onchange="previewImage()" accept=".jpg, .jpeg, .png , .webp">
                                </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>
        document.getElementById('bonusSelect').addEventListener('change', function() {
            var bonusValue = this.value;
            var selectedOption = this.options[this.selectedIndex];
            var promoIdValue = selectedOption.getAttribute('data-promo-id');
            document.getElementById('promo_id').value = promoIdValue;
        });
    </script>

    <script>
        document.getElementById('fileInput').addEventListener('change', function() {
            var fileName = this.value.split('\\').pop();
            var fileLabel = document.querySelector('.file-name');
            fileLabel.textContent = fileName;
        });
    </script>
    <script>
        function updatePaymentRight(bankName, recipientName, account) {
            document.getElementById('hiddenBank').value = bankName;
            document.getElementById('hiddenPenerima').value = recipientName;
            document.getElementById('hiddenAccount').value = account;
        }

        var radioInputs = document.querySelectorAll('input[type="radio"][name="payment-method"]');
        radioInputs.forEach(function(radioInput) {
            radioInput.addEventListener('change', function() {
                var bankName = this.getAttribute('data-bank-name');
                var recipientName = this.getAttribute('data-recipient-name');
                var account = this.getAttribute('data-account');
                updatePaymentRight(bankName, recipientName, account);
            });
        });
    </script>
    <script>
        function previewImage() {
            const image = document.querySelector('#image');
            const imagePreview = document.querySelector('.img-preview');

            imagePreview.style.display = "block";

            const oFReader = new FileReader();
            oFReader.readAsDataURL(image.files[0]);

            oFReader.onload = function(oFREvent) {
                imagePreview.src = oFREvent.target.result;
            }

        }

        function formatRupiah(angka) {
            var number_string = 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 rupiah;
        }
    </script>
    <script>
        const selectElement = document.querySelector('select[name="bonus"]');
        const bonusLeftElem = document.getElementById('bonus-left');
        const radioButtons = document.querySelectorAll('input[name="payment-method"]');
        const bankNameElem = document.getElementById('bank-name-right');
        const recipientNameElem = document.getElementById('bank-account-right');
        const accountElem = document.getElementById('bank-number-right');
        const imageElem = document.getElementById('bank-image');
        const descriptionLeftElem = document.getElementById('description-left');
        const describeInput = document.getElementById('describe');
        const amountLeftElem = document.getElementById('amount-left');
        const amountInput = document.getElementById('amount');
        const totalPaymentElem = document.getElementById('total-payment');
        const senderBankElem = document.getElementById('sender-bank');
        const senderNameElem = document.getElementById('sender-name');

        function updatePaymentDetails() {
            const selectedRadio = document.querySelector('input[name="payment-method"]:checked');
            if (selectedRadio) {
                const bankName = selectedRadio.getAttribute('data-bank-name');
                const recipientName = selectedRadio.getAttribute('data-recipient-name');
                const account = selectedRadio.getAttribute('data-account');
                const imageUrl = selectedRadio.getAttribute('data-image-qr');
                const description = describeInput.value;
                const amount = amountInput.value;
                const bonus = selectElement.value;
                const totalAmount = parseFloat(amount);

                bankNameElem.textContent = bankName;
                recipientNameElem.textContent = recipientName;
                accountElem.textContent = account;
                imageElem.src = imageUrl;
                descriptionLeftElem.textContent = description || 'No description';
                amountLeftElem.textContent = amount || 'No amount';
                bonusLeftElem.textContent = bonus + '%';

                totalPaymentElem.textContent = 'IDR ' + formatRupiah(totalAmount);
            }

            senderBankElem.innerHTML = `
            <div class="payment-summary-price">
                {{ Auth()->User()->bank }} - {{ Auth()->User()->accNumber }}
            </div>
        `;
            senderNameElem.innerHTML = `
            <div class="payment-summary-price">
                {{ Auth()->User()->accName }}
            </div>
        `;
        }

        radioButtons.forEach((radio) => {
            radio.addEventListener('change', updatePaymentDetails);
        });

        selectElement.addEventListener('change', () => {
            bonusLeftElem.textContent = selectElement.value;
            radioButtons.forEach((radio) => {
                if (radio.value === selectElement.value) {
                    radio.checked = true;
                }
            });
            updatePaymentDetails();
        });

        describeInput.addEventListener('input', updatePaymentDetails);
        amountInput.addEventListener('input', updatePaymentDetails);

        updatePaymentDetails();
    </script>
@endsection