{{-- Documents: uploads, scanned copies, photographs (with GPS position), progress reports --}}
@php
    $docTypes = \App\Http\Controllers\ProbationAssessmentController::documentTypes();
    if ($case->case_type !== 'probation_hostel') $docTypes = array_diff_key($docTypes, config('probation.case_document_types_hostel', []));
    $isImage = fn ($p) => preg_match('/\.(jpe?g|png|gif|webp)$/i', (string) $p);
@endphp
<div class="card tab-card"><div class="card-body">
    <h6 class="text-uppercase small text-muted mb-3">Documents, scans &amp; photographs</h6>
    <div class="row g-2">
    @forelse($case->documents->sortByDesc('id') as $d)
        <div class="col-md-6 col-xl-4"><div class="border rounded p-2 mini h-100 d-flex gap-2">
            @if($isImage($d->file_path))
                <a href="{{ asset('storage/'.$d->file_path) }}" target="_blank"><img src="{{ asset('storage/'.$d->file_path) }}" style="width:70px;height:70px;object-fit:cover;border-radius:6px" alt=""></a>
            @else
                <i class="fas fa-file-lines fa-2x text-muted mt-1"></i>
            @endif
            <div>
                <strong>{{ $docTypes[$d->doc_type] ?? ($d->title ?? $d->doc_type) }}</strong>
                <div class="text-muted">{{ optional($d->captured_on ?? $d->created_at)->format('d M Y') }}</div>
                @if($d->notes)<div>{{ $d->notes }}</div>@endif
                @if($d->latitude)<div><a href="https://www.openstreetmap.org/?mlat={{ $d->latitude }}&mlon={{ $d->longitude }}#map=17/{{ $d->latitude }}/{{ $d->longitude }}" target="_blank"><i class="fas fa-location-dot"></i> {{ $d->latitude }}, {{ $d->longitude }}</a></div>@endif
                <a href="{{ asset('storage/'.$d->file_path) }}" target="_blank">Open</a>
            </div>
        </div></div>
    @empty<div class="col-12"><p class="text-muted mini">No documents uploaded.</p></div>@endforelse
    </div>
    <form method="POST" action="{{ route('probation.cases.document.store', $case->id) }}" enctype="multipart/form-data" class="row g-2 mt-2 border-top pt-2" id="docForm">
        @csrf
        <div class="col-md-4"><select name="doc_type" class="form-select form-select-sm" required>
            <option value="">Document type…</option>
            @foreach($docTypes as $v => $l)<option value="{{ $v }}">{{ $l }}</option>@endforeach
        </select></div>
        <div class="col-md-5"><input type="file" name="document" accept=".pdf,.doc,.docx,image/*" capture="environment" class="form-control form-control-sm" required></div>
        <div class="col-md-3"><input type="date" name="captured_on" class="form-control form-control-sm" value="{{ now()->format('Y-m-d') }}" title="Date taken / scanned"></div>
        <div class="col-md-5"><input name="notes" class="form-control form-control-sm" placeholder="Notes (optional)"></div>
        <div class="col-md-2"><input name="latitude" class="form-control form-control-sm" placeholder="Latitude"></div>
        <div class="col-md-2"><input name="longitude" class="form-control form-control-sm" placeholder="Longitude"></div>
        <div class="col-md-3 d-flex gap-1">
            <button type="button" class="btn btn-sm btn-outline-secondary" id="gpsBtn" title="Use this device's location"><i class="fas fa-location-crosshairs"></i> GPS</button>
            <button class="btn btn-sm btn-primary flex-grow-1">Upload</button>
        </div>
    </form>
</div></div>
<script>
document.getElementById('gpsBtn')?.addEventListener('click', function () {
    var f = document.getElementById('docForm'), b = this;
    if (!navigator.geolocation) { alert('Location is not available on this device.'); return; }
    b.disabled = true;
    navigator.geolocation.getCurrentPosition(function (p) {
        f.latitude.value = p.coords.latitude.toFixed(7); f.longitude.value = p.coords.longitude.toFixed(7); b.disabled = false;
    }, function () { alert('Could not get the location.'); b.disabled = false; }, { enableHighAccuracy: true, timeout: 15000 });
});
</script>