@extends('layouts.app')

@section('content')
<style>
    .action-buttons {
        display: flex;
        gap: 8px;
        justify-content: center;
        align-items: center;
    }

    .action-buttons .btn {
        margin: 0;
        padding: 0 10px;
        height: 32px;
        line-height: 32px;
    }

    .action-buttons .btn i {
        font-size: 18px;
        line-height: 32px;
    }
</style>

<div class="row">
    <div class="col s12">
        <div class="card">
            <div class="card-content">
                <h4 class="header card-title">Detail D.I Rawa: {{ $rawa->nama_rawa }}</h4>

                <div class="row">
                    <div class="col s12">
                        <div id="map"
                            data-geojson-path="{{ $rawa->geojson_rawa ? url('storage/rawa_geojson/' . $rawa->geojson_rawa) : '' }}"
                            data-sarpras="{{ json_encode($sarpras) }}">
                            <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 Rawa</strong></div>
                                    <div class="col s8">{{ $rawa->nama_rawa }}</div>
                                </div>
                                <div class="row">
                                    <div class="col s4"><strong>Kecamatan</strong></div>
                                    <div class="col s8">{{ $rawa->kecamatan->nama_kecamatan }}</div>
                                </div>
                                <div class="row">
                                    <div class="col s4"><strong>Luas</strong></div>
                                    <div class="col s8">{{ $rawa->luas }} Ha</div>
                                </div>
                            </div>
                            <div class="col s6">
                                <div class="row">
                                    <div class="col s4"><strong>Dibuat Pada</strong></div>
                                    <div class="col s8">{{ $rawa->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">{{ $rawa->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">Sarana dan Prasarana D.I Rawa</span>
                    <a href="{{ route('sarpras-rawa.create', ['rawa_id' => $rawa->id]) }}" class="btn waves-effect waves-light indigo right">
                        <i class="mdi-content-add"></i> Tambah Sarana dan Prasarana
                    </a>
                </div>

                @if (session('success'))
                    <div id="card-alert" class="card green" style="position: fixed; top: 20px; right: 20px; z-index: 1000; min-width: 300px;">
                        <div class="card-content white-text">
                            <p><i class="mdi-navigation-check"></i> {{ session('success') }}</p>
                        </div>
                        <button type="button" class="close white-text" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                @endif

                <div class="row">
                    <table class="centered striped responsive-table">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th class="left">Nama Sarana dan Prasarana</th>
                                <th>Jenis</th>
                                <th>Kondisi</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($sarpras as $sp)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td class="left">{{ $sp->nama_sarpras }}</td>
                                    <td>{{ $sp->jnsSarpras->jenis_sarpras }}</td>
                                    <td>{{ $sp->kondisiSarpras ? $sp->kondisiSarpras->kondisi : '-' }}</td>
                                    <td>
                                        <div class="action-buttons">
                                            <a onclick="showSarprasDetail({{ $sp->id }})" class="btn waves-effect waves-light indigo tooltipped" data-position="top" data-delay="50" data-tooltip="Detail">
                                                <i class="mdi-action-visibility"></i>
                                            </a>
                                            <a href="{{ route('sarpras-rawa.edit', $sp->id) }}" class="btn waves-effect waves-light amber accent-2 tooltipped" data-position="top" data-delay="50" data-tooltip="Edit">
                                                <i class="mdi-editor-mode-edit"></i>
                                            </a>
                                            <form action="{{ route('sarpras-rawa.destroy', $sp->id) }}" method="POST" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn waves-effect waves-light red tooltipped" data-position="top" data-delay="50" data-tooltip="Hapus" onclick="return confirm('Apakah Anda yakin ingin menghapus data ini?')">
                                                    <i class="mdi-action-delete"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="center-align">Tidak ada data sarana dan prasarana</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>

                    <div class="center-align mt-3">
                        {{ $sarpras->links() }}
                    </div>
                </div>

                <div class="card-action">
                    <a href="{{ route('rawa.index') }}" class="btn waves-effect waves-light grey">Kembali</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="modalDetail" class="modal bottom-sheet">
    <div class="modal-content">
        <div class="row">
            <div class="col s4">
                <div class="card">
                    <div class="card-content">
                        <img src="" alt="Foto Sarana dan Prasarana" class="responsive-img">
                    </div>
                </div>
            </div>
            <div class="col s8">
                <ul id="profile-page-about-details" class="collection z-depth-1">
                    <li class="collection-item">
                        <div class="row">
                            <div class="col s5 grey-text darken-1"><i class="mdi-file-folder-shared"></i> Nama Sarana dan Prasarana</div>
                            <div class="col s7 grey-text text-darken-4 right-align"></div>
                        </div>
                    </li>
                    <li class="collection-item">
                        <div class="row">
                            <div class="col s5 grey-text darken-1"><i class="mdi-social-location-city"></i> Jenis Sarana dan Prasarana</div>
                            <div class="col s7 grey-text text-darken-4 right-align"></div>
                        </div>
                    </li>
                    <li class="collection-item">
                        <div class="row">
                            <div class="col s5 grey-text darken-1"><i class="mdi-image-healing"></i> Kondisi Sarana dan Prasarana</div>
                            <div class="col s7 grey-text text-darken-4 right-align"></div>
                        </div>
                    </li>
                    <li class="collection-item">
                        <div class="row">
                            <div class="col s5 grey-text darken-1"><i class="mdi-maps-pin-drop"></i> Titik Koordinat</div>
                            <div class="col s7 grey-text text-darken-4 right-align"></div>
                        </div>
                    </li>
                    <li class="collection-item">
                        <div class="row">
                            <div class="col s5 grey-text darken-1"><i class="mdi-image-photo"></i> Keterangan Foto</div>
                            <div class="col s7 grey-text text-darken-4 right-align"></div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
    @vite(['resources/js/rawa/mapShowRawa.js'])

    <script>
        function showSarprasDetail(id) {
            $.ajax({
                url: '{{ url("sarpras-rawa") }}/' + id,
                type: 'GET',
                success: function(response) {
                    if (response.success) {
                        const data = response.data;

                        $('#modalDetail .card img').attr('src', data.foto_sarpras || '');
                        $('#modalDetail .collection-item:nth-child(1) .right-align').text(data.nama_sarpras);
                        $('#modalDetail .collection-item:nth-child(2) .right-align').text(data.jenis_sarpras);
                        $('#modalDetail .collection-item:nth-child(3) .right-align').text(data.kondisi);
                        $('#modalDetail .collection-item:nth-child(4) .right-align').text(data.latitude + ', ' + data.longitude);
                        $('#modalDetail .collection-item:nth-child(5) .right-align').text(data.ket_foto);

                        $('#modalDetail').openModal();
                    }
                },
                error: function(xhr) {
                    console.error('Error:', xhr);
                    alert('Terjadi kesalahan saat mengambil data');
                }
            });
        }
    </script>
@endpush