@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="panel panel-danger" style="margin-top: 15px;">
                <div class="panel-heading">
                    <strong><span class="glyphicon glyphicon-envelope" style="margin-right: 5px;"></span> Memo</strong>
                </div>
                <div class="panel-body">
                    
                    <ul class="nav nav-tabs" style="margin-bottom: 15px;">
                        <li><a data-toggle="tab" href="#memo-tulis"><span class="glyphicon glyphicon-edit" style="margin-right: 5px;"></span>Tulis Memo</a></li>
                        <li class="active" id="nav-memo"><a data-toggle="tab" href="#memo-inbox"><span class="glyphicon glyphicon-import" style="margin-right: 5px;"></span>Inbox</a></li>
                        <li><a data-toggle="tab" href="#memo-sent"><span class="glyphicon glyphicon-export" style="margin-right: 5px;"></span>Sent</a></li>
                    </ul>
                    
                    <div class="tab-content">
                        
                        <div id="memo-tulis" class="tab-pane fade">
                            <form class="tulis_form" method="post">
                                @csrf
                                <div class="form-group">
                                    <label>Subject</label>
                                    <select class="form-control tulis_subject" style="padding:2px;" name="subject" required>
                                        <option value="">Pilih Subject</option>
                                        <option value="Perihal Member Baru">Perihal Member Baru</option>
                                        <option value="Perihal Deposit">Perihal Deposit</option>
                                        <option value="Perihal Withdraw">Perihal Withdraw</option>
                                        <option value="Masalah Umum">Masalah Umum</option>
                                        <option value="Perubahan Data">Perubahan Data</option>
                                        <option value="Pengaduan Layanan">Pengaduan Layanan</option>
                                        <option value="Lain-lain">Lain-lain</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Pesan Memo</label>
                                    <textarea class="tulis_memo" style="height:100px" name="memo" placeholder="Tulis pesan Anda di sini..." required></textarea>
                                </div>
                                <div class="form-group text-right">
                                    <input type="hidden" name="task" value="tulis">
                                    <button type="button" class="btn btn-info kirim" style="width: 100%; max-width: 200px; font-weight: bold;">
                                        <span class="glyphicon glyphicon-send" style="margin-right: 5px;"></span> Kirim Memo
                                    </button>
                                </div>
                            </form>
                        </div>

                        <div id="memo-inbox" class="tab-pane fade in active">
                            <div class="table-responsive">
                                <table class="table table-striped table-hover" style="font-size: 13px; margin-bottom: 5px;">
                                    <thead>
                                        <tr>
                                            <th style="width: 50px;">No.</th>
                                            <th style="min-width: 140px;">Date</th>
                                            <th>Subject</th>
                                            <th style="width: 50px; text-align: center;">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody id="inbox-tbody">
                                        <tr>
                                            <td class="text-primary">1</td>
                                            <td class="text-danger" style="white-space: nowrap;">09 Feb 2026 12:42:49</td>
                                            <td class="text-success">BONUS ROLLINGAN &amp; CASHBACK MINGGUAN PADA PERIODE  02 FEBRUARI - 08 FEBRUARI</td>
                                            <td class="text-center">
                                                <a href="javascript:readMemo('inbox','1','91110351');" data-toggle="tooltip" title="Detail" class="btn btn-sm btn-default" style="padding: 2px 6px;">
                                                    <span class="glyphicon glyphicon-search"></span>
                                                </a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-primary">2</td>
                                            <td class="text-danger" style="white-space: nowrap;">08 Feb 2026 01:04:13</td>
                                            <td class="text-success" style="color:#AAA">BANK OFF ( TIDAK DI PAKAI )</td>
                                            <td class="text-center">
                                                <a href="javascript:readMemo('inbox','1','90846381');" data-toggle="tooltip" title="Detail" class="btn btn-sm btn-default" style="padding: 2px 6px;">
                                                    <span class="glyphicon glyphicon-search"></span>
                                                </a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-primary">3</td>
                                            <td class="text-danger" style="white-space: nowrap;">07 Feb 2026 00:49:23</td>
                                            <td class="text-success">BANK OFF ( TIDAK DI PAKAI )</td>
                                            <td class="text-center">
                                                <a href="javascript:readMemo('inbox','1','90582476');" data-toggle="tooltip" title="Detail" class="btn btn-sm btn-default" style="padding: 2px 6px;">
                                                    <span class="glyphicon glyphicon-search"></span>
                                                </a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <ul class="pagination pagination-sm" style="margin-top: 10px; margin-bottom: 0;">
                                <li class="active"><a href="javascript:getInbox(1)">1</a></li>
                            </ul>
                        </div>

                        <div id="memo-sent" class="tab-pane fade">
                            <div class="table-responsive">
                                <table class="table table-striped table-hover" style="font-size: 13px; margin-bottom: 5px;">
                                    <thead>
                                        <tr>
                                            <th style="width: 50px;">No.</th>
                                            <th style="min-width: 140px;">Date</th>
                                            <th>Subject</th>
                                            <th style="width: 50px; text-align: center;">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody id="sent-tbody">
                                        <tr>
                                            <td colspan="4" class="text-center" style="padding: 20px;">
                                                <em>Belum ada memo terkirim.</em>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <ul class="pagination pagination-sm" style="margin-top: 10px; margin-bottom: 0;"></ul>
                        </div>

                    </div> </div>
            </div> <div class="row">
                <div class="col-xs-12" style="margin-top: 5px;">
                    <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 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. Inisialisasi Tooltip cukup dipanggil sekali saja di sini
        $('[data-toggle="tooltip"]').tooltip();
        
        // 2. Load Memo Awal (Bawaan fungsi sistem Anda)
        if(typeof getMemo === 'function') {
            getMemo();
        }
    });
</script>

@endsection