{{-- Crime prevention activities (station / county / region) with evidence; tree nurseries & trees planted with GPS --}}
@extends('layouts.app')
@section('title', 'Crime Prevention & Trees - ICMIS')
@push('styles') @include('probation._styles') @endpush
@section('content')
<div class="container-fluid">
    <h2 class="fw-bold mb-3">Crime Prevention Activities &amp; Tree Register</h2>
    @include('probation.dashboard._filters')
    <div class="row g-3">
        <div class="col-lg-6"><div class="card pcard h-100"><div class="card-header">Crime prevention activities</div><div class="card-body">
            <form method="POST" action="{{ route('probation.crime-prevention.store') }}" enctype="multipart/form-data" class="row g-1 mb-3 geo-form">@csrf
                <div class="col-md-3"><select name="level" class="form-select form-select-sm"><option value="station">Station</option><option value="county">County</option><option value="region">Region</option></select></div>
                <div class="col-md-6"><input name="title" class="form-control form-control-sm" placeholder="Activity" required></div>
                <div class="col-md-3"><input type="date" name="activity_date" class="form-control form-control-sm" value="{{ now()->format('Y-m-d') }}"></div>
                <div class="col-md-6"><input name="venue" class="form-control form-control-sm" placeholder="Venue"></div>
                <div class="col-md-3"><input type="number" min="0" name="participants" class="form-control form-control-sm" placeholder="Participants"></div>
                <div class="col-md-3"><input type="file" name="evidence" class="form-control form-control-sm" title="Evidence (photo / PDF)"></div>
                <div class="col-12"><textarea name="description" rows="2" class="form-control form-control-sm" placeholder="Description"></textarea></div>
                <div class="col-md-4"><input name="latitude" class="form-control form-control-sm" placeholder="Latitude"></div>
                <div class="col-md-4"><input name="longitude" class="form-control form-control-sm" placeholder="Longitude"></div>
                <div class="col-md-4 d-flex gap-1"><button type="button" class="btn btn-sm btn-outline-secondary geo-btn"><i class="fas fa-location-crosshairs"></i></button><button class="btn btn-sm btn-primary flex-grow-1">Save</button></div>
            </form>
            <table class="table table-sm small mb-1"><thead class="table-light"><tr><th>Date</th><th>Level</th><th>Activity</th><th>Station</th><th>Evidence</th></tr></thead><tbody>
            @forelse($activities as $a)
                <tr><td>{{ optional($a->activity_date)->format('d M Y') }}</td><td>{{ ucfirst($a->level) }}</td><td>{{ $a->title }}<div class="text-muted">{{ $a->venue }}{{ $a->participants ? ' · ' . $a->participants . ' participants' : '' }}</div></td>
                    <td>{{ optional($a->branch)->branch_name }}</td>
                    <td>@if($a->evidence_path)<a href="{{ asset('storage/' . $a->evidence_path) }}" target="_blank">open</a>@endif
                        @if($a->latitude) <a href="https://www.openstreetmap.org/?mlat={{ $a->latitude }}&mlon={{ $a->longitude }}#map=16/{{ $a->latitude }}/{{ $a->longitude }}" target="_blank"><i class="fas fa-location-dot"></i></a>@endif</td></tr>
            @empty<tr><td colspan="5" class="text-muted">No activities recorded.</td></tr>@endforelse
            </tbody></table>
            {{ $activities->links('pagination::bootstrap-4') }}
        </div></div></div>

        <div class="col-lg-6"><div class="card pcard h-100"><div class="card-header d-flex justify-content-between"><span>Tree nurseries &amp; trees planted</span><span class="badge bg-success">{{ number_format($treeTotal) }} trees</span></div><div class="card-body">
            <form method="POST" action="{{ route('probation.trees.store') }}" enctype="multipart/form-data" class="row g-1 mb-3 geo-form">@csrf
                <div class="col-md-6"><input name="nursery_name" class="form-control form-control-sm" placeholder="Tree nursery (if any)"></div>
                <div class="col-md-6"><input name="location" class="form-control form-control-sm" placeholder="Planting location" required></div>
                <div class="col-md-3"><input type="number" min="0" name="seedlings" class="form-control form-control-sm" placeholder="Seedlings"></div>
                <div class="col-md-3"><input type="number" min="0" name="trees_planted" class="form-control form-control-sm" placeholder="Trees planted" required></div>
                <div class="col-md-6"><input name="species" class="form-control form-control-sm" placeholder="Species"></div>
                <div class="col-md-4"><input type="date" name="recorded_on" class="form-control form-control-sm" value="{{ now()->format('Y-m-d') }}"></div>
                <div class="col-md-8"><input type="file" name="evidence" class="form-control form-control-sm" title="Photo"></div>
                <div class="col-md-4"><input name="latitude" class="form-control form-control-sm" placeholder="Latitude"></div>
                <div class="col-md-4"><input name="longitude" class="form-control form-control-sm" placeholder="Longitude"></div>
                <div class="col-md-4 d-flex gap-1"><button type="button" class="btn btn-sm btn-outline-secondary geo-btn"><i class="fas fa-location-crosshairs"></i></button><button class="btn btn-sm btn-success flex-grow-1">Save</button></div>
            </form>
            <table class="table table-sm small mb-1"><thead class="table-light"><tr><th>Date</th><th>Location</th><th class="text-end">Seedlings</th><th class="text-end">Planted</th><th>GPS</th></tr></thead><tbody>
            @forelse($trees as $t)
                <tr><td>{{ optional($t->recorded_on)->format('d M Y') }}</td><td>{{ $t->location }}<div class="text-muted">{{ $t->nursery_name }} {{ $t->species ? '· ' . $t->species : '' }}</div></td>
                    <td class="text-end">{{ $t->seedlings }}</td><td class="text-end">{{ $t->trees_planted }}</td>
                    <td>@if($t->latitude)<a href="https://www.openstreetmap.org/?mlat={{ $t->latitude }}&mlon={{ $t->longitude }}#map=16/{{ $t->latitude }}/{{ $t->longitude }}" target="_blank">{{ $t->latitude }}, {{ $t->longitude }}</a>@endif
                        @if($t->evidence_path) <a href="{{ asset('storage/' . $t->evidence_path) }}" target="_blank"><i class="fas fa-image"></i></a>@endif</td></tr>
            @empty<tr><td colspan="5" class="text-muted">No trees recorded.</td></tr>@endforelse
            </tbody></table>
            {{ $trees->links('pagination::bootstrap-4') }}
        </div></div></div>
    </div>
</div>
<script>
document.querySelectorAll('.geo-btn').forEach(function (b) {
    b.addEventListener('click', function () {
        var f = b.closest('.geo-form');
        if (!navigator.geolocation) return alert('Location is not available on this device.');
        navigator.geolocation.getCurrentPosition(function (p) { f.latitude.value = p.coords.latitude.toFixed(7); f.longitude.value = p.coords.longitude.toFixed(7); },
            function () { alert('Could not get the location.'); }, { enableHighAccuracy: true, timeout: 15000 });
    });
});
</script>
@endsection