@extends('layouts.app-shell')
@section('bottomnav')
    <a href="{{ route('partner.dashboard') }}"><span class="ic">📊</span><span>Home</span></a>
    <a href="{{ route('partner.bookings') }}"><span class="ic">📋</span><span>Bookings</span></a>
    <a href="{{ route('partner.schedule') }}"><span class="ic">📅</span><span>Schedule</span></a>
    <a href="{{ route('partner.attendance') }}" class="active"><span class="ic">📍</span><span>Attendance</span></a>
    <a href="{{ route('partner.profile') }}"><span class="ic">👤</span><span>Profile</span></a>
@endsection
@section('title', 'Daily attendance')
@section('sidebar')
    <a href="{{ route('partner.dashboard') }}"><span class="ic">📊</span> Dashboard</a>
    <a href="{{ route('partner.bookings') }}"><span class="ic">📋</span> My bookings</a>
    <a href="{{ route('partner.schedule') }}"><span class="ic">📅</span> Schedule</a>
    <a href="{{ route('partner.attendance') }}" class="active"><span class="ic">📍</span> Attendance</a>
    <a href="{{ route('partner.leaves') }}"><span class="ic">🏖</span> Leaves</a>
    <a href="{{ route('partner.team') }}"><span class="ic">👥</span> My team</a>
    <a href="{{ route('partner.earnings') }}"><span class="ic">💰</span> Earnings</a>
    <a href="{{ route('partner.profile') }}"><span class="ic">👤</span> Profile</a>
    <a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('lo').submit()"><span class="ic">⤴</span> Logout</a>
    <form id="lo" method="POST" action="{{ route('logout') }}" style="display:none">@csrf</form>
@endsection
@section('content')

@if(session('success'))
    <div class="alert alert-success" style="margin-bottom: 18px;">{{ session('success') }}</div>
@endif

<div class="flex-between mb-3">
    <div>
        <h2 style="font-size: 24px; font-weight: 700;">Daily attendance</h2>
        <p class="muted" style="font-size: 13px;">Check in/out with optional screenshot and GPS proof.</p>
    </div>
</div>

<div class="grid-2" style="grid-template-columns: 1fr 1.4fr;">
    {{-- Today's check-in --}}
    <div class="panel">
        <div class="panel-head">
            <h3>📍 Check in / out today</h3>
            <span class="muted" style="font-size: 12px;">{{ now()->format('D, d M') }}</span>
        </div>

        <form method="POST" action="{{ route('partner.attendance.store') }}" enctype="multipart/form-data">
            @csrf
            <div class="form-section">
                <div class="ic"><x-icon name="pin" :size="14" /></div>
                <h4>Action</h4>
                <span class="sub">What are you doing?</span>
            </div>
            <div class="form-grid">
                <div class="field">
                    <label>Type</label>
                    <select name="attendance_type" required>
                        <option value="check_in">🟢 Check in (start day)</option>
                        <option value="break_start">⏸️ Start break</option>
                        <option value="break_end">▶️ End break</option>
                        <option value="check_out">🔴 Check out (end day)</option>
                    </select>
                </div>
                <div class="field">
                    <label>Location</label>
                    <input id="attLat" name="lat" placeholder="Latitude" readonly style="background: var(--bfk-bg-soft);">
                    <input id="attLng" name="lng" placeholder="Longitude" readonly style="background: var(--bfk-bg-soft); margin-top: 6px;">
                </div>
            </div>
            <div class="field">
                <label>Note</label>
                <textarea name="note" rows="2" placeholder="Optional note for the day…"></textarea>
            </div>
            <div class="field">
                <label>Screenshot proof</label>
                <input type="file" name="screenshot" accept="image/*">
                <span class="hint">JPG/PNG/WEBP. Optional.</span>
            </div>
            <div class="flex" style="gap: 10px;">
                <button type="submit" class="btn btn-primary"><x-icon name="check" :size="14" /> Record</button>
                <button type="button" class="btn btn-outline" onclick="getGPS()"><x-icon name="location" :size="14" /> Get GPS</button>
            </div>
        </form>

        @if($todayCheckins->count())
            <div class="mt-3">
                <h4 style="font-size: 13px; font-weight: 700; color: #111; margin-bottom: 10px;">Today's log</h4>
                @foreach($todayCheckins as $log)
                    <div class="att-log">
                        <div class="att-icon is-{{ $log->attendance_type === 'check_in' ? 'in' : ($log->attendance_type === 'check_out' ? 'out' : 'break') }}">
                            @if($log->attendance_type === 'check_in') 🟢
                            @elseif($log->attendance_type === 'check_out') 🔴
                            @elseif($log->attendance_type === 'break_start') ⏸️
                            @else ▶️
                            @endif
                        </div>
                        <div class="att-body">
                            <strong>{{ ucfirst(str_replace('_', ' ', $log->attendance_type)) }}</strong>
                            <div class="muted">{{ $log->logged_at->format('h:i A') }}@if($log->note) · {{ $log->note }}@endif</div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>

    {{-- History --}}
    <div class="panel">
        <div class="panel-head">
            <h3>Recent attendance</h3>
            <span class="muted" style="font-size: 12px;">Last {{ $attendances->count() }} entries</span>
        </div>
        @if($attendances->count())
            <div class="table-wrap" style="max-height: 600px; overflow-y: auto;">
                <table class="table">
                    <thead>
                        <tr><th>Date</th><th>Type</th><th>Time</th><th>Note</th><th>GPS</th></tr>
                    </thead>
                    <tbody>
                        @foreach($attendances as $log)
                            <tr>
                                <td data-label="Date">{{ $log->attendance_date->format('d M, D') }}</td>
                                <td data-label="Type">
                                    @if($log->attendance_type === 'check_in') <span class="pill pill-green">In</span>
                                    @elseif($log->attendance_type === 'check_out') <span class="pill pill-orange">Out</span>
                                    @elseif($log->attendance_type === 'break_start') <span class="pill pill-blue">Break</span>
                                    @else <span class="pill pill-blue">Back</span>
                                    @endif
                                </td>
                                <td data-label="Time">{{ $log->logged_at->format('h:i A') }}</td>
                                <td data-label="Note">{{ $log->note ?: '—' }}</td>
                                <td data-label="GPS">
                                    @if($log->lat && $log->lng)
                                        <a href="https://maps.google.com/?q={{ $log->lat }},{{ $log->lng }}" target="_blank" class="ic-btn"><x-icon name="location" :size="14" /></a>
                                    @else — @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="empty">No attendance logged yet. Use the form to record check-in.</div>
        @endif
    </div>
</div>

<script>
function getGPS() {
    if (!navigator.geolocation) { alert('Geolocation not supported.'); return; }
    navigator.geolocation.getCurrentPosition(function(pos) {
        document.getElementById('attLat').value = pos.coords.latitude.toFixed(6);
        document.getElementById('attLng').value = pos.coords.longitude.toFixed(6);
    }, function(err) {
        alert('Could not get location: ' + err.message);
    });
}
</script>
@endsection