@extends('layouts.employee')

@section('content')
<div class="container-fluid py-4">
    <!-- Welcome Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0">Welcome back, {{ $employee->preferred_name ?? $employee->first_name }}!</h1>
                    <p class="text-muted mb-0">{{ $employee->position }} - {{ $company->name }}</p>
                </div>
                <div class="text-end">
                    <div class="text-muted small">{{ now()->format('l, F j, Y') }}</div>
                    <div class="fw-bold">{{ now()->format('H:i') }}</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Attendance Quick Actions -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h5 class="card-title mb-2">
                                <i class="bi bi-clock-history me-2"></i>Today's Attendance
                            </h5>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="attendance-info">
                                        <small class="opacity-75">Clock In</small>
                                        <div class="h6 mb-0" id="clockInTime">
                                            {{ $todayAttendance && $todayAttendance->clock_in ? $todayAttendance->clock_in->format('H:i') : '--:--' }}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="attendance-info">
                                        <small class="opacity-75">Clock Out</small>
                                        <div class="h6 mb-0" id="clockOutTime">
                                            {{ $todayAttendance && $todayAttendance->clock_out ? $todayAttendance->clock_out->format('H:i') : '--:--' }}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="attendance-info">
                                        <small class="opacity-75">Total Hours</small>
                                        <div class="h6 mb-0" id="totalHours">
                                            {{ $todayAttendance && $todayAttendance->total_hours ? number_format($todayAttendance->total_hours, 1) . 'h' : '0.0h' }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 text-md-end">
                            <!-- Location Status -->
                            <div class="mb-3" id="locationStatus">
                                <div class="spinner-border spinner-border-sm me-2" role="status"></div>
                                <small class="text-muted">Checking location...</small>
                            </div>

                            <!-- Location Refresh Button (hidden by default) -->
                            <div class="mb-2 d-none" id="locationRefresh">
                                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="refreshLocation()">
                                    <i class="bi bi-arrow-clockwise me-1"></i>Refresh Location
                                </button>
                            </div>

                            <div class="btn-group-vertical w-100" role="group">
                                @if(!$todayAttendance || !$todayAttendance->clock_in)
                                    <button type="button" class="btn btn-light btn-lg mb-2" id="clockInBtn" onclick="clockIn()" disabled>
                                        <i class="bi bi-play-circle-fill me-2"></i>Clock In
                                    </button>
                                @elseif(!$todayAttendance->clock_out)
                                    <button type="button" class="btn btn-warning btn-lg mb-2" id="breakBtn" onclick="toggleBreak()">
                                        <i class="bi bi-pause-circle-fill me-2"></i>
                                        <span id="breakText">{{ $todayAttendance->break_start ? 'End Break' : 'Take Break' }}</span>
                                    </button>
                                    <button type="button" class="btn btn-light btn-lg" id="clockOutBtn" onclick="clockOut()">
                                        <i class="bi bi-stop-circle-fill me-2"></i>Clock Out
                                    </button>
                                @else
                                    <div class="alert alert-light mb-0">
                                        <i class="bi bi-check-circle-fill me-2"></i>Day completed!
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Stats -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <div class="text-primary mb-2">
                        <i class="bi bi-calendar-check-fill fs-1"></i>
                    </div>
                    <h5 class="card-title">{{ $leaveStats['annual_balance'] }}</h5>
                    <p class="text-muted mb-0">Annual Leave Days</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <div class="text-success mb-2">
                        <i class="bi bi-clock-fill fs-1"></i>
                    </div>
                    <h5 class="card-title">{{ number_format($weeklyHours, 1) }}h</h5>
                    <p class="text-muted mb-0">This Week</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <div class="text-warning mb-2">
                        <i class="bi bi-receipt-cutoff fs-1"></i>
                    </div>
                    <h5 class="card-title">{{ $expenseStats['pending_claims'] }}</h5>
                    <p class="text-muted mb-0">Pending Claims</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <div class="text-info mb-2">
                        <i class="bi bi-wallet2 fs-1"></i>
                    </div>
                    <h5 class="card-title">
                        @if($latestPayroll)
                            RM {{ number_format($latestPayroll->net_pay, 2) }}
                        @else
                            --
                        @endif
                    </h5>
                    <p class="text-muted mb-0">Latest Payroll</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Recent Attendance -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">Recent Attendance</h5>
                    <a href="{{ route('employee.attendance') }}" class="btn btn-sm btn-outline-primary">View All</a>
                </div>
                <div class="card-body">
                    @if($recentAttendance->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>Date</th>
                                        <th>Clock In</th>
                                        <th>Clock Out</th>
                                        <th>Hours</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($recentAttendance as $attendance)
                                    <tr>
                                        <td>{{ $attendance->date->format('M j') }}</td>
                                        <td>{{ $attendance->clock_in ? $attendance->clock_in->format('H:i') : '--' }}</td>
                                        <td>{{ $attendance->clock_out ? $attendance->clock_out->format('H:i') : '--' }}</td>
                                        <td>{{ $attendance->total_hours ? number_format($attendance->total_hours, 1) . 'h' : '--' }}</td>
                                        <td>
                                            @if($attendance->status === 'present')
                                                <span class="badge bg-success">Present</span>
                                            @elseif($attendance->status === 'late')
                                                <span class="badge bg-warning">Late</span>
                                            @else
                                                <span class="badge bg-secondary">{{ ucfirst($attendance->status) }}</span>
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="bi bi-calendar-x text-muted fs-1"></i>
                            <p class="text-muted mt-2">No attendance records yet</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Quick Actions</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('employee.leaves.create') }}" class="btn btn-outline-primary">
                            <i class="bi bi-calendar-plus me-2"></i>Apply for Leave
                        </a>
                        <a href="{{ route('employee.claims.create') }}" class="btn btn-outline-success">
                            <i class="bi bi-receipt me-2"></i>Submit Expense Claim
                        </a>
                        <a href="{{ route('employee.attendance') }}" class="btn btn-outline-info">
                            <i class="bi bi-clock-history me-2"></i>View Attendance History
                        </a>
                        @if($latestPayroll)
                        <a href="{{ route('employee.payroll.show', $latestPayroll) }}" class="btn btn-outline-warning">
                            <i class="bi bi-file-earmark-text me-2"></i>View Latest Payslip
                        </a>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Leave Summary -->
            <div class="card mt-3">
                <div class="card-header">
                    <h5 class="card-title mb-0">Leave Summary</h5>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="border-end">
                                <div class="h4 text-primary">{{ $leaveStats['annual_balance'] }}</div>
                                <small class="text-muted">Annual Leave</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="h4 text-success">{{ $leaveStats['sick_balance'] }}</div>
                            <small class="text-muted">Sick Leave</small>
                        </div>
                    </div>
                    @if($leaveStats['pending_requests'] > 0)
                    <div class="alert alert-info mt-3 mb-0">
                        <i class="bi bi-info-circle me-2"></i>
                        You have {{ $leaveStats['pending_requests'] }} pending leave request(s)
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Geolocation variables
let userLocation = null;
let watchId = null;
let companySettings = @json($company->attendanceLeaveSettings ?? null);

