@extends('layouts.app')
@section('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">Daftar Sungai</span>
                </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">
                    <div class="col s12 mt-3">
                        <div class="row">
                            <div class="col s6">
                                <form action="{{ route('sungais.index') }}" method="GET" class="search-form">
                                    <div class="row">
                                        <div class="col s8">
                                            <div class="input-field" style="margin-top: -10px;">
                                                <i class="mdi-action-search prefix"></i>
                                                <input type="text" placeholder="Cari Nama Irigasi" name="search" id="search" value="{{ request('search') }}">
                                            </div>
                                        </div>
                                        <div class="col">
                                            <button type="submit" class="btn waves-effect waves-light indigo right">
                                                <i class="mdi-action-search"></i> Cari
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="col s2">
                                <ul id="dropdown1" class="dropdown-content">
                                    <li class="{{ request()->get('jenis') == 'Sungai' ? 'active' : '' }}">
                                        <a href="{{ route('sungais.index', ['jenis' => 'Sungai']) }}" class="teal-text">Sungai</a>
                                    </li>
                                    <li class="{{ request()->get('jenis') == 'Anak Sungai' ? 'active' : '' }}">
                                        <a href="{{ route('sungais.index', ['jenis' => 'Anak Sungai']) }}" class="teal-text">Anak Sungai</a>
                                    </li>
                                </ul>
                                <button class="btn dropdown-button waves-effect waves-light teal" data-activates="dropdown1">Jenis<i class="mdi-navigation-arrow-drop-down right"></i></button>
                            </div>
                            <div class="col s4">
                                @can('create')
                                <a href="{{ route('sungais.create') }}" class="btn waves-effect waves-light indigo right">
                                    <i class="mdi-content-add"></i> Tambah Sungai
                                </a>
                                @endcan
                            </div>
                        </div>

                        <div class="row">
                            <table class="bordered striped responsive-table">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Nama Sungai</th>
                                        <th class="hide-on-med-and-down">Lokasi</th>
                                        <th>Kecamatan</th>
                                        <th>Desa</th>
                                        <th>Dimensi (P x L x D)</th>
                                        <th>Jenis</th>
                                        <th class="center-align">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($sungais as $sungai)
                                        <tr>
                                            <td>{{ ($sungais->currentPage() - 1) * $sungais->perPage() + $loop->iteration }}</td>
                                            <td class="left-text">{{ $sungai->nama_sungai }}</td>
                                            <td class="hide-on-med-and-down">{{ $sungai->alamat_lokasi }}</td>
                                            <td>{{ $sungai->kecamatan->nama_kecamatan }}</td>
                                            <td>{{ $sungai->desa->nama_desa }}</td>
                                            <td>{{ $sungai->panjang }} x {{ $sungai->lebar }} x {{ $sungai->kedalaman }}</td>
                                            <td>{{ $sungai->jenis }}</td>
                                            <td class="center-align">
                                                <a href="{{ route('sungais.show', $sungai->id) }}" class="btn-floating btn-flat waves-effect waves-light blue accent-2 white-text tooltipped" data-position="top" data-delay="50" data-tooltip="Detail"><i class="mdi-action-visibility"></i></a>
                                                @can('update')
                                                <a href="{{ route('sungais.edit', $sungai->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"><i class="mdi-editor-mode-edit"></i></a>
                                                @endcan
                                                @can('delete')
                                                <a href="{{ route('sungais.destroy', $sungai->id) }}" 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"><i class="mdi-action-delete"></i></a>
                                                @endcan
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="8" class="center-align">Tidak ada data sungai</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

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

@push('scripts')
<script>
    $(document).ready(function() {
        const deleteButtons = document.querySelectorAll('.delete-btn');

        deleteButtons.forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                const href = this.getAttribute('href');

                swal({
                    title: "Apakah Anda yakin?",
                    text: "Data sungai akan dihapus secara permanen!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Ya, hapus!",
                    cancelButtonText: "Batal",
                    closeOnConfirm: false,
                    closeOnCancel: false
                }, function(isConfirm) {
                    if (isConfirm) {
                        const form = document.createElement('form');
                        form.method = 'POST';
                        form.action = href;

                        const csrfToken = document.createElement('input');
                        csrfToken.type = 'hidden';
                        csrfToken.name = '_token';
                        csrfToken.value = '{{ csrf_token() }}';

                        const methodField = document.createElement('input');
                        methodField.type = 'hidden';
                        methodField.name = '_method';
                        methodField.value = 'DELETE';

                        form.appendChild(csrfToken);
                        form.appendChild(methodField);
                        document.body.appendChild(form);
                        form.submit();
                    } else {
                        swal("Dibatalkan", "Data sungai tidak dihapus", "error");
                    }
                });
            });
        });

        // Auto close alert after 3 seconds
        setTimeout(function() {
            const alertCloseButton = document.querySelector('.card-alert .close');
            if (alertCloseButton) {
                alertCloseButton.click();
            }
        }, 3000);
    });
</script>
@endpush