@extends('layouts.master')

@section('css')
<style>
.avatar-sm {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card {
    transition: transform .2s;
}

.card:hover {
    transform: translateY(-5px);
}

.text-white-50 {
    opacity: 0.5;
}

.announcement-item:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
</style>
@endsection

@section('breadcrumb')
    <div class="col-sm-6">
        <h4 class="page-title text-primary font-weight-bold">Dashboard</h4>
        <ol class="breadcrumb bg-transparent p-0">
            <li class="breadcrumb-item"><a href="#" class="text-primary">Home</a></li>
            <li class="breadcrumb-item active text-muted">Dashboard</li>
        </ol>
    </div>
@endsection

@section('content')
    <div class="row">
        <!-- Statistik Cards -->
        <div class="col-xl-4 col-md-6 mb-4">
            <div class="card bg-primary text-white shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-uppercase mb-1">
                                Total Karyawan</div>
                            <div class="h3 mb-0 font-weight-bold">{{ number_format($attendanceStats['total_karyawan']) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-users fa-2x text-white-50"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-md-6 mb-4">
            <div class="card bg-success text-white shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-uppercase mb-1">
                                Hadir Bulan Ini</div>
                            <div class="h3 mb-0 font-weight-bold">{{ number_format($attendanceStats['hadir']) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-check-circle fa-2x text-white-50"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-md-6 mb-4">
            <div class="card bg-info text-white shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-uppercase mb-1">
                                Total Cuti</div>
                            <div class="h3 mb-0 font-weight-bold">{{ number_format($totalCuti) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-calendar-alt fa-2x text-white-50"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Content Row -->
    <div class="row">
        <!-- Pengumuman -->
        <div class="col-xl-8 col-lg-7">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Pengumuman Terbaru</h6>
                </div>
                <div class="card-body">
                    @forelse($announcements as $announcement)
                        <div class="announcement-item mb-3 pb-3 border-bottom">
                            <h5 class="font-weight-bold">{{ $announcement->title }}</h5>
                            <p class="text-muted mb-2">{{ Str::limit($announcement->content, 150) }}</p>
                            <small class="text-muted">
                                <i class="fas fa-clock mr-1"></i>
                                {{ $announcement->created_at->diffForHumans() }}
                            </small>
                        </div>
                    @empty
                        <div class="text-center py-4">
                            <i class="fas fa-bullhorn fa-3x text-gray-300 mb-3"></i>
                            <p class="text-muted">Tidak ada pengumuman terbaru</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>

        <!-- Aktivitas Presensi -->
        <div class="col-xl-4 col-lg-5">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Aktivitas Presensi Terbaru</h6>
                </div>
                <div class="card-body">
                    @forelse($recentAttendance as $attendance)
                        <div class="d-flex align-items-center mb-3">
                            <div class="flex-shrink-0">
                                <div class="avatar-sm bg-light rounded-circle">
                                    <i class="fas {{ $attendance->clock_type == 'in' ? 'fa-sign-in-alt' : 'fa-sign-out-alt' }} 
                                       text-{{ $attendance->status == 'Hadir' ? 'success' : 'warning' }}"></i>
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3 ml-3">
                                <h6 class="mb-1">{{ $attendance->name }}</h6>
                                <p class="text-muted mb-0">
                                    {{ $attendance->clock_type == 'in' ? 'Masuk' : 'Keluar' }} - 
                                    {{ Carbon\Carbon::parse($attendance->created_at)->format('H:i') }}
                                    <span class="badge badge-{{ $attendance->status == 'Hadir' ? 'success' : 'warning' }} ml-2">
                                        {{ $attendance->status }}
                                    </span>
                                </p>
                            </div>
                        </div>
                    @empty
                        <div class="text-center py-4">
                            <i class="fas fa-clock fa-3x text-gray-300 mb-3"></i>
                            <p class="text-muted">Belum ada aktivitas presensi</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
@endsection