@extends('layouts.app')

@section('content')
<div class="row">
    <div class="col s12">
        <div class="card">
            <div class="card-content">
                <h4 class="header card-title">Detail Sungai: {{ $sungai->nama_sungai }}</h4>

                <div class="row">
                    <div class="col s12">
                        <div id="map"
                            data-geojson-path="{{ $sungai->geojson_sungai ? url('storage/geojson/' . $sungai->geojson_sungai) : '' }}"
                            data-normalisasi="{{ json_encode($normalisasi->map(function($item) {
                                return [
                                    'id' => $item->id,
                                    'p_normalisasi' => $item->p_normalisasi,
                                    'tahun_normalisasi' => $item->tahun_normalisasi,
                                    'latitude' => $item->latitude,
                                    'longitude' => $item->longitude,
                                    'keterangan' => $item->keterangan,
                                    'foto' => $item->foto
                                ];
                            })) }}">
                            <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 class="row">
                    <div class="col s12">
                        <div class="row">
                            <div class="col s6">
                                <div class="row">
                                    <div class="col s4"><strong>Nama Sungai</strong></div>
                                    <div class="col s8">{{ $sungai->nama_sungai }}</div>
                                </div>
                                <div class="row">
                                    <div class="col s4"><strong>Alamat Lokasi</strong></div>
                                    <div class="col s8">{{ $sungai->alamat_lokasi }}</div>
                                </div>
                                <div class="row">
                                    <div class="col s4"><strong>Kecamatan</strong></div>
                                    <div class="col s8">{{ $sungai->kecamatan->nama_kecamatan }}</div>
                                </div>
                                <div class="row">
                                    <div class="col s4"><strong>Desa</strong></div>
                                    <div class="col s8">{{ $sungai->desa->nama_desa }}</div>
                                </div>
                                <div class="row">
                                    <div class="col s4"><strong>Panjang</strong></div>
                                    <div class="col s8">{{ $sungai->panjang }} meter</div>
                                </div>
                                <div class="row">
                                    <div class="col s4"><strong>Lebar</strong></div>
                                    <div class="col s8">{{ $sungai->lebar }} meter</div>
                                </div>
                                <div class="row">
                                    <div class="col s4"><strong>Jenis</strong></div>
                                    <div class="col s8">{{ $sungai->jenis }}</div>
                                </div>
                            </div>
                            <div class="col s6">
                                <div class="row">
                                    <div class="col s4"><strong>Kedalaman</strong></div>
                                    <div class="col s8">{{ $sungai->kedalaman }} meter</div>
                                </div>
                                <div class="row">
                                    <div class="col s4"><strong>Arah Aliran</strong></div>
                                    <div class="col s8">{{ $sungai->arah_aliran }}</div>
                                </div>
                                <div class="row">
                                    <div class="col s4"><strong>Kewenangan</strong></div>
                                    <div class="col s8">{{ $sungai->kewenangan_name }}</div>
                                </div>
                                <div class="row">
                                    <div class="col s4"><strong>Keterangan</strong></div>
                                    <div class="col s8">{{ $sungai->keterangan ?? '-' }}</div>
                                </div>
                                <div class="row">
                                    <div class="col s4"><strong>Dibuat Pada</strong></div>
                                    <div class="col s8">{{ $sungai->created_at->format('d F Y, H:i') }}</div>
                                </div>
                                <div class="row">
                                    <div class="col s4"><strong>Diperbarui Pada</strong></div>
                                    <div class="col s8">{{ $sungai->updated_at->format('d F Y, H:i') }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<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">Data Normalisasi</span>
                    @can('create')
                    <a href="{{ route('normalisasi.create', $sungai->id) }}" class="btn waves-effect waves-light indigo right">
                        <i class="mdi-content-add"></i> Tambah Data Normalisasi
                    </a>
                    @endcan
                </div>
                <div class="row">
                    <div class="col s12">
                        <table class="centered striped responsive-table">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Panjang (meter)</th>
                                    <th>Tahun</th>
                                    <th>Latitude</th>
                                    <th>Longitude</th>
                                    <th>Keterangan</th>
                                    @canany(['update', 'delete'])
                                    <th>Aksi</th>
                                    @endcanany
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($normalisasi as $item)
                                    <tr>
                                        <td>{{ ($normalisasi->currentPage() - 1) * $normalisasi->perPage() + $loop->iteration }}</td>
                                        <td>{{ $item->p_normalisasi }}</td>
                                        <td>{{ $item->tahun_normalisasi }}</td>
                                        <td>{{ $item->latitude }}</td>
                                        <td>{{ $item->longitude }}</td>
                                        <td>{{ $item->keterangan }}</td>
                                        @canany(['update', 'delete'])
                                        <td>
                                            @can('update')
                                            <a href="{{ route('normalisasi.edit', $item->id) }}" class="btn-floating btn-flat waves-effect waves-light amber accent-2 white-text tooltipped" data-position="top" data-delay="50" data-tooltip="Edit Normalisasi"><i class="mdi-editor-mode-edit"></i></a>
                                            @endcan
                                            @can('delete')
                                            <form action="{{ route('normalisasi.destroy', $item->id) }}" method="POST" class="d-inline delete-form">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn-floating btn-flat waves-effect waves-light red accent-2 white-text tooltipped delete-btn" data-position="top" data-delay="50" data-tooltip="Hapus Normalisasi"><i class="mdi-action-delete"></i></button>
                                            </form>
                                            @endcan
                                        </td>
                                        @endcanany
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="center">Tidak ada data normalisasi</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-action">
                    {{ $normalisasi->links() }}
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col s12">
        <div class="card">
            <div class="card-content">
                <div class="card-action">
                    <a href="{{ route('sungais.index') }}" class="btn waves-effect waves-light grey">Kembali</a>
                    @can('update')
                    <a href="{{ route('sungais.edit', $sungai->id) }}" class="btn waves-effect waves-light amber">Edit Data Sungai</a>
                    @endcan
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
    @vite(['resources/js/sungai/mapShowSungai.js'])
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const deleteForms = document.querySelectorAll('.delete-form');

            deleteForms.forEach(form => {
                form.addEventListener('submit', function(e) {
                    e.preventDefault();

                    Swal.fire({
                        title: 'Apakah Anda yakin?',
                        text: "Data normalisasi akan dihapus permanen!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Ya, hapus!',
                        cancelButtonText: 'Batal'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            form.submit();
                        }
                    });
                });
            });
        });
    </script>
@endpush