@extends('layouts.app')

@section('title', 'Detail Laporan')
@section('page-title', 'Detail Laporan')

@section('content')

    <a href="{{ route('reports.index') }}" class="btn btn-sm btn-outline-secondary mb-3">
        <i class="bi bi-arrow-left"></i> Kembali
    </a>

    <div class="row g-3">
        <!-- Left: report info -->
        <div class="col-12 col-lg-7">
            <div class="card table-card mb-3">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div>
                            <h5 class="fw-bold mb-1" style="letter-spacing:-.01em;">{{ $report->title }}</h5>
                            <span class="badge bg-light text-dark border fw-medium">{{ $report->category->name ?? '-' }}</span>
                        </div>
                        <x-status-badge :status="$report->status" />
                    </div>

                    @if($report->photo)
                        <img src="{{ asset('storage/' . $report->photo) }}"
                             class="img-fluid rounded-3 mb-3" style="max-height:320px;object-fit:cover;width:100%;" alt="Foto laporan">
                    @else
                        <div class="bg-light rounded-3 mb-3 d-flex align-items-center justify-content-center text-muted"
                             style="height:200px;">
                            <i class="bi bi-image fs-1"></i>
                        </div>
                    @endif

                    <h6 class="fw-bold small text-uppercase text-muted" style="letter-spacing:.04em;">Deskripsi</h6>
                    <p>{{ $report->description }}</p>

                    <h6 class="fw-bold small text-uppercase text-muted" style="letter-spacing:.04em;">Lokasi</h6>
                    <p class="mb-1">{{ $report->address ?? 'Alamat tidak dicantumkan' }}</p>
                    <p class="text-muted small mb-3">
                        <i class="bi bi-geo-alt"></i>
                        {{ $report->latitude }}, {{ $report->longitude }}
                    </p>

                    <div class="ratio ratio-16x9 rounded-3 overflow-hidden border">
                        <iframe
                            src="https://www.openstreetmap.org/export/embed.html?bbox={{ $report->longitude - 0.01 }}%2C{{ $report->latitude - 0.01 }}%2C{{ $report->longitude + 0.01 }}%2C{{ $report->latitude + 0.01 }}&layer=mapnik&marker={{ $report->latitude }}%2C{{ $report->longitude }}"
                            loading="lazy">
                        </iframe>
                    </div>
                </div>
            </div>

            <div class="card table-card">
                <div class="card-header bg-white fw-bold">
                    <i class="bi bi-person-circle me-1 text-success"></i> Pelapor
                </div>
                <div class="card-body">
                    <div class="row mb-2">
                        <div class="col-4 text-muted small">Nama</div>
                        <div class="col-8 fw-medium">{{ $report->user->name ?? '-' }}</div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-4 text-muted small">Email</div>
                        <div class="col-8">{{ $report->user->email ?? '-' }}</div>
                    </div>
                    <div class="row">
                        <div class="col-4 text-muted small">Telepon</div>
                        <div class="col-8">{{ $report->user->phone ?? '-' }}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right: status update + timeline -->
        <div class="col-12 col-lg-5">
            <div class="card table-card mb-3">
                <div class="card-header bg-white fw-bold">
                    <i class="bi bi-pencil-square me-1 text-success"></i> Perbarui Status
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('reports.update-status', $report->id) }}">
                        @csrf
                        @method('PATCH')

                        <div class="mb-3">
                            <label class="form-label small">Status</label>
                            <select name="status" class="form-select" required>
                                @foreach(['menunggu', 'diverifikasi', 'diproses', 'selesai', 'ditolak'] as $s)
                                    <option value="{{ $s }}" @selected($report->status === $s)>
                                        {{ ucfirst($s) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label small">Catatan Petugas</label>
                            <textarea name="admin_note" rows="4" class="form-control"
                                      placeholder="Tulis catatan untuk pelapor (opsional)">{{ old('admin_note', $report->admin_note) }}</textarea>
                        </div>

                        <button type="submit" class="btn btn-success w-100">
                            <i class="bi bi-check2-circle"></i> Simpan Perubahan
                        </button>
                    </form>
                </div>
            </div>

            <div class="card table-card">
                <div class="card-header bg-white fw-bold">
                    <i class="bi bi-clock-history me-1 text-success"></i> Riwayat
                </div>
                <div class="card-body">
                    <ul class="list-unstyled mb-0">
                        <li class="d-flex mb-3">
                            <i class="bi bi-check-circle-fill text-success me-2 fs-6"></i>
                            <div>
                                <div class="fw-semibold small">Laporan dibuat</div>
                                <div class="text-muted small">{{ $report->created_at->format('d M Y, H:i') }}</div>
                            </div>
                        </li>
                        <li class="d-flex mb-3">
                            <i class="bi bi-{{ $report->processed_at ? 'check-circle-fill text-success' : 'circle text-muted' }} me-2 fs-6"></i>
                            <div>
                                <div class="fw-semibold small">Diproses</div>
                                <div class="text-muted small">
                                    {{ $report->processed_at?->format('d M Y, H:i') ?? 'Belum diproses' }}
                                </div>
                            </div>
                        </li>
                        <li class="d-flex">
                            <i class="bi bi-{{ $report->completed_at ? 'check-circle-fill text-success' : 'circle text-muted' }} me-2 fs-6"></i>
                            <div>
                                <div class="fw-semibold small">Selesai</div>
                                <div class="text-muted small">
                                    {{ $report->completed_at?->format('d M Y, H:i') ?? 'Belum selesai' }}
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

@endsection