@extends('layouts.app')

@section('title', 'Dashboard — Presensi')
@section('page-title', 'Dashboard')

@section('content')

    {{-- ================= Live punch clock ================= --}}
    <div class="clock-panel">
        <div class="clock-date mono" id="liveDate">{{ now()->translatedFormat('l, d F Y') }}</div>
        <div class="clock-time mono" id="liveClock">{{ now()->format('H:i:s') }}</div>

        <div class="clock-actions">
            @if (!$todayAttendance || !$todayAttendance->check_in)
                <form method="POST" action="{{ route('user.check-in') }}" id="checkInForm">
                    @csrf
                    <input type="hidden" name="latitude" id="checkInLat">
                    <input type="hidden" name="longitude" id="checkInLng">
                    <button type="submit" class="btn btn-primary" id="checkInBtn" disabled>
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4"/><path d="M10 17l5-5-5-5"/><path d="M15 12H3"/></svg>
                        Absen Masuk
                    </button>
                </form>
            @else
                <span class="stamp-badge tone-success stamp-just-in">
                    Masuk {{ \Carbon\Carbon::parse($todayAttendance->check_in)->format('H:i') }}
                    @if($todayAttendance->check_in_status === 'terlambat')
                        &middot; Terlambat
                    @else
                        &middot; Hadir
                    @endif
                </span>
            @endif

            @if ($todayAttendance && $todayAttendance->check_in && !$todayAttendance->check_out)
                <form method="POST" action="{{ route('user.check-out') }}" id="checkOutForm">
                    @csrf
                    <input type="hidden" name="latitude" id="checkOutLat">
                    <input type="hidden" name="longitude" id="checkOutLng">
                    <button type="submit" class="btn btn-outline" style="background:#fff;" id="checkOutBtn" disabled>
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 3H5a2 2 0 00-2 2v14a2 2 0 002 2h4"/><path d="M14 17l5-5-5-5"/><path d="M19 12H7"/></svg>
                        Absen Pulang
                    </button>
                </form>
            @elseif ($todayAttendance && $todayAttendance->check_out)
                <span class="stamp-badge tone-idle">
                    Pulang {{ \Carbon\Carbon::parse($todayAttendance->check_out)->format('H:i') }}
                    &middot; {{ $todayAttendance->check_out_status === 'pulang_cepat' ? 'Pulang Cepat' : 'Tepat Waktu' }}
                </span>
            @endif
        </div>

        <p class="form-hint" id="geoStatus" style="color:#C9D0E4; position:relative;"></p>
        <p class="form-hint" id="checkOutHint" style="color:#C9D0E4; position:relative;"></p>
    </div>

    {{-- ================= Info lokasi & jam kerja ================= --}}
    @if ($attendanceSetting)
        <div class="card">
            <div class="card-head">
                <h2>{{ $attendanceSetting->office_name }}</h2>
            </div>
            <div class="stat-grid" style="margin-bottom:0;">
                <div class="stat-card tone-primary">
                    <span class="stat-tab"></span>
                    <div class="stat-label">Jam Masuk</div>
                    <div class="stat-value">{{ \Carbon\Carbon::parse($attendanceSetting->check_in_time)->format('H:i') }}</div>
                </div>
                <div class="stat-card tone-primary">
                    <span class="stat-tab"></span>
                    <div class="stat-label">Jam Pulang</div>
                    <div class="stat-value">{{ \Carbon\Carbon::parse($attendanceSetting->check_out_time)->format('H:i') }}</div>
                </div>
                <div class="stat-card tone-warning">
                    <span class="stat-tab"></span>
                    <div class="stat-label">Toleransi</div>
                    <div class="stat-value">{{ $attendanceSetting->late_tolerance }}<span style="font-size:14px; font-family:var(--font-body); font-weight:500;"> mnt</span></div>
                </div>
                <div class="stat-card tone-success">
                    <span class="stat-tab"></span>
                    <div class="stat-label">Radius Lokasi</div>
                    <div class="stat-value">{{ $attendanceSetting->radius }}<span style="font-size:14px; font-family:var(--font-body); font-weight:500;"> m</span></div>
                </div>
            </div>
        </div>
    @endif

    {{-- ================= Riwayat bulan ini ================= --}}
    <div class="card">
        <div class="card-head">
            <h2>Riwayat Bulan Ini</h2>
            <a href="{{ route('user.history') }}" class="btn btn-outline btn-sm">Lihat semua</a>
        </div>

        <div class="table-wrap">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Tanggal</th>
                        <th>Jam Masuk</th>
                        <th>Status Masuk</th>
                        <th>Jam Pulang</th>
                        <th>Status Pulang</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($history as $item)
                        <tr>
                            <td data-label="Tanggal">{{ \Carbon\Carbon::parse($item->attendance_date)->translatedFormat('d M Y') }}</td>
                            <td data-label="Jam Masuk" class="mono">{{ $item->check_in ? \Carbon\Carbon::parse($item->check_in)->format('H:i') : '-' }}</td>
                            <td data-label="Status Masuk">
                                @if ($item->check_in_status === 'terlambat')
                                    <span class="stamp-badge tone-warning">Terlambat</span>
                                @elseif ($item->check_in_status === 'hadir')
                                    <span class="stamp-badge tone-success">Hadir</span>
                                @else
                                    <span class="stamp-badge tone-idle">-</span>
                                @endif
                            </td>
                            <td data-label="Jam Pulang" class="mono">{{ $item->check_out ? \Carbon\Carbon::parse($item->check_out)->format('H:i') : '-' }}</td>
                            <td data-label="Status Pulang">
                                @if ($item->check_out_status === 'pulang_cepat')
                                    <span class="stamp-badge tone-warning">Pulang Cepat</span>
                                @elseif ($item->check_out_status === 'tepat_waktu')
                                    <span class="stamp-badge tone-success">Tepat Waktu</span>
                                @else
                                    <span class="stamp-badge tone-idle">-</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5">
                                <div class="empty-state">
                                    <div class="ico">🗓️</div>
                                    Belum ada riwayat presensi bulan ini.
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

