@extends('layouts.app')

@section('title', 'Dashboard Karyawan')
@section('page-title')
    Selamat Datang, {{ $employee->name }}
@endsection
@section('page-subtitle')
    NIK: <strong class="font-monospace text-dark">{{ $employee->nik }}</strong> &bull; Departemen: <strong>{{ $employee->department?->name ?? '-' }}</strong> &bull; Jabatan: <strong>{{ $employee->position?->name ?? '-' }}</strong>
@endsection

@push('styles')
<style>
    .hero-attendance-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        position: relative;
    }
    .clock-widget {
        background: #f8fafc;
        border-radius: 0.75rem;
        padding: 1.25rem;
        border: 1px solid #e2e8f0;
    }
    .clock-digits {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 2rem;
        font-weight: 800;
        color: #0f172a;
        letter-spacing: -0.5px;
    }
    .pulsing-colon {
        animation: blinkColon 1s infinite;
        color: #435ebe;
    }
    @keyframes blinkColon {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.2; }
    }

    @media (max-width: 576px) {
        .clock-digits {
            font-size: 1.5rem;
        }
        .clock-widget {
            padding: 0.85rem;
        }
        .hero-attendance-card .card-body {
            padding: 1.15rem !important;
        }
    }
</style>
@endpush

@section('content')
<section class="row g-3">
    {{-- Main Left Column --}}
    <div class="col-12 col-lg-8">
        {{-- Attendance Action Hero Card --}}
        <div class="card hero-attendance-card shadow-xs mb-4">
            <div class="card-body p-4">
                <div class="row align-items-center g-3">
                    <div class="col-md-7">
                        <div class="d-inline-flex align-items-center gap-1 badge bg-light text-primary px-3 py-1 rounded-pill mb-2 fw-semibold text-xs border">
                            <i class="bi bi-geo-alt"></i>
                            <span>Presensi Geofencing GPS</span>
                        </div>
                        <h4 class="text-dark fw-bold mb-2">Presensi Hari Ini</h4>
                        <p class="text-muted text-sm mb-3">
                            <i class="bi bi-calendar3 me-1"></i> <strong>{{ now()->translatedFormat('l, d F Y') }}</strong><br>
                            <i class="bi bi-clock me-1"></i> Shift: <strong>{{ $shift ? $shift->name.' ('.\Carbon\Carbon::parse($shift->start_time)->format('H:i').' - '.\Carbon\Carbon::parse($shift->end_time)->format('H:i').' WIB)' : 'Reguler (08:00 - 17:00 WIB)' }}</strong>
                        </p>

                        @if(!$todayAttendance)
                            <div class="alert alert-warning py-2 px-3 mb-3 border-0 rounded-3 text-xs d-flex align-items-center gap-2">
                                <i class="bi bi-exclamation-circle-fill fs-6"></i>
                                <span>Anda belum melakukan presensi masuk hari ini.</span>
                            </div>
                            <div class="d-flex flex-wrap gap-2">
                                <a href="{{ url('/employee/scan-qr') }}" class="btn btn-primary btn-lg shadow-sm fw-bold">
                                    <i class="bi bi-qr-code-scan me-2"></i> SCAN QR PRESENSI
                                </a>
                                <a href="{{ url('/employee/attendance/check-in') }}" class="btn btn-outline-success btn-lg">
                                    <i class="bi bi-camera me-1"></i> Absen Selfie
                                </a>
                            </div>
                        @elseif(!$todayAttendance->check_out)
                            <div class="alert alert-success py-2 px-3 mb-3 border-0 rounded-3 text-xs d-flex align-items-center gap-2">
                                <i class="bi bi-check-circle-fill fs-6"></i>
                                <span>Sudah absen masuk pukul <strong>{{ \Carbon\Carbon::parse($todayAttendance->check_in)->format('H:i') }} WIB</strong> (Status: <strong>{{ $todayAttendance->status_label }}</strong>).</span>
                            </div>
                            <div class="d-flex flex-wrap gap-2">
                                <a href="{{ url('/employee/scan-qr') }}" class="btn btn-danger btn-lg shadow-sm fw-bold">
                                    <i class="bi bi-qr-code-scan me-2"></i> SCAN QR PULANG
                                </a>
                                <a href="{{ url('/employee/attendance/check-out') }}" class="btn btn-outline-danger btn-lg">
                                    <i class="bi bi-box-arrow-right me-1"></i> Pulang Manual
                                </a>
                            </div>
                        @else
                            <div class="alert alert-info py-2 px-3 mb-0 border-0 rounded-3 text-xs d-flex align-items-center gap-2">
                                <i class="bi bi-check2-all fs-6"></i>
                                <span>Presensi hari ini telah lengkap (Masuk: <strong>{{ \Carbon\Carbon::parse($todayAttendance->check_in)->format('H:i') }}</strong> &bull; Pulang: <strong>{{ \Carbon\Carbon::parse($todayAttendance->check_out)->format('H:i') }}</strong>).</span>
                            </div>
                        @endif
                    </div>

                    {{-- Server Clock --}}
                    <div class="col-md-5 text-center">
                        <div class="clock-widget">
                            <span class="badge bg-white text-muted text-xs px-2 py-1 border rounded-pill mb-2 fw-medium">Waktu Server (WIB)</span>
                            <div class="clock-digits mb-1" id="live-clock-container">
                                <span id="clock-hours">{{ now()->format('H') }}</span><span class="pulsing-colon">:</span><span id="clock-minutes">{{ now()->format('i') }}</span><span class="pulsing-colon">:</span><span id="clock-seconds">{{ now()->format('s') }}</span>
                            </div>
                            <small class="text-muted text-xs">Sinkronisasi Real-Time</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- 4 Stat Badges --}}
        <div class="row g-3 mb-4">
            <div class="col-6 col-md-3">
                <div class="card text-center border shadow-xs mb-0">
                    <div class="card-body p-3">
                        <div class="text-muted text-xs fw-semibold mb-1">STATUS HARI INI</div>
                        <h6 class="fw-bold mb-0">
                            @if($todayAttendance)
                                <span class="badge {{ $todayAttendance->status_badge }}">{{ $todayAttendance->status_label }}</span>
                            @else
                                <span class="badge bg-light text-secondary border">Belum Absen</span>
                            @endif
                        </h6>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card text-center border shadow-xs mb-0">
                    <div class="card-body p-3">
                        <div class="text-muted text-xs fw-semibold mb-1">JAM MASUK</div>
                        <h5 class="fw-bold mb-0 text-success">
                            {{ $todayAttendance?->check_in ? \Carbon\Carbon::parse($todayAttendance->check_in)->format('H:i') : '--:--' }}
                        </h5>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card text-center border shadow-xs mb-0">
                    <div class="card-body p-3">
                        <div class="text-muted text-xs fw-semibold mb-1">JAM PULANG</div>
                        <h5 class="fw-bold mb-0 text-danger">
                            {{ $todayAttendance?->check_out ? \Carbon\Carbon::parse($todayAttendance->check_out)->format('H:i') : '--:--' }}
                        </h5>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card text-center border shadow-xs mb-0">
                    <div class="card-body p-3">
                        <div class="text-muted text-xs fw-semibold mb-1">SISA CUTI</div>
                        <h5 class="fw-bold mb-0 text-primary">
                            {{ $employee->leave_balance }} Hari
                        </h5>
                    </div>
                </div>
            </div>
        </div>

        {{-- Recent Attendance History --}}
        <div class="card border shadow-xs">
            <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0 fw-bold text-dark">Riwayat Kehadiran Terakhir</h5>
                <a href="{{ url('/employee/attendance/history') }}" class="btn btn-sm btn-outline-primary">
                    <span>Lihat Semua</span>
                    <i class="bi bi-arrow-right ms-1"></i>
                </a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th class="ps-4">Tanggal</th>
                                <th>Masuk</th>
                                <th>Pulang</th>
                                <th>Status</th>
                                <th>Keterlambatan</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentAttendances as $att)
                                <tr>
                                    <td class="ps-4"><strong>{{ \Carbon\Carbon::parse($att->attendance_date)->translatedFormat('d M Y') }}</strong></td>
                                    <td><span class="font-monospace fw-semibold">{{ $att->check_in ? \Carbon\Carbon::parse($att->check_in)->format('H:i') : '-' }}</span></td>
                                    <td><span class="font-monospace fw-semibold">{{ $att->check_out ? \Carbon\Carbon::parse($att->check_out)->format('H:i') : '-' }}</span></td>
                                    <td>
                                        <span class="badge {{ $att->status_badge }}">{{ $att->status_label }}</span>
                                    </td>
                                    <td>
                                        @if($att->late_minutes > 0)
                                            <span class="text-danger fw-bold text-xs">+{{ $att->late_minutes }} Menit</span>
                                        @else
                                            <span class="text-success text-xs fw-semibold">Tepat Waktu</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center py-4 text-muted">Belum ada riwayat absensi yang tercatat.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Right Column --}}
    <div class="col-12 col-lg-4">
        {{-- Profile Mini Card --}}
        <div class="card border shadow-xs text-center mb-3">
            <div class="card-body py-4">
                <div class="avatar avatar-xl mx-auto mb-3 shadow-xs position-relative" style="width: 72px; height: 72px;">
                    @if($employee->photo)
                        <img src="{{ asset($employee->photo) }}" alt="Avatar" style="width: 72px; height: 72px; object-fit: cover; border-radius: 50%; border: 2px solid #e2e8f0;">
                    @else
                        <div class="bg-primary text-white fs-4 fw-bold rounded-circle d-flex align-items-center justify-content-center" style="width: 72px; height: 72px;">
                            {{ strtoupper(substr($employee->name, 0, 2)) }}
                        </div>
                    @endif
                </div>
                <h5 class="fw-bold text-dark mb-1">{{ $employee->name }}</h5>
                <p class="text-muted text-xs mb-3 font-monospace">{{ $employee->email }}</p>
                <div class="d-flex justify-content-center gap-2 mb-3">
                    <span class="badge bg-light text-primary border">{{ $employee->position?->name ?? 'Staff' }}</span>
                    <span class="badge bg-light text-success border">{{ ucfirst($employee->employment_status) }}</span>
                </div>
                <a href="{{ url('/employee/profile') }}" class="btn btn-sm btn-outline-secondary w-100">
                    <i class="bi bi-pencil me-1"></i> Edit Profil Saya
                </a>
            </div>
        </div>

        {{-- Quick Leave Request Card --}}
        <div class="card border shadow-xs">
            <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                <h6 class="fw-bold text-dark mb-0">Pengajuan Izin / Cuti</h6>
                <a href="{{ url('/employee/leave-requests') }}" class="btn btn-sm btn-outline-primary">+ Ajukan</a>
            </div>
            <div class="card-body p-3">
                @forelse($recentLeaves as $leave)
                    <div class="d-flex justify-content-between align-items-center mb-3 pb-3 border-bottom">
                        <div>
                            <h6 class="mb-0 fw-bold text-dark text-sm">{{ $leave->type_label }}</h6>
                            <small class="text-muted text-xs">{{ \Carbon\Carbon::parse($leave->start_date)->format('d M') }} s/d {{ \Carbon\Carbon::parse($leave->end_date)->format('d M Y') }} ({{ $leave->total_days }} Hari)</small>
                        </div>
                        <span class="badge {{ $leave->status_badge }}">{{ ucfirst($leave->status) }}</span>
                    </div>
                @empty
                    <div class="text-center py-4 text-muted">
                        <i class="bi bi-calendar-check fs-2 d-block mb-1 text-secondary opacity-50"></i>
                        <small class="text-muted">Belum ada pengajuan izin atau cuti aktif.</small>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
    function updateClock() {
        const now = new Date();
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');
        
        const elH = document.getElementById('clock-hours');
        const elM = document.getElementById('clock-minutes');
        const elS = document.getElementById('clock-seconds');
        
        if (elH) elH.innerText = hours;
        if (elM) elM.innerText = minutes;
        if (elS) elS.innerText = seconds;
    }
    setInterval(updateClock, 1000);
</script>
@endpush