@extends('layouts.app')

@section('title', 'Notifikasi & Aktivitas')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2><i class="bi bi-bell"></i> Notifikasi & Aktivitas</h2>
        <p class="text-muted mb-0"><i class="bi bi-info-circle"></i> Riwayat semua notifikasi dan aktivitas sistem yang terkait dengan akun Anda</p>
    </div>
    @if($notifications->where('is_read', false)->count() > 0)
    <form method="POST" action="{{ route('notifications.mark-all-read') }}" class="d-inline">
        @csrf
        <button type="submit" class="btn btn-primary">
            <i class="bi bi-check-all"></i> Tandai Semua Sudah Dibaca
        </button>
    </form>
    @endif
</div>

<div class="row mb-4">
    <div class="col-md-3">
        <div class="card text-center border-primary">
            <div class="card-body">
                <i class="bi bi-bell fs-1 text-primary mb-2"></i>
                <h3 class="mb-0">{{ $totalNotifications ?? 0 }}</h3>
                <small class="text-muted">Total Notifikasi</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center border-warning">
            <div class="card-body">
                <i class="bi bi-bell-fill fs-1 text-warning mb-2"></i>
                <h3 class="mb-0">{{ $unreadCount ?? 0 }}</h3>
                <small class="text-muted">Belum Dibaca</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center border-success">
            <div class="card-body">
                <i class="bi bi-check-circle fs-1 text-success mb-2"></i>
                <h3 class="mb-0">{{ $readCount ?? 0 }}</h3>
                <small class="text-muted">Sudah Dibaca</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center border-info">
            <div class="card-body">
                <i class="bi bi-calendar-event fs-1 text-info mb-2"></i>
                <h3 class="mb-0">{{ $notifications->where('related_table', 'cuti')->count() }}</h3>
                <small class="text-muted">Terkait Cuti</small>
            </div>
        </div>
    </div>
</div>

