@extends('layouts.admin')

@section('title', '儀表板')

@push('breadcrumb')
    <li class="breadcrumb-item active" aria-current="page">儀表板</li>
@endpush

@push('styles')
<link rel="stylesheet" href="{{ asset('css/pages/dashboard.css') }}">
@endpush

@section('content')
<!-- Compact Welcome -->
<div class="dashboard-header">
    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
        <div>
            <h1><i class="bi bi-speedometer2"></i>儀表板總覽</h1>
            <p>歡迎回來，{{ auth()->user()->name ?? '系統管理員' }}</p>
        </div>
       <div class="updated-at text-muted" style="font-size: 1.3rem; line-height: 1; font-weight: bold;"> 
            <i class="bi bi-clock me-2"></i>{{ now()->format('Y-m-d H:i') }} 
        </div> 
    </div>
</div>

<!-- Vacancy overview with large icons -->
<div class="vacancy-panel">
    <div class="panel-title">
        <i class="bi bi-door-open-fill text-success me-1"></i>宿舍空位總覽
    </div>
    <div class="vacancy-grid">
        <div class="vacancy-item total">
            <div class="vacancy-icon">
                <i class="bi bi-house-heart-fill"></i>
            </div>
            <div class="vacancy-meta">
                <div class="label">總床位 / 剩餘空位</div>
                <div class="value">{{ $vacancies['total_available'] }}</div>
                <div class="sub">總床位 {{ $vacancies['total_capacity'] }}｜已住 {{ $vacancies['total_occupied'] }}</div>
            </div>
        </div>

        <div class="vacancy-item male">
            <div class="vacancy-icon">
                <i class="bi bi-gender-male"></i>
            </div>
            <div class="vacancy-meta">
                <div class="label">男宿剩餘空位</div>
                <div class="value text-primary">{{ $vacancies['male_available'] }}</div>
                <div class="sub">男宿總床 {{ $vacancies['male_capacity'] }}</div>
            </div>
        </div>

        <div class="vacancy-item female">
            <div class="vacancy-icon">
                <i class="bi bi-gender-female"></i>
            </div>
            <div class="vacancy-meta">
                <div class="label">女宿剩餘空位</div>
                <div class="value" style="color:#e83e8c;">{{ $vacancies['female_available'] }}</div>
                <div class="sub">女宿總床 {{ $vacancies['female_capacity'] }}</div>
            </div>
        </div>

        <div class="vacancy-item any">
            <div class="vacancy-icon">
                <i class="bi bi-gender-ambiguous"></i>
            </div>
            <div class="vacancy-meta">
                <div class="label">不限性別剩餘</div>
                <div class="value" style="color:#6f42c1;">{{ $vacancies['any_available'] }}</div>
                <div class="sub">不限總床 {{ $vacancies['any_capacity'] }}</div>
            </div>
        </div>
    </div>
</div>

@php
    $urgencyLabels = [
        'urgent' => ['label' => '明天', 'badge' => 'urg-badge-urgent'],
        'soon'   => ['label' => '3天內', 'badge' => 'urg-badge-soon'],
        'warn'   => ['label' => '7天內', 'badge' => 'urg-badge-warn'],
        'normal' => ['label' => '', 'badge' => ''],
    ];
    // 每張大卡內部依緊急程度分三個小卡片（明天 / 3天內 / 7天內 + 其他）
    $urgBuckets = fn ($items) => [
        'urgent' => $items->filter(fn ($i) => ($i->urgency ?? 'normal') === 'urgent')->values(),
        'soon'   => $items->filter(fn ($i) => ($i->urgency ?? 'normal') === 'soon')->values(),
        'warn'   => $items->filter(fn ($i) => ($i->urgency ?? 'normal') === 'warn')->values(),
        'normal' => $items->filter(fn ($i) => ! in_array($i->urgency ?? 'normal', ['urgent', 'soon', 'warn']))->values(),
    ];
    $briefingBuckets = $urgBuckets($reminders['briefing']);
    $idApplyBuckets = $urgBuckets($reminders['id_apply']);
    $permitBuckets = $urgBuckets($reminders['permit']);
@endphp

