@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
{{-- Welcome Card --}}
<div class="row">
    <div class="col-12">
        <div class="card bg-primary text-white mb-4">
            <div class="card-body">
                <h4 class="text-white mb-1">Welcome back, {{ Auth::user()->name }}! 👋</h4>
                <p class="mb-0">Company: <strong>{{ Auth::user()->company->company_name ?? 'N/A' }}</strong></p>
                <p class="mb-0"><small>Today is {{ now()->format('l, F d, Y') }}</small></p>
            </div>
        </div>
    </div>
</div>

{{-- Stats Cards Row 1 --}}
<div class="row">
    <div class="col-sm-6 col-lg-3 mb-4">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <p class="text-muted mb-1">Total Employees</p>
                        <h3 class="mb-0">{{ $stats['total_employees'] }}</h3>
                    </div>
                    <div class="avatar bg-label-primary">
                        <span class="avatar-initial rounded-circle">
                            <i class="bi bi-people fs-3"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-lg-3 mb-4">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <p class="text-muted mb-1">Departments</p>
                        <h3 class="mb-0">{{ $stats['total_departments'] }}</h3>
                    </div>
                    <div class="avatar bg-label-info">
                        <span class="avatar-initial rounded-circle">
                            <i class="bi bi-diagram-3 fs-3"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-lg-3 mb-4">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <p class="text-muted mb-1">Present Today</p>
                        <h3 class="mb-0 text-success">{{ $stats['present_today'] }}</h3>
                    </div>
                    <div class="avatar bg-label-success">
                        <span class="avatar-initial rounded-circle">
                            <i class="bi bi-calendar-check fs-3"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-lg-3 mb-4">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <p class="text-muted mb-1">On Leave</p>
                        <h3 class="mb-0 text-warning">{{ $stats['on_leave_today'] }}</h3>
                    </div>
                    <div class="avatar bg-label-warning">
                        <span class="avatar-initial rounded-circle">
                            <i class="bi bi-calendar-x fs-3"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Stats Cards Row 2 - Pending Items --}}
<div class="row">
    <div class="col-md-4 mb-4">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <p class="text-muted mb-1">Pending Leave Requests</p>
                        <h4 class="mb-0">{{ $stats['pending_leaves'] }}</h4>
                        <a href="{{ route('employee-leaves.index') }}?status=pending" class="btn btn-sm btn-outline-primary mt-2">
                            View All
                        </a>
                    </div>
                    <div class="avatar bg-label-danger">
                        <span class="avatar-initial rounded-circle">
                            <i class="bi bi-exclamation-circle fs-3"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-4 mb-4">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <p class="text-muted mb-1">Pending Overtime</p>
                        <h4 class="mb-0">{{ $stats['pending_overtime'] }}</h4>
                        <a href="{{ route('overtime-requests.index') }}?status=pending" class="btn btn-sm btn-outline-primary mt-2">
                            View All
                        </a>
                    </div>
                    <div class="avatar bg-label-warning">
                        <span class="avatar-initial rounded-circle">
                            <i class="bi bi-clock-history fs-3"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-4 mb-4">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <p class="text-muted mb-1">Draft Payroll</p>
                        <h4 class="mb-0">{{ $stats['draft_payroll'] }}</h4>
                        <a href="{{ route('payroll.index') }}?status=draft" class="btn btn-sm btn-outline-primary mt-2">
                            View All
                        </a>
                    </div>
                    <div class="avatar bg-label-info">
                        <span class="avatar-initial rounded-circle">
                            <i class="bi bi-file-earmark-text fs-3"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Charts and Activities --}}
