@extends('admin.layouts.index')
@section('title', 'Halaman Admin POSDIRA')
@section('judul', 'Posyandu')
@section('subjudul', 'Halaman Posyandu')
@section('konten')
       <div class="row">
   
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-title">
                        Data Posyandu
                        <ul class="panel-tools">
                            <li><a href="{{ route('admin.posyandu.create') }}" class="btn btn-primary btn-sm text-white"><i class="fa fa-plus"></i> Tambah data</a></li>
                        </ul>
                    </div>
                    
                    <div class="panel-body table-responsive">
                        @if((Auth::user()->Group->nama) == 'Administrator' || (Auth::user()->Group->nama) == 'Admin Posyandu')
                        {!! Form::open(['route' => 'admin.posyandu.index','class' => 'form-inline mb-2','method' => 'GET']) !!}
                            
                            <div class="form-row">
                                <div class="col-xs-2">
                                    <select name="id_kecamatan" id="id_kecamatan" class="form-control select2" required>
                                        <option value="">Pilih Kecamatan</option>
                                        @foreach ($kecamatans as $kecamatan)
                                        <option value={{ $kecamatan->id }} @if($kecamatan->id == request()->id_kecamatan ) selected @endif >{{ $kecamatan->nama_vertikal }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-xs-2">
                                    <select name="id_kelurahan" id="id_kelurahan" class="form-control select2">
                                        <option value="">Pilih Kelurahan</option>
                                    </select>
                                </div>

                                <div class="col-xs-2">
                                    {!! Form::submit('Cari', ['class' => 'btn btn-success mr-1']) !!}
                                </div>
                            </div>
                        {!! Form::close() !!}
                        @endif
                        
                        {{$dataTable->table()}}
                    </div>
                </div>
            </div>
        </div>

@endsection

@push('scripts')
    {{$dataTable->scripts()}}
<script>
    $(document).ready(function() {
        function runAjax()
        {
            const val = $('#id_kecamatan').val();
            $.ajax({
                type: "get",
                url: "{{ url('api/v1/cari-kelurahan') }}" + "/" + val,
                success: function (res) {
                    if(res.status == 'success'){
                        $('#id_kelurahan').empty();
                        $('#id_kelurahan').append('<option value="">Pilih Kelurahan</option>');
                        $.each(res.data, function(key, value) {
                            let id_kelurahan = "{{ request()->id_kelurahan }}";
                            let bool = (value.kelurahan_id == id_kelurahan) ? 'selected' : '';
                            $('#id_kelurahan').append('<option value="' + value.kelurahan_id + '" '+bool+' >' + value.keterangan_kelurahan + '</option>');
                        });
                    }
                }
            });
        }

        runAjax();

        $('#id_kecamatan').change(function(){
            runAjax();
        });

    });
</script>
@endpush