@extends('layouts.app')

@section('content')
@php
    $clockIn = $attendance->clock_in?->timezone(config('app.timezone'));
    $clockOut = $attendance->clock_out?->timezone(config('app.timezone'));
@endphp

<div class="card">
    <h2 style="margin-top:0; margin-bottom:16px;">Edit Absensi</h2>

    @if ($errors->any())
        <div style="background: rgba(239, 68, 68, 0.1); border:1px solid rgba(239, 68, 68, 0.4); color:#fecaca; padding:10px 12px; border-radius:10px; margin-bottom:12px; font-size:13px;">
            <ul style="margin:0; padding-left:18px;">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('absensi.update', $attendance) }}" method="POST" style="display:flex; flex-direction:column; gap:12px;">
        @csrf
        @method('PUT')

        <div>
            <label style="display:block; margin-bottom:6px; font-weight:600;">NIK</label>
            <input type="text" value="{{ $attendance->user->nik ?? 'N/A' }}" readonly style="width:100%; padding:10px; border-radius:8px; border:1px solid rgba(148,163,184,0.35); background:#111827; color:#9ca3af; cursor:not-allowed; margin-bottom: 12px;">
        </div>

        <div>
            <label style="display:block; margin-bottom:6px; font-weight:600;">Tanggal</label>
            <input type="date" value="{{ $clockIn?->format('Y-m-d') }}" readonly style="width:100%; padding:10px; border-radius:8px; border:1px solid rgba(148,163,184,0.35); background:#111827; color:#9ca3af; cursor:not-allowed;">
        </div>

        <div style="display:flex; gap:12px;">
            <div style="flex:1;">
                <label style="display:block; margin-bottom:6px; font-weight:600;">Jam Masuk</label>
                <input type="time" value="{{ $clockIn?->format('H:i') }}" readonly style="width:100%; padding:10px; border-radius:8px; border:1px solid rgba(148,163,184,0.35); background:#111827; color:#9ca3af; cursor:not-allowed;">
            </div>
            <div style="flex:1;">
                <label style="display:block; margin-bottom:6px; font-weight:600;">Jam Keluar</label>
                <input type="time" value="{{ $clockOut?->format('H:i') }}" readonly style="width:100%; padding:10px; border-radius:8px; border:1px solid rgba(148,163,184,0.35); background:#111827; color:#9ca3af; cursor:not-allowed;">
            </div>
        </div>

        <div>
            <label style="display:block; margin-bottom:6px; font-weight:600;">Status</label>
            <input type="text" value="{{ Str::upper($attendance->status) }}" readonly style="width:100%; padding:10px; border-radius:8px; border:1px solid rgba(148,163,184,0.35); background:#111827; color:#9ca3af; cursor:not-allowed;">
        </div>

        @if($attendance->selfie_photo)
        <div>
            <label style="display:block; margin-bottom:6px; font-weight:600;">Foto Selfie</label>
            <div style="max-width: 300px; border-radius: 8px; overflow: hidden; margin-bottom: 12px; border: 1px solid rgba(148,163,184,0.35);">
                <img src="{{ route('selfie.show', ['filename' => basename($attendance->selfie_photo)]) }}" alt="Foto Selfie" style="width: 100%; height: auto; display: block;">
            </div>
        </div>
        @endif

        @if($attendance->clock_in_latitude && $attendance->clock_in_longitude)
        <div>
            <label style="display:block; margin-bottom:6px; font-weight:600;">📍 Lokasi Absensi Masuk</label>
            <div style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; margin-bottom: 12px;">
                <div style="padding: 10px; border-radius: 8px; background: rgba(15, 23, 42, 0.92); border: 1px solid rgba(148,163,184,0.2);">
                    <span style="display: block; font-weight: 600; color: rgba(148,163,184,0.75); font-size: 11px; letter-spacing: 0.05em; margin-bottom: 4px; text-transform: uppercase;">Latitude</span>
                    <span style="display: block; color: #e2e8f0; word-break: break-all; font-family: 'Monaco', monospace;">{{ number_format($attendance->clock_in_latitude, 8) }}</span>
                </div>
                <div style="padding: 10px; border-radius: 8px; background: rgba(15, 23, 42, 0.92); border: 1px solid rgba(148,163,184,0.2);">
                    <span style="display: block; font-weight: 600; color: rgba(148,163,184,0.75); font-size: 11px; letter-spacing: 0.05em; margin-bottom: 4px; text-transform: uppercase;">Longitude</span>
                    <span style="display: block; color: #e2e8f0; word-break: break-all; font-family: 'Monaco', monospace;">{{ number_format($attendance->clock_in_longitude, 8) }}</span>
                </div>
                <div style="padding: 10px; border-radius: 8px; background: rgba(15, 23, 42, 0.92); border: 1px solid rgba(148,163,184,0.2);">
                    <span style="display: block; font-weight: 600; color: rgba(148,163,184,0.75); font-size: 11px; letter-spacing: 0.05em; margin-bottom: 4px; text-transform: uppercase;">Akurasi</span>
                    <span style="display: block; color: #e2e8f0; word-break: break-all;">{{ $attendance->clock_in_accuracy ? round($attendance->clock_in_accuracy) . ' m' : '-' }}</span>
                </div>
                <div style="padding: 10px; border-radius: 8px; background: rgba(15, 23, 42, 0.92); border: 1px solid rgba(148,163,184,0.2);">
                    <span style="display: block; font-weight: 600; color: rgba(148,163,184,0.75); font-size: 11px; letter-spacing: 0.05em; margin-bottom: 4px; text-transform: uppercase;">Nama Lokasi</span>
                    <span style="display: block; color: #e2e8f0; word-break: break-all;">{{ $attendance->clock_in_location_name ?? 'Tidak tersedia' }}</span>
                </div>
            </div>
            <div id="edit-location-map" style="width: 100%; height: 350px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(148,163,184,0.25);"></div>
        </div>
        @endif

        <div>
            <label for="note" style="display:block; margin-bottom:6px; font-weight:600;">Catatan</label>
            <textarea id="note" name="note" rows="3" placeholder="Tuliskan keterangan jika diperlukan" style="width:100%; padding:10px; border-radius:8px; border:1px solid rgba(148,163,184,0.35); background:#0b1220; color:#e2e8f0;">{{ old('note', $attendance->note) }}</textarea>
            <small style="display:block; margin-top:6px; color:#94a3b8;">Catatan akan tersimpan untuk semua aksi di bawah.</small>
        </div>

        <div style="display:flex; flex-direction:column; gap:10px;">
            <div style="display:flex; gap:12px; flex-wrap:wrap;">
                <button type="submit" name="action" value="update_note" style="flex:1; min-width:150px; background:linear-gradient(135deg,#22c55e,#16a34a); border:none; color:white; padding:10px 16px; border-radius:8px; font-weight:600; cursor:pointer;">Simpan Perubahan</button>
                <button type="submit" name="action" value="mark_sick" style="flex:1; min-width:150px; background:linear-gradient(135deg,#ef4444,#dc2626); border:none; color:white; padding:10px 16px; border-radius:8px; font-weight:600; cursor:pointer;">Tandai Sakit</button>
                <button type="submit" name="action" value="mark_izin" style="flex:1; min-width:150px; background:linear-gradient(135deg,#3b82f6,#2563eb); border:none; color:white; padding:10px 16px; border-radius:8px; font-weight:600; cursor:pointer;">Tandai Izin</button>
            </div>
            <a href="{{ route('user.absensi') }}" style="display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:8px; border:1px solid rgba(148,163,184,0.35); color:#e2e8f0; text-decoration:none;">Batal</a>
            <div style="background:rgba(248,113,113,0.12); border:1px solid rgba(248,113,113,0.32); color:#fecaca; padding:10px 12px; border-radius:8px; font-size:12px;">
                Menekan tombol <strong>Tandai Sakit</strong> atau <strong>Tandai Izin</strong> akan mengubah status validasi menjadi <em>Tidak Diterima</em> dengan catatan penyebab, namun tanggal serta jam tetap ditampilkan sebagai referensi.
            </div>
        </div>
    </form>
</div>

@if($attendance->clock_in_latitude && $attendance->clock_in_longitude)
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const lat = {{ $attendance->clock_in_latitude }};
        const lon = {{ $attendance->clock_in_longitude }};
        const mapContainer = document.getElementById('edit-location-map');
        
        if (mapContainer && window.L) {
            const map = L.map(mapContainer).setView([lat, lon], 16);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '© OpenStreetMap contributors',
                maxZoom: 19
            }).addTo(map);

            L.marker([lat, lon], {
                icon: L.icon({
                    iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon.png',
                    shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-shadow.png',
                    iconSize: [25, 41],
                    shadowSize: [41, 41],
                    iconAnchor: [12, 41]
                })
            }).addTo(map).bindPopup('📍 Lokasi Absensi Masuk<br>Lat: ' + lat.toFixed(6) + '<br>Lon: ' + lon.toFixed(6));
        }
    });
</script>

@endif

@endsection