@extends('layouts.app')

@section('title', 'My Dashboard')
@section('page-title', 'My Dashboard')

@section('content')
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
        {{-- Left Column --}}
        <div class="lg:col-span-2 space-y-4">
            {{-- Clock In/Out Card --}}
            <div class="card-static animate-fade-up" x-data="{
                time: '',
                init() {
                    this.updateTime();
                    setInterval(() => this.updateTime(), 1000);
                },
                updateTime() {
                    const now = new Date();
                    const h = String(now.getHours()).padStart(2,'0');
                    const m = String(now.getMinutes()).padStart(2,'0');
                    const s = String(now.getSeconds()).padStart(2,'0');
                    this.time = h + ':' + m + ':' + s;
                }
            }">
                <div class="card-body text-center py-8">
                    <p class="text-xs text-gray-500 mb-2">Current Time</p>
                    <div class="flex items-center justify-center gap-1 mb-4">
                        <span class="font-display text-4xl font-bold text-gray-900" x-text="time.substring(0,5)"></span>
                        <span class="font-display text-xl font-bold text-gray-400 animate-pulse-dot" x-text="':' + time.substring(6)"></span>
                    </div>
                    <p class="text-sm text-gray-500 mb-6">
                        {{ now()->format('l, d F Y') }}
                    </p>

                    {{-- Clock Buttons --}}
                    <div class="flex items-center justify-center gap-3" id="clockButtons">
                        <button
                            id="clockInBtn"
                            class="btn-primary px-8 py-3"
                        >
                            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
                            <span>Clock In</span>
                        </button>
                        <button
                            id="clockOutBtn"
                            class="btn-danger px-8 py-3"
                            style="display:none;"
                        >
                            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"/><polyline points="17 18 23 18 23 12"/></svg>
                            <span>Clock Out</span>
                        </button>
                    </div>

                    <div id="clockStatus" class="text-xs text-gray-400 mt-4">
                        Status: <span class="text-gray-600 font-medium">Checking...</span>
                    </div>
                </div>
            </div>

            {{-- Quick Actions --}}
            <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 animate-fade-up" style="animation-delay: 0.1s;">
                <a href="/my/leave/request" class="quick-action flex-col text-center py-4">
                    <div class="quick-action-icon bg-warning-100 text-warning-600 mx-auto mb-2">
                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                    </div>
                    <span>Request Leave</span>
                </a>
                <a href="/my/attendance" class="quick-action flex-col text-center py-4">
                    <div class="quick-action-icon bg-primary-100 text-primary-600 mx-auto mb-2">
                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                    </div>
                    <span>My Attendance</span>
                </a>
                <a href="/my/documents" class="quick-action flex-col text-center py-4">
                    <div class="quick-action-icon bg-success-100 text-success-600 mx-auto mb-2">
                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                    </div>
                    <span>Documents</span>
                </a>
                <a href="/my/profile" class="quick-action flex-col text-center py-4">
                    <div class="quick-action-icon bg-danger-100 text-danger-500 mx-auto mb-2">
                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                    </div>
                    <span>My Profile</span>
                </a>
            </div>
        </div>

        {{-- Right Column --}}
        <div class="space-y-4">
            {{-- Leave Balance --}}
            <div class="card-static animate-fade-up" style="animation-delay: 0.1s;">
                <div class="card-header">
                    <h3 class="card-header-title">Leave Balance</h3>
                    <a href="/my/leave" class="btn-ghost">View &rarr;</a>
                </div>
                <div class="card-body">
                    <p class="text-sm text-gray-400 text-center py-4">Leave balances will appear here</p>
                </div>
            </div>

            {{-- Notices Widget --}}
            <div class="animate-fade-up" style="animation-delay: 0.15s;">
                @include('notices::_notices-widget')
            </div>

            {{-- Birthday Widget --}}
            <div class="animate-fade-up" style="animation-delay: 0.2s;">
                @include('notices::_birthday-widget')
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const clockInBtn = document.getElementById('clockInBtn');
    const clockOutBtn = document.getElementById('clockOutBtn');
    const clockStatus = document.getElementById('clockStatus');
    const token = document.querySelector('meta[name="csrf-token"]')?.content;

    // Check today's status on page load
    fetchTodayStatus();

    if (clockInBtn) {
        clockInBtn.addEventListener('click', function() { clockAction('in'); });
    }
    if (clockOutBtn) {
        clockOutBtn.addEventListener('click', function() { clockAction('out'); });
    }

    async function clockAction(action) {
        const btn = action === 'in' ? clockInBtn : clockOutBtn;
        if (!btn || btn.disabled) return;

        // Disable & show loading
        btn.disabled = true;
        const originalHTML = btn.innerHTML;
        btn.innerHTML = '<svg class="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg> <span>Processing...</span>';

        const url = action === 'in' ? '{{ route("my.attendance.clockin") }}' : '{{ route("my.attendance.clockout") }}';
        let body = {};

        // Try GPS
        if (navigator.geolocation) {
            try {
                const pos = await new Promise((resolve, reject) => {
                    navigator.geolocation.getCurrentPosition(resolve, reject, { timeout: 5000, enableHighAccuracy: true });
                });
                body.latitude = pos.coords.latitude;
                body.longitude = pos.coords.longitude;
            } catch (e) {
                // GPS denied — proceed without
            }
        }

        try {
            const response = await fetch(url, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': token,
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                },
                body: JSON.stringify(body),
            });

            const data = await response.json();

            if (data.success) {
                window.dispatchEvent(new CustomEvent('toast', {
                    detail: { type: 'success', message: data.message }
                }));
                fetchTodayStatus();
            } else {
                window.dispatchEvent(new CustomEvent('toast', {
                    detail: { type: 'error', message: data.message || 'Something went wrong.' }
                }));
                btn.disabled = false;
                btn.innerHTML = originalHTML;
            }
        } catch (error) {
            window.dispatchEvent(new CustomEvent('toast', {
                detail: { type: 'error', message: 'Network error. Please try again.' }
            }));
            btn.disabled = false;
            btn.innerHTML = originalHTML;
        }
    }

    async function fetchTodayStatus() {
        try {
            const response = await fetch('{{ route("my.attendance.today") }}', {
                headers: { 'Accept': 'application/json' }
            });
            const data = await response.json();

            if (data.clocked_in && !data.clocked_out) {
                // Clocked in, waiting for clock out
                clockInBtn.style.display = 'none';
                clockOutBtn.style.display = 'inline-flex';
                clockOutBtn.disabled = false;
                clockOutBtn.innerHTML = '<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"/><polyline points="17 18 23 18 23 12"/></svg> <span>Clock Out</span>';
                clockStatus.innerHTML = 'Clocked In at <span class="text-success-600 font-medium">' + data.clock_in_time + '</span>' +
                    (data.is_late ? ' <span class="badge badge-rejected text-xxs ml-1">' + data.late_minutes + 'm late</span>' : '');
            } else if (data.clocked_in && data.clocked_out) {
                // Done for the day
                clockInBtn.style.display = 'none';
                clockOutBtn.style.display = 'none';
                clockStatus.innerHTML = '<span class="text-success-600 font-medium">✓ Done</span> — In: ' + data.clock_in_time + ' · Out: ' + data.clock_out_time + ' · <span class="font-medium">' + data.total_hours + '</span>';
            } else {
                // Not clocked in
                clockInBtn.style.display = 'inline-flex';
                clockInBtn.disabled = false;
                clockInBtn.innerHTML = '<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg> <span>Clock In</span>';
                clockOutBtn.style.display = 'none';
                clockStatus.innerHTML = 'Status: <span class="text-gray-600 font-medium">Not clocked in</span>';
            }
        } catch (error) {
            clockStatus.innerHTML = 'Status: <span class="text-gray-600 font-medium">Not clocked in</span>';
        }
    }
});
</script>
@endpush