@endsection

@section('scripts')
<script>
    /**
     * ------------------------------------------------------------------
     * Jam anti-manipulasi.
     *
     * Nilai awal dikirim dari SERVER (bukan browser) lewat Blade di bawah.
     * Untuk membuat jam terus "berjalan" tanpa refresh, kita TIDAK memakai
     * `new Date()` (yang ikut berubah kalau user mengubah tanggal/jam di
     * perangkatnya), melainkan `performance.now()` — jam monoton bawaan
     * browser yang tidak terpengaruh oleh perubahan jam sistem operasi.
     *
     * serverNow() = waktu-server-saat-halaman-dimuat + selisih performance.now()
     * ------------------------------------------------------------------
     */
    const SERVER_EPOCH_MS = new Date("{{ now()->toIso8601String() }}").getTime();
    const CLIENT_ANCHOR = performance.now();

    function serverNow() {
        return new Date(SERVER_EPOCH_MS + (performance.now() - CLIENT_ANCHOR));
    }

    function pad(n) { return String(n).padStart(2, '0'); }

    function tickClock() {
        const el = document.getElementById('liveClock');
        if (!el) return;
        const now = serverNow();
        el.textContent = `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
    }
    setInterval(tickClock, 1000);

    // ------------------------------------------------------------------
    // Ambil lokasi sekali di awal untuk mengisi form absen masuk/pulang.
    // StoreAttendanceRequest mewajibkan latitude & longitude dikirim.
    // ------------------------------------------------------------------
    const geoStatus = document.getElementById('geoStatus');
    const checkInBtn = document.getElementById('checkInBtn');
    const checkOutBtn = document.getElementById('checkOutBtn');
    const checkOutHint = document.getElementById('checkOutHint');

    let geoReady = false;
    let timeReachedForCheckOut = !checkOutBtn; // true kalau tombol pulang tidak ditampilkan (tidak relevan)

    function refreshCheckOutButton() {
        if (!checkOutBtn) return;
        checkOutBtn.disabled = !(geoReady && timeReachedForCheckOut);
    }

    if (navigator.geolocation) {
        if (geoStatus) geoStatus.textContent = 'Mendeteksi lokasi Anda...';
        navigator.geolocation.getCurrentPosition(
            (pos) => {
                const lat = pos.coords.latitude.toFixed(6);
                const lng = pos.coords.longitude.toFixed(6);

                const inLat = document.getElementById('checkInLat');
                const inLng = document.getElementById('checkInLng');
                const outLat = document.getElementById('checkOutLat');
                const outLng = document.getElementById('checkOutLng');

                if (inLat) inLat.value = lat;
                if (inLng) inLng.value = lng;
                if (outLat) outLat.value = lat;
                if (outLng) outLng.value = lng;

                geoReady = true;
                if (checkInBtn) checkInBtn.disabled = false;
                refreshCheckOutButton();
                if (geoStatus) geoStatus.textContent = 'Lokasi terdeteksi, siap absen.';
            },
            () => {
                if (geoStatus) geoStatus.textContent = 'Gagal mendeteksi lokasi. Izinkan akses lokasi lalu muat ulang halaman.';
            },
            { enableHighAccuracy: true, timeout: 10000 }
        );
    } else if (geoStatus) {
        geoStatus.textContent = 'Perangkat/browser tidak mendukung deteksi lokasi.';
    }

    // ------------------------------------------------------------------
    // Kunci tombol Absen Pulang sampai jam server melewati jam pulang
    // yang diatur admin. Otomatis aktif sendiri saat waktunya tiba,
    // tanpa perlu memuat ulang halaman.
    // ------------------------------------------------------------------
    @if ($attendanceSetting && $attendanceSetting->check_out_time)
        (function () {
            const [h, m, s] = "{{ $attendanceSetting->check_out_time }}".split(':').map(Number);
            const now = serverNow();
            const target = new Date(now.getFullYear(), now.getMonth(), now.getDate(), h, m, s || 0);

            if (now.getTime() >= target.getTime()) {
                timeReachedForCheckOut = true;
                refreshCheckOutButton();
            } else {
                timeReachedForCheckOut = false;
                refreshCheckOutButton();
                if (checkOutHint) {
                    checkOutHint.textContent = `Tombol Absen Pulang aktif pukul ${pad(h)}:${pad(m)}.`;
                }
                const msRemaining = target.getTime() - now.getTime();
                setTimeout(() => {
                    timeReachedForCheckOut = true;
                    refreshCheckOutButton();
                    if (checkOutHint) checkOutHint.textContent = '';
                }, msRemaining);
            }
        })();
    @endif
</script>
@endsection