@extends('dashboard.layouts.app')

@section('title', 'Detail Data Jalan')

@section('content')
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">Detail Data Jalan</h5>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="bi bi-info-circle me-2"></i>Informasi Dasar</h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="border rounded p-3 h-100 bg-light">
                                <h6 class="text-primary mb-3"><i class="bi bi-signpost me-2"></i>Nama Jalan</h6>
                                <p class="lead mb-0">{{ $jalan->nama_jalan }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="border rounded p-3 h-100 bg-light">
                                <h6 class="text-primary mb-3"><i class="bi bi-rulers me-2"></i>Dimensi Jalan</h6>
                                <p class="mb-2">Panjang: <span class="fw-bold">{{ $jalan->panjang_jalan }} meter</span></p>
                                <p class="mb-0">Lebar: <span class="fw-bold">{{ $jalan->lebar_jalan }} meter</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0"><i class="bi bi-geo-alt me-2"></i>Lokasi & Klasifikasi</h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="border rounded p-3 h-100 bg-light">
                                <h6 class="text-success mb-3"><i class="bi bi-pin-map me-2"></i>Wilayah</h6>
                                <p class="mb-2">Kecamatan: <span class="fw-bold">{{ $jalan->kecamatan->nama_kecamatan }}</span></p>
                                <p class="mb-0">Desa: <span class="fw-bold">{{ $jalan->desa->nama_desa }}</span></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="border rounded p-3 h-100 bg-light">
                                <h6 class="text-success mb-3"><i class="bi bi-tag me-2"></i>Klasifikasi</h6>
                                <p class="mb-2">Tipe: <span class="badge bg-info">Jalan {{ ucfirst($jalan->tipe_jalan) }}</span></p>
                                <p class="mb-0">Kondisi: <span class="badge bg-{{ $jalan->kondisi_jalan == 'baik' ? 'success' : ($jalan->kondisi_jalan == 'sedang' ? 'warning' : 'danger') }}">{{ ucfirst($jalan->kondisi_jalan) }}</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0"><i class="bi bi-file-earmark-text me-2"></i>Informasi Tambahan</h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="border rounded p-3 h-100 bg-light">
                                <h6 class="text-info mb-3"><i class="bi bi-calendar-event me-2"></i>Waktu</h6>
                                <p class="mb-2">Tahun Pembangunan: <span class="fw-bold">{{ $jalan->tahun_pembangunan }}</span></p>
                                <p class="mb-0">Terakhir Diperbaiki: <span class="fw-bold">{{ $jalan->terakhir_diperbaiki ? \Carbon\Carbon::parse($jalan->terakhir_diperbaiki)->translatedFormat('d F Y') : '-' }}</span></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="border rounded p-3 h-100 bg-light">
                                <h6 class="text-info mb-3"><i class="bi bi-file-earmark-text me-2"></i>Dokumen & Catatan</h6>
                                <p class="mb-2">Keterangan: <span class="fst-italic">{{ $jalan->keterangan ?: '-' }}</span></p>
                                @if($jalan->geojson_file)
                                    <a href="{{ asset('storage/geojson/jalan/' . $jalan->geojson_file) }}"
                                        class="btn btn-sm btn-outline-primary" target="_blank">
                                        <i class="bi bi-download me-1"></i>Download GeoJSON
                                    </a>
                                @else
                                    <p class="text-muted mb-0">Tidak ada file GeoJSON</p>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-between mt-4">
            <a href="{{ route('jalan.index') }}" class="btn btn-secondary">Kembali</a>
            <div>
                <a href="{{ route('jalan.edit', $jalan) }}" class="btn btn-warning me-2">Edit</a>
                <form method="POST" action="{{ route('jalan.destroy', $jalan) }}"
                    style="display: inline;"
                    onsubmit="return confirm('Apakah Anda yakin ingin menghapus data ini?')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Hapus</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection