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

<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="withdraw" class="tab-pane fade active in">
                    <h4 class="hidden-xs hidden-sm" style="margin-left: 15px;">Withdraw</h4>

                    <div class="row">
                        <div class="col-md-6 col-xs-12">
                            <span id="withdraw_form">
                                <div class="panel panel-danger">
                                    <div class="panel-heading">
                                        <strong><span class="glyphicon glyphicon-export" style="margin-right:5px;"></span>Withdraw</strong>
                                    </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

                                        <form class="form-group-sm withdraw_form" action="{{ route('transaksi.withdraw') }}" method="POST">
                                            @csrf
                                            <div class="form-group">
                                                <label>Rekening Tujuan Withdraw</label>
                                                <input type="text" class="form-control" name="bank" readonly="" value="{{ auth()->user()->nama_bank }} / {{ auth()->user()->nomor_rekening }} / {{ auth()->user()->nama_pemilik }}">
                                            </div>
                                            
                                            <div class="form-group">
                                                <label>Jumlah</label>
                                                <input type="text" class="form-control text-right" name="RealAmount" style="font-weight:bold" id="jumlah_withdraw">
                                            </div>
                                            
                                            <div class="form-group" id="input_catatan">
                                                <label>Catatan: </label>
                                                <input type="text" class="form-control" placeholder="max 24 karakter (bila diperlukan)" maxlength="24" name="keterangan" style="font-weight:bold" id="catatan">
                                            </div>
                                            
                                            <input type="submit" class="btn btn-info btn-block" id="konfirmasi_withdraw" style="font-weight: bold; font-size: 15px; padding: 10px; margin-top: 15px;" value="Request Withdraw">
                                        </form>
                                    </div>
                                </div>
                            </span>
                        </div>

                        <div class="col-md-6 col-xs-12">
                            <div class="panel" style="margin-top: 0px; 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 Penarikan (Withdraw)
                                </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>
                                        Dana hanya dapat ditarik ke <strong style="color: #fff;">Rekening Bank yang telah Anda daftarkan</strong>. Kami tidak melayani penarikan dana ke rekening pihak ketiga demi keamanan akun Anda.
                                    </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 penarikan: <strong style="color: #fff;">Rp 50.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-ok-circle" style="color: #5bc0de; margin-right: 5px;"></span> 
                                            Pastikan Anda <strong>tidak memiliki sisa syarat Turnover (TO)</strong> jika sebelumnya mengklaim bonus.
                                        </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 withdraw <strong style="color: #fff;">1x saja</strong> dan tunggu hingga saldo masuk ke rekening Anda.
                                        </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-lock" style="font-size: 18px; margin-bottom: 5px; display: block;"></span>
                                        <p style="margin: 0; font-size: 13px;">Transaksi Anda dijamin aman. Hubungi Customer Service jika terdapat kendala pencairan dana.</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 OTOMATIS ---
    $('#jumlah_withdraw').on('keyup', function() {
        // Hapus karakter selain angka
        var value = $(this).val().replace(/[^0-9]/g, '');
        if(value) {
            // Format ke ribuan Indonesia (contoh: 50.000)
            $(this).val(parseInt(value).toLocaleString('id-ID'));
        }
    });

    // --- 2. VALIDASI SAAT SUBMIT FORM WITHDRAW ---
    $('.withdraw_form').submit(function(e) {
        
        // A. Hapus error lama (Reset)
        $(this).find('.alert-danger').slideUp(200, function() {
            $(this).remove();
        });

        var errorMsg = "";
        
        // Ambil Value
        var jumlah = $('#jumlah_withdraw').val();
        var jumlahBersih = jumlah.replace(/[^0-9]/g, ''); // Ambil angka murni (tanpa titik)
        
        // --- LOGIKA VALIDASI ---

        // 1. Cek Kosong
        if (jumlah === "") {
            errorMsg = "Mohon isi <b>Jumlah</b> yang ingin ditarik.";
        }
        // 2. Cek Minimal Withdraw (Contoh: 50.000)
        else if (parseInt(jumlahBersih) < 50000) {
            errorMsg = "Minimal penarikan dana (Withdraw) adalah <b>Rp 50.000</b>.";
        }

        // --- KEPUTUSAN ---
        
        if (errorMsg !== "") {
            e.preventDefault(); // Tahan form

            // Buat elemen DIV error
            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>';

            // Masukkan DIV ke bagian paling atas form withdraw
            $(this).prepend(divError);

            // Animasi Muncul
            $(this).find('.alert-danger').slideDown(300);

            // Scroll layar ke form (biar kelihatan di HP)
            $('html, body').animate({
                scrollTop: $(this).offset().top - 50
            }, 500);

            return false;
        }

        // Jika valid, minta konfirmasi terakhir
        return confirm("Anda akan melakukan penarikan dana sebesar Rp " + jumlah + ". Lanjutkan?");
    });

});
</script>
@endsection