@extends('adminlte::page')

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

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1><i class="fas fa-file-alt mr-2"></i>Dashboard Pemohon</h1>
        <div class="d-flex align-items-center">
            <label class="mr-2 mb-0 font-weight-bold text-muted"><i class="fas fa-calendar-alt mr-1"></i>Tahun:</label>
            <form method="GET" action="{{ route('pemohon.dashboard') }}">
                <select name="tahun" class="form-control form-control-sm" style="width:auto" onchange="this.form.submit()">
                    @for ($y = 2026; $y <= 2040; $y++)
                        <option value="{{ $y }}" {{ $tahun == $y ? 'selected' : '' }}>{{ $y }}
                        </option>
                    @endfor
                </select>
            </form>
        </div>
    </div>
@stop

@section('content')

    {{-- Ticker Iklan --}}
    @if ($iklans->isNotEmpty())
        <div class="row mb-3">
            <div class="col-12">
                <div class="iklan-ticker-wrap">
                    <span class="iklan-ticker-label">
                        <i class="fas fa-bullhorn mr-1"></i> IKLAN
                    </span>
                    <div class="iklan-ticker-content">
                        <div class="iklan-ticker-inner">
                            @foreach ($iklans as $iklan)
                                <span class="iklan-ticker-item">
                                    <strong>{{ $iklan->tajuk }}</strong>
                                    &mdash;
                                    {{ $iklan->kandungan }}
                                    @if ($iklan->lampiran)
                                        &nbsp;<a href="{{ Storage::url($iklan->lampiran) }}" target="_blank"
                                            class="iklan-ticker-attachment"><i class="fas fa-paperclip"></i> Lampiran</a>
                                    @endif
                                </span>
                                @if (!$loop->last)
                                    <span class="iklan-ticker-sep">&#9679;</span>
                                @endif
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    {{-- Kad Ringkasan --}}
    <div class="row mb-3">
        {{-- Status Pendaftaran --}}
        <div class="col-md-4">
            @php
                $bgStatus = $progressPct == 100 ? 'success' : ($progressPct > 0 ? 'warning' : 'secondary');
                $ikonStatus = $progressPct == 100 ? 'check-circle' : 'tasks';
            @endphp
            <div class="info-box bg-{{ $bgStatus }}">
                <span class="info-box-icon"><i class="fas fa-{{ $ikonStatus }}"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Pendaftaran Buku {{ $tahun }}</span>
                    <span class="info-box-number">{{ $selesaiCount }} / {{ $totalDarjah }} Darjah</span>
                    <div class="progress mt-1" style="height:5px">
                        <div class="progress-bar bg-white" style="width:{{ $progressPct }}%"></div>
                    </div>
                    <span class="progress-description">{{ $progressPct }}% lengkap</span>
                </div>
            </div>
        </div>

        {{-- Status Pengesahan --}}
        <div class="col-md-4">
            @php
                $statusPen = $pengesahanSaya?->status ?? 'belum_hantar';
                $bgPen = match ($statusPen) {
                    'lulus' => 'success',
                    'ditolak' => 'danger',
                    'belum_semak' => 'warning',
                    default => 'secondary',
                };
                $ikonPen = match ($statusPen) {
                    'lulus' => 'check-double',
                    'ditolak' => 'times-circle',
                    'belum_semak' => 'clock',
                    default => 'paper-plane',
                };
                $labelPen = match ($statusPen) {
                    'lulus' => 'Lulus',
                    'ditolak' => 'Ditolak',
                    'belum_semak' => 'Menunggu Semakan',
                    default => 'Belum Dihantar',
                };
            @endphp
            <div class="info-box bg-{{ $bgPen }}">
                <span class="info-box-icon"><i class="fas fa-{{ $ikonPen }}"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Status Pengesahan {{ $tahun }}</span>
                    <span class="info-box-number">{{ $labelPen }}</span>
                    @if ($pengesahanSaya?->dihantar_pada)
                        <span class="progress-description">Dihantar:
                            {{ $pengesahanSaya->dihantar_pada->format('d/m/Y') }}</span>
                    @endif
                </div>
            </div>
        </div>

        {{-- Maklumat Checker --}}
        <div class="col-md-4">
            <div class="info-box bg-info">
                <span class="info-box-icon"><i class="fas fa-user-check"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Checker Sekolah</span>
                    <span class="info-box-number" style="font-size:1rem">
                        {{ $checker ? $checker->name : '-' }}
                    </span>
                    @if ($checker)
                        <span class="progress-description">{{ $checker->nama_sekolah ?? $checker->kod_sekolah }}</span>
                    @else
                        <span class="progress-description text-white-50">Tiada checker ditetapkan</span>
                    @endif
                </div>
            </div>
        </div>
    </div>

@stop

@push('css')
    <style>
        .iklan-ticker-wrap {
            display: flex;
            align-items: center;
            background: #fff3cd;
            border: 1px solid #ffc107;
            border-radius: 6px;
            overflow: hidden;
            height: 42px;
        }

        .iklan-ticker-label {
            flex-shrink: 0;
            background: #ffc107;
            color: #fff;
            font-weight: 700;
            padding: 0 16px;
            height: 100%;
            display: flex;
            align-items: center;
            white-space: nowrap;
            font-size: 13px;
        }

        .iklan-ticker-attachment {
            color: #856404;
            text-decoration: underline;
            font-size: 13px;
        }

        .iklan-ticker-attachment:hover {
            color: #533f03;
        }

        .iklan-ticker-content {
            flex: 1;
            overflow: hidden;
            position: relative;
            height: 100%;
        }

        .iklan-ticker-inner {
            display: inline-block;
            white-space: nowrap;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            animation: ticker-scroll 30s linear infinite;
            font-size: 14px;
            color: #555;
            padding-left: 100%;
        }

        .iklan-ticker-item {
            margin-right: 12px;
        }

        .iklan-ticker-sep {
            margin: 0 20px;
            color: #ffc107;
        }

        @keyframes ticker-scroll {
            0% {
                transform: translateY(-50%) translateX(0);
            }

            100% {
                transform: translateY(-50%) translateX(-100%);
            }
        }

        .iklan-ticker-content:hover .iklan-ticker-inner {
            animation-play-state: paused;
        }
    </style>
@endpush
