@extends('frontend.layouts.app')

@section('content')

    <div id="showM">
        <div class="overlap g8mmenu-close"></div>
        @include('frontend.partials.mobile.header')
        @include('frontend.partials.mobile.sidebar-menu')

        <div class="content">
            <div class="profile">
                <div class="profile__header">
                    <div class="profile__header-title">Welcome,
                        <span class="g8-name">{{ Auth::user()->username }}</span>
                    </div>
                </div>
            </div>
            
            <div class="funds">
                
                <div class="funds__container">
                    <div class="funds__container-section">
                        
                        <table class="table table-sm deposit-settings-offline">
                            <tbody>
                                <tr>
                                    <td>Nama Lengkap</td>
                                    <th>
                                        <span class="refName">{{ Auth::user()->nama_pemilik ?? Auth::user()->username }}</span>
                                    </th>
                                </tr>
                                <tr>
                                    <td>Rekening Bank</td>
                                    <th>
                                        <span class="bank-get">{{ strtoupper(Auth::user()->nama_bank ?? '-') }}</span>
                                    </th>
                                </tr>
                                <tr>
                                    <td>No Rekening</td>
                                    <th>
                                        <span class="bankAcc-get">{{ Auth::user()->nomor_rekening ?? '-' }}</span>
                                    </th>
                                </tr>
                                <tr>
                                    <td>Nomor HP</td>
                                    <th>
                                        <span class="refHp">{{ Auth::user()->no_hp ?? '-' }}</span>
                                    </th>
                                </tr>
                                <tr>
                                    <td>Email</td>
                                    <th>
                                        <span class="refEmail">{{ Auth::user()->email ?? '-' }}</span>
                                    </th>
                                </tr>
                                <tr>
                                    <td>Referral ID</td>
                                    <th>
                                        <span class="ref-id status" style="background: #00C853; border-radius: 5px;">AKTIF</span>
                                    </th>
                                </tr>
                                <tr>
                                    <td>Referral Code</td>
                                    <th>
                                        <span class="refCode" style="font-weight: bold; color: #f99c2a;">{{ $refCode ?? '-' }}</span>
                                        <i class="fas fa-copy ref-copy copyBtn" data-clipboard-text="{{ $refCode ?? '-' }}" style="cursor: pointer; font-size: 1.4em; margin-left: 5px;"></i>
                                    </th>
                                </tr>
                                <tr>
                                    <td>
                                        Referral Link<br>
                                        <img src="{{ $qrCodeUrl ?? '' }}" style="max-width: 80px; margin-top: 5px; border-radius: 5px;" class="reflink-qr" alt="QR">
                                    </td>
                                    <th>
                                        <span class="refLink-get" style="word-break: break-all; color: #2e93bc; font-size: 12px;">{{ $refLink ?? '-' }}</span><br>
                                        <button type="button" class="button button-sm button--yellow copyBtn" data-clipboard-text="{{ $refLink ?? '-' }}" style="margin-top: 5px;">Copy Link</button>
                                    </th>
                                </tr>
                            </tbody>
                        </table>

                        <h3 style="margin-top: 20px;">Change Password</h3>
                        
                        <form id="ajax-form-m" action="{{ url('profile/update') }}" method="POST" class="-profile-form">
                            @csrf
                            <div class="form-group">
                                <label><span class="text-danger"> *</span> Old Password</label>
                                <input type="password" id="oldPwdMob" name="oldpassword" class="form-control required" maxlength="20" minlength="6">
                            </div>
                            <div class="form-group">
                                <label><span class="text-danger"> *</span> New Password</label>
                                <input type="password" id="newPwdMob" name="newpassword" class="form-control required" maxlength="20" minlength="6">
                            </div>
                            <div class="form-group">
                                <label><span class="text-danger"> *</span> Confirm New Password</label>
                                <input type="password" id="confirmPwdMob" name="confirmpassword" class="form-control required" maxlength="20" minlength="6">
                            </div>
                            <div class="form-group">
                                <button type="submit" class="button button--yellow">SUBMIT</button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
        @include('frontend.partials.mobile.bottom-nav')
    </div>
    <div id="showD">
        @include('frontend.partials.desktop.header')

        <section class="profile">
            <div class="wrapper">
                <div class="profile__nav">
                    <ul>
                        <li class="active"><a href="/secure/admin/profile"><i class="far fa-user"></i><span>Profile</span></a></li>
                        <li><a href="/secure/admin/deposit"><i class="fas fa-wallet"></i><span>Deposit</span></a></li>
                        <li><a href="/secure/admin/withdrawal"><i class="fas fa-money-bill"></i><span>Withdrawal</span></a></li>
                        <li><a href="/secure/admin/bonus"><i class="fas fa-dollar-sign"></i><span>Bonus</span></a></li>
                        <li><a href="/secure/admin/history"><i class="fas fa-history"></i><span>History</span></a></li>
                        <li><a href="/secure/admin/referral"><i class="fas fa-users"></i><span>Referral</span></a></li>
                        <li>
                            <a href="/secure/admin/messages"><i class="fas fa-envelope"></i><span>Messages</span></a>
                            <div class="notif-wrapper hide"><div class="notif-info notanim"></div></div>
                        </li>
                    </ul>
                </div>
            </div>
        </section>

        <div class="wrapper">
            <section class="balance">
                <div class="g8-bal-top"><p>Saldo</p>
                    <div style="display: flex; align-items: center; justify-content: center; gap: 8px;">
                        <span class="g8-bal-total" style="color: #000; font-weight: 800;">IDR {{ number_format(Auth::user()->balance ?? 0, 0, ',', '.') }}</span>
                        <a href="javascript:void(0);" class="btn-refresh-balance" style="margin-left: 0px; cursor: pointer; color: #000;" title="Refresh Saldo">
                            <i class="fas fa-sync-alt"></i>
                        </a>
                    </div>
                </div>
            </section>

            <section class="funds">
                <div class="funds__detail">
                    
                    <div class="funds__detail-left">
                        <ul>
                            <li>
                                <span>Nama Lengkap:</span>
                                <span class="refName">{{ Auth::user()->nama_pemilik ?? Auth::user()->username }}</span>
                            </li>
                            <li>
                                <span>Rekening Bank:</span>
                                <span class="bank-get">{{ strtoupper(Auth::user()->nama_bank ?? '-') }}</span>
                            </li>
                            <li>
                                <span>No Rekening:</span>
                                <span class="bankAcc-get">{{ Auth::user()->nomor_rekening ?? '-' }}</span>
                            </li>
                            <li>
                                <span>Nomor HP:</span>
                                <span class="refHp">{{ Auth::user()->no_hp ?? '-' }}</span>
                            </li>
                            <li>
                                <span>Email:</span>
                                <span class="refEmail">{{ Auth::user()->email ?? '-' }}</span>
                            </li>
                            <li>
                                    <span>Referral ID:</span>
                                    <span class="ref-id status" style="background: #00C853; border-radius: 5px;">AKTIF</span>
                                </li>
                            <li>
                                <span>Referral Code:</span>
                                <span class="refCode" style="font-weight: bold; color: #f99c2a;">{{ $refCode ?? '-' }}</span>
                                <i class="fas fa-copy ref-copy copyBtn" data-clipboard-text="{{ $refCode ?? '-' }}" style="cursor: pointer; font-size: 1.4em; color: #555;" title="Copy Code"></i>
                            </li>
                            <li>
                                <span>
                                    Referral Link:<br>
                                    <img src="{{ $qrCodeUrl ?? '' }}" style="max-width: 100px; margin-top: 10px; border-radius: 5px; border: 1px solid #ccc; padding: 5px; background: #fff;" class="reflink-qr" alt="QR Referral">
                                </span>
                                <span>
                                    <span class="refLink-get" style="word-break: break-all; color: #2e93bc;">{{ $refLink ?? '-' }}</span><br>
                                    <button type="button" class="button button-sm button--yellow copyBtn" data-clipboard-text="{{ $refLink ?? '-' }}" style="margin-top: 10px;">Copy Link</button>
                                </span>
                            </li>
                        </ul>
                    </div>

                    <div class="funds__detail-right">
                        
                        <form id="ajax-form-d" action="{{ url('profile/update') }}" method="POST" class="-profile-form">
                            @csrf
                            <div class="detail-box">
                                <div class="form-detail form-detail--full"><label class="field-title">Change Password</label>
                                    <hr>
                                </div>
                                <div class="deposit-option">
                                    <div class="deposit-option__form">
                                        <div class="form-detail form-detail--full">
                                            <label><span class="text-danger">*</span> Old Password </label>
                                            <input type="password" id="oldPwd" name="oldpassword" class="form-control required" maxlength="20" minlength="6">
                                        </div>
                                    </div>
                                    <div class="deposit-option__info">
                                        <div class="form-detail form-detail--full">
                                            <label><span class="text-danger">*</span> New Password </label>
                                            <input type="password" id="newPwd" name="newpassword" class="form-control required" maxlength="20" minlength="6">
                                        </div>
                                        <div class="form-detail form-detail--full">
                                            <label><span class="text-danger">*</span> Confirm New Password </label>
                                            <input type="password" id="confirmPwd" name="confirmpassword" class="form-control required" maxlength="20" minlength="6">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button type="submit" class="button button--yellow">SUBMIT</button>
                        </form>
                        
                    </div>
                </div>
            </section>
        </div>
        @include('frontend.partials.desktop.footer')
    </div>

