@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 Irigasi: {{ $irigasi->nama_irigasi }}</h4>

                <div class="row">
                    <div class="col s12">
                        <div id="map"
                            data-geojson-path="{{ $irigasi->geojson_irigasi ? url('storage/irigasi_geojson/' . $irigasi->geojson_irigasi) : '' }}"
                            data-sarpras="{{ json_encode($sarprasForMap) }}">
                            <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 Irigasi</strong></div>
                                    <div class="col s8">{{ $irigasi->nama_irigasi }}</div>
                                </div>
                                <div class="row">
                                    <div class="col s4"><strong>Kecamatan</strong></div>
                                    <div class="col s8">{{ $irigasi->kecamatan->nama_kecamatan }}</div>
                                </div>
                                <div class="row">
                                    <div class="col s4"><strong>Luas</strong></div>
                                    <div class="col s8">{{ $irigasi->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">{{ $irigasi->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">{{ $irigasi->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 Daerah Irigasi</span>
                    @can('create')
                    <a href="{{ route('sarpras-irigasi.create', ['irigasi_id' => $irigasi->id]) }}" class="btn waves-effect waves-light indigo right">
                        <i class="mdi-content-add"></i> Tambah Sarana dan Prasarana
                    </a>
                    @endcan
                </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>Panjang (m)</th>
                                <th>Lebar (m)</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($sarpras as $sp)
                                <tr>
                                    <td>{{ ($sarpras->currentPage() - 1) * $sarpras->perPage() + $loop->iteration }}</td>
                                    <td class="left">{{ $sp->nama_sarpras }}</td>
                                    <td>{{ $sp->jnsSarpras->jenis_sarpras }}</td>
                                    <td>
                                        @if(in_array($sp->jns_sarpras_id, [5,6,7,8]))
                                            {{ $sp->panjang ?? '-' }}
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td>
                                        @if(in_array($sp->jns_sarpras_id, [5,6,7,8]))
                                            {{ $sp->lebar ?? '-' }}
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td>
                                        <div class="action-buttons">
                                            <a href="{{ route('sarpras-irigasi.show', $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>
                                            @can('update')
                                            <a href="{{ route('sarpras-irigasi.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>
                                            @endcan
                                            @can('delete')
                                            <button type="button" class="btn waves-effect waves-light red tooltipped" data-position="top" data-delay="50" data-tooltip="Hapus" onclick="confirmDelete({{ $sp->id }})">
                                                <i class="mdi-action-delete"></i>
                                            </button>
                                            @endcan
                                        </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('irigasi.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-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>
                    <li class="collection-item panjang-lebar-detail" style="display:none">
                        <div class="row">
                            <div class="col s5 grey-text darken-1"><i class="mdi-action-swap-horiz"></i> Panjang (m)</div>
                            <div class="col s7 grey-text text-darken-4 right-align" id="detail-panjang"></div>
                        </div>
                    </li>
                    <li class="collection-item panjang-lebar-detail" style="display:none">
                        <div class="row">
                            <div class="col s5 grey-text darken-1"><i class="mdi-action-swap-vert"></i> Lebar (m)</div>
                            <div class="col s7 grey-text text-darken-4 right-align" id="detail-lebar"></div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
    @vite(['resources/js/irigasi/mapShowIrigasi.js'])

    <script>
        function showSarprasDetail(id) {
            $.ajax({
                url: '{{ url("get-sarpras") }}/' + 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.latitude + ', ' + data.longitude);
                        $('#modalDetail .collection-item:nth-child(4) .right-align').text(data.ket_foto);
                        if ([5,6,7,8].includes(data.jns_sarpras_id*1)) {
                            $(".panjang-lebar-detail").show();
                            $('#detail-panjang').text(data.panjang ?? '-');
                            $('#detail-lebar').text(data.lebar ?? '-');
                        } else {
                            $(".panjang-lebar-detail").hide();
                        }
                        $('#modalDetail').openModal();
                    }
                },
                error: function(xhr) {
                    console.error('Error:', xhr);
                    alert('Terjadi kesalahan saat mengambil data');
                }
            });
        }

        function confirmDelete(id) {
            swal({
                title: "Apakah Anda yakin?",
                text: "Data sarana dan prasarana akan dihapus secara permanen!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Ya, hapus!",
                cancelButtonText: "Batal",
                closeOnConfirm: false,
                closeOnCancel: false
            }, function(isConfirm) {
                if (isConfirm) {
                    // Buat form untuk delete
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = '{{ url("sarpras-irigasi") }}/' + id;

                    // Tambahkan CSRF token
                    const csrfToken = document.createElement('input');
                    csrfToken.type = 'hidden';
                    csrfToken.name = '_token';
                    csrfToken.value = '{{ csrf_token() }}';
                    form.appendChild(csrfToken);

                    // Tambahkan method DELETE
                    const methodField = document.createElement('input');
                    methodField.type = 'hidden';
                    methodField.name = '_method';
                    methodField.value = 'DELETE';
                    form.appendChild(methodField);

                    // Tambahkan form ke body dan submit
                    document.body.appendChild(form);
                    form.submit();
                } else {
                    swal("Dibatalkan", "Data sarana dan prasarana tidak dihapus", "error");
                }
            });
        }
    </script>
@endpush