@extends('layouts.app')

@section('styles')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <style>
        #map {
            height: 400px;
            width: 100%;
            margin-top: 20px;
        }
        .detail-card {
            margin-bottom: 20px;
        }
        .detail-label {
            font-weight: bold;
            color: #666;
        }
        .detail-value {
            color: #333;
        }
    </style>
@endsection

@section('content')
<div class="row">
    <div class="col s12">
        <div class="card">
            <div class="card-content">
                <div class="d-flex justify-content-between align-items-center">
                    <span class="card-title">Detail Drainase</span>
                    <a href="{{ route('drainase.index') }}" class="btn waves-effect waves-light indigo right">
                        <i class="mdi-navigation-arrow-back"></i> Kembali
                    </a>
                </div>

                <div class="row">
                    <div class="col s12 m4 l4">
                        <div class="card detail-card">
                            <div class="card-content" style="height: 400px !important;">
                                <img class="materialboxed" width="600" height="400" src="{{ asset('storage/' . $drainase->file_foto) }}" alt="Foto Drainase" data-caption="Foto Pada Lapangan">
                            </div>
                        </div>
                    </div>
                    <div class="col s12 m8 l8">
                        <div class="card detail-card">
                            <div class="card-content" style="height: 400px !important;">
                                <div class="row">
                                    <div class="col s12 m6 l6">
                                        <ul class="collection">
                                            <li class="collection-item avatar">
                                                <i class="mdi-maps-location-history circle red"></i>
                                                <span class="detail-label">Kecamatan</span>
                                                <p class="detail-value">{{ $drainase->kecamatan->nama_kecamatan }}</p>
                                            </li>
                                            <li class="collection-item avatar">
                                                <i class="mdi-maps-place circle red"></i>
                                                <span class="detail-label">Desa</span>
                                                <p class="detail-value">{{ $drainase->desa->nama_desa }}</p>
                                            </li>
                                            <li class="collection-item avatar">
                                                <i class="mdi-maps-my-location circle red"></i>
                                                <span class="detail-label">Koordinat</span>
                                                <p class="detail-value">{{ $drainase->latitude }}, {{ $drainase->longitude }}</p>
                                            </li>
                                            <li class="collection-item avatar">
                                                <i class="mdi-action-event circle green"></i>
                                                <span class="detail-label">Tahun</span>
                                                <p class="detail-value">{{ $drainase->tahun }}</p>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col s12 m6 l6">
                                        <ul class="collection">
                                            <li class="collection-item avatar">
                                                <i class="mdi-toggle-check-box-outline-blank circle green"></i>
                                                <span class="detail-label">Luas</span>
                                                <p class="detail-value">{{ number_format($drainase->luas, 2) }} m²</p>
                                            </li>
                                            <li class="collection-item avatar">
                                                <i class="mdi-image-timer circle green"></i>
                                                <span class="detail-label">Waktu Kejadian</span>
                                                <p class="detail-value">{{ $drainase->waktu_kejadian->format('d/m/Y H:i') }}</p>
                                            </li>
                                            <li class="collection-item avatar">
                                                <i class="mdi-image-timer-off circle green"></i>
                                                <span class="detail-label">Lama Genangan</span>
                                                <p class="detail-value">{{ $drainase->lama_genangan }} menit</p>
                                            </li>
                                            <li class="collection-item avatar">
                                                <i class="mdi-image-straighten circle green"></i>
                                                <span class="detail-label">Tinggi Genangan</span>
                                                <p class="detail-value">{{ number_format($drainase->tinggi_genangan, 2) }} cm</p>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-content">
                        <h5>Peta Lokasi</h5>
                        <div id="map"
                            data-geojson-path="{{ $drainase->file_geojason ? asset('storage/' . $drainase->file_geojason) : '' }}"
                            data-latitude="{{ $drainase->latitude }}"
                            data-longitude="{{ $drainase->longitude }}"
                            data-kecamatan="{{ $drainase->kecamatan->nama_kecamatan }}"
                            data-desa="{{ $drainase->desa->nama_desa }}"
                            data-tahun="{{ $drainase->tahun }}"
                            data-waktukejadian="{{ $drainase->waktu_kejadian->format('d/m/Y H:i') }}"
                            data-luas="{{ number_format($drainase->luas, 2) }}"
                            data-lamagenangan="{{ $drainase->lama_genangan }}"
                            data-tinggigenangan="{{ number_format($drainase->tinggi_genangan, 2) }}">
                            <div class="map-controls">
                                <div class="radio-group">
                                    <p>
                                        <input name="map-type" type="radio" id="layer-osm" value="osm" checked />
                                        <label for="layer-osm">OSM</label>
                                    </p>
                                    <p>
                                        <input name="map-type" type="radio" id="layer-satellite" value="satellite" />
                                        <label for="layer-satellite">Satellite</label>
                                    </p>
                                </div>
                            </div>
                            <div id="popup" class="ol-popup">
                                <a href="#" id="popup-closer" class="ol-popup-closer"></a>
                                <div id="popup-content"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
    @vite(['resources/js/drainase/mapShowDrainase.js'])
@endpush