@extends('layouts.app')

@section('title', 'Executive Dashboard')

@section('content')
<div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-2">
    <div>
        <h4 class="fw-bold mb-1">Human Resources Dashboard</h4>
        <p class="text-secondary small mb-0">Real-time attendance metrics, workforce analytics & approvals for {{ $currentOrganization->name ?? 'PeopleFlow Organization' }}</p>
    </div>
    <div class="d-flex align-items-center gap-2">
        <a href="{{ route('employees.create') }}" class="btn btn-primary btn-sm shadow-sm">
            <i class="bi bi-person-plus-fill me-1"></i> Add Employee
        </a>
        <a href="{{ route('attendance.index') }}" class="btn btn-outline-secondary btn-sm bg-white">
            <i class="bi bi-calendar3 me-1"></i> Today's Roster
        </a>
    </div>
</div>

<!-- 6 KPI Metrics Cards -->
<div class="row g-3 mb-4">
    <!-- 1. Total Workforce -->
    <div class="col-12 col-sm-6 col-xl-2">
        <div class="stat-card">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <span class="text-secondary small fw-medium">Total Staff</span>
                <span class="p-2 rounded-3 bg-primary-subtle text-primary">
                    <i class="bi bi-people-fill"></i>
                </span>
            </div>
            <h3 class="fw-bold mb-1">{{ $totalEmployees }}</h3>
            <div class="small text-success d-flex align-items-center">
                <i class="bi bi-check-circle-fill me-1"></i> {{ $activeEmployees }} Active
            </div>
        </div>
    </div>

    <!-- 2. Present Today -->
    <div class="col-12 col-sm-6 col-xl-2">
        <div class="stat-card">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <span class="text-secondary small fw-medium">Present Today</span>
                <span class="p-2 rounded-3 bg-success-subtle text-success">
                    <i class="bi bi-person-check-fill"></i>
                </span>
            </div>
            <h3 class="fw-bold mb-1">{{ $presentToday }}</h3>
            <div class="small text-secondary">
                {{ $totalEmployees > 0 ? round(($presentToday / $totalEmployees) * 100, 1) : 0 }}% Turnout
            </div>
        </div>
    </div>

    <!-- 3. Late Arrivals -->
    <div class="col-12 col-sm-6 col-xl-2">
        <div class="stat-card">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <span class="text-secondary small fw-medium">Late Arrivals</span>
                <span class="p-2 rounded-3 bg-warning-subtle text-warning">
                    <i class="bi bi-alarm-fill"></i>
                </span>
            </div>
            <h3 class="fw-bold mb-1 text-warning-emphasis">{{ $lateToday }}</h3>
            <div class="small text-warning">
                > 15m Grace Period
            </div>
        </div>
    </div>

    <!-- 4. On Leave -->
    <div class="col-12 col-sm-6 col-xl-2">
        <div class="stat-card">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <span class="text-secondary small fw-medium">On Leave</span>
                <span class="p-2 rounded-3 bg-info-subtle text-info">
                    <i class="bi bi-calendar2-range-fill"></i>
                </span>
            </div>
            <h3 class="fw-bold mb-1">{{ $onLeaveToday }}</h3>
            <div class="small text-secondary">
                {{ $pendingApprovalsCount }} Pending queue
            </div>
        </div>
    </div>

    <!-- 5. Monthly Payroll (BDT) -->
    <div class="col-12 col-sm-6 col-xl-2">
        <div class="stat-card">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <span class="text-secondary small fw-medium">Est. Payroll</span>
                <span class="p-2 rounded-3 bg-purple-subtle text-purple" style="background-color: #f3e8ff; color: #7e22ce;">
                    <i class="bi bi-cash-coin"></i>
                </span>
            </div>
            <h4 class="fw-bold mb-1 text-truncate" title="৳ {{ number_format($monthlyPayrollCost, 2) }}">
                ৳{{ number_format($monthlyPayrollCost / 1000, 1) }}k
            </h4>
            <div class="small text-secondary">
                BDT Gross / mo
            </div>
        </div>
    </div>

    <!-- 6. Helpdesk Tickets -->
    <div class="col-12 col-sm-6 col-xl-2">
        <div class="stat-card">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <span class="text-secondary small fw-medium">HR Helpdesk</span>
                <span class="p-2 rounded-3 bg-danger-subtle text-danger">
                    <i class="bi bi-ticket-perforated-fill"></i>
                </span>
            </div>
            <h3 class="fw-bold mb-1">{{ $openTicketsCount }}</h3>
            <div class="small text-danger">
                Open Requests
            </div>
        </div>
    </div>
