@extends('layouts.app')
@section('content')
@php use SimpleSoftwareIO\QrCode\Facades\QrCode; @endphp
    <div class="container">
        <section class="deposit">

            <header class="page-header">
                <i class="icon-deposit icon--lg"></i>
                <h3>Deposit</h3>
            </header>

            <nav class="side-nav">
                <ul data-v-70a1e4da="" style="grid-template-columns: 1fr 1fr 1fr;">
                    @if($menu['deposit_pga'] ?? false)
				    <li data-v-70a1e4da="" class="side-nav__item">
				        <a data-v-70a1e4da="" href="/deposit/otomatis" id="dynQrisBtn" data-target="dppga" class="side-nav__item {{ $mode == 'otomatis' ? 'side-nav__item--active' : '' }}">
				            <!--?xml version="1.0" encoding="utf-8"?-->
				            <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
				                <rect x="3" y="3" width="7" height="7" rx="1" stroke="#ffffff" stroke-width="2"></rect>
				                <rect x="3" y="14" width="7" height="7" rx="1" stroke="#ffffff" stroke-width="2"></rect>
				                <rect x="14" y="3" width="7" height="7" rx="1" stroke="#ffffff" stroke-width="2"></rect>
				                <rect x="13" y="13" width="3" height="3" rx="0.5" fill="#ffffff"></rect>
				                <rect x="16" y="16" width="3" height="3" rx="0.5" fill="#ffffff"></rect>
				                <rect x="19" y="13" width="3" height="3" rx="0.5" fill="#ffffff"></rect>
				                <rect x="19" y="19" width="3" height="3" rx="0.5" fill="#ffffff"></rect>
				                <rect x="13" y="19" width="3" height="3" rx="0.5" fill="#ffffff"></rect>
				            </svg>
				            <span class="category-title">Otomatis</span>
				        </a>
				    </li>
				    @endif
				    @if($menu['deposit_manual'] ?? false)
				    <li data-v-70a1e4da="" class="side-nav__item {{ $mode == 'bank' ? 'side-nav__item--active' : '' }}">
				        <a data-v-70a1e4da="" href="/deposit/bank">
				            <i data-v-0e010622="" data-v-70a1e4da="" class="icon-bank-transfer icon--md"></i>
				            <span data-v-70a1e4da="">Bank</span>
				        </a>
				    </li>
				    @endif
				    @if($menu['deposit_qris'] ?? false)
				    <li data-v-70a1e4da="" class="side-nav__item {{ $mode == 'qris' ? 'side-nav__item--active' : '' }}">
				        <a data-v-70a1e4da="" href="/deposit/qris">
				            <i data-v-0e010622="" data-v-70a1e4da="" class="icon-qris icon--md"></i>
				            <span data-v-70a1e4da="">QRIS</span>
				        </a>
				    </li>
				    @endif
				</ul>
            </nav>
        {{-- ================= PENDING ================= --}}
        @if($pending && $pending->status === 'pending')
        
        <div class="deposit-content">
        
            {{-- ================= BANK ================= --}}
            @if(
                $pending->payment_type === 'deposit' &&
                !empty($pending->account_number) &&
                !empty($pending->account_name)
            )
        
            <div class="deposit-pending">
                <div class="alert alert--success alert--icon-top">
                    <i class="icon-info icon--lg"></i>
        
                    <div class="alert__content">
                        <h4>Bank Transfer</h4>
                        <p>
    							Permintaan Deposit anda sudah kami terima, jika anda belum melakukan pembayaran, harap melakukan pembayaran ke:
							</p>
        
                        <ul class="deposit-detail">
                            <li><span>Nama Bank</span><p>{{ $pending->bank }}</p></li>
                            <li><span>Nama Rekening</span><p>{{ $pending->account_name }}</p></li>
                            <li><span>Nomor Rekening</span><p>{{ $pending->account_number }}</p></li>
                            <li><span>Jumlah</span><p>Rp {{ number_format($pending->amount,0,',','.') }}</p></li>
                            <li><span>Biaya Layanan</span><p>Rp {{ number_format($pending->unique_code, 0, ',', '.') }}</p></li>
                            <li><span>Total</span><p>Rp {{ number_format($pending->amount,0,',','.') }}</p></li>
                        </ul>
        
                        <p>
    							Jika anda sudah melakukan pembayaran, mohon menunggu beberapa saat, saldo anda akan bertambah secara otomatis. Terima kasih dan selamat bermain!
							</p>
                    </div>
                </div>
            </div>
        
            {{-- ================= QRIS MANUAL ================= --}}
            @elseif(
                $pending->payment_type === 'deposit' &&
                empty($pending->account_number) &&
                !empty($pending->qrdata)
            )
        
            <div class="deposit-pending">
                <div class="alert alert--success alert--icon-top">
                    <i class="icon-info icon--lg"></i>
        
                    <div class="alert__content">
                        <h4>QRIS</h4>
        
                        <ul class="deposit-detail">
                            <li><span>Metode</span><p>QRIS Payment</p></li>
                            <li><span>Jumlah</span><p>Rp {{ number_format($pending->amount, 0, ',', '.') }}</p></li>
        
                            @if($pending->unique_code)
                            <li><span>Kode Unik</span>
                                <p>Rp {{ number_format($pending->unique_code, 0, ',', '.') }}</p>
                            </li>
                            @endif
        
                            <li><span>Total</span>
                                <p>Rp {{ number_format($pending->amount, 0, ',', '.') }}</p>
                            </li>
                        </ul>
        
                        <div style="text-align:center; margin:20px 0;">
                            {!! QrCode::size(220)->generate($pending->qrdata) !!}
                        </div>
                        <p>
                            Jika anda sudah melakukan pembayaran, mohon menunggu beberapa saat,
                            saldo anda akan bertambah secara otomatis.
                            Terima kasih dan selamat bermain!
                        </p>
                    </div>
                </div>
            </div>
        
            {{-- ================= QRIS OTOMATIS ================= --}}
            @elseif($pending->payment_type === 'otomatis')
        
            <div class="deposit-pending">
                <div class="alert alert--success alert--icon-top">
                    <i class="icon-info icon--lg"></i>
        
                    <div class="alert__content">
                        <h4>QRIS Otomatis</h4>
        
                        <ul class="deposit-detail">
                            <li><span>Metode</span><p>QRIS Otomatis</p></li>
                            <li><span>Nominal</span><p>Rp {{ number_format($pending->amount, 0, ',', '.') }}</p></li>
                            <li><span>Total</span><p>Rp {{ number_format($pending->amount, 0, ',', '.') }}</p></li>
                        </ul>
        
                        <div style="text-align:center; margin:20px 0;">
                            {!! QrCode::size(240)->generate($pending->qrdata) !!}
                        </div>
        
                        <p style="margin-top:10px;">
                            QR berlaku beberapa menit. Segera lakukan pembayaran.
                        </p>
                        <p>
                            Setelah pembayaran berhasil, saldo akan masuk otomatis tanpa perlu konfirmasi.
                        </p>
                    </div>
                </div>
            </div>
            @endif
        </div>
        {{-- ================= JIKA TIDAK ADA PENDING ================= --}}
        @else
        @if(!$pending && request()->routeIs('deposit.status'))
        <div class="deposit-content">
            <div class="alert alert--info">
                <i class="icon-info icon--lg"></i>
                <p>Anda tidak memiliki transaksi pending</p>
            </div>
        </div>
        @endif
        {{-- ================= FORM (HANYA SAAT TIDAK ADA PENDING) ================= --}}
        <div id="divdepoform">
        
            @if($mode === 'bank')
            <div id="dpbank">
                @include('mobile.partials.pages.dpbank')
            </div>
            @endif
        
            @if($mode === 'qris')
            <div id="dpqris">
                @include('mobile.partials.pages.dpqris')
            </div>
            @endif
        
            @if($mode === 'otomatis')
            <div id="dppga">
                @include('mobile.partials.pages.otomatis')
            </div>
            @endif
        </div>
        @endif
        </section>
    </div>
    <!-- MODAL -->
    <div id="modalDepositSetting" class="modal" style="display:none;">
        <div class="modal__backdrop"></div>

        <div class="modal__root">
            <div class="modal__surface surface">

                <header class="modal__header">
                    <h3>Pengaturan Deposit</h3>
                </header>

                <section class="modal__body">
                    <div class="deposit-settings">
                        <form>

                            <div class="input-confirm">
                                <label class="input-confirm__label">
                                    <i class="icon-square icon--md"></i>
                                    <span>Gunakan nominal terakhir</span>
                                </label>
                                <input type="checkbox">
                            </div>

                            <div class="deposit-settings__presets">
                                <label>Pilih nominal</label>

                                @for($i=1; $i<=4; $i++)
                                <div class="input__container">
                                    <div class="input__root">
                                        <input type="number" class="input input--hidden">
                                        <input type="text" class="input" placeholder="#{{ $i }}">
                                        <i class="input__icon icon-coins icon--xs"></i>
                                    </div>
                                </div>
                                @endfor

                            </div>

                            <div class="deposit-settings__actions">
                                <button type="button" class="btn btn--block btn--primary">Reset</button>
                                <button type="submit" class="btn btn--block btn--success">Simpan</button>
                            </div>
                        </form>
                    </div>
                </section>
            </div>
            <button type="button" class="btn--flex btn--round--sm modal__close" onclick="closeDepositModal()">
                <i class="icon-times-circle icon--lg"></i>
            </button>
        </div>
    </div>