<!-- Reminder Cards：三張大卡片，內部分明天/3天內/7天內小卡片 -->
<div class="row mb-3">
    @php
        $bigCards = [
            ['key' => 'briefing', 'icon' => 'bi-calendar-check', 'iconColor' => 'text-primary', 'badge' => 'bg-primary',
             'title' => '參加勞工簡介會', 'subtitle' => '', 'buckets' => $briefingBuckets,
             'url' => route('labor_application_steps.index')],
            ['key' => 'id_apply', 'icon' => 'bi-credit-card-2-front', 'iconColor' => 'text-success', 'badge' => 'bg-success',
             'title' => '申請身份證', 'subtitle' => '', 'buckets' => $idApplyBuckets,
             'url' => route('labor_application_steps.index')],
            ['key' => 'permit', 'icon' => 'bi-file-earmark-check', 'iconColor' => 'text-danger', 'badge' => 'bg-danger',
             'title' => '批文結束日期', 'subtitle' => '', 'buckets' => $permitBuckets,
             'url' => route('application_progresses.index')],
        ];
        $urgSubTitles = ['urgent' => '明天', 'soon' => '3天內', 'warn' => '7天內', 'normal' => '其他'];
    @endphp
    @foreach($bigCards as $card)
        <div class="col-lg-4 col-md-6 mb-3">
            <div class="chart-card h-100">
                <div class="chart-title">
                    <i class="bi {{ $card['icon'] }} {{ $card['iconColor'] }} me-1"></i><a href="{{ $card['url'] }}" class="text-decoration-none text-reset">{{ $card['title'] }}</a>
                    <span class="badge {{ $card['badge'] }} ms-1">
                        {{ $card['buckets']['urgent']->count() + $card['buckets']['soon']->count() + $card['buckets']['warn']->count() + $card['buckets']['normal']->count() }}
                    </span>
                    <span class="urg-legend ms-2"><span class="urg-dot urg-dot-urgent"></span>明天</span>
                    <span class="urg-legend"><span class="urg-dot urg-dot-soon"></span>3天內</span>
                    <span class="urg-legend"><span class="urg-dot urg-dot-warn"></span>7天內</span>
                </div>
                @if($card['subtitle'])
                    <div class="chart-subtitle">{{ $card['subtitle'] }}</div>
                @endif
                <div class="urg-groups p-2" style="max-height: 420px; overflow-y: auto;">
                    @foreach(['urgent', 'soon', 'warn', 'normal'] as $bucketKey)
                        @php $bucket = $card['buckets'][$bucketKey]; @endphp
                        @continue($bucket->isEmpty())
                        <div class="urg-bucket urg-bucket-{{ $bucketKey }}">
                            <div class="urg-bucket-title">
                                <span class="urg-dot urg-dot-{{ $bucketKey }}"></span>{{ $urgSubTitles[$bucketKey] }}
                                <span class="urg-bucket-count">{{ $bucket->count() }}</span>
                            </div>
                            @foreach($bucket as $item)
                                <div class="urg-entry">
                                    @if($card['key'] === 'briefing')
                                        <div class="urg-entry-head">
                                            <span class="urg-name">{{ $item->company_name }}</span>
                                            @if($item->location)<span class="urg-branch"><i class="bi bi-geo-alt me-1"></i>{{ $item->location }}</span>@endif
                                            <span class="urg-date">{{ $item->date?->format('Y-m-d') }}</span>
                                        </div>
                                        <div class="urg-entry-names">@foreach($item->people as $person)<a href="{{ $person->url }}" class="text-decoration-none text-reset">{{ $person->name }}</a>{{ ! $loop->last ? '、' : '' }}@endforeach</div>
                                    @elseif($card['key'] === 'id_apply')
                                        <div class="urg-entry-head">
                                            <span class="urg-name">{{ $item->place ?? '地點未填' }}</span>
                                            <span class="urg-date">{{ $item->date?->format('Y-m-d H:i') }}</span>
                                        </div>
                                        <div class="urg-entry-names">@foreach($item->people as $person)<a href="{{ $person->url }}" class="text-decoration-none text-reset">{{ $person->name }}</a>{{ ! $loop->last ? '、' : '' }}@endforeach</div>
                                    @else
                                        <div class="urg-entry-head">
                                            <span class="urg-name">
                                                @if(($item->source_type ?? '') === 'progress')
                                                    <a href="{{ route('application_progresses.edit', $item->source_id) }}" class="text-decoration-none text-reset">{{ $item->display_labor_no ?? '勞工處編號未填' }}</a>
                                                @elseif(($item->source_type ?? '') === 'worker')
                                                    <a href="{{ route('workers.show', $item->source_id) }}" class="text-decoration-none text-reset">{{ $item->display_labor_no ?? '勞工處編號未填' }}</a>
                                                @else
                                                    {{ $item->display_labor_no ?? '勞工處編號未填' }}
                                                @endif
                                            </span>
                                            <span class="urg-branch">{{ $item->display_company }}</span>
                                            <span class="urg-date">{{ $item->permit_end_date?->format('Y-m-d') }}</span>
                                            @if($item->is_overdue ?? false)<span class="badge bg-danger">已過期</span>@endif
                                        </div>
                                        @if(!empty($item->zh_name))
                                            <div class="urg-entry-names">{{ $item->zh_name }}</div>
                                        @endif
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    @endforeach
                    @if($card['buckets']['urgent']->isEmpty() && $card['buckets']['soon']->isEmpty() && $card['buckets']['warn']->isEmpty() && $card['buckets']['normal']->isEmpty())
                        <div class="text-center py-4 text-muted">
                            <i class="bi bi-check-circle-fill text-success mb-2" style="font-size: 2rem;"></i>
                            <div>目前沒有安排</div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    @endforeach
