@extends('frontend.layouts.app')

@section('content')

    <link rel="stylesheet" href="/css/msgbox.css">

    <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">
                        <div class="form-detail form-detail--full">
                            <div class="depo-select-wrap">
                                <ul class="depo-select message">
                                    <li class="active" data-target=".msglist"><i class="fas fa-envelope"></i> Inbox Message</li>
                                    <li data-target=".msglist-global"><i class="fas fa-bullhorn"></i> Announcements</li>
                                </ul>
                            </div>
                        </div>
                        
                        <div class="msglist">
                            @forelse($inbox as $msg)
                                <div class="msglist-box btn-msg-show" data-id="{{ $msg->id }}" data-title="{{ $msg->judul }}" data-date="{{ date('Y-m-d H:i', strtotime($msg->created_at)) }}" data-sender="{{ strtoupper($msg->pengirim) }}" data-content="{{ $msg->pesan }}" style="cursor: pointer; {{ $msg->status_baca == 0 ? 'background: #f4f4f4; border-left: 3px solid #f99c2a;' : '' }}">
                                    <div class="msglist-box-left" style="font-size: 11px; color: #777;">
                                        {{ strtoupper($msg->pengirim) }}<br>{{ date('Y-m-d H:i', strtotime($msg->created_at)) }}
                                    </div>
                                    <div class="msglist-box-right">
                                        <div style="{{ $msg->status_baca == 0 ? 'font-weight: bold; color: #f99c2a;' : 'color: #555;' }}">{{ $msg->judul }}</div>
                                    </div>
                                </div>
                            @empty
                                <div class="msglist-box" style="text-align: center; color: #888;">Tidak ada pesan masuk</div>
                            @endforelse
                        </div>

                        <div class="msglist-global hide">
                            @forelse($announcements as $msg)
                                <div class="msglist-box btn-msg-show" data-id="{{ $msg->id }}" data-title="{{ $msg->judul }}" data-date="{{ date('Y-m-d H:i', strtotime($msg->created_at)) }}" data-sender="SYSTEM" data-content="{{ $msg->pesan }}" style="cursor: pointer;">
                                    <div class="msglist-box-left" style="font-size: 11px; color: #777;">
                                        SYSTEM<br>{{ date('Y-m-d H:i', strtotime($msg->created_at)) }}
                                    </div>
                                    <div class="msglist-box-right">
                                        <div style="color: #555;">{{ $msg->judul }}</div>
                                    </div>
                                </div>
                            @empty
                                <div class="msglist-box" style="text-align: center; color: #888;">Tidak ada pengumuman</div>
                            @endforelse
                        </div>

                        <div class="msgbox" style="z-index: 99999; display: none;">
                            <div class="msgbox-overlay"></div>
                            <div class="msgbox-in">
                                <div class="msgbox-close btn-msg-close">X</div>
                                <div class="msgbox-inpad">
                                    <div class="msgbox-header"></div>
                                    <div class="msgbox-body"></div>
                                </div>
                            </div>
                        </div>

                    </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><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 class="active">
                            <a href="/secure/admin/messages"><i class="fas fa-envelope"></i><span>Messages</span></a>
                        </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-right" style="width: 100%;">
                        <div class="detail-box">
                            <div class="form-detail form-detail--full">
                                <div class="depo-select-wrap">
                                    <ul class="depo-select message">
                                        <li class="active" data-target=".msglist"><i class="fas fa-envelope"></i> Inbox Message</li>
                                        <li data-target=".msglist-global"><i class="fas fa-bullhorn"></i> Announcements</li>
                                    </ul>
                                </div>
                            </div>
                            
                            <div class="msgbigbox" style="min-height: 400px; position: relative;">
                                
                                <div class="msglist">
                                    @forelse($inbox as $msg)
                                        <div class="msglist-box btn-msg-show" data-id="{{ $msg->id }}" data-title="{{ $msg->judul }}" data-date="{{ date('Y-m-d H:i', strtotime($msg->created_at)) }}" data-sender="{{ strtoupper($msg->pengirim) }}" data-content="{{ $msg->pesan }}" style="cursor: pointer; {{ $msg->status_baca == 0 ? 'background: #f9f9f9; border-left: 4px solid #f99c2a;' : '' }}">
                                            <div class="msglist-box-left" style="font-size: 12px; color: #777;">
                                                {{ strtoupper($msg->pengirim) }}<br>{{ date('Y-m-d H:i', strtotime($msg->created_at)) }}
                                            </div>
                                            <div class="msglist-box-right">
                                                <div style="{{ $msg->status_baca == 0 ? 'font-weight: bold; color: #f99c2a;' : 'color: #555;' }}">{{ $msg->judul }}</div>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="msglist-box" style="text-align: center; color: #888;">Tidak ada pesan masuk</div>
                                    @endforelse
                                </div>

                                <div class="msglist-global hide">
                                    @forelse($announcements as $msg)
                                        <div class="msglist-box btn-msg-show" data-id="{{ $msg->id }}" data-title="{{ $msg->judul }}" data-date="{{ date('Y-m-d H:i', strtotime($msg->created_at)) }}" data-sender="SYSTEM" data-content="{{ $msg->pesan }}" style="cursor: pointer;">
                                            <div class="msglist-box-left" style="font-size: 12px; color: #777;">
                                                SYSTEM<br>{{ date('Y-m-d H:i', strtotime($msg->created_at)) }}
                                            </div>
                                            <div class="msglist-box-right">
                                                <div style="color: #555;">{{ $msg->judul }}</div>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="msglist-box" style="text-align: center; color: #888;">Tidak ada pengumuman</div>
                                    @endforelse
                                </div>

                                <div class="msgbox" style="position: absolute; display: none; width: 100%; height: 100%; top: 0; left: 0;">
                                    <div class="msgbox-overlay" style="background: rgba(0,0,0,0.5); width: 100%; height: 100%; position: absolute;"></div>
                                    <div class="msgbox-in" style="background: #fff; width: 90%; max-width: 600px; margin: 5% auto; position: relative; z-index: 10; border-radius: 5px; box-shadow: 0 5px 15px rgba(0,0,0,0.3);">
                                        <div class="msgbox-close btn-msg-close" style="position: absolute; right: 15px; top: 15px; cursor: pointer; font-weight: bold; font-size: 18px;">X</div>
                                        <div class="msgbox-inpad" style="padding: 20px;">
                                            <div class="msgbox-header" style="border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 15px;"></div>
                                            <div class="msgbox-body" style="line-height: 1.6; color: #444;"></div>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        @include('frontend.partials.desktop.footer')
    </div>