// Get user location on page load and validate geofencing
document.addEventListener('DOMContentLoaded', function() {
    console.log('🔍 Starting location validation for employee dashboard');
    console.log('Company settings:', companySettings);

    if (navigator.geolocation) {
        const locationStatus = document.getElementById('locationStatus');

        // Try to get location immediately
        navigator.geolocation.getCurrentPosition(
            function(position) {
                userLocation = {
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude,
                    accuracy: position.coords.accuracy
                };
                console.log('✅ Location obtained:', userLocation);
                validateLocationAndUpdateUI(userLocation);
            },
            function(error) {
                console.error('❌ Location detection failed:', error);
                handleLocationError(error);
            },
            {
                enableHighAccuracy: true,
                timeout: 10000,
                maximumAge: 300000 // 5 minutes
            }
        );
    } else {
        console.error('❌ Geolocation not supported');
        handleLocationError({ code: -1, message: 'Geolocation not supported by this browser' });
    }
});

function validateLocationAndUpdateUI(location) {
    const locationStatus = document.getElementById('locationStatus');
    const clockInBtn = document.getElementById('clockInBtn');

    // If geofencing is not required, enable button
    if (!companySettings || !companySettings.require_location_clock_in) {
        locationStatus.innerHTML = '<i class="bi bi-geo-alt text-white me-2"></i><small class="text-white">Location detected</small>';
        if (clockInBtn) {
            clockInBtn.disabled = false;
        }
        return;
    }

    // Check if office locations are configured
    const allowedLocations = companySettings.allowed_clock_in_locations || [];
    if (allowedLocations.length === 0) {
        locationStatus.innerHTML = '<i class="bi bi-exclamation-triangle text-warning me-2"></i><small class="text-warning">No office locations configured</small>';
        if (clockInBtn) {
            clockInBtn.disabled = true;
        }
        return;
    }

    // Calculate distance to nearest office
    const allowedRadius = companySettings.location_radius_meters || 100;
    let nearestDistance = Infinity;
    let nearestOffice = null;
    let isWithinRange = false;

    allowedLocations.forEach(office => {
        const distance = calculateDistance(
            location.latitude,
            location.longitude,
            parseFloat(office.latitude),
            parseFloat(office.longitude)
        );

        if (distance < nearestDistance) {
            nearestDistance = distance;
            nearestOffice = office.name || 'Office';
        }

        if (distance <= allowedRadius) {
            isWithinRange = true;
        }
    });

    console.log('🔍 Geofencing validation result:', {
        nearestDistance: Math.round(nearestDistance),
        allowedRadius,
        nearestOffice,
        isWithinRange
    });

    // Update UI based on validation
    if (isWithinRange) {
        locationStatus.innerHTML = `
            <i class="bi bi-geo-alt-fill text-success me-2"></i>
            <small class="text-success">
                ✅ Within office range (${Math.round(nearestDistance)}m from ${nearestOffice})
            </small>
        `;
        if (clockInBtn) {
            clockInBtn.disabled = false;
            clockInBtn.classList.remove('btn-secondary');
            clockInBtn.classList.add('btn-light');
        }
    } else {
        locationStatus.innerHTML = `
            <i class="bi bi-geo-alt text-danger me-2"></i>
            <small class="text-danger">
                ❌ Outside office range (${Math.round(nearestDistance)}m from ${nearestOffice}, max: ${allowedRadius}m)
            </small>
        `;
        if (clockInBtn) {
            clockInBtn.disabled = true;
            clockInBtn.classList.remove('btn-light');
            clockInBtn.classList.add('btn-secondary');
            clockInBtn.title = `You are ${Math.round(nearestDistance)}m away from ${nearestOffice}. Maximum allowed distance is ${allowedRadius}m.`;
        }
    }
}

function calculateDistance(lat1, lng1, lat2, lng2) {
    const earthRadius = 6371000; // Earth's radius in meters

    const lat1Rad = deg2rad(lat1);
    const lng1Rad = deg2rad(lng1);
    const lat2Rad = deg2rad(lat2);
    const lng2Rad = deg2rad(lng2);

    const deltaLat = lat2Rad - lat1Rad;
    const deltaLng = lng2Rad - lng1Rad;

    const a = Math.sin(deltaLat/2) * Math.sin(deltaLat/2) +
              Math.cos(lat1Rad) * Math.cos(lat2Rad) *
              Math.sin(deltaLng/2) * Math.sin(deltaLng/2);
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));

    return earthRadius * c;
}

function deg2rad(deg) {
    return deg * (Math.PI/180);
}

function handleLocationError(error) {
    const locationStatus = document.getElementById('locationStatus');
    const clockInBtn = document.getElementById('clockInBtn');

    let message = '';
    let icon = 'bi-exclamation-triangle text-warning';

    switch(error.code) {
        case 1: // PERMISSION_DENIED
            message = "Location access denied";
            icon = 'bi-geo-alt text-danger';
            break;
        case 2: // POSITION_UNAVAILABLE
            message = "Location unavailable";
            icon = 'bi-geo-alt text-warning';
            break;
        case 3: // TIMEOUT
            message = "Location timeout";
            icon = 'bi-geo-alt text-warning';
            break;
        default:
            message = "Location error";
            icon = 'bi-geo-alt text-danger';
            break;
    }

    console.log('🔍 Location error:', message);

    // Update UI based on whether location is required
    if (!companySettings || !companySettings.require_location_clock_in) {
        // Location not required - enable button with warning
        locationStatus.innerHTML = `<i class="bi ${icon} me-2"></i><small class="text-muted">${message} (not required)</small>`;
        if (clockInBtn) {
            clockInBtn.disabled = false;
        }
    } else {
        // Location required - disable button and show refresh option
        locationStatus.innerHTML = `
            <i class="bi ${icon} me-2"></i>
            <small class="text-danger">${message} - Please enable location access to clock in</small>
        `;
        if (clockInBtn) {
            clockInBtn.disabled = true;
            clockInBtn.classList.remove('btn-light');
            clockInBtn.classList.add('btn-secondary');
            clockInBtn.title = 'Location access is required for clock-in. Please enable location permissions.';
        }

        // Show refresh button for location errors
        const refreshBtn = document.getElementById('locationRefresh');
        if (refreshBtn) {
            refreshBtn.classList.remove('d-none');
        }
    }
}

function refreshLocation() {
    const locationStatus = document.getElementById('locationStatus');
    const refreshBtn = document.getElementById('locationRefresh');

    // Show loading state
    locationStatus.innerHTML = '<div class="spinner-border spinner-border-sm me-2" role="status"></div><small class="text-muted">Refreshing location...</small>';
    if (refreshBtn) {
        refreshBtn.classList.add('d-none');
    }

    // Retry location detection
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            function(position) {
                userLocation = {
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude,
                    accuracy: position.coords.accuracy
                };
                console.log('✅ Location refreshed:', userLocation);
                validateLocationAndUpdateUI(userLocation);
            },
            function(error) {
                console.error('❌ Location refresh failed:', error);
                handleLocationError(error);
            },
            {
                enableHighAccuracy: true,
                timeout: 15000,
                maximumAge: 0 // Force fresh location
            }
        );
    }
}

// Attendance functions with location
function clockIn() {
    const btn = document.getElementById('clockInBtn');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Getting Location...';

    // Try to get current location for clock in
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            function(position) {
                performClockIn(position.coords.latitude, position.coords.longitude, btn);
            },
            function(error) {
                console.log('Location error for clock in:', error);
                // Proceed without location - server will handle requirements
                performClockIn(null, null, btn);
            },
            {
                enableHighAccuracy: true,
                timeout: 5000,
                maximumAge: 60000 // 1 minute
            }
        );
    } else {
        performClockIn(null, null, btn);
    }
}

function performClockIn(latitude, longitude, btn) {
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Clocking In...';

    const requestData = {};
    if (latitude && longitude) {
        requestData.latitude = latitude;
        requestData.longitude = longitude;
    }

    console.log('Clock in URL:', '{{ route("employee.clock-in") }}');
    console.log('Request data:', requestData);
    console.log('CSRF token:', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));

    fetch('{{ route("employee.clock-in") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify(requestData)
    })
    .then(response => {
        console.log('Response status:', response.status);
        console.log('Response headers:', response.headers);
        return response.json();
    })
    .then(data => {
        if (data.success) {
            let message = data.message;
            if (data.location_verified) {
                message += ` (Distance: ${Math.round(data.distance)}m from office)`;
            }
            showToast('success', message);
            // Reload page to update UI
            setTimeout(() => location.reload(), 1500);
        } else {
            let errorMessage = data.error || 'Failed to clock in';

            // Handle location-specific errors
            if (data.location_required) {
                if (data.distance && data.required_radius) {
                    errorMessage += `\n\nYou are ${Math.round(data.distance)}m away from ${data.closest_office || 'office'}. Maximum allowed distance is ${Math.round(data.required_radius)}m.`;
                }

                // Show location permission dialog
                showLocationDialog(errorMessage);
            } else {
                showToast('error', errorMessage);
            }

            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-play-circle-fill me-2"></i>Clock In';
        }
    })
    .catch(error => {
        console.error('Fetch error:', error);
        showToast('error', 'Network error occurred: ' + error.message);
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-play-circle-fill me-2"></i>Clock In';
    });
}

