@extends('dashboard.base')

@section('title', 'Dashboard')

@section('content')
<div class="content-wrapper">
    <div class="row">
        <div class="col-md-12 grid-margin">
            <div class="row">
                <div class="col-12 col-xl-8 mb-4 mb-xl-0">
                    <h3 class="font-weight-bold">Selamat Datang di Dashboard Admin</h3>
                    <h6 class="font-weight-normal mb-0">Kelola sistem absensi karyawan dengan mudah</h6>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 mb-4 stretch-card transparent">
            <div class="card card-tale">
                <div class="card-body">
                    <p class="mb-4">Total User</p>
                    <p class="fs-30 mb-2" id="totalUsers">-</p>
                    <p>Admin: <span id="totalAdmin">-</span> | Karyawan: <span id="totalEmployee">-</span></p>
                </div>
            </div>
        </div>
        <div class="col-md-6 mb-4 stretch-card transparent">
            <div class="card card-dark-blue">
                <div class="card-body">
                    <p class="mb-4">Absensi Hari Ini</p>
                    <p class="fs-30 mb-2" id="todayAttendance">-</p>
                    <p>Hadir: <span id="todayPresent">-</span> | Pending: <span id="todayPending">-</span></p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 mb-4 stretch-card transparent">
            <div class="card card-light-blue">
                <div class="card-body">
                    <p class="mb-4">Izin Pending</p>
                    <p class="fs-30 mb-2" id="pendingPermissions">-</p>
                    <p>Total Izin: <span id="totalPermissions">-</span></p>
                </div>
            </div>
        </div>
        <div class="col-md-6 mb-4 stretch-card transparent">
            <div class="card card-light-danger">
                <div class="card-body">
                    <p class="mb-4">Absensi Bulan Ini</p>
                    <p class="fs-30 mb-2" id="monthlyAttendance">-</p>
                    <p>Total kehadiran bulan ini</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title mb-3">Absensi Terbaru</h5>
                    <div id="recentAttendances">
                        <div class="text-center py-4">
                            <div class="spinner-border" role="status">
                                <span class="sr-only">Memuat...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title mb-3">Izin Terbaru</h5>
                    <div id="recentPermissions">
                        <div class="text-center py-4">
                            <div class="spinner-border" role="status">
                                <span class="sr-only">Memuat...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('script')
<script>
$(document).ready(function() {
    loadDashboardData();
});

function loadDashboardData() {
    $.ajax({
        url: '/api/admin/reports/dashboard',
        type: 'GET',
        headers: {
            'Authorization': getAuthorizationHeader(),
            'Accept': 'application/json'
        },
        success: function(response) {
            const data = response.data;

            $('#totalUsers').text(data.statistics.users.total);
            $('#totalAdmin').text(data.statistics.users.admin);
            $('#totalEmployee').text(data.statistics.users.employee);

            $('#todayAttendance').text(data.statistics.attendance.today);
            $('#todayPresent').text(data.statistics.attendance.today_present);
            $('#todayPending').text(data.statistics.attendance.today_pending);

            $('#pendingPermissions').text(data.statistics.permission.pending);
            $('#totalPermissions').text(data.statistics.permission.total);

            $('#monthlyAttendance').text(data.statistics.attendance.this_month);

            let attendanceHtml = '';
            if (data.recent_attendances.length > 0) {
                data.recent_attendances.forEach(function(att) {
                    const statusBadge = getStatusBadge(att.status);
                    attendanceHtml += `
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <div class="d-flex align-items-start">
                                <i class="mdi mdi-account-circle-outline icon-md text-muted me-3"></i>
                                <div>
                                    <h6 class="mb-0 text-dark">${att.user.name}</h6>
                                    <small class="text-muted">${att.type === 'in' ? 'Masuk' : 'Keluar'} - ${att.date} ${att.time}</small>
                                </div>
                            </div>
                            <span class="badge badge-sm ${statusBadge.class}">${statusBadge.text}</span>
                        </div>
                    `;
                });
            } else {
                attendanceHtml = '<p class="text-muted text-center mt-3">Belum ada data absensi.</p>';
            }
            $('#recentAttendances').html(attendanceHtml);

            let permissionHtml = '';
            if (data.recent_permissions.length > 0) {
                data.recent_permissions.forEach(function(permission) {
                    const statusBadge = getStatusBadge(permission.status);
                    permissionHtml += `
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <div class="d-flex align-items-start">
                                <i class="mdi mdi-account-circle-outline icon-md text-muted me-3"></i>
                                <div>
                                    <h6 class="mb-0 text-dark">${permission.user.name}</h6>
                                    <small class="text-muted">${permission.category} - ${permission.start_date} s.d. ${permission.end_date}</small>
                                </div>
                            </div>
                            <span class="badge badge-sm ${statusBadge.class}">${statusBadge.text}</span>
                        </div>
                    `;
                });
            } else {
                permissionHtml = '<p class="text-muted text-center mt-3">Belum ada data izin.</p>';
            }
            $('#recentPermissions').html(permissionHtml);
        },
        error: function(xhr) {
            console.error('Error loading dashboard data:', xhr);
        }
    });
}

function getStatusBadge(status) {
    switch(status) {
        case 'pending':
            return {class: 'text-warning', text: 'Pending'};
        case 'accepted':
            return {class: 'text-success', text: 'Disetujui'};
        case 'rejected':
            return {class: 'text-danger', text: 'Ditolak'};
        default:
            return {class: 'text-muted', text: status};
    }
}
</script>
@endpush