@extends('layouts.app')

@section('title', 'Pesan Internal - SIAKAD')
@section('page-title', 'Pesan Internal')

@section('content')
@php
$activeTab = request('tab', 'inbox');
@endphp

<div class="row mb-4">
    <div class="col-md-12">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h5 class="mb-1">Kotak Pesan Internal</h5>
                <p class="text-muted small mb-0">Kirim pesan ke dosen, mahasiswa, atau broadcast</p>
            </div>
            <a href="{{ route('admin.pesan.create') }}" class="btn btn-primary btn-sm">
                <i class="bi bi-plus-lg me-1"></i> Pesan Baru
            </a>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-3">
        <div class="card">
            <div class="list-group list-group-flush">
                <a href="{{ route('admin.pesan.index', ['tab' => 'inbox']) }}"
                   class="list-group-item list-group-item-action d-flex justify-content-between align-items-center {{ $activeTab == 'inbox' ? 'active' : '' }}">
                    <span><i class="bi bi-inbox me-2"></i>Inbox</span>
                    @if($unreadCount > 0)
                    <span class="badge bg-danger rounded-pill" id="inboxBadge">{{ $unreadCount }}</span>
                    @else
                    <span class="badge bg-secondary rounded-pill" id="inboxBadge" style="display:none;">0</span>
                    @endif
                </a>
                <a href="{{ route('admin.pesan.index', ['tab' => 'sent']) }}"
                   class="list-group-item list-group-item-action {{ $activeTab == 'sent' ? 'active' : '' }}">
                    <i class="bi bi-send me-2"></i>Ter kirim
                </a>
            </div>
        </div>
    </div>

    <div class="col-md-9">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    @if($activeTab == 'inbox')
                        <i class="bi bi-inbox me-2"></i>Inbox
                    @else
                        <i class="bi bi-send me-2"></i>Pesan Ter kirim
                    @endif
                </h5>
                <small class="text-muted" id="lastUpdate">Terakhir diperbarui: baru saja</small>
            </div>
            <div class="card-body p-0">
                @if($activeTab == 'inbox')
                    @forelse($inbox as $pesan)
                    <div class="message-item p-3 border-bottom {{ !$pesan->is_read ? 'bg-light' : '' }}" data-id="{{ $pesan->id }}">
                        <div class="d-flex justify-content-between align-items-start">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="">
                            </div>
                            <div class="flex-grow-1 ms-2">
                                <div class="d-flex justify-content-between">
                                    <strong class="{{ !$pesan->is_read ? 'text-primary' : '' }}">
                                        {{ $pesan->sender->name ?? 'System' }}
                                    </strong>
                                    <small class="text-muted">{{ $pesan->created_at->diffForHumans() }}</small>
                                </div>
                                <a href="{{ route('admin.pesan.show', $pesan) }}" class="text-decoration-none">
                                    <div class="subject {{ !$pesan->is_read ? 'fw-bold' : '' }}">{{ $pesan->subject }}</div>
                                    <div class="text-muted small text-truncate">{{ Str::limit($pesan->content, 80) }}</div>
                                </a>
                            </div>
                            @if($pesan->type !== 'individual')
                            <span class="badge bg-info">Broadcast</span>
                            @endif
                            @if(!$pesan->is_read)
                            <span class="badge bg-danger">Baru</span>
                            @endif
                        </div>
                    </div>
                    @empty
                    <div class="text-center py-5" id="emptyMessage">
                        <i class="bi bi-inbox fs-1 text-muted d-block mb-2"></i>
                        <p class="text-muted">Tidak ada pesan</p>
                    </div>
                    @endforelse
                    @if($inbox->hasPages())
                    <div class="p-3">
                        {{ $inbox->appends(['tab' => 'inbox'])->links() }}
                    </div>
                    @endif
                @else
                    @forelse($sent as $pesan)
                    <div class="message-item p-3 border-bottom" data-id="{{ $pesan->id }}">
                        <div class="d-flex justify-content-between align-items-start">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="">
                            </div>
                            <div class="flex-grow-1 ms-2">
                                <div class="d-flex justify-content-between">
                                    <strong>To: {{ $pesan->receiver->name ?? 'Unknown' }}</strong>
                                    <small class="text-muted">{{ $pesan->created_at->diffForHumans() }}</small>
                                </div>
                                <a href="{{ route('admin.pesan.show', $pesan) }}" class="text-decoration-none text-dark">
                                    <div class="subject">{{ $pesan->subject }}</div>
                                    <div class="text-muted small text-truncate">{{ Str::limit($pesan->content, 80) }}</div>
                                </a>
                            </div>
                            <span class="badge bg-{{ $pesan->type == 'individual' ? 'secondary' : 'info' }}">
                                {{ ucfirst(str_replace('_', ' ', $pesan->type)) }}
                            </span>
                        </div>
                    </div>
                    @empty
                    <div class="text-center py-5" id="emptyMessage">
                        <i class="bi bi-send fs-1 text-muted d-block mb-2"></i>
                        <p class="text-muted">Belum ada pesan terkirim</p>
                    </div>
                    @endforelse
                    @if($sent->hasPages())
                    <div class="p-3">
                        {{ $sent->appends(['tab' => 'sent'])->links() }}
                    </div>
                    @endif
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Toast Notification -->
<div class="toast-container position-fixed bottom-0 end-0 p-3" id="toastContainer" style="z-index: 9999;">
    <div id="newMessageToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <i class="bi bi-envelope text-primary me-2"></i>
            <strong class="me-auto">Pesan Baru</strong>
            <small>Baru saja</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body" id="toastBody">
            Anda mendapat pesan baru
        </div>
    </div>
</div>

@push('scripts')
<script>
let lastUpdateTime = new Date();

function checkNewMessages() {
    fetch('{{ route("admin.pesan.count") }}')
        .then(response => response.json())
        .then(data => {
            const badge = document.getElementById('inboxBadge');
            if (data.count > 0) {
                if (badge) {
                    badge.textContent = data.count;
                    badge.style.display = 'block';
                } else {
                    showNewMessageToast(data.count);
                }
            }

            const now = new Date();
            const diff = Math.floor((now - lastUpdateTime) / 1000);
            let timeText = diff < 5 ? 'baru saja' : diff + ' detik lalu';
            document.getElementById('lastUpdate').textContent = 'Terakhir diperbarui: ' + timeText;
        })
        .catch(error => console.log('Error checking messages:', error));
}

function showNewMessageToast(count) {
    const toast = document.getElementById('newMessageToast');
    const toastBody = document.getElementById('toastBody');
    toastBody.textContent = count + ' pesan baru masuk';
    const bsToast = new bootstrap.Toast(toast);
    bsToast.show();

    setTimeout(() => {
        location.reload();
    }, 3000);
}

// Check every 10 seconds
setInterval(checkNewMessages, 10000);

// Initial check after 3 seconds
setTimeout(checkNewMessages, 3000);
</script>
@endpush
@endsection