@extends('layouts.admin.master')

@section('content')
    <div class="container-fluid py-3">
        <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3 mb-4">
            <div>
                <h3 class="mb-1">Monitoring Kehadiran</h3>
                <p class="text-muted mb-0">Monitoring kehadiran assignment lapangan berbasis snapshot, sambil tetap mempertahankan e-Presensi sebagai sistem presensi utama.</p>
            </div>
            <div class="d-flex flex-wrap gap-2">
                @foreach ($quickLinks as $link)
                    @if ($link['route'])
                        <a href="{{ $link['route'] }}" class="btn btn-outline-primary btn-sm" @if (str_starts_with($link['route'], 'http')) target="_blank" rel="noopener" @endif>{{ $link['label'] }}</a>
                    @endif
                @endforeach
            </div>
        </div>

        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body">
                <form method="GET" class="row g-3 align-items-end">
                    <div class="col-lg-4">
                        <label class="form-label">Filter OPD</label>
                        <select name="opd_id" class="form-select">
                            <option value="">Semua OPD</option>
                            @foreach ($organizations as $organization)
                                <option value="{{ $organization->id }}" @selected((int) ($filters['opd_id'] ?? 0) === $organization->id)>
                                    {{ $organization->short_name ?: $organization->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-3">
                        <label class="form-label">Dari tanggal</label>
                        <input type="date" name="date_from" class="form-control" value="{{ $filters['date_from'] }}">
                    </div>
                    <div class="col-lg-3">
                        <label class="form-label">Sampai tanggal</label>
                        <input type="date" name="date_to" class="form-control" value="{{ $filters['date_to'] }}">
                    </div>
                    <div class="col-lg-2 d-grid">
                        <button type="submit" class="btn btn-primary">Terapkan</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="row g-3 mb-4">
            @foreach ($summaryCards as $card)
                <div class="col-xl-3 col-md-6">
                    <div class="card border-0 shadow-sm h-100 monitor-card monitor-card-{{ $card['accent'] }}">
                        <div class="card-body">
                            <div class="small text-muted">{{ $card['title'] }}</div>
                            <div class="display-6 fw-semibold">{{ number_format($card['value']) }}</div>
                            <div class="small text-muted">{{ $card['description'] }}</div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="row g-3">
            <div class="col-xl-8">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Assignment Terpantau</h5>
                        <p class="text-muted mb-0">Snapshot kehadiran diikat ke assignment yang berasal dari modul kegiatan existing.</p>
                    </div>
                    <div class="card-body pt-2">
                        <div class="table-responsive">
                            <table class="table align-middle mb-0">
                                <thead>
                                    <tr>
                                        <th>Assignment</th>
                                        <th>OPD</th>
                                        <th>Jadwal</th>
                                        <th>Petugas</th>
                                        <th>Snapshot Terakhir</th>
                                        <th class="text-end">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($assignments as $assignment)
                                        <tr>
                                            <td>
                                                <div class="fw-semibold">{{ $assignment['title'] }}</div>
                                                <div class="small text-muted">{{ $assignment['ticket'] ?: 'Tanpa tiket' }}</div>
                                            </td>
                                            <td>{{ $assignment['organization'] }}</td>
                                            <td class="small">{{ $assignment['schedule'] }}</td>
                                            <td class="small">{{ implode(', ', $assignment['petugas']) ?: 'Belum ada petugas' }}</td>
                                            <td>
                                                <div class="fw-semibold">{{ $assignment['latest_presence'] }}</div>
                                                <div class="small text-muted">{{ $assignment['latest_presence_time'] }}</div>
                                            </td>
                                            <td class="text-end">
                                                <a href="{{ $assignment['detail_url'] }}" class="btn btn-outline-primary btn-sm">Detail</a>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center text-muted py-4">Belum ada assignment dalam filter monitoring ini.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="card border-0 shadow-sm mb-3">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Feed Snapshot</h5>
                        <p class="text-muted mb-0">Urutan snapshot kehadiran terbaru yang masuk ke Smart City.</p>
                    </div>
                    <div class="card-body pt-2">
                        @forelse ($presenceFeed as $snapshot)
                            <div class="border rounded-4 p-3 mb-3 bg-light">
                                <div class="d-flex justify-content-between gap-3">
                                    <div>
                                        <div class="fw-semibold">{{ $snapshot['presence'] }}</div>
                                        <div>{{ $snapshot['assignment'] }}</div>
                                    </div>
                                    <div class="small text-muted text-end">{{ $snapshot['captured_at'] }}</div>
                                </div>
                                <div class="small text-muted mt-2">{{ $snapshot['actor'] }} | {{ $snapshot['source'] }}</div>
                                <div class="small mt-2">{{ $snapshot['note'] }}</div>
                            </div>
                        @empty
                            <div class="text-muted">Belum ada snapshot kehadiran pada rentang filter ini.</div>
                        @endforelse
                    </div>
                </div>

                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Mode Integrasi</h5>
                        <p class="text-muted mb-0">Smart City merekam snapshot operasional, sedangkan presensi resmi tetap di aplikasi e-Presensi.</p>
                    </div>
                    <div class="card-body pt-2">
                        <div class="rounded-4 bg-light p-3 mb-3">
                            <div class="small text-muted">Bridge status</div>
                            <div class="fw-semibold">{{ config('services.presensi_bridge.enabled') ? 'Aktif' : 'Belum aktif' }}</div>
                        </div>
                        <div class="rounded-4 bg-light p-3">
                            <div class="small text-muted">Basis URL e-Presensi</div>
                            <div class="small fw-semibold text-break">{{ config('services.presensi_bridge.base_url') }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('stylesheet')
    <style>
        .monitor-card {
            border-top: 4px solid transparent !important;
        }

        .monitor-card-primary { border-top-color: #0d6efd !important; }
        .monitor-card-success { border-top-color: #198754 !important; }
        .monitor-card-info { border-top-color: #0dcaf0 !important; }
        .monitor-card-warning { border-top-color: #ffc107 !important; }
    </style>
@endsection