@endsection

@push('scripts')
<script type="text/javascript">
// Pastikan dibungkus loadMeIfReady agar aman dan sinkron
window.loadMeIfReady = function() {

    // 1. REFRESH SALDO AJAX
    $('.btn-refresh-balance').on('click', function(e) {
        e.preventDefault();
        let $icons = $('.btn-refresh-balance i'); 
        let $balanceSpans = $('.g8-bal-total');

        $icons.addClass('fa-spin');
        
        $.ajax({
            url: "{{ route('api.balance') }}", 
            type: "GET",
            success: function(response) {
                $icons.removeClass('fa-spin');
                if (response && response.d) {
                    $balanceSpans.html(response.d);
                }
            },
            error: function() {
                $icons.removeClass('fa-spin');
            }
        });
    });

    // 2. FUNGSI COPY TEXT & LINK REFERRAL
    $('.copyBtn, .ref-copy').on('click', function(e) {
        e.preventDefault();
        let link = $(this).attr('data-clipboard-text');
        if(!link || link == '-') return;
        
        let tempInput = $("<input>");
        $("body").append(tempInput);
        tempInput.val(link).select();
        document.execCommand("copy");
        tempInput.remove();

        // Notifikasi popup bawaan template Anda
        if(typeof jAlert !== 'undefined') {
            jAlert('Berhasil disalin ke clipboard!', 'Sukses');
        } else {
            alert('Berhasil disalin!');
        }
    });

    // 3. SUBMIT FORM GANTI PASSWORD (AJAX JSON)
    $('.-profile-form').on('submit', function(e) {
        e.preventDefault(); 
        
        let $form = $(this);
        let oldpass = $form.find('input[name="oldpassword"]').val();
        let newpass = $form.find('input[name="newpassword"]').val();
        let confpass = $form.find('input[name="confirmpassword"]').val();

        // Validasi Cepat di Browser
        if(!oldpass || !newpass || !confpass) {
            jAlert('Silahkan isi semua kolom password!', 'Peringatan');
            return false;
        }

        if(newpass !== confpass) {
            jAlert('Konfirmasi password baru tidak cocok!', 'Peringatan');
            return false;
        }

        if(newpass.length < 6) {
            jAlert('Password baru minimal 6 karakter!', 'Peringatan');
            return false;
        }

        let $btn = $form.find('button[type="submit"]');
        let originalText = $btn.html();
        
        $btn.html('<i class="fa fa-spinner fa-spin"></i> Memproses...').prop('disabled', true);

        // Eksekusi API ke Controller `update`
        $.ajax({
            url: $form.attr('action'),
            type: 'POST',
            data: $form.serialize(),
            success: function(response) {
                $btn.html(originalText).prop('disabled', false);
                
                // Response JSON Controller
                if(response.success === true) {
                    jAlert(response.data.message, 'Berhasil', function() {
                        $form[0].reset(); // Kosongkan input
                    });
                } else {
                    jAlert(response.data.message, 'Gagal');
                }
            },
            error: function(xhr) {
                $btn.html(originalText).prop('disabled', false);
                jAlert('Terjadi kesalahan koneksi atau sistem.', 'Error');
            }
        });
    });

}; // End loadMeIfReady
</script>
@endpush