@extends('layouts.app')

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

.dokumen-preview a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.dokumen-preview a:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: scale(1.1);
}

.dokumen-preview i {
    transition: all 0.3s ease;
}

.dokumen-preview a:hover i {
    transform: scale(1.1);
}

/* Action buttons styling */
.action-buttons {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
}

.action-buttons .btn {
    margin: 0;
    min-width: 36px;
    height: 36px;
    line-height: 36px;
    padding: 0;
}

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

@section('content')
<div class="row">
    <div class="col s12">
        <div class="card">
            <div class="card-content">
                <h4 class="header card-title">Detail Sarana dan Prasarana Rawa</h4>
                <div class="row">
                    <div class="col s4">
                        <div class="card">
                            <div class="card-content">
                                <img src="{{ asset('storage/sarpras_foto/' . $sarpras->foto_sarpras) }}" 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">{{ $sarpras->nama_sarpras }}</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">{{ $sarpras->jnsSarpras->jenis_sarpras }}</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">{{ $sarpras->latitude }}, {{ $sarpras->longitude }}</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">{{ $sarpras->ket_foto }}</div>
                                </div>
                            </li>
                            @if(in_array($sarpras->jns_sarpras_id, [5,6,7,8]))
                            <li class="collection-item">
                                <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">{{ $sarpras->panjang }}</div>
                                </div>
                            </li>
                            <li class="collection-item">
                                <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">{{ $sarpras->lebar }}</div>
                                </div>
                            </li>
                            @endif
                        </ul>
                    </div>
                </div>
                <div class="card-action">
                    <a href="{{ url('rawa/' . $sarpras->rawa_id) }}" class="btn waves-effect waves-light grey">Kembali</a>
                    <a href="{{ route('sarpras-rawa.edit', $sarpras->id) }}" class="btn waves-effect waves-light indigo">Edit</a>
                </div>
            </div>
        </div>
    </div>

    <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">Kondisi Sarana dan Prasarana</span>
                    @can('create')
                    <a href="{{ route('kondisi-sarpras-rawa.create', ['rawa_id' => $sarpras->rawa_id, 'sarpras_id' => $sarpras->id]) }}" class="btn waves-effect waves-light indigo right">
                        <i class="mdi-content-add"></i> Tambah Kondisi
                    </a>
                    @endcan
                </div>
                <div class="row">
                    <table class="centered striped responsive-table">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Tahun</th>
                                <th>Kondisi</th>
                                <th>Keterangan</th>
                                <th>Dokumen</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                        @forelse($kondisiSarpras as $item)
                            <tr>
                                <td>{{ ($kondisiSarpras->currentPage() - 1) * $kondisiSarpras->perPage() + $loop->iteration }}</td>
                                <td>{{ $item->tahun }}</td>
                                <td>{{ $item->kondisi->kondisi ?? '-' }}</td>
                                <td>{{ $item->keterangan }}</td>
                                <td>
                                    <div class="dokumen-preview">
                                        @if($item->dokumen->count() > 0)
                                            <a href="{{ route('sarpras-rawa.galeri', ['sarpras' => $sarpras->id, 'kondisi_id' => $item->id]) }}" class="btn waves-effect waves-light green tooltipped" data-position="top" data-delay="50" data-tooltip="Lihat Galeri">
                                                <i class="mdi-image-photo-library"></i>
                                            </a>
                                        @else
                                            <span class="grey-text">Tidak ada dokumen</span>
                                        @endif
                                    </div>
                                </td>
                                <td>
                                    <div class="action-buttons">

                                        @can('update')
                                        <a href="{{ route('kondisi-sarpras-rawa.edit', $item->id) }}" class="btn waves-effect waves-light blue 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({{ $item->id }})">
                                            <i class="mdi-action-delete"></i>
                                        </button>
                                        @endcan
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7">Belum ada data kondisi</td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>

                    <div class="center-align mt-3">
                        {{ $kondisiSarpras->links() }}
                    </div>
                </div>
                <div class="card-action">
                    <a href="{{ url('rawa/' . $sarpras->rawa_id) }}" class="btn waves-effect waves-light grey">Kembali</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
    <script>
        function confirmDelete(id) {
            swal({
                title: "Apakah Anda yakin?",
                text: "Data kondisi 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("kondisi-sarpras-rawa") }}/' + 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 kondisi sarana dan prasarana tidak dihapus", "error");
                }
            });
        }
    </script>
@endpush