@extends('layouts.app')
@include('vendor.lara-izitoast.toast')
@section('title', 'Perangkat Desa')

@push('style')
    <!-- CSS Libraries -->
    <link rel="stylesheet"
    href="{{ asset('library/select2/dist/css/select2.min.css') }}">
    <link rel="stylesheet"
    href="{{ asset('library/datatables/media/css/jquery.dataTables.min.css') }}">
    <link rel="stylesheet"
    href="{{ asset('library/prismjs/themes/prism.min.css') }}">

@endpush

@section('main')
<div class="main-content">
    <section class="section">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4>Perangkat Desa</h4>
                    </div>
                    <div class="row ml-2">
                        <div class="col-6">
                            <button data-toggle="modal" data-target="#createModal" class="btn btn-icon btn-primary icon-left mb-2"><i
                                    class="fa fa-plus"></i> Tambah</button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table">
                            <table class="table-striped table yajra-datatable" id="doms">
                                <thead>
                                    <tr>
                                        <th align="center">No</th>
                                        <th>NIK</th>
                                        <th>Nama</th>
                                        <th>Desa</th>
                                        <th>jabatan</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
<div class="modal fade"
    role="dialog"
    id="createModal">
    <div class="modal-dialog"
        role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Tambah Perangkat Desa</h5>
                <button type="button"
                    class="close"
                    data-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{ route('settings.perangkatStore') }}" method="post" class="custom-validation" enctype="multipart/form-data">
                @csrf
                @method('POST')
            <div class="modal-body">
                <div class="form-group">
                    <label style="font-weight: bold; color: black">NIK</label>
                    <select id="mySelect2" name="pendudukId" class="form-control select2" required>
                        <option value="" disabled selected>--- Pilih ---</option>
                        @foreach ($data as $item )
                        <option value="{{ $item['id'] }}" >{{ $item['nik'] }} - {{ $item['nama'] }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="modal-footer bg-whitesmoke br">
                <button type="button"
                    class="btn btn-danger"
                    data-dismiss="modal">Batal</button>
                <button type="submit"
                    class="btn btn-primary">Simpan</button>
            </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
    <script>
        $(function () {
            $('#doms').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('settings.perangkatData') }}', // memanggil route yang menampilkan data json
                columns:
                [
                    { data: 'DT_RowIndex',  orderable: false, searchable: false },
                    { data: 'nik', name: 'nik', orderable: true, searchable: true },
                    { data: 'nama', name: 'nama' },
                    { data: 'kelurahan', name: 'kelurahan' },
                    { data: 'jabatan', name: 'jabatan' },
                    { data: 'action', name: 'action' },
                ]
            });
        });

        $("a.delete").click(function() {
            var dataId = $(this).data("id")
            var url = "{{ url('penduduk/delete') }}" + "/" + dataId ;
            swal({
                title: 'Anda Yakin?',
                text: 'Jika ya, maka data ini akan dihapus',
                icon: 'warning',
                buttons: true,
                dangerMode: true,
                })
                .then((willDelete) => {
                if (willDelete) {
                    window.location.href = url;
                swal('Data berhasil dihapus! :)', {
                    icon: 'success',
                });
                } else {

                }
            });
        });

        $("#destroy").click(function() {
            var url = "{{ route('penduduk.destroy') }}" ;
            swal({
                title: 'Anda Yakin?',
                text: 'Jika ya, maka semua data akan dihapus',
                icon: 'warning',
                buttons: true,
                dangerMode: true,
                })
                .then((willDelete) => {
                if (willDelete) {
                    window.location.href = url;
                swal('Data berhasil dihapus! :)', {
                    icon: 'success',
                });
                } else {

                }
            });
        });
    </script>

@if (session('success'))
<script>
    $(document).ready(function(){
        iziToast.success({
        title: 'Success!',
        message: '{{ session('success') }}',
        position: 'topRight'
    });
    });
</script>
@endif
<script>
    $('#mySelect2').select2({
        dropdownParent: $('#createModal')
    });
</script>

<script src="{{ asset('library/datatables/media/js/jquery.dataTables.min.js') }}"></script>
{{-- <script src="https://code.jquery.com/jquery.js"></script> --}}
{{-- <script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script> --}}
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<script src="{{ asset('library/select2/dist/js/select2.full.min.js') }}"></script>

<script src="{{ asset('library/jquery-ui-dist/jquery-ui.min.js') }}"></script>
<script src="{{ asset('library/prismjs/prism.js') }}"></script>
<!-- Page Specific JS File -->


@endpush