@endsection

@push('scripts')
<script type="text/javascript">
window.loadMeIfReady = function() {

    $('.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'); }
        });
    });

    $(document).on('click', '.depo-select li:not(.active)', function() {
        $(this).parent().find('li').removeClass('active');
        $(this).addClass('active');
        
        $('.msglist, .msglist-global').addClass('hide');
        $($(this).data('target')).removeClass('hide');
    });

    $(document).on('click', '.btn-msg-show', function(e) {
        e.preventDefault();
        let $item = $(this);
        let id = $item.attr('data-id');
        let title = $item.attr('data-title');
        let date = $item.attr('data-date');
        let sender = $item.attr('data-sender');
        let content = $item.attr('data-content');

        $('.msgbox-header').html('<h2 style="margin: 0 0 5px 0; color: #333; font-size: 18px;">' + title + '</h2><span style="font-size: 12px; color: #888;">' + sender + ' | ' + date + '</span>');
        $('.msgbox-body').html(content);
        $('.msgbox').fadeIn(200);

        if ($item.css('font-weight') === '700' || $item.css('font-weight') === 'bold') {
            $.ajax({
                url: '/secure/admin/message/read', 
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    msgID: id
                },
                success: function(res) {
                    $item.css({'background': '', 'border-left': 'none'});
                    $item.find('.msglist-box-right div').css({'font-weight': 'normal', 'color': '#555'});
                }
            });
        }
    });

    $(document).on('click', '.btn-msg-close, .msgbox-overlay', function() {
        $('.msgbox').fadeOut(200, function() {
            $('.msgbox-header, .msgbox-body').empty();
        });
    });

};
</script>
@endpush