@extends('frontend.userarea.layouts.main')
@section('content')

<style>
    /* Animasi & Tabs */
    .flashing-animation {
        background-color: white;
        animation-name: example;
        animation-duration: .75s;
    }
    @keyframes flashing-frame {
        0% {background-color: white;}
        50% {background-color: blue;}
        100% {background-color: white;}
    }
    .nav-pills.pills-wrapped .depo-second-row { margin-top: 10px; }
    
    /* Penyesuaian Flexbox agar QRIS & VA rapi di Mobile & Desktop */
    .nav-pills.nav-pills-qris-satu-va { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
    .nav-pills.nav-pills-qris-satu-va li { margin: 0; flex: 1; min-width: 48%; }
    .nav-pills.nav-pills-qris-satu-va li a { text-align: center; width: 100%; padding: 10px 5px; }

    /* Kotak Bonus Info */
    .bonus-detail-box {
        background-color: rgb(31 33 35 / 45%) !important;
        color: #ffffff;
        padding: 10px;
        border-radius: 10px;
        margin-bottom: 10px;
    }
    .bonus-detail-title { color: #ffd700; font-weight: bold; font-size: 12px; margin-bottom: 10px; font-family: inherit; }
    .bonus-detail-row-full { display: grid; grid-template-columns: 100px 10px 1fr; gap: 5px; margin-bottom: 8px; font-size: 12px; align-items: start; }
    .bonus-detail-row { display: grid; grid-template-columns: 100px 10px 120px 90px 10px 120px; gap: 5px; margin-bottom: 8px; font-size: 12px; align-items: start; }
    .bonus-detail-row .bonus-detail-label:nth-child(1) { justify-self: start; }
    .bonus-detail-row .bonus-detail-separator:nth-child(2) { justify-self: center; }
    .bonus-detail-row .bonus-detail-value:nth-child(3) { justify-self: start; text-align: left; }
    .bonus-detail-row .bonus-detail-label:nth-child(4) { justify-self: start; margin-left: 0px; }
    .bonus-detail-row .bonus-detail-separator:nth-child(5) { justify-self: center; margin-left: -5px; }
    .bonus-detail-row .bonus-detail-value:nth-child(6) { justify-self: start; text-align: left; margin-left: -5px; }
    .bonus-detail-full { margin-bottom: 5px; font-size: 12px; font-weight: normal; font-family: inherit; }
    .bonus-detail-produk { background-color: rgb(31 33 35 / 0%); padding: 8px 8px; border-radius: 5px; margin-top: 2px; color: #ffffff; word-wrap: break-word; word-break: break-all; overflow-wrap: break-word; font-size: 12px; font-weight: normal; font-family: inherit; line-height: 1.4; }
    .bonus-detail-label { color: #cccccc; white-space: nowrap; font-weight: normal; font-size: 12px; font-family: inherit; }
    .bonus-detail-separator { text-align: center; color: #ffffff; font-weight: normal; font-size: 12px; font-family: inherit; }
    .bonus-detail-value { color: #ffffff; font-weight: normal; font-size: 12px; font-family: inherit; word-wrap: break-word; overflow-wrap: break-word; line-height: 1.3; }
</style>

<div style="height:10px; background-color:#FFF" class="grabgtabbottom"></div>    

<div class="tab-content" style="visibility: visible;">
    <div id="dashboard_wrap" class="tab-pane fade in active">
        <div id="dashboard_statusdown" class="text-center"></div>
        <div id="dashboard">
            @include('frontend.userarea.transaction.navbar')
            
            <div class="tab-content" style="visibility: visible; margin-top: 10px;">
                <div id="deposit" class="tab-pane fade active in">
                    <h4 class="hidden-xs hidden-sm" style="margin-left: 15px;">Deposit</h4>

                    <div class="row">
                        <div class="col-md-6 col-xs-12">
                            <div id="outputDeposit"></div>
                            <div id="statusDeposit" style="display: none;"></div>
                            <div id="infoDeposit"></div>
                            
                            <span id="deposit_form">
                                <div class="panel panel-danger">
                                    <div class="panel-heading" style="display: flex; justify-content: space-between; align-items: center;">
                                        <strong><span class="glyphicon glyphicon-import" style="margin-right:5px;"></span>Deposit</strong>
                                        @if (!empty($check_qr))
                                            <a href="javascript:;" class="btn btn-warning btn-xs" data-dismiss="modal" data-toggle="modal" data-target="#myModal" style="color: #fff; font-weight: bold;">
                                                Pending
                                            </a>
                                        @endif
                                    </div>
                                    
                                    <div class="panel-body">
                                        @if (\Session::has('success'))
                                            <div class="alert alert-success">
                                                <ul style="margin:0; padding-left:15px;"><li>{!! \Session::get('success') !!}</li></ul>
                                            </div>
                                        @elseif (\Session::has('error'))
                                            <div class="alert alert-danger">
                                                <ul style="margin:0; padding-left:15px;"><li>{!! \Session::get('error') !!}</li></ul>
                                            </div>
                                        @endif

                                        <ul class="nav nav-pills" id="depo-nav-pills" style="margin-bottom: 15px;">
                                            @if (!empty($qris))
                                                <li class="active">
                                                    <a data-toggle="tab" href="#depoHSPAY" style="padding-left: 10px; padding-right: 10px">
                                                        <strong>HSPAY</strong>
                                                        <span style="position:absolute; margin-top:-26px; margin-left:-53px;">
                                                            <img src="https://img.viva88athenae.com/gratis.png" width="64" alt="">
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="depo-second-row">
                                                    <a data-toggle="tab" href="#depobank" style="padding-left: 10px; padding-right: 10px"><strong>Bank/E-Wallet/Pulsa</strong></a>
                                                </li>
                                            @else
                                                <li class="depo-second-row active">
                                                    <a data-toggle="tab" href="#depobank" style="padding-left: 10px; padding-right: 10px"><strong>Bank/E-Wallet/Pulsa</strong></a>
                                                </li>
                                            @endif
                                        </ul>

                                        <div class="tab-content">
                                            <div id="depobank" class="tab-pane fade in @if (empty($qris)) active @else @endif">
                                                <form class="form-group-sm deposit_form" action="/api/bank/setDeposit" method="POST">
                                                    @csrf
                                                    <div class="form-group">
                                                        <label>Rekening Asal</label>
                                                        <select class="form-control rekasal" name="dari_bank">
                                                            <option value="{{ auth()->user()->nama_bank }} / {{ auth()->user()->nomor_rekening }} / {{ auth()->user()->nama_pemilik }}" selected="" att="76">{{ auth()->user()->nama_bank }} {{ censor(auth()->user()->nomor_rekening, 4) }} {{ censor(auth()->user()->nama_pemilik, 4) }}</option>
                                                        </select>
                                                    </div>
                                                    
                                                    <div class="form-group">
                                                        <label>Rekening Tujuan Deposit</label>
                                                        <span id="salinrekening">
                                                            <a title="Salin No Rekening" id="btnSalin" href="javascript:salinnorek();" style="text-decoration: underline;">
                                                                <span style="float: right;"><span class="glyphicon glyphicon-duplicate" style="margin-left: 20px; margin-right:3px;"></span><u>Salin</u></span>
                                                            </a>
                                                            <span id="notesalin" style="float: right; display: none;" class="text-success">Berhasil disalin!</span>
                                                        </span>
                                                        <select class="form-control" name="TransferTo" id="bankSelect">
                                                            <option value="">--- Pilih Bank ---</option>
                                                            @foreach ($bank as $bks)
                                                                <option value="{{ $bks->id }}" free="" ogtext="{{ strtoupper($bks->nama_bank) }} - {{ $bks->nama_pemilik }} - {{ $bks->nomor_rekening }}" detail="{{ strtoupper($bks->nama_bank) }} - {{ $bks->nama_pemilik }} - {{ $bks->nomor_rekening }}" att="" rek="{{ $bks->nomor_rekening }}" rekgroup="">{{ strtoupper($bks->nama_bank) }} - {{ $bks->nama_pemilik }} - {{ $bks->nomor_rekening }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    
                                                    <input type="hidden" id="BankId" name="nama_bank" value="bankmanual">
                                                    
                                                    <div class="rows">
                                                        <div id="nonqr" class="col-xs-12" style="padding: 0px; width:100%">
                                                            <div class="well well-sm" style="margin-top: 15px; margin-bottom: 10px; display: block;" id="box_info_angka_nonunik">
                                                                <div id="info_angka_nonunik" style="display: block;">
                                                                    Untuk Deposit ke Rekening atau Emoney Berbeda,<br>Silakan tambahkan akun anda di menu <span class="glyphicon glyphicon-briefcase" style="margin-left: 5px"></span>Rekening   
                                                                </div>     
                                                            </div>
                                                            <div class="well well-sm" style="margin-top: 10px; display: none;" id="box_info_angka_unik">
                                                                <div id="info_angka_unik" style="display: none;"></div> 
                                                            </div>
                                                            
                                                            <div class="form-group">
                                                                <label>Bonus</label>
                                                                <select class="form-control rekasal" name="bonus">
                                                                    <option value="tanpabonus" selected="">Tanpa Bonus</option>
                                                                    @foreach ($bonus as $bns)
                                                                        <option value="{{ $bns->id }}">{{ $bns->judul }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            
                                                            <div class="form-group" id="box_jumlah_deposit_nonunik" style="display: block;">
                                                                <label id="jumlahLabel">Jumlah</label>
                                                                <input type="text" class="form-control text-right" name="RealAmount" style="font-weight:bold" id="jumlah_deposit">
                                                                <div class="error-message" id="uniqueError" style="display: none;"></div>
                                                            </div>

                                                            <div class="form-group" id="input_pengirim" style="display:none">
                                                                <label>Catatan: Nomor Pengirim / Kode SN / Nominal Unik</label>
                                                                <input type="text" class="form-control" maxlength="24" placeholder="max 24 karakter (harus diisi)" name="pengirim" style="font-weight:bold" id="pengirim">
                                                            </div>

                                                            <div class="form-group" id="input_catatan">
                                                                <label>Catatan: Nomor Rekord / Referensi</label>
                                                                <input type="text" class="form-control" maxlength="24" placeholder="max 24 karakter (bila diperlukan)" name="Note" style="font-weight:bold" id="catatan">
                                                            </div>
                                                            
                                                            <input type="submit" id="DepositSubmit" class="btn btn-info btn-block" style="font-weight: bold; font-size: 15px; padding: 10px;" value="Kirim">
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                            
                                            <div id="depoHSPAY" class="tab-pane fade in @if (!empty($qris)) active @else @endif">
                                                <div class="form-group">
                                                    <label style="margin: 0px; margin-bottom: 7px;">Metode Pembayaran</label>
                                                    <ul class="nav nav-pills nav-pills-qris-satu-va">
                                                        <li class="active">
                                                            <a data-toggle="pill" onclick="$('#bank_qris_hspay').val('QR'); $('#lanjutkan_pembayaran_qris_hspay').val('Lanjutkan Pembayaran QRIS');" style="cursor: pointer;">
                                                                <span class="glyphicon glyphicon-qrcode" style="margin-right:5px;"></span><strong>QRIS</strong>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a data-toggle="pill" onclick="$('#bank_qris_hspay').val('BRI'); $('#lanjutkan_pembayaran_qris_hspay').val('Lanjutkan Pembayaran BRI Virtual Account');" style="cursor: pointer;">
                                                                <span class="glyphicon glyphicon-credit-card" style="margin-right:5px;"></span><strong>BRI VA</strong>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>

                                                <div class="tab-content">
                                                    <div id="qris" class="tab-pane fade in active">
                                                        <form class="form-group-sm deposit_form_qris_hspay" action="/api/bank/setDeposit" method="POST">
                                                            @csrf
                                                            <div class="form-group">
                                                                <label>Bonus</label>
                                                                <select class="form-control rekasal" name="bonus">
                                                                    <option value="tanpabonus" selected="">Tanpa Bonus</option>
                                                                    @foreach ($bonus as $bns)
                                                                        <option value="{{ $bns->id }}">{{ $bns->judul }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            <div class="form-group">
                                                                <label>Jumlah</label>
                                                                <input type="text" class="form-control text-right jumlah" name="RealAmount" id="jumlah_deposit_qris_hspay" style="font-weight:bold">
                                                            </div>
                                                            <div class="form-group">
                                                                @if(!empty($qris))
                                                                    <input type="hidden" name="TransferTo" value="{{ $qris->id }}" id="bank_qris_hspay">
                                                                @else
                                                                    <input type="hidden" name="TransferTo" value="1" id="bank_qris_hspay">
                                                                @endif
                                                                <input type="hidden" name="dari_bank" value="{{ auth()->user()->nama_bank }} / {{ auth()->user()->nomor_rekening }} / {{ auth()->user()->nama_pemilik }}">
                                                                
                                                                <input type="submit" class="btn btn-info btn-block" style="font-weight: bold; font-size: 15px; padding: 10px;" id="DepositSubmitHspay" value="Kirim">
                                                            </div>
                                                            <div id="statusDeposit_qris_hspay"></div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </span>
                        </div>

                        <div class="col-md-6 col-xs-12">
                            <div id="bonus-detail-section"></div>
                            <div id="bonus-detail-section-crypto"></div>
                            
                            <div class="panel" style="margin-top: 15px; border-radius: 8px; overflow: hidden; border: 1px solid #444; background-color: #23272a;">
                                <div class="panel-heading" style="font-size: 16px; font-weight: bold; padding: 10px 15px; background-color: #1a1c1e; color: #5bc0de; border-bottom: 1px solid #333;">
                                    <span class="glyphicon glyphicon-info-sign" style="margin-right: 5px;"></span> Informasi Deposit
                                </div>
                                <div class="panel-body" style="font-size: 13px; line-height: 1.6; background-color: #23272a; color: #d1d5db;">
                                    
                                    <div class="alert" style="padding: 10px; margin-bottom: 15px; border-radius: 5px; background-color: rgba(220, 53, 69, 0.15); border: 1px solid rgba(220, 53, 69, 0.3); color: #ff6b6b;">
                                        <strong style="color: #ff8787;"><span class="glyphicon glyphicon-warning-sign"></span> PERHATIAN PENTING!</strong><br>
                                        Selalu perhatikan <strong style="color: #fff;">Nomor Rekening Tujuan</strong> yang tertera pada form. Kami tidak memberikan toleransi apabila terjadi kesalahan transfer ke rekening yang salah atau sudah tidak aktif.
                                    </div>

                                    <ul class="list-group" style="margin-bottom: 15px; box-shadow: none;">
                                        <li class="list-group-item" style="padding: 8px 15px; background-color: #2c2f33; border: 1px solid #444; border-left: 4px solid #5bc0de; border-radius: 0; color: #d1d5db;">
                                            <span class="glyphicon glyphicon-usd" style="color: #5bc0de; margin-right: 5px;"></span> 
                                            Minimal deposit: <strong style="color: #fff;">Rp 10.000,-</strong>
                                        </li>
                                        <li class="list-group-item" style="padding: 8px 15px; background-color: #2c2f33; border: 1px solid #444; border-left: 4px solid #5bc0de; border-radius: 0; border-top: 0; color: #d1d5db;">
                                            <span class="glyphicon glyphicon-time" style="color: #5bc0de; margin-right: 5px;"></span> 
                                            Harap konfirmasi deposit <strong style="color: #fff;">1x saja</strong> dan tunggu permohonan diproses sebelum melakukan deposit selanjutnya.
                                        </li>
                                    </ul>

                                    <div class="well well-sm" style="background-color: rgba(255, 215, 0, 0.08); border: 1px solid rgba(255, 215, 0, 0.2); color: #ffd700; text-align: center; margin-bottom: 0; border-radius: 5px; box-shadow: none;">
                                        <span class="glyphicon glyphicon-gift" style="font-size: 18px; margin-bottom: 5px; display: block;"></span>
                                        <p style="margin: 0; font-size: 14px;">Dapatkan <strong style="color: #fff;">Bonus New Member 20%</strong> untuk deposit awal!</p>
                                        <p style="margin: 0; font-size: 13px; margin-top: 3px;">Klaim <strong style="color: #fff;">Bonus Harian</strong> Anda saat ini juga!</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> <div class="row">
                        <div class="col-xs-12" style="margin-top: 15px;">
                            <a class="btn btn-primary btn-block hidden-md hidden-lg" href="{{ url()->previous() }}" role="button" style="font-weight:bold; margin-bottom: 20px;">
                                <span class="glyphicon glyphicon-menu-left"></span> Kembali
                            </a>
                            @include('frontend.userarea.desc')
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="clearfix visible-lg"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {

    // --- 1. FORMAT RUPIAH ---
    $('#jumlah_deposit').on('keyup', function() {
        var value = $(this).val().replace(/[^0-9]/g, '');
        if(value) {
            $(this).val(parseInt(value).toLocaleString('id-ID'));
        }
    });

    // --- 2. VALIDASI FORM SAAT SUBMIT (BANK) ---
    $('.deposit_form').submit(function(e) {
        $('#inputannya').slideUp(200, function() {
            $(this).remove();
        });

        var errorMsg = ""; 
        var bankTujuan = $('#bankSelect').val();
        var jumlah = $('#jumlah_deposit').val();
        var jumlahBersih = jumlah.replace(/[^0-9]/g, ''); 
        var pengirim = $('#pengirim').val();
        var butuhPengirim = $('#input_pengirim').is(':visible'); 

        if (bankTujuan === "") {
            errorMsg = "Mohon pilih <b>Bank Tujuan Deposit</b> terlebih dahulu.";
        } else if (jumlah === "" || parseInt(jumlahBersih) < {{general()->min_depo}}) {
            errorMsg = "Minimal deposit adalah <b>Rp {{number_format(general()->min_depo, 2)}}</b>.";
        } else if (butuhPengirim && pengirim.trim() === "") {
            errorMsg = "Mohon isi keterangan <b>Nama Pengirim / No. Referensi</b>.";
        }

        if (errorMsg !== "") {
            e.preventDefault(); 
            var divError = '<div id="inputannya" class="alert alert-danger" style="display:none; font-weight:bold; margin-bottom:15px;">' +
                           '<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> ' +
                           errorMsg + '</div>';

            $(this).prepend(divError);
            $('#inputannya').slideDown(300);

            $('html, body').animate({ scrollTop: $(this).offset().top - 50 }, 500);
            return false;
        }

        return confirm("Deposit sebesar Rp " + jumlah + " akan dikirim. Lanjutkan?");
    });

    // --- 3. FITUR SALIN NO REKENING ---
    window.salinnorek = function() {
        var selectedOption = $('#bankSelect option:selected');
        var rek = selectedOption.attr('rek');

        if(!rek || $('#bankSelect').val() === "") {
            $('#inputannya').remove(); 
            var msg = '<div id="inputannya" class="alert alert-warning" style="margin-bottom:15px;">Silakan pilih bank dulu!</div>';
            $('.deposit_form').prepend(msg);
            return;
        }

        var $temp = $("<textarea>");
        $("body").append($temp);
        $temp.val(rek).select();
        document.execCommand("copy");
        $temp.remove();

        $('#inputannya').slideUp(200, function(){ $(this).remove(); });

        var $notif = $('#notesalin');
        $notif.text('Tersalin: ' + rek);
        $notif.stop(true, true).fadeIn(200);
        setTimeout(function() { $notif.fadeOut(500); }, 2000);
    };
    
    // --- 4. FORMAT RUPIAH (Khusus Form QRIS) ---
    $('#jumlah_deposit_qris_hspay').on('keyup', function() {
        var value = $(this).val().replace(/[^0-9]/g, '');
        if(value) {
            $(this).val(parseInt(value).toLocaleString('id-ID'));
        }
    });

    // --- 5. VALIDASI SUBMIT FORM QRIS ---
    $('.deposit_form_qris_hspay').submit(function(e) {
        $(this).find('.alert-danger').slideUp(200, function() {
            $(this).remove();
        });

        var errorMsg = "";
        var jumlah = $('#jumlah_deposit_qris_hspay').val();
        var jumlahBersih = jumlah.replace(/[^0-9]/g, ''); 
        
        if (jumlah === "") {
            errorMsg = "Mohon isi <b>Jumlah Deposit</b> terlebih dahulu.";
        } else if (parseInt(jumlahBersih) < {{general()->min_depo}}) {
            errorMsg = "Minimal deposit QRIS adalah <b>Rp {{number_format(general()->min_depo, 2)}}</b>.";
        }

        if (errorMsg !== "") {
            e.preventDefault(); 
            var divError = '<div class="alert alert-danger" style="display:none; font-weight:bold; margin-bottom:15px;">' +
                           '<span class="glyphicon glyphicon-exclamation-sign"></span> ' +
                           errorMsg + '</div>';
            
            $(this).prepend(divError);
            $(this).find('.alert-danger').slideDown(300);

            $('html, body').animate({ scrollTop: $(this).offset().top - 50 }, 500);
            return false;
        }

        return confirm("Lanjutkan deposit QRIS sebesar Rp " + jumlah + "?");
    });
});
</script>
@endsection