@extends('dashboard.layouts.app')

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

@section('content')
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">Detail Data Drainase</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 Saluran</h6>
                                <p class="lead mb-0">{{ $drainase->nama_saluran }}</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 Saluran</h6>
                                <p class="mb-2">Panjang: <span class="fw-bold">{{ $drainase->panjang }} meter</span></p>
                                <p class="mb-2">Lebar: <span class="fw-bold">{{ $drainase->lebar }} meter</span></p>
                                <p class="mb-0">Kedalaman: <span class="fw-bold">{{ $drainase->kedalaman }} 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>Klasifikasi</h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-12">
                            <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">{{ ucfirst($drainase->tipe_saluran) }}</span></p>
                                <p class="mb-0">Kondisi: <span class="badge bg-{{ $drainase->kondisi == 'Baik' ? 'success' : ($drainase->kondisi == 'Sedang' ? 'warning' : 'danger') }}">{{ ucfirst($drainase->kondisi) }}</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-0">Tahun Pembangunan: <span class="fw-bold">{{ $drainase->tahun_pembangunan }}</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">{{ $drainase->keterangan ?: '-' }}</span></p>
                                @if($drainase->geojson_file)
                                    <a href="{{ asset('storage/geojson/drainase/' . $drainase->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('drainase.index') }}" class="btn btn-secondary">Kembali</a>
            <div>
                <a href="{{ route('drainase.edit', $drainase) }}" class="btn btn-warning me-2">Edit</a>
                <form method="POST" action="{{ route('drainase.destroy', $drainase) }}"
                    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