<div class="row">
    {{-- Attendance Chart --}}
    <div class="col-lg-8 mb-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Attendance Overview (Last 7 Days)</h5>
            </div>
            <div class="card-body">
                <canvas id="attendanceChart" height="100"></canvas>
            </div>
        </div>
    </div>

    {{-- Quick Actions --}}
    <div class="col-lg-4 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Quick Actions</h5>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="{{ route('employees.create') }}" class="btn btn-outline-primary">
                        <i class="bi bi-person-plus me-2"></i>Add Employee
                    </a>
                    <a href="{{ route('payroll.create') }}" class="btn btn-outline-success">
                        <i class="bi bi-cash-stack me-2"></i>Generate Payroll
                    </a>
                    <a href="{{ route('attendance.index') }}" class="btn btn-outline-info">
                        <i class="bi bi-calendar-check me-2"></i>View Attendance
                    </a>
                    <a href="{{ route('employee-leaves.index') }}" class="btn btn-outline-warning">
                        <i class="bi bi-calendar-x me-2"></i>Manage Leaves
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Recent Activities --}}
<div class="row">
    {{-- Recent Attendance --}}
    <div class="col-lg-6 mb-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Recent Clock-Ins Today</h5>
                <a href="{{ route('attendance.index') }}" class="btn btn-sm btn-outline-primary">View All</a>
            </div>
            <div class="card-body">
                @forelse($recentAttendance as $attendance)
                    <div class="d-flex align-items-center mb-3 pb-3 border-bottom">
                        <div class="avatar bg-label-success me-3">
                            <span class="avatar-initial rounded-circle">
                                {{ strtoupper(substr($attendance->employee?->name ?? 'N', 0, 1)) }}
                            </span>
                        </div>
                        <div class="flex-grow-1">
                            <h6 class="mb-0">{{ $attendance->employee?->name ?? 'Unknown' }}</h6>
                            <small class="text-muted">
                                <i class="bi bi-clock me-1"></i>{{ $attendance->clock_in?->format('H:i') ?? '-' }}
                                @if($attendance->late_minutes > 0)
                                    <span class="badge bg-warning ms-2">Late {{ $attendance->late_minutes }} min</span>
                                @endif
                            </small>
                        </div>
                    </div>
                @empty
                    <p class="text-muted text-center py-3">No attendance records today</p>
                @endforelse
            </div>
        </div>
    </div>

    {{-- Pending Leave Requests --}}
    <div class="col-lg-6 mb-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Pending Leave Requests</h5>
                <a href="{{ route('employee-leaves.index') }}" class="btn btn-sm btn-outline-primary">View All</a>
            </div>
            <div class="card-body">
                @forelse($recentLeaves as $leave)
                    <div class="d-flex align-items-center mb-3 pb-3 border-bottom">
                        <div class="avatar bg-label-warning me-3">
                            <span class="avatar-initial rounded-circle">
                                {{ strtoupper(substr($leave->employee?->name ?? 'N', 0, 1)) }}
                            </span>
                        </div>
                        <div class="flex-grow-1">
                            <h6 class="mb-0">{{ $leave->employee?->name ?? 'Unknown' }}</h6>
                            <small class="text-muted">
                                <i class="bi bi-calendar me-1"></i>{{ $leave->start_date?->format('d M') }} - {{ $leave->end_date?->format('d M') }}
                                <span class="badge bg-info ms-2">{{ $leave->leaveType?->leave_name ?? 'N/A' }}</span>
                            </small>
                        </div>
                        <div>
                            <span class="badge bg-warning">Pending</span>
                        </div>
                    </div>
                @empty
                    <p class="text-muted text-center py-3">No pending leave requests</p>
                @endforelse
            </div>
        </div>
    </div>
</div>

{{-- Upcoming Birthdays --}}
@if($upcomingBirthdays->count() > 0)
<div class="row">
    <div class="col-12 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-cake2 me-2"></i>Upcoming Birthdays (Next 7 Days)</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    @foreach($upcomingBirthdays as $employee)
                        <div class="col-md-4 mb-3">
                            <div class="d-flex align-items-center">
                                <div class="avatar bg-label-primary me-3">
                                    <span class="avatar-initial rounded-circle">
                                        {{ strtoupper(substr($employee->name ?? 'N', 0, 1)) }}
                                    </span>
                                </div>
                                <div>
                                    <h6 class="mb-0">{{ $employee->name }}</h6>
                                    <small class="text-muted">
                                        <i class="bi bi-calendar-event me-1"></i>
                                        {{ \Carbon\Carbon::parse($employee->date_of_birth)->format('F d') }}
                                    </small>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
@endif

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
const ctx = document.getElementById('attendanceChart').getContext('2d');
const attendanceData = @json($attendanceChart);

new Chart(ctx, {
    type: 'line',
    data: {
        labels: @json($attendanceChart['labels']),
        datasets: [{
            label: 'Present Employees',
            data: @json($attendanceChart['data']),
            borderColor: 'rgb(75, 192, 192)',
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            tension: 0.4,
            fill: true
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { display: false }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: { stepSize: 1 }
            }
        }
    }
});
</script>
@endpush
@endsection