@extends('layouts.template.main')

@section('content')
    <main>
        <header class="page-header page-header-dark bg-gradient-primary-to-secondary pb-10">
            <div class="container-xl px-4">
                <div class="row align-items-center justify-content-between">
                    <div class="col-auto mt-4">
                        <div class="profile-head">
                            <div class="p-avatar">
                                @if (auth()->user() && auth()->user()->image)
                                    <img class="img-fluid" style="    border-radius: 100%;" src="{{ auth()->user()->image }}"
                                        alt="avatar">
                                @else
                                    {{ mb_strimwidth(auth()->user()->name ?? '-', 0, 2) }}
                                @endif
                            </div>
                            <div style="flex:1;">
                                <div class="p-greet"><span class="today" id="greeting"></span>,
                                    {{ auth()->user()->name ?? '-' }}</div>
                                <div class="p-sub">
                                    <span class="role-badge">{{ auth()->user()->role ?? '-' }}</span>
                                    {{ auth()->user()->email ?? '-' }}

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- Main page content-->
        <div class="container-xl px-4 mt-n10">

            <!-- Example Colored Cards for Dashboard Demo-->
            <div class="row">


                {{-- ----------------------------- Thông báo nghỉ phép/đi làm muộn ----------------------------- --}}

                <div class="col-lg-6 col-xl-3 mb-4">
                    <div class="card bg-primary text-white h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="me-3">
                                    <div class="text-lg small">
                                        Tổng số App
                                    </div>
                                    <span class="fw-bold" style="font-size: 50px">{{ $countApps }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer small text-white-50">
                            <a href="{{ route('app_follow') }}" style="color: #fff"> <i class="fab fa-android me-1"></i>
                                {{ $countAndroid }}
                                Android</a>

                            &nbsp;·&nbsp;
                            <a href="{{ route('app_ios') }}"style="color: #fff"> <i class="fab fa-apple me-1"></i>
                                {{ $countIos }} iOS</a>
                        </div>
                    </div>
                </div>

                {{-- ----------------------------- Payrolls ----------------------------- --}}

                <div class="col-lg-6 col-xl-3 mb-4">
                    <div class="card bg-indigo text-white h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="me-3">
                                    <div class="text-lg small">
                                        Tổng nhân sự
                                    </div>
                                    <span class="fw-bold" style="font-size: 50px">{{ $countUser ?? '' }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer d-flex align-items-center justify-content-between small">
                            {{-- <a class="text-white stretched-link" href="{{ route('kanban.index') }}">Xem công việc</a>
                            <div class="text-white">
                                <i class="fas fa-angle-right"></i>
                            </div> --}}
                        </div>
                    </div>
                </div>

                {{-- ----------------------------- Expenses ----------------------------- --}}



                {{-- ----------------------------- Announcements ----------------------------- --}}

                <div class="col-lg-6 col-xl-3 mb-4">
                    <div class="card bg-dark text-white h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="me-3">
                                    <div class="text-lg small">
                                        Công việc
                                    </div>
                                    <span class="fw-bold" style="font-size: 50px">{{ $countTasks ?? '' }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer d-flex align-items-center justify-content-between small">
                            <a class="text-white stretched-link" href="{{ route('kanban.index') }}">Xem công việc</a>
                            <div class="text-white">
                                <i class="fas fa-angle-right"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-xl-3 mb-4">
                    <div class="card bg-danger text-white h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="me-3">
                                    <div class="text-lg small">
                                        Công việc quá hạn
                                    </div>
                                    <span class="fw-bold" style="font-size: 50px">{{ $countOverdue ?? '' }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer d-flex align-items-center justify-content-between small">
                            <a class="text-white stretched-link" href="{{ route('kanban.index') }}">Xem công việc</a>
                            <div class="text-white">
                                <i class="fas fa-angle-right"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- ------------------------- Tasks Alert ------------------------- --}}
            @if ($tasks->isNotEmpty())
                <div class="row">
                    <div class="col-xl-12 mb-4">
                        <div class="card card-header-actions h-100">
                            <div class="card-header">
                                Cảnh báo cần xử lý
                                <div class="dropdown no-caret">
                                </div>
                            </div>
                            <div class="task-me">
                                <table class="table">
                                    <tbody>
                                        @php $now = now(); @endphp
                                        @foreach ($tasks as $task)
                                            <tr>
                                                <td class="py-2">
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <div class="d-flex align-items-center"
                                                            style="line-height:1rem;gap: 10px;">
                                                            <div>
                                                                <a href="{{ route('kanban.index') }}"
                                                                    class="mb-1 fw-bold text-dark">
                                                                    {{ $task->title ?? '' }}
                                                                </a>
                                                                <p class="small mb-1 mt-2">
                                                                    {{ $task->list?->name ?? ($task->task->title ?? '') }}
                                                                    <br>
                                                                    @php
                                                                        $dueDate = $task->due_date
                                                                            ? \Carbon\Carbon::parse($task->due_date)
                                                                            : null;
                                                                        $isOverdue = $dueDate && $dueDate->lt($now);
                                                                    @endphp
                                                                    <span
                                                                        class="{{ $isOverdue ? 'text-danger fw-semibold' : 'text-muted' }}">
                                                                        Hạn:
                                                                        {{ $dueDate?->format('d/m/Y, H:i') ?? 'Chưa đặt' }}
                                                                        @if ($isOverdue)
                                                                            - <span>Trễ
                                                                                {{ $dueDate->diffForHumans($now, true) }}</span>
                                                                        @endif

                                                                    </span>

                                                                </p>
                                                            </div>
                                                            <div class="cu-avatars cu-card-assignees"
                                                                style="display: contents;" title="Sửa người phụ trách">
                                                                @foreach ($task->assignees as $assignee)
                                                                    @php
                                                                        $user = $assignee->user ?? $assignee;
                                                                    @endphp
                                                                    <div class="d-flex align-items-center">
                                                                        <div class="p-avatar-small">
                                                                            @if ($user->avatar)
                                                                                <img src="{{ $user->avatar }}"
                                                                                    alt="{{ $user->name }}"
                                                                                    class="avatar-xs rounded-circle"
                                                                                    title="{{ $user->name }}"
                                                                                    style="object-fit: cover; border: 2px solid white;">
                                                                            @else
                                                                                {{ mb_strimwidth(auth()->user()->name ?? '-', 0, 1) }}
                                                                            @endif
                                                                        </div>
                                                                        <span style="color: #000;font-size: 12px">
                                                                            {{ $user->name }}</span>
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                        </div>

                                                        <div>
                                                            @php
                                                                $status =
                                                                    $task->status ?? ($task->task->status ?? null);
                                                            @endphp
                                                            <span class="badge badge-pill"
                                                                style="color:{{ $status->color ?? '#6B6B84' }}; background:{{ $status->bg_tint ?? '#F1F1F5' }};">
                                                                {{ $status->label ?? 'Không xác định' }}
                                                            </span>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
            {{-- ========================= Danh mục App ========================= --}}
            <div class="dash-section-title">Danh mục App</div>

            {{-- Filter pills --}}
            <div class="filter-pills" id="platformFilter">
                <button class="filter-pill active" data-plat="all">Tất cả</button>
                <button class="filter-pill" data-plat="android">Android</button>
                <button class="filter-pill" data-plat="ios">iOS</button>
            </div>

            <div class="dash-grid-main">
                {{-- Pipeline trạng thái --}}
                <div class="dash-panel">
                    <div class="dash-panel-head">
                        <h3 id="pipelineTitle">Trạng thái App</h3>
                        <span class="dash-ph-note" id="pipelineNote">{{ $countApps }} app · Android + iOS</span>
                    </div>
                    <div class="pipeline" id="pipeline"></div>
                </div>

                {{-- Tỉ lệ nền tảng --}}
                <div class="dash-panel">
                    <div class="dash-panel-head">
                        <h3 id="ratioTitle">Tỉ lệ nền tảng</h3>
                        <span class="dash-ph-note" id="ratioNote">Android / iOS</span>
                    </div>
                    {{-- <canvas id="platformChart" height="170"></canvas> --}}
                    <div class="dash-legend-row" id="ratioLegend"></div>
                </div>
            </div>

            {{-- =============== Nhân sự & khối lượng công việc =============== --}}
            <div class="dash-section-title" style="margin-top:10px;">Nhân sự &amp; Khối lượng công việc</div>
            <div class="dash-panel" style="margin-bottom:24px;">
                <div class="dash-panel-head">
                    <h3>Khối lượng công việc theo nhân sự</h3>
                    <span class="dash-ph-note">Số lượt được gán vai trò trên các App</span>
                </div>
                <div id="workload"></div>
                <div class="dash-legend-row" style="margin-top:14px;">
                    <div class="dash-legend-item"><span class="dash-sw" style="background:#6C5CE7"></span> Developer
                    </div>
                    <div class="dash-legend-item"><span class="dash-sw" style="background:#00B894"></span> Designer</div>
                    <div class="dash-legend-item"><span class="dash-sw" style="background:#E17055"></span> Tester</div>
                    <div class="dash-legend-item"><span class="dash-sw" style="background:#3970D6"></span> Marketing
                    </div>
                    <div class="dash-legend-item"><span class="dash-sw" style="background:#9CA3AF"></span> Data</div>
                    <div class="dash-legend-item"><span class="dash-sw" style="background:#F59E0B"></span> Task Kanban
                    </div>
                    <div class="dash-legend-item"><span class="dash-sw" style="background:#10B981"></span> Subtask Kanban
                    </div>
                </div>
            </div>

        </div>
    </main>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
    <script>
        // ── Greeting ──
        function updateGreeting() {
            const hour = new Date().getHours();
            let greeting = '';
            if (hour >= 5 && hour < 11) greeting = 'Chào buổi sáng';
            else if (hour >= 11 && hour < 13) greeting = 'Chào buổi trưa';
            else if (hour >= 13 && hour < 18) greeting = 'Chào buổi chiều';
            else greeting = 'Chào buổi tối';
            document.getElementById('greeting').textContent = greeting;
        }
        updateGreeting();

        // ── Data từ PHP ──
        const pipelineByPlatform = @json($pipelineByPlatform);
        const ratioData = @json($ratioData);
        const workloadRaw = @json($workloadData);

        // ── Pipeline ──
        function renderPipeline(plat) {
            const pipeline = pipelineByPlatform[plat] || [];
            console.log(
                pipeline
            );

            const maxVal = Math.max(...pipeline.map(p => p.count), 1);
            const total = pipeline.reduce((a, p) => a + p.count, 0);

            document.getElementById('pipeline').innerHTML = pipeline.map(p => `
                <div class="pipe-row">
                    <div class="pipe-label">${p.label}</div>
                    <div class="pipe-track">
                        <div class="pipe-fill" style="width:${Math.max((p.count / maxVal * 100), p.count > 0 ? 2 : 0)}%;background:${p.background}"></div>
                    </div>
                    <div class="pipe-count">${p.count}</div>
                </div>
            `).join('');

            const noteMap = {
                all: `${total} app · Android + iOS`,
                android: `${total} app Android`,
                ios: `${total} app iOS`,
            };
            document.getElementById('pipelineNote').textContent = noteMap[plat] || `${total} app`;
        }

        // ── Ratio Chart ──
        let platformChart;

        function renderRatio(plat) {
            const d = ratioData[plat];
            if (!d) return;
            document.getElementById('ratioTitle').textContent = d.title;
            document.getElementById('ratioNote').textContent = d.note;
            document.getElementById('ratioLegend').innerHTML = d.labels.map((l, i) =>
                `<div class="dash-legend-item"><span class="dash-sw" style="background:${d.colors[i]}"></span> ${l} — ${d.values[i]} app</div>`
            ).join('');

            if (platformChart) {
                platformChart.data.labels = d.labels;
                platformChart.data.datasets[0].data = d.values;
                platformChart.data.datasets[0].backgroundColor = d.colors;
                platformChart.update();
            } else {
                platformChart = new Chart(document.getElementById('platformChart'), {
                    type: 'doughnut',
                    data: {
                        labels: d.labels,
                        datasets: [{
                            data: d.values,
                            backgroundColor: d.colors,
                            borderWidth: 0,
                            borderRadius: 4
                        }],
                    },
                    options: {
                        cutout: '68%',
                        plugins: {
                            legend: {
                                display: false
                            },
                            tooltip: {
                                callbacks: {
                                    label: c => ` ${c.label}: ${c.parsed} app`
                                }
                            },
                        },
                    },
                });
            }
        }

        // ── Filter pills ──
        document.querySelectorAll('#platformFilter .filter-pill').forEach(btn => {
            btn.addEventListener('click', () => {
                document.querySelectorAll('#platformFilter .filter-pill').forEach(b => b.classList.remove(
                    'active'));
                btn.classList.add('active');
                renderPipeline(btn.dataset.plat);
                renderRatio(btn.dataset.plat);
            });
        });

        renderPipeline('all');
        renderRatio('all');

        // ── Workload ──
        const roleColor = {
            Developer: '#6C5CE7',
            Designer: '#00B894',
            Tester: '#E17055',
            Marketing: '#3970D6',
            Data: '#9CA3AF',
            Task: '#F59E0B',
            Subtask: '#10B981',
        };

        const workload = Array.isArray(workloadRaw) ? workloadRaw : Object.values(workloadRaw);
        if (workload.length > 0) {
            const maxWl = Math.max(...workload.map(w => w.total));
            document.getElementById('workload').innerHTML = workload.map(w => {
                const segs = Object.entries(w.seg).map(([k, v]) =>
                    `<div class="wl-seg" style="width:${(v / w.total * 100).toFixed(1)}%;background:${roleColor[k] || '#ccc'}"></div>`
                ).join('');
                return `
                <div class="wl-row">
                    <div class="wl-name">${w.name}<div class="wl-role">${w.role}</div></div>
                    <div class="wl-bar" style="width:${(w.total / maxWl * 100).toFixed(1)}%">${segs}</div>
                    <div class="wl-total">${w.total}</div>
                </div>`;
            }).join('');
        } else {
            document.getElementById('workload').innerHTML =
                '<p style="color:#A6A49C;font-size:13px;text-align:center;padding:16px 0;">Chưa có dữ liệu nhân sự</p>';
        }
    </script>
@endsection
<style scoped>
    .app-assigned,

    .action-me {
        height: 60vh;
        scrollbar-width: thin;
        scrollbar-color: #adb5bd #f1f3f5;
        overflow-y: auto;
    }

    .task-me {
        height: 30vh;
        scrollbar-width: thin;
        scrollbar-color: #adb5bd #f1f3f5;
        overflow-y: auto;
    }


    .profile-head {
        display: flex;
        align-items: center;
        gap: 16px;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 18px;
        padding: 18px 22px;
        margin-bottom: 20px;
    }

    .p-avatar {
        border-radius: 100%;
        width: 56px;
        height: 56px;
        background: linear-gradient(135deg, #6C5CE7, #4B3FBF);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 800;
        font-size: 20px;
        flex-shrink: 0;
    }

    .p-avatar-small {
        border-radius: 100%;
        width: 20px;
        height: 20px;
        background: linear-gradient(135deg, #6C5CE7, #4B3FBF);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 800;
        font-size: 10px;
        flex-shrink: 0;
    }

    .p-greet {
        color: #fff;
        font-size: 19px;
        font-weight: 800;
        letter-spacing: -.01em;
    }

    .p-sub {
        font-size: 12.5px;
        color: var(--ink-soft);
        margin-top: 3px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .role-badge {
        font-size: 10.5px;
        font-weight: 700;
        padding: 2px 9px;
        border-radius: 100px;
        background: #EDE9FE;
        color: #6C5CE7;
    }

    .status-live {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 11px;
        color: var(--teal);
        font-weight: 600;
    }

    .status-live .d {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--teal);
    }

    /* ===== Danh mục App + Workload ===== */
    .dash-section-title {
        font-size: 16px;
        font-weight: 700;
        color: #1F2124;
        margin: 0 0 14px;
        letter-spacing: -.01em;
    }

    .dash-grid-main {
        display: grid;
        grid-template-columns: 1.35fr 1fr;
        gap: 16px;
        margin-bottom: 16px;
    }

    @media (max-width: 900px) {
        .dash-grid-main {
            grid-template-columns: 1fr;
        }
    }

    .dash-panel {
        background: #fff;
        border: 1px solid #E7E5DF;
        border-radius: 14px;
        padding: 20px 22px 18px;
    }

    .dash-panel-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-bottom: 14px;
        gap: 8px;
        flex-wrap: wrap;
    }

    .dash-panel-head h3 {
        font-size: 14px;
        font-weight: 700;
        margin: 0;
        color: #1F2124;
        letter-spacing: -.01em;
    }

    .dash-ph-note {
        font-size: 11.5px;
        color: #8E8C85;
    }

    /* Pipeline */
    .pipeline {
        display: flex;
        flex-direction: column;
        gap: 9px;
    }

    .pipe-row {
        display: grid;
        grid-template-columns: 110px 1fr 32px;
        align-items: center;
        gap: 10px;
    }

    .pipe-label {
        font-size: 12.5px;
        font-weight: 600;
        color: #1F2124;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pipe-track {
        height: 9px;
        background: #F0EFF9;
        border-radius: 6px;
        overflow: hidden;
    }

    .pipe-fill {
        height: 100%;
        border-radius: 6px;
        transition: width .4s ease;
    }

    .pipe-count {
        font-size: 12.5px;
        text-align: right;
        color: #8E8C85;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

    /* Filter pills */
    .filter-pills {
        display: flex;
        gap: 6px;
        background: #F0EFF9;
        padding: 3px;
        border-radius: 100px;
        width: max-content;
        margin-bottom: 14px;
    }

    .filter-pill {
        border: none;
        background: transparent;
        font-size: 12px;
        font-weight: 600;
        color: #8E8C85;
        padding: 6px 14px;
        border-radius: 100px;
        cursor: pointer;
        transition: all .15s ease;
    }

    .filter-pill.active {
        background: #fff;
        color: #4B3FBF;
        box-shadow: 0 2px 6px -1px rgba(76, 63, 191, .18);
    }

    /* Legend */
    .dash-legend-row {
        display: flex;
        gap: 12px;
        margin-top: 10px;
        flex-wrap: wrap;
    }

    .dash-legend-item {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 11px;
        color: #8E8C85;
    }

    .dash-sw {
        width: 9px;
        height: 9px;
        border-radius: 2px;
        display: inline-block;
        flex-shrink: 0;
    }

    /* Workload */
    .wl-row {
        display: grid;
        grid-template-columns: 120px 1fr 30px;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
    }

    .wl-name {
        font-size: 12.5px;
        font-weight: 600;
        color: #1F2124;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .wl-role {
        font-size: 10.5px;
        color: #8E8C85;
        font-weight: 400;
        margin-top: 1px;
    }

    .wl-bar {
        height: 16px;
        border-radius: 5px;
        background: #F0EFF9;
        display: flex;
        overflow: hidden;
        min-width: 4px;
    }

    .wl-seg {
        height: 100%;
    }

    .wl-total {
        font-size: 12px;
        text-align: right;
        color: #8E8C85;
        font-variant-numeric: tabular-nums;
    }
</style>