@section('styles')
    <style>
        .filter-section {
            background-color: #f5f5f5;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        .browser-default {
            margin-top: 5px;
            margin-bottom: 15px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
        }
        .browser-default:focus {
            border-color: #26a69a;
            outline: none;
            box-shadow: 0 0 5px rgba(38, 166, 154, 0.3);
        }
        .filter-section label {
            font-size: 14px;
            color: #666;
            margin-bottom: 5px;
            display: block;
        }
        .custom-input {
            width: 100% !important;
            margin-top: 2px !important;
            margin-bottom: 15px !important;
            padding: 12px 0px 12px 10px !important;
            border: 1px solid #ccc !important;
            border-radius: 4px !important;
            font-size: 14px !important;
            background-color: white !important;
            transition: all 0.3s ease !important;
            box-shadow: none !important;
            height: auto !important;
            line-height: normal !important;
            color: #333 !important;
        }
        .custom-input:focus {
            border-color: #26a69a !important;
            outline: none !important;
            box-shadow: 0 0 5px rgba(38, 166, 154, 0.3) !important;
        }
    </style>
@endsection

<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 Data Drainase</span>
                    <a href="{{ route('drainase.create') }}" class="btn waves-effect waves-light indigo right">
                        <i class="mdi-content-add"></i> Tambah Data Drainase
                    </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

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

                <!-- Filter Section -->
                <div class="filter-section">
                    <div class="row">
                        <div class="col s4 m4">
                            <label for="search">Cari Data</label>
                            <input type="text" id="search" class="custom-input" wire:model.live="search" placeholder="Cari ....">
                        </div>
                        <div class="col s4 m4">
                            <label for="filter_kecamatan">Filter Kecamatan</label>
                            <select id="filter_kecamatan" class="browser-default" wire:model.live="selectedKecamatan">
                                <option value="">Semua Kecamatan</option>
                                @foreach($kecamatans as $kecamatan)
                                    <option value="{{ $kecamatan->id }}">{{ $kecamatan->nama_kecamatan }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col s4 m4">
                            <label for="filter_desa">Filter Desa</label>
                            <select id="filter_desa" class="browser-default" wire:model.live="selectedDesa" {{ !$selectedKecamatan ? 'disabled' : '' }}>
                                <option value="">Semua Desa</option>
                                @foreach($desas as $desa)
                                    <option value="{{ $desa->id }}">{{ $desa->nama_desa }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <table class="centered striped responsive-table">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Kecamatan</th>
                            <th>Desa</th>
                            <th>Tahun</th>
                            <th>Waktu Kejadian</th>
                            <th>Luas (m²)</th>
                            <th>Lama Genangan (menit)</th>
                            <th>Tinggi Genangan (cm)</th>
                            <th>Koordinat</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($drainases as $drainase)
                            <tr>
                                <td>{{ $loop->iteration + ($drainases->currentPage() - 1) * $drainases->perPage() }}</td>
                                <td>{{ $drainase->kecamatan->nama_kecamatan }}</td>
                                <td>{{ $drainase->desa->nama_desa }}</td>
                                <td>{{ $drainase->tahun }}</td>
                                <td>{{ $drainase->waktu_kejadian->format('d/m/Y H:i') }}</td>
                                <td>{{ number_format($drainase->luas, 2) }}</td>
                                <td>{{ $drainase->lama_genangan }}</td>
                                <td>{{ number_format($drainase->tinggi_genangan, 2) }}</td>
                                <td>
                                    @if($drainase->latitude && $drainase->longitude)
                                        {{ $drainase->latitude }}, {{ $drainase->longitude }}
                                    @else
                                        -
                                    @endif
                                </td>
                                <td>
                                    <a href="{{ route('drainase.edit', $drainase->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>
                                    <a href="{{ route('drainase.show', $drainase->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>
                                    <button onclick="confirmDelete({{ $drainase->id }})" class="btn-floating btn-flat waves-effect waves-light red accent-2 white-text tooltipped" data-position="top" data-delay="50" data-tooltip="Hapus"><i class="mdi-action-delete"></i></button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="10" class="center-align">Tidak ada data drainase</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>

                <div class="center-align mt-3">
                    {{ $drainases->links('custom-pagination') }}
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
    <script>
        function confirmDelete(id) {
            Swal.fire({
                title: "Apakah Anda yakin?",
                text: "Data drainase akan dihapus secara permanen!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Ya, hapus!",
                cancelButtonText: "Batal",
                showLoaderOnConfirm: true,
                preConfirm: () => {
                    return @this.delete(id);
                },
                allowOutsideClick: () => !Swal.isLoading()
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: "Terhapus!",
                        text: "Data drainase berhasil dihapus.",
                        icon: "success",
                        confirmButtonColor: "#26a69a"
                    });
                }
            });
        }

        // Auto hide alerts
        setTimeout(function() {
            $('#card-alert').fadeOut();
        }, 5000);
    </script>
@endpush