@extends('layouts.app')
@section('title','Executive Dashboard')
@section('page-title','Executive Dashboard')

@push('styles')
<style>
/* ── Dashboard-wide dark card overrides ────────────────────── */
.dash-card {
    border:none;
    border-radius:16px;
    box-shadow:0 4px 20px rgba(0,0,0,.18);
    overflow:hidden;
}
/* Chart cards */
.dash-card-chart {
    background:linear-gradient(145deg,#0a1628,#0f2140);
    color:#fff;
}
.dash-card-chart .dash-card-header {
    background:rgba(255,255,255,.06);
    border-bottom:1px solid rgba(255,255,255,.08);
    padding:.9rem 1.25rem;
    font-weight:700;
    font-size:.88rem;
    color:rgba(255,255,255,.92);
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.dash-card-chart .dash-card-body {
    padding:1.25rem;
}
/* Table cards — navy dark */
.dash-card-table {
    background:linear-gradient(145deg,#0d1b2e,#122040);
    color:#fff;
}
.dash-card-table .dash-card-header {
    background:rgba(255,255,255,.06);
    border-bottom:1px solid rgba(255,255,255,.08);
    padding:.9rem 1.25rem;
    font-weight:700;
    font-size:.88rem;
    color:rgba(255,255,255,.92);
    display:flex;
    align-items:center;
    justify-content:space-between;
}
/* Override Bootstrap table colours inside dark cards */
.dash-card-table .table > thead > tr > th {
    background:rgba(255,255,255,.05) !important;
    border-bottom:1px solid rgba(255,255,255,.1) !important;
    color:rgba(255,255,255,.55) !important;
    font-size:.68rem;
    text-transform:uppercase;
    letter-spacing:.07em;
}
.dash-card-table .table > tbody > tr > td {
    border-bottom:1px solid rgba(255,255,255,.06) !important;
    color:rgba(255,255,255,.85) !important;
    background:transparent !important;
}
.dash-card-table .table > tbody > tr:hover > td {
    background:rgba(255,255,255,.04) !important;
}
.dash-card-table .table > tbody > tr:last-child > td {
    border-bottom:none !important;
}
/* Approval list rows */
.approval-row {
    display:flex;
    align-items:center;
    gap:.85rem;
    padding:.7rem 1.25rem;
    border-bottom:1px solid rgba(255,255,255,.06);
}
.approval-row:last-child { border-bottom:none; }
.approval-name  { font-weight:700; font-size:.84rem; color:rgba(255,255,255,.9); }
.approval-meta  { font-size:.72rem; color:rgba(255,255,255,.45); }
/* Announcement mini-card */
.ann-inner {
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    padding:.9rem;
    height:100%;
}
.ann-title  { font-size:.87rem; font-weight:700; color:rgba(255,255,255,.92); margin-bottom:.3rem; }
.ann-body   { font-size:.78rem; color:rgba(255,255,255,.5); line-height:1.5; }
</style>
@endpush

@section('content')
<div class="page-header">
    <div class="d-flex align-items-start justify-content-between flex-wrap gap-2">
        <div>
            <h1>Executive Dashboard</h1>
            <nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item active">Overview</li></ol></nav>
        </div>
        <div class="text-end">
            <div class="fw-semibold" style="font-size:.82rem;color:var(--text-2);">{{ now()->format('l, F j, Y') }}</div>
            <div style="font-size:.75rem;color:var(--text-3);">{{ config('app.company', 'My Company') }}</div>
        </div>
    </div>
</div>

{{-- ── Row 1: KPI stat cards ── --}}
<div class="row g-3 mb-3">
    <div class="col-6 col-md-3">
        <div class="stat-card sc-primary">
            <div class="stat-icon"><i class="bi bi-people-fill"></i></div>
            <div class="stat-value">{{ number_format($total_employees) }}</div>
            <div class="stat-label">Active Employees</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card sc-teal">
            <div class="stat-icon"><i class="bi bi-building"></i></div>
            <div class="stat-value">{{ $total_departments }}</div>
            <div class="stat-label">Departments</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card sc-warning">
            <div class="stat-icon"><i class="bi bi-hourglass-split"></i></div>
            <div class="stat-value">{{ $pending_leaves }}</div>
            <div class="stat-label">Pending Approvals</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card sc-gold">
            <div class="stat-icon"><i class="bi bi-currency-dollar"></i></div>
            <div class="stat-value">${{ number_format($monthly_payroll_usd/1000,1) }}K</div>
            <div class="stat-label">Monthly Payroll</div>
        </div>
    </div>
</div>

{{-- ── Row 2: KPI stat cards ── --}}
<div class="row g-3 mb-4">
    <div class="col-6 col-md-3">
        <div class="stat-card sc-danger">
            <div class="stat-icon"><i class="bi bi-shield-exclamation"></i></div>
            <div class="stat-value">{{ $discipline_open }}</div>
            <div class="stat-label">Open Cases</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card sc-success">
            <div class="stat-icon"><i class="bi bi-calendar-check"></i></div>
            <div class="stat-value">{{ $leaves_this_month }}</div>
            <div class="stat-label">Leaves This Month</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card sc-info">
            <div class="stat-icon"><i class="bi bi-mortarboard"></i></div>
            <div class="stat-value">{{ $trainings_scheduled }}</div>
            <div class="stat-label">Scheduled Trainings</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card sc-purple">
            <div class="stat-icon"><i class="bi bi-bar-chart-steps"></i></div>
            <div class="stat-value">{{ $evaluations_pending }}</div>
            <div class="stat-label">Evals Pending Review</div>
        </div>
    </div>
</div>

{{-- ── Charts row ── --}}
<div class="row g-3 mb-3">
    <div class="col-12 col-lg-8">
        <div class="dash-card dash-card-chart h-100">
            <div class="dash-card-header">
                <span><i class="bi bi-graph-up-arrow me-2" style="color:#60a5fa;"></i>Leave Trend — Last 6 Months</span>
            </div>
            <div class="dash-card-body">
                <canvas id="leaveTrendChart" height="105"></canvas>
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-4">
        <div class="dash-card dash-card-chart h-100">
            <div class="dash-card-header">
                <span><i class="bi bi-pie-chart me-2" style="color:#60a5fa;"></i>Staff Breakdown</span>
            </div>
            <div class="dash-card-body d-flex align-items-center justify-content-center">
                <canvas id="staffBreakdownChart" height="175"></canvas>
            </div>
        </div>
    </div>
</div>

{{-- ── Data cards row ── --}}
<div class="row g-3 mb-3">
    {{-- Department headcount --}}
    <div class="col-12 col-lg-6">
        <div class="dash-card dash-card-table h-100">
            <div class="dash-card-header">
                <span><i class="bi bi-building me-2" style="color:#60a5fa;"></i>Department Headcount</span>
            </div>
            <div class="table-responsive">
                <table class="table mb-0">
                    <thead><tr><th>Department</th><th>Type</th><th class="text-end">Staff</th></tr></thead>
                    <tbody>
                    @foreach($dept_headcount as $dept)
                    <tr>
                        <td class="fw-semibold">{{ $dept->name }}</td>
                        <td><span class="badge" style="background:rgba(255,255,255,.12);color:rgba(255,255,255,.75);font-size:.68rem;">{{ str_replace('_',' ',$dept->type) }}</span></td>
                        <td class="text-end fw-bold" style="color:#60a5fa;">{{ $dept->active_count }}</td>
                    </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- Pending approvals --}}
    <div class="col-12 col-lg-6">
        <div class="dash-card dash-card-table h-100">
            <div class="dash-card-header">
                <span><i class="bi bi-hourglass-split me-2" style="color:#fbbf24;"></i>Awaiting Your Approval</span>
                <a href="{{ route('leaves.index') }}?status=hr_approved"
                   style="font-size:.75rem;color:rgba(255,255,255,.55);text-decoration:none;border:1px solid rgba(255,255,255,.2);border-radius:7px;padding:.25rem .7rem;">
                    View All
                </a>
            </div>
            @forelse($pending_approvals as $leave)
            <div class="approval-row">
                <div class="avatar avatar-sm" style="background:linear-gradient(135deg,#1e40af,#3b82f6);color:#fff;flex-shrink:0;">
                    {{ strtoupper(substr($leave->employee->first_name,0,1)) }}
                </div>
                <div class="flex-1 overflow-hidden">
                    <div class="approval-name">{{ $leave->employee->full_name }}</div>
                    <div class="approval-meta">{{ $leave->leaveType->name }} · {{ $leave->date_from->format('M d') }}–{{ $leave->date_to->format('M d, Y') }}</div>
                </div>
                <div class="d-flex gap-1 flex-shrink-0">
                    <form method="POST" action="{{ route('leaves.approve_president', $leave) }}" class="d-inline">
                        @csrf
                        <button class="btn btn-success btn-sm btn-icon" title="Approve"><i class="bi bi-check-lg"></i></button>
                    </form>
                    <a href="{{ route('leaves.show', $leave) }}" class="btn btn-sm btn-icon"
                       style="background:rgba(255,255,255,.1);border:none;color:rgba(255,255,255,.7);" title="View">
                        <i class="bi bi-eye"></i>
                    </a>
                </div>
            </div>
            @empty
            <div class="text-center py-4">
                <i class="bi bi-check-circle d-block mb-1" style="font-size:1.8rem;color:#4ade80;"></i>
                <span style="font-size:.82rem;color:rgba(255,255,255,.45);">No pending approvals</span>
            </div>
            @endforelse
        </div>
    </div>
</div>

{{-- ── Announcements ── --}}
<div class="dash-card dash-card-chart">
    <div class="dash-card-header">
        <span><i class="bi bi-megaphone me-2" style="color:#60a5fa;"></i>Recent Announcements</span>
    </div>
    <div class="dash-card-body">
        @if($announcements->isEmpty())
        <div class="text-center py-2" style="color:rgba(255,255,255,.4);font-size:.83rem;">No announcements</div>
        @else
        <div class="row g-2">
            @foreach($announcements as $ann)
            <div class="col-12 col-md-6 col-lg-4">
                <div class="ann-inner">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="badge bg-{{ $ann->priority === 'urgent' ? 'danger' : ($ann->priority === 'high' ? 'warning' : 'secondary') }}" style="font-size:.66rem;">
                            {{ ucfirst($ann->priority) }}
                        </span>
                        <span style="font-size:.7rem;color:rgba(255,255,255,.4);">{{ $ann->publish_date->format('M d') }}</span>
                    </div>
                    <div class="ann-title">{{ $ann->title }}</div>
                    <div class="ann-body">{{ Str::limit($ann->content, 100) }}</div>
                </div>
            </div>
            @endforeach
        </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
const trendData = @json($leave_trend);
new Chart(document.getElementById('leaveTrendChart'), {
    type: 'bar',
    data: {
        labels: trendData.map(d => d.month),
        datasets: [
            {
                label: 'Total Leaves',
                data: trendData.map(d => d.count),
                backgroundColor: 'rgba(96,165,250,.22)',
                borderColor: '#60a5fa',
                borderWidth: 2,
                borderRadius: 7,
            },
            {
                label: 'Approved',
                data: trendData.map(d => d.approved),
                backgroundColor: 'rgba(74,222,128,.18)',
                borderColor: '#4ade80',
                borderWidth: 2,
                borderRadius: 7,
            }
        ]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { position: 'top', labels: { color: 'rgba(255,255,255,.65)', font: { size: 11 }, boxWidth: 12 } }
        },
        scales: {
            y: { beginAtZero: true, grid: { color: 'rgba(255,255,255,.06)' }, ticks: { color: 'rgba(255,255,255,.5)', font: { size: 10 } } },
            x: { grid: { display: false }, ticks: { color: 'rgba(255,255,255,.5)', font: { size: 10 } } }
        }
    }
});

const empTypes = @json($employment_types);
new Chart(document.getElementById('staffBreakdownChart'), {
    type: 'doughnut',
    data: {
        labels: Object.keys(empTypes).map(k => k.replace('_',' ').replace(/\b\w/g,c=>c.toUpperCase())),
        datasets: [{ data: Object.values(empTypes), backgroundColor: ['#3b82f6','#22d3ee','#4ade80','#fbbf24'], borderWidth: 0 }]
    },
    options: {
        responsive: true,
        cutout: '70%',
        plugins: {
            legend: { position: 'bottom', labels: { color: 'rgba(255,255,255,.65)', font: { size: 11 }, boxWidth: 12, padding: 14 } }
        }
    }
});
</script>
@endpush