</div>

<div class="row">
    <!-- Issue & Contract Status -->
    <div class="col-lg-12 mb-3">
        <div class="d-flex gap-3">
            <!-- Pending Issues -->
            <div class="flex-fill" style="flex: 1;">
                <a href="{{ route('issues.index', ['status' => 'open']) }}" class="text-decoration-none">
                    <div class="alert-card h-100" style="border-left-color: #667eea; min-height: 150px;">
                        <div class="card-header py-3" style="color: #667eea; border-bottom-color: #667eea;">
                            <i class="bi bi-kanban me-1"></i>待處理問題
                            <span class="badge ms-1" style="background-color: #667eea;">
                                {{ $issueNotifications['total_open'] ?? 0 }}
                            </span>
                            @if(($issueNotifications['overdue'] ?? 0) > 0)
                                <span class="badge bg-danger ms-1">
                                    {{ $issueNotifications['overdue'] }} 逾期
                                </span>
                            @endif
                        </div>
                        <div class="card-body py-4">
                            <div class="d-flex justify-content-around align-items-center text-center">
                                <div class="px-2">
                                    <div class="fw-bold text-dark" style="font-size: 4.0rem; line-height: 1;">
                                        {{ $issueNotifications['total_open'] ?? 0 }}
                                    </div>
                                    <large class="text-muted">待處理問題</large>
                                </div>
                                <div class="border-start px-3 mx-2">
                                    <div class="fw-bold text-primary" style="font-size: 4.0rem; line-height: 1;">
                                        {{ $issueNotifications['my_issues'] ?? 0 }}
                                    </div>
                                    <large class="text-muted">指派給我</large>
                                </div>
                                <div class="border-start px-3">
                                    <div class="fw-bold text-danger" style="font-size: 4.0rem; line-height: 1;">
                                        {{ $issueNotifications['overdue'] ?? 0 }}
                                    </div>
                                    <large class="text-muted">逾期問題</large>
                                </div>
                                <i class="bi bi-arrow-right-circle-fill text-primary ms-3" style="font-size: 2rem;"></i>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <!-- Contract Expiry Alerts -->
            <div class="flex-fill" style="flex: 1;">
                <div class="alert-card h-100" style="min-height: 10px;">
                    <div class="card-header py-3">
                        <i class="bi bi-exclamation-triangle-fill me-1"></i>合約到期預警
                        <span class="badge bg-danger ms-1">{{ $expiringWorkers->count() }}</span>
                    </div>
                    <div class="card-body">
                        @if($expiringWorkers->count() > 0)
                            <div style="max-height: 130px; overflow-y: auto;" class="pe-2">
                                @foreach($expiringWorkers->take(4) as $worker)
                                    <div class="alert-item">
                                        <div class="flex-grow-1">
                                            <div class="worker-name">
                                                <i class="bi bi-person text-primary me-1"></i>{{ $worker->zh_name }}
                                            </div>
                                            <div class="worker-details">
                                                {{ $worker->branch->name ?? '未分配' }}
                                            </div>
                                        </div>
                                        <div class="expiry-value">{{ $worker->contract_end_date?->format('Y-m-d') }}</div>
                                        <a href="{{ route('workers.show', $worker->id) }}" class="btn btn-outline-danger btn-sm">
                                            查看
                                        </a>
                                    </div>
                                @endforeach
                                @if($expiringWorkers->count() > 4)
                                    <div class="text-center py-2">
                                        <a href="{{ route('workers.index') }}" class="small text-danger">
                                            還有 {{ $expiringWorkers->count() - 4 }} 筆
                                        </a>
                                    </div>
                                @endif
                            </div>
                        @else
                            <div class="d-flex flex-column align-items-center justify-content-center py-5 text-center" style="min-height: 100px;">
                                <i class="bi bi-check-circle-fill text-success mb-2" style="font-size: 2.5rem;"></i>
                                <h5 class="text-success mb-1">太棒了！</h5>
                                <p class="text-muted mb-0">目前沒有即將到期的合約</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection