@extends('layouts.app')

@section('content')
<h1>{{ __('messages.clock_in_out') }}</h1>

<div class="card clock-card">
    <p>{{ __('messages.branch') }}: <strong>{{ auth()->user()->branch?->name ?? '-' }}</strong></p>
    <p>{{ __('messages.allowed_radius') }}: <strong>{{ auth()->user()->branch?->radius_meters ?? config('clockshifts.default_radius_meters') }}m</strong></p>

    @if($openLog)
        <div class="status-box active">
            {{ __('messages.you_are_clocked_in') }}: {{ $openLog->clock_in_time->format('Y-m-d H:i') }}
        </div>
        <button class="btn btn-danger large" onclick="submitAttendance('{{ route('attendance.clock-out') }}')">
            {{ __('messages.clock_out') }}
        </button>
    @else
        <button class="btn btn-success large" onclick="submitAttendance('{{ route('attendance.clock-in') }}')">
            {{ __('messages.clock_in') }}
        </button>
    @endif

    <textarea id="note" placeholder="{{ __('messages.optional_note') }}"></textarea>
    <div id="geo-status" class="hint"></div>
</div>

<div class="card">
    <h2>{{ __('messages.recent_records') }}</h2>
    <div class="table-wrap">
        <table>
            <thead>
            <tr>
                <th>{{ __('messages.date') }}</th>
                <th>{{ __('messages.clock_in') }}</th>
                <th>{{ __('messages.clock_out') }}</th>
                <th>{{ __('messages.total') }}</th>
                <th>{{ __('messages.approval_status') }}</th>
                <th>{{ __('messages.distance') }}</th>
            </tr>
            </thead>
            <tbody>
            @foreach($recentLogs as $log)
                <tr>
                    <td>{{ optional($log->clock_in_time)->format('Y-m-d') }}</td>
                    <td>{{ optional($log->clock_in_time)->format('H:i') }}</td>
                    <td>{{ optional($log->clock_out_time)->format('H:i') ?? '-' }}</td>
                    <td>{{ clockshifts_minutes_to_hours($log->total_minutes) }}</td>
                    <td><span class="badge {{ $log->approval_status }}">{{ $log->approval_status }}</span></td>
                    <td>{{ $log->clock_in_distance_meters }}m</td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
function submitAttendance(url) {
    const status = document.getElementById('geo-status');
    status.innerText = "{{ __('messages.getting_location') }}";

    if (!navigator.geolocation) {
        status.innerText = "{{ __('messages.location_not_supported') }}";
        return;
    }

    navigator.geolocation.getCurrentPosition(function(position) {
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            },
            body: JSON.stringify({
                latitude: position.coords.latitude,
                longitude: position.coords.longitude,
                accuracy: position.coords.accuracy,
                note: document.getElementById('note').value
            })
        }).then(async response => {
            const data = await response.json();
            status.innerText = data.message + (data.distance ? ` Distance: ${data.distance}m / Radius: ${data.radius}m` : '');
            if (data.ok) {
                setTimeout(() => window.location.reload(), 1500);
            }
        }).catch(() => {
            status.innerText = "{{ __('messages.error_try_again') }}";
        });
    }, function(error) {
        status.innerText = "{{ __('messages.location_permission_required') }}";
    }, {
        enableHighAccuracy: true,
        timeout: 15000,
        maximumAge: 0
    });
}
</script>
@endpush