<script>
function openDepositModal() {
    const modal = document.getElementById('modalDepositSetting');
    if (modal) modal.style.display = 'block';
}

function closeDepositModal() {
    const modal = document.getElementById('modalDepositSetting');
    if (modal) modal.style.display = 'none';
}

document.addEventListener('DOMContentLoaded', function () {

    const buttons = document.querySelectorAll('.btn-deposit');
    const panels = document.querySelectorAll('.deposit-panel');
    const navItems = document.querySelectorAll('.side-nav__item');

    const injectAuto = document.getElementById('injectautodepoqris');
    const depoForm = document.getElementById('divdepoform');

    buttons.forEach((btn, index) => {
        btn.addEventListener('click', function (e) {

            if (this.getAttribute('href') !== '#') return;

            e.preventDefault();

            const target = this.dataset.target;

            resetState();

            if (injectAuto) injectAuto.style.display = 'none';
            if (depoForm) depoForm.style.display = 'block';

            panels.forEach(panel => panel.style.display = 'none');

            if (target === 'otomatis') {
                if (injectAuto) injectAuto.style.display = 'block';
                if (depoForm) depoForm.style.display = 'none';
            } else {
                const el = document.getElementById(target);
                if (el) el.style.display = 'block';
            }

            navItems.forEach(item => item.classList.remove('side-nav__item--active'));
            if (navItems[index]) navItems[index].classList.add('side-nav__item--active');

        });
    });

    function resetState() {
        document.querySelectorAll('.bonus-panel__options').forEach(el => el.style.maxHeight = "0px");
        document.querySelectorAll('.bonus-panel__item i').forEach(icon => icon.className = "icon-square icon--md");
        document.querySelectorAll('.bonus-panel__current').forEach(el => el.style.display = "none");
        document.querySelectorAll('input[name="bonus"]').forEach(r => r.checked = false);
        document.querySelectorAll('[id^="bonusButton"]').forEach(btn => btn.innerText = "Pilih Bonus");
    }

});
</script>
@endsection