@extends('layouts.app')
@section('content')
@php use SimpleSoftwareIO\QrCode\Facades\QrCode; @endphp
    <div class="container">
        @include('desktop.partials.runningtext')
        @include('desktop.partials.breadcrumb')
        <section class="deposit deposit--d">
        <header class="page-header">
            <i class="icon-deposit icon--2x"></i>
            <h3>Deposit</h3>
        </header>

        <nav class="side-nav side-nav--d">
            <ul>
                @if($menu['deposit_pga'] ?? false)
                    <li class="side-nav__item {{ $mode === 'otomatis' ? 'side-nav__item--active' : '' }}">
                        <a href="{{ url('/deposit/otomatis') }}">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <rect x="3" y="3" width="7" height="7" rx="1" stroke="#fff" stroke-width="2"/>
                                <rect x="3" y="14" width="7" height="7" rx="1" stroke="#fff" stroke-width="2"/>
                                <rect x="14" y="3" width="7" height="7" rx="1" stroke="#fff" stroke-width="2"/>
                                <rect x="13" y="13" width="3" height="3" rx=".5" fill="#fff"/>
                                <rect x="16" y="16" width="3" height="3" rx=".5" fill="#fff"/>
                                <rect x="19" y="13" width="3" height="3" rx=".5" fill="#fff"/>
                                <rect x="19" y="19" width="3" height="3" rx=".5" fill="#fff"/>
                                <rect x="13" y="19" width="3" height="3" rx=".5" fill="#fff"/>
                            </svg>
                            <span>Otomatis</span>
                        </a>
                    </li>
                @endif

                @if($menu['deposit_manual'] ?? false)
                    <li class="side-nav__item {{ $mode === 'bank' ? 'side-nav__item--active' : '' }}">
                        <a href="{{ url('/deposit/bank') }}">
                            <i class="icon-bank-transfer icon--md"></i>
                            <span>Bank</span>
                        </a>
                    </li>
                @endif

                @if($menu['deposit_qris'] ?? false)
                    <li class="side-nav__item {{ $mode === 'qris' ? 'side-nav__item--active' : '' }}">
                        <a href="{{ url('/deposit/qris') }}">
                            <i class="icon-qris icon--md"></i>
                            <span>QRIS</span>
                        </a>
                    </li>
                @endif
            </ul>
        </nav>

        @if($pending && $pending->status === 'pending')
            @php
                $isBank = $pending->payment_type === 'deposit'
                    && !empty($pending->account_number)
                    && !empty($pending->account_name);

                $isQris = ($pending->payment_type === 'deposit' && empty($pending->account_number) && !empty($pending->qrdata))
                    || $pending->payment_type === 'otomatis';

                $isOtomatis = $pending->payment_type === 'otomatis';
            @endphp

            <div class="deposit-content">
                <div class="deposit-pending">
                    <div class="alert alert--success alert--icon-top">
                        <i class="icon-info icon--lg"></i>

                        <div class="alert__content">
                            @if($isBank)
                                <h4>Bank Transfer</h4>
                                <p>Permintaan deposit anda sudah kami terima. Jika belum melakukan pembayaran, harap transfer ke rekening berikut:</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 sudah melakukan pembayaran, mohon menunggu beberapa saat sampai saldo bertambah otomatis.</p>
                            @elseif($isQris)
                                <h4>{{ $isOtomatis ? 'QRIS Otomatis' : 'QRIS' }}</h4>
                                <p>Permintaan deposit anda sudah kami terima. Silakan lakukan pembayaran melalui QRIS berikut:</p>

                                <ul class="deposit-detail">
                                    <li><span>Metode</span><p>{{ $isOtomatis ? 'QRIS Otomatis' : 'QRIS Payment' }}</p></li>
                                    <li><span>Jumlah</span><p>Rp {{ number_format($pending->amount, 0, ',', '.') }}</p></li>

                                    @if(!$isOtomatis && $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($isOtomatis ? 240 : 220)->generate($pending->qrdata) !!}
                                </div>

                                <p>
                                    {{ $isOtomatis
                                        ? 'QR berlaku beberapa menit. Setelah pembayaran berhasil, saldo akan masuk otomatis.'
                                        : 'Jika sudah melakukan pembayaran, mohon menunggu beberapa saat sampai saldo bertambah otomatis.'
                                    }}
                                </p>

                                @if($isOtomatis && !empty($pending->checkout_url))
                                    <a href="{{ $pending->checkout_url }}" target="_blank" class="deposit-pending__receipt btn btn--flex btn--dark">
                                        Lihat bukti deposit
                                    </a>
                                @endif
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @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

            <div id="divdepoform" class="deposit-content">
                @if($mode === 'bank')
                    <div id="dpbank">@include('desktop.partials.pages.dpbank')</div>
                @elseif($mode === 'qris')
                    <div id="dpqris">@include('desktop.partials.pages.dpqris')</div>
                @elseif($mode === 'otomatis')
                    <div id="dppga">@include('desktop.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