<div class="card mb-4">
    <div class="card-body">
        <div class="d-flex flex-wrap gap-2 mb-3">
            <a href="{{ route('notifications.index') }}" class="btn btn-sm {{ !request('unread_only') && !request('type') && !request('related_table') ? 'btn-primary' : 'btn-outline-primary' }}">
                <i class="bi bi-list-ul"></i> Semua
            </a>
            <a href="{{ route('notifications.index', ['unread_only' => 'true']) }}" class="btn btn-sm {{ request('unread_only') ? 'btn-primary' : 'btn-outline-primary' }}">
                <i class="bi bi-bell"></i> Belum Dibaca <span class="badge bg-danger">{{ $unreadCount ?? 0 }}</span>
            </a>
            <a href="{{ route('notifications.index', ['related_table' => 'cuti']) }}" class="btn btn-sm {{ request('related_table') == 'cuti' ? 'btn-primary' : 'btn-outline-primary' }}">
                <i class="bi bi-calendar-event"></i> Cuti
            </a>
            <a href="{{ route('notifications.index', ['related_table' => 'gaji']) }}" class="btn btn-sm {{ request('related_table') == 'gaji' ? 'btn-primary' : 'btn-outline-primary' }}">
                <i class="bi bi-cash-coin"></i> Gaji
            </a>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body">
        @forelse($notifications as $notification)
        <div class="border rounded p-3 mb-3 {{ !$notification->is_read ? 'border-primary border-3 bg-light' : 'border-secondary' }}" style="transition: all 0.3s;">
            <div class="d-flex justify-content-between align-items-start">
                <div class="flex-grow-1">
                    <div class="d-flex align-items-center mb-2">
                        @if($notification->type == 'success')
                            <i class="bi bi-check-circle-fill text-success me-2 fs-4"></i>
                        @elseif($notification->type == 'error')
                            <i class="bi bi-x-circle-fill text-danger me-2 fs-4"></i>
                        @elseif($notification->type == 'warning')
                            <i class="bi bi-exclamation-triangle-fill text-warning me-2 fs-4"></i>
                        @else
                            <i class="bi bi-info-circle-fill text-info me-2 fs-4"></i>
                        @endif
                        <h5 class="mb-0 {{ !$notification->is_read ? 'fw-bold' : 'fw-semibold' }}">{{ $notification->title }}</h5>
                        @if(!$notification->is_read)
                        <span class="badge bg-primary ms-2"><i class="bi bi-star-fill"></i> Baru</span>
                        @endif
                    </div>
                    
                    <div class="mb-2 p-3 rounded" style="background-color: #f8f9fa; border-left: 4px solid {{ $notification->type == 'success' ? '#198754' : ($notification->type == 'error' ? '#dc3545' : ($notification->type == 'warning' ? '#ffc107' : '#0dcaf0')) }};">
                        <p class="mb-0" style="white-space: pre-wrap; line-height: 1.6;">{{ $notification->message }}</p>
                    </div>

                    @if($notification->related_table && $notification->related_id)
                    <div class="alert alert-info mb-2">
                        <div class="d-flex align-items-center">
                            <i class="bi bi-link-45deg me-2"></i>
                            <div class="flex-grow-1">
                                <strong>Aktivitas Terkait:</strong>
                                @if($notification->related_table == 'cuti')
                                    @php
                                        try {
                                            $cuti = \App\Models\Cuti::with('pegawai')->find($notification->related_id);
                                        } catch (\Exception $e) {
                                            $cuti = null;
                                        }
                                    @endphp
                                    @if($cuti && $cuti->pegawai)
                                        <div class="mt-2">
                                            <small class="d-block mb-1"><i class="bi bi-person-fill"></i> <strong>Pegawai:</strong> {{ $cuti->pegawai->nama_lengkap }} ({{ $cuti->pegawai->nip ? $cuti->pegawai->nip : 'N/A' }})</small>
                                            <small class="d-block mb-1"><i class="bi bi-calendar-event"></i> <strong>Periode Cuti:</strong> {{ $cuti->tanggal_mulai->format('d/m/Y') }} - {{ $cuti->tanggal_selesai->format('d/m/Y') }} (<strong>{{ $cuti->jumlah_hari }} hari</strong>)</small>
                                            <small class="d-block mb-1"><i class="bi bi-tag-fill"></i> <strong>Jenis Cuti:</strong> {{ $cuti->jenis_cuti }}</small>
                                            <small class="d-block mb-1"><i class="bi bi-info-circle-fill"></i> <strong>Alasan:</strong> {{ \Illuminate\Support\Str::limit($cuti->alasan ?? '', 50) }}</small>
                                            <small class="d-block"><i class="bi bi-check-circle-fill"></i> <strong>Status:</strong> 
                                                @if($cuti->status == 'Menunggu Persetujuan')
                                                    <span class="badge bg-warning"><i class="bi bi-clock"></i> {{ $cuti->status }}</span>
                                                @elseif($cuti->status == 'Disetujui')
                                                    <span class="badge bg-success"><i class="bi bi-check-circle"></i> {{ $cuti->status }}</span>
                                                @else
                                                    <span class="badge bg-danger"><i class="bi bi-x-circle"></i> {{ $cuti->status }}</span>
                                                @endif
                                            </small>
                                            @if($cuti->disetujuiOleh)
                                            <small class="d-block mt-1 text-muted">
                                                <i class="bi bi-person-check"></i> Divalidasi oleh: {{ $cuti->disetujuiOleh->username }}
                                                @if($cuti->tanggal_persetujuan)
                                                    pada {{ $cuti->tanggal_persetujuan->format('d/m/Y H:i') }}
                                                @endif
                                            </small>
                                            @endif
                                        </div>
                                    @endif
                                @elseif($notification->related_table == 'gaji')
                                    @php
                                        try {
                                            $gaji = \App\Models\Gaji::with('pegawai')->find($notification->related_id);
                                        } catch (\Exception $e) {
                                            $gaji = null;
                                        }
                                    @endphp
                                    @if($gaji && $gaji->pegawai)
                                        <div class="mt-2">
                                            <small class="d-block mb-1"><i class="bi bi-person-fill"></i> <strong>Pegawai:</strong> {{ $gaji->pegawai->nama_lengkap }} ({{ $gaji->pegawai->nip ? $gaji->pegawai->nip : 'N/A' }})</small>
                                            <small class="d-block mb-1"><i class="bi bi-calendar-month"></i> <strong>Periode:</strong> {{ $gaji->periode_formatted }}</small>
                                            <small class="d-block mb-1"><i class="bi bi-cash-coin"></i> <strong>Total Gaji:</strong> <strong>Rp {{ number_format($gaji->total_gaji, 0, ',', '.') }}</strong></small>
                                            <small class="d-block"><i class="bi bi-check-circle-fill"></i> <strong>Status:</strong> 
                                                <span class="badge bg-{{ $gaji->status == 'Dibayar' ? 'success' : ($gaji->status == 'Disetujui' ? 'info' : ($gaji->status == 'Ditolak' ? 'danger' : 'secondary')) }}">
                                                    @if($gaji->status == 'Dibayar')
                                                        <i class="bi bi-check-circle"></i>
                                                    @elseif($gaji->status == 'Disetujui')
                                                        <i class="bi bi-clock-history"></i>
                                                    @elseif($gaji->status == 'Ditolak')
                                                        <i class="bi bi-x-circle"></i>
                                                    @else
                                                        <i class="bi bi-file-earmark"></i>
                                                    @endif
                                                    {{ $gaji->status }}
                                                </span>
                                            </small>
                                            @if($gaji->disetujuiOleh)
                                            <small class="d-block mt-1 text-muted">
                                                <i class="bi bi-person-check"></i> Disetujui oleh: {{ $gaji->disetujuiOleh->username }}
                                                @if($gaji->tanggal_persetujuan)
                                                    pada {{ $gaji->tanggal_persetujuan->format('d/m/Y H:i') }}
                                                @endif
                                            </small>
                                            @endif
                                        </div>
                                    @endif
                                @endif
                            </div>
                        </div>
                    </div>
                    @endif

                    <div class="d-flex justify-content-between align-items-center mt-2">
                        <small class="text-muted">
                            <i class="bi bi-clock"></i> <strong>{{ $notification->created_at->diffForHumans() }}</strong>
                            <span class="ms-2">({{ $notification->created_at->format('d/m/Y H:i:s') }})</span>
                        </small>
                        @if($notification->related_table && $notification->related_id)
                            @if($notification->related_table == 'cuti')
                                <a href="{{ route('cuti.show', $notification->related_id) }}" class="btn btn-sm btn-primary">
                                    <i class="bi bi-eye"></i> Lihat Detail Cuti
                                </a>
                            @elseif($notification->related_table == 'gaji')
                                <a href="{{ route('gaji.show', $notification->related_id) }}" class="btn btn-sm btn-primary">
                                    <i class="bi bi-eye"></i> Lihat Detail Gaji
                                </a>
                            @endif
                        @endif
                    </div>
                </div>
                @if(!$notification->is_read)
                <form method="POST" action="{{ route('notifications.mark-read', $notification) }}" class="ms-3">
                    @csrf
                    <button type="submit" class="btn btn-sm btn-outline-success" title="Tandai sudah dibaca">
                        <i class="bi bi-check-lg"></i>
                    </button>
                </form>
                @else
                <div class="ms-3">
                    <span class="badge bg-secondary" title="Sudah dibaca pada {{ $notification->updated_at->format('d/m/Y H:i') }}">
                        <i class="bi bi-check-circle"></i> Dibaca
                    </span>
                </div>
                @endif
            </div>
        </div>
        @empty
        <div class="text-center py-5">
            <i class="bi bi-bell-slash fs-1 text-muted d-block mb-3"></i>
            <p class="text-muted">Tidak ada notifikasi</p>
        </div>
        @endforelse

        <div class="mt-3">
            {{ $notifications->links() }}
        </div>
    </div>
</div>
@endsection