</div>

<!-- Charts & Punch Row -->
<div class="row g-3 mb-4">
    <!-- Attendance Trend Chart -->
    <div class="col-12 col-xl-8">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center bg-white">
                <div>
                    <h6 class="mb-0 fw-bold">Attendance Trend (Past 7 Days)</h6>
                    <small class="text-secondary">On-time turnout vs late check-ins</small>
                </div>
                <span class="badge bg-light text-secondary border">09:00 AM Standard Shift</span>
            </div>
            <div class="card-body">
                <div style="height: 270px; position: relative;">
                    <canvas id="attendanceTrendChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Department Distribution Doughnut Chart -->
    <div class="col-12 col-xl-4">
        <div class="card h-100">
            <div class="card-header bg-white">
                <h6 class="mb-0 fw-bold">Department Headcount</h6>
                <small class="text-secondary">Workforce distribution by business unit</small>
            </div>
            <div class="card-body d-flex flex-column justify-content-center align-items-center">
                <div style="height: 230px; width: 100%; position: relative;">
                    <canvas id="departmentChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Operational Tables Row: Recent Attendance & Pending Approvals -->
<div class="row g-3">
    <!-- Recent Attendance Log -->
    <div class="col-12 col-xl-7">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center bg-white">
                <div>
                    <h6 class="mb-0 fw-bold">Recent Attendance Activity</h6>
                    <small class="text-secondary">Live check-ins for {{ date('d M Y') }}</small>
                </div>
                <a href="{{ route('attendance.index') }}" class="btn btn-xs btn-outline-primary py-1 px-2 text-xs">
                    View Full Log &rarr;
                </a>
            </div>
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light small text-secondary">
                        <tr>
                            <th>Employee</th>
                            <th>Department</th>
                            <th>Check-In</th>
                            <th>Status</th>
                            <th>Late (m)</th>
                        </tr>
                    </thead>
                    <tbody class="small">
                        @forelse($recentAttendances as $att)
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="badge bg-secondary-subtle text-secondary rounded-circle me-2 p-2" style="width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;">
                                            {{ strtoupper(substr($att->employee->first_name ?? 'E', 0, 1)) }}
                                        </div>
                                        <div>
                                            <div class="fw-semibold text-dark">{{ $att->employee->full_name ?? 'Unknown' }}</div>
                                            <span class="text-muted text-xs">{{ $att->employee->employee_code ?? '' }}</span>
                                        </div>
                                    </div>
                                </td>
                                <td>{{ $att->employee->department->name ?? 'General' }}</td>
                                <td class="fw-semibold text-dark">
                                    {{ $att->check_in ? $att->check_in->format('h:i A') : '--:--' }}
                                </td>
                                <td>
                                    @if($att->status === 'present')
                                        <span class="badge badge-soft-success">Present</span>
                                    @elseif($att->status === 'late')
                                        <span class="badge badge-soft-warning">Late</span>
                                    @elseif($att->status === 'half_day')
                                        <span class="badge badge-soft-info">Half-Day</span>
                                    @else
                                        <span class="badge badge-soft-danger">Absent</span>
                                    @endif
                                </td>
                                <td>
                                    @if($att->late_minutes > 0)
                                        <span class="text-warning fw-semibold">+{{ $att->late_minutes }}m</span>
                                    @else
                                        <span class="text-muted">On time</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center py-4 text-muted">
                                    <i class="bi bi-clock-slash fs-4 d-block mb-1"></i>
                                    No attendance activity recorded yet today.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Pending Leave Approvals -->
    <div class="col-12 col-xl-5">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center bg-white">
                <div>
                    <h6 class="mb-0 fw-bold">Pending Leave Approvals</h6>
                    <small class="text-secondary">Requires management or HR review</small>
                </div>
                <span class="badge bg-warning-subtle text-warning border">{{ $pendingApprovals->count() }} Pending</span>
            </div>
            <div class="card-body p-0">
                <div class="list-group list-group-flush">
                    @forelse($pendingApprovals as $leave)
                        <div class="list-group-item p-3">
                            <div class="d-flex justify-content-between align-items-start mb-1">
                                <div>
                                    <span class="fw-semibold text-dark">{{ $leave->employee->full_name ?? 'Employee' }}</span>
                                    <span class="badge bg-primary-subtle text-primary ms-1">{{ $leave->leaveType->name ?? 'Leave' }}</span>
                                </div>
                                <span class="badge bg-light text-secondary border">
                                    {{ $leave->total_days }} {{ $leave->total_days > 1 ? 'Days' : 'Day' }}
                                </span>
                            </div>
                            <div class="small text-muted mb-2">
                                <i class="bi bi-calendar-event me-1"></i>
                                {{ $leave->start_date->format('M d') }} - {{ $leave->end_date->format('M d, Y') }}
                                <span class="mx-1">&bull;</span>
                                <span class="fst-italic text-secondary">"{{ Str::limit($leave->reason, 45) }}"</span>
                            </div>
                            <div class="d-flex gap-2">
                                <form action="{{ route('leaves.approve', $leave->id) }}" method="POST">
                                    @csrf
                                    <button type="submit" class="btn btn-xs btn-success py-1 px-2 text-xs">
                                        <i class="bi bi-check-lg me-1"></i> Approve
                                    </button>
                                </form>
                                <form action="{{ route('leaves.reject', $leave->id) }}" method="POST">
                                    @csrf
                                    <button type="submit" class="btn btn-xs btn-outline-danger py-1 px-2 text-xs">
                                        <i class="bi bi-x-lg me-1"></i> Reject
                                    </button>
                                </form>
                            </div>
                        </div>
                    @empty
                        <div class="text-center py-4 text-muted">
                            <i class="bi bi-check2-circle fs-3 text-success d-block mb-1"></i>
                            All leave applications have been reviewed!
                        </div>
                    @endforelse
                </div>
            </div>
            @if($pendingApprovals->count() > 0)
                <div class="card-footer bg-white text-center py-2 border-top">
                    <a href="{{ route('leaves.approvals') }}" class="small fw-semibold text-primary text-decoration-none">
                        Manage All Requests &rarr;
                    </a>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener("DOMContentLoaded", function () {
    // 1. Attendance Trend Line Chart
    const trendCtx = document.getElementById('attendanceTrendChart').getContext('2d');
    new Chart(trendCtx, {
        type: 'line',
        data: {
            labels: {!! json_encode($trendLabels) !!},
            datasets: [
                {
                    label: 'Present (On-time)',
                    data: {!! json_encode($trendPresent) !!},
                    borderColor: '#2563eb',
                    backgroundColor: 'rgba(37, 99, 235, 0.08)',
                    fill: true,
                    tension: 0.35,
                    borderWidth: 2,
                    pointBackgroundColor: '#2563eb',
                    pointRadius: 4
                },
                {
                    label: 'Late Check-in',
                    data: {!! json_encode($trendLate) !!},
                    borderColor: '#f59e0b',
                    backgroundColor: 'rgba(245, 158, 11, 0.08)',
                    fill: true,
                    tension: 0.35,
                    borderWidth: 2,
                    pointBackgroundColor: '#f59e0b',
                    pointRadius: 4
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                    labels: { boxWidth: 12, font: { size: 12 } }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: { precision: 0 }
                }
            }
        }
    });

    // 2. Department Distribution Doughnut Chart
    const deptCtx = document.getElementById('departmentChart').getContext('2d');
    new Chart(deptCtx, {
        type: 'doughnut',
        data: {
            labels: {!! json_encode($deptLabels) !!},
            datasets: [{
                data: {!! json_encode($deptCounts) !!},
                backgroundColor: [
                    '#2563eb', '#10b981', '#f59e0b', '#8b5cf6', '#ec4899', '#06b6d4'
                ],
                borderWidth: 2,
                borderColor: '#ffffff'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: { boxWidth: 10, font: { size: 11 } }
                }
            },
            cutout: '65%'
        }
    });
});
</script>
@endpush