function showLocationDialog(message) {
    if (confirm(message + '\n\nWould you like to try enabling location access?')) {
        // Request location permission again
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                function(position) {
                    userLocation = {
                        latitude: position.coords.latitude,
                        longitude: position.coords.longitude
                    };
                    showToast('success', 'Location access enabled. Please try clocking in again.');
                },
                function(error) {
                    showToast('error', 'Location access is required for attendance tracking.');
                }
            );
        }
    }
}

function clockOut() {
    const btn = document.getElementById('clockOutBtn');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Getting Location...';

    // Try to get current location for clock out
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            function(position) {
                performClockOut(position.coords.latitude, position.coords.longitude, btn);
            },
            function(error) {
                console.log('Location error for clock out:', error);
                // Use cached location or proceed without location
                if (userLocation) {
                    performClockOut(userLocation.latitude, userLocation.longitude, btn);
                } else {
                    performClockOut(null, null, btn);
                }
            },
            {
                enableHighAccuracy: true,
                timeout: 5000,
                maximumAge: 60000 // 1 minute
            }
        );
    } else {
        performClockOut(null, null, btn);
    }
}

function performClockOut(latitude, longitude, btn) {
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Clocking Out...';

    const requestData = {};
    if (latitude && longitude) {
        requestData.latitude = latitude;
        requestData.longitude = longitude;
    }

    fetch('{{ route("employee.clock-out") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify(requestData)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast('success', data.message);
            // Reload page to update UI
            setTimeout(() => location.reload(), 1500);
        } else {
            showToast('error', data.error || 'Failed to clock out');
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-stop-circle-fill me-2"></i>Clock Out';
        }
    })
    .catch(error => {
        showToast('error', 'Network error occurred');
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-stop-circle-fill me-2"></i>Clock Out';
    });
}

function toggleBreak() {
    const btn = document.getElementById('breakBtn');
    const currentText = document.getElementById('breakText').textContent;

    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Processing...';

    fetch('{{ route("employee.take-break") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast('success', data.message);
            // Update button text
            document.getElementById('breakText').textContent = data.on_break ? 'End Break' : 'Take Break';
            btn.className = data.on_break ? 'btn btn-danger btn-lg mb-2' : 'btn btn-warning btn-lg mb-2';
        } else {
            showToast('error', data.error || 'Failed to process break');
        }
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-pause-circle-fill me-2"></i><span id="breakText">' +
                       (data.on_break ? 'End Break' : 'Take Break') + '</span>';
    })
    .catch(error => {
        showToast('error', 'Network error occurred');
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-pause-circle-fill me-2"></i><span id="breakText">' + currentText + '</span>';
    });
}

// Toast notification function
function showToast(type, message) {
    // Create toast element
    const toast = document.createElement('div');
    toast.className = `toast align-items-center text-white bg-${type === 'success' ? 'success' : 'danger'} border-0`;
    toast.setAttribute('role', 'alert');
    toast.innerHTML = `
        <div class="d-flex">
            <div class="toast-body">${message}</div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
    `;

    // Add to page
    let toastContainer = document.getElementById('toast-container');
    if (!toastContainer) {
        toastContainer = document.createElement('div');
        toastContainer.id = 'toast-container';
        toastContainer.className = 'toast-container position-fixed top-0 end-0 p-3';
        toastContainer.style.zIndex = '9999';
        document.body.appendChild(toastContainer);
    }

    toastContainer.appendChild(toast);

    // Show toast
    const bsToast = new bootstrap.Toast(toast);
    bsToast.show();

    // Remove after hiding
    toast.addEventListener('hidden.bs.toast', () => {
        toast.remove();
    });
}

// Update time every minute
setInterval(() => {
    const now = new Date();
    const timeElements = document.querySelectorAll('.current-time');
    timeElements.forEach(el => {
        el.textContent = now.toLocaleTimeString('en-US', {hour12: false, hour: '2-digit', minute: '2-digit'});
    });
}, 60000);
</script>
@endpush