@extends('layouts.app')

@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 Daerah Irigasi</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 s8">
                        <form action="{{ route('irigasi.index') }}" method="GET" class="search-form">
                            <div class="col s6">
                                <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 s2">
                                <button type="submit" class="btn waves-effect waves-light indigo right">
                                    <i class="mdi-action-search"></i> Cari
                                </button>
                            </div>
                            <div class="col s4">
                                <select name="kecamatan_id" id="kecamatan_filter" class="browser-default">
                                    <option value="all" {{ !request('kecamatan_id') || request('kecamatan_id') == 'all' ? 'selected' : '' }}>Semua Kecamatan</option>
                                    @if($kecamatans && $kecamatans->count() > 0)
                                        @foreach($kecamatans as $kecamatan)
                                            <option value="{{ $kecamatan->id }}" {{ request('kecamatan_id') == $kecamatan->id ? 'selected' : '' }}>
                                                {{ $kecamatan->nama_kecamatan }}
                                            </option>
                                        @endforeach
                                    @else
                                        <option value="" disabled>Tidak ada data kecamatan</option>
                                    @endif
                                </select>
                            </div>
                        </form>
                    </div>
                    <div class="col s4">
                        <div class="right-align">
                            @if(request('search') || (request('kecamatan_id') && request('kecamatan_id') !== 'all'))
                                <a href="{{ route('irigasi.index') }}" class="btn waves-effect waves-light grey lighten-1">
                                    <i class="mdi-navigation-refresh left"></i> Reset
                                </a>
                            @endif
                            @can('create')
                            <a href="{{ route('irigasi.create') }}" class="btn waves-effect waves-light indigo">
                                <i class="mdi-content-add"></i> Tambah Irigasi
                            </a>
                            @endcan
                        </div>
                    </div>
                </div>

                @if(request('search') || (request('kecamatan_id') && request('kecamatan_id') !== 'all'))
                    <div class="row">
                        <div class="col s12">
                            <div class="card-panel teal lighten-4 teal-text text-darken-2">
                                <i class="mdi-action-info left"></i>
                                Menampilkan {{ $irigasis->total() }} data irigasi
                                @if(request('kecamatan_id') && request('kecamatan_id') !== 'all')
                                    @php
                                        $selectedKecamatan = $kecamatans->where('id', request('kecamatan_id'))->first();
                                    @endphp
                                    @if($selectedKecamatan)
                                        di Kecamatan {{ $selectedKecamatan->nama_kecamatan }}
                                    @endif
                                @endif
                            </div>
                        </div>
                    </div>
                @endif

                <div class="row">
                    <table class="bordered striped responsive-table">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Nama Irigasi</th>
                                <th>Kecamatan</th>
                                <th>Luas (Ha)</th>
                                <th class="center-align">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($irigasis as $index => $irigasi)
                            <tr>
                                <td>{{ ($irigasis->currentPage() - 1) * $irigasis->perPage() + $loop->iteration }}</td>
                                <td class="left-text">{{ $irigasi->nama_irigasi }}</td>
                                <td>{{ $irigasi->kecamatan->nama_kecamatan }}</td>
                                <td>{{ $irigasi->luas }}</td>
                                <td class="center-align">
                                    <a href="{{ route('irigasi.show', $irigasi->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('irigasi.edit', $irigasi->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('irigasi.destroy', $irigasi->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="6" class="center-align">Tidak ada data irigasi</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

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

@push('scripts')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<style>
    /* Perbesar tinggi select dropdown */
    .select2-container--default .select2-selection--single {
        height: 45px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 43px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 43px !important;
    }

    /* Pastikan semua opsi tampil */
    .select2-results__option {
        display: block !important;
    }

    /* Styling untuk opsi "Semua Kecamatan" */
    .select2-results__option:first-child {
        font-weight: bold;
        color: #666;
        background-color: #f5f5f5;
    }

    /* Pastikan dropdown menampilkan semua opsi */
    .select2-dropdown {
        max-height: 300px;
        overflow-y: auto;
    }

    /* Pastikan opsi dengan value "all" tampil */
    .select2-results__option[data-select2-id*="all"] {
        display: block !important;
    }

    /* Styling khusus untuk opsi "Semua Kecamatan" */
    .select2-results__option[data-select2-id*="all"]:first-child {
        font-weight: bold !important;
        color: #666 !important;
        background-color: #f5f5f5 !important;
    }

    /* Pastikan Select2 tidak menyembunyikan opsi dengan value "all" */
    .select2-results__option[data-select2-id*="all"] {
        display: block !important;
        visibility: visible !important;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        $('#kecamatan_filter').select2({
            placeholder: "Pilih Kecamatan",
            width: '100%',
            allowClear: false,
            minimumResultsForSearch: 0,
            language: {
                noResults: function() {
                    return "Tidak ada hasil yang ditemukan";
                }
            },
            templateResult: function(data) {
                if (data.id === 'all') {
                    return $('<span style="font-weight: bold; color: #666;">' + data.text + '</span>');
                }
                return data.text;
            },
            templateSelection: function(data) {
                if (data.id === 'all') {
                    return $('<span style="font-weight: bold; color: #666;">' + data.text + '</span>');
                }
                return data.text;
            }
        });

        $('#kecamatan_filter').on('change', function() {
            $(this).closest('form').submit();
        });

        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 irigasi 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 irigasi tidak dihapus", "error");
                    }
                });
            });
        });

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