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

@push('style')
    <!-- CSS Libraries -->
    <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>Data Penduduk</h4>
                        </div>
                        <div class="row ml-2">
                            <div class="col-6">
                                <a href="{{ route('penduduk.create') }}" class="btn btn-icon btn-primary icon-left mb-2"><i
                                        class="fa fa-plus"></i> Tambah</a>
                                |
                                <a href="{{ route('penduduk.export') }}" class="btn btn-icon btn-success icon-left mb-2"><i
                                        class="fa fa-download"></i> Download</a>
                                @if (Auth::user()->role == 1)
                                    |
                                    <button data-toggle="modal" data-target="#exampleModal"
                                        class="btn btn-icon btn-warning icon-left mb-2"><i class="fa fa-upload"></i>
                                        Upload</button>
                                    |
                                    <a id="destroy" class="btn btn-icon btn-danger icon-left mb-2"><i
                                            class="fa fa-trash destroy"></i> Delete All</a>
                                @endif
                            </div>
                        </div>
                        
                        @if (Auth::user()->role != 3)
                        <div class="col-12" style="display: flex; justify-content: flex-end;">
                            <div class="form-group">
                                <select id='kelurahan' class="form-control" style="width: 200px">
                                    <option value="" disabled selected>Pilih Desa</option>
                                    <option value="">SEMUA DESA</option>
                                    @foreach ($desa as $item)
                                    <option value="{{ $item->nama_desa }}">{{ $item->nama_desa }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>    
                        @endif

                        <div class="card-body">
                            <div class="table">
                                <table class="table-striped table yajra-datatable" id="table-1">
                                    <thead>
                                        <tr>
                                            <th align="center">No</th>
                                            <th>NIK</th>
                                            <th>Nama</th>
                                            <th>Desa</th>
                                            <th>Aksi</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
        </section>

        <div class="modal fade" tabindex="-1" role="dialog" id="exampleModal">
            <form action="{{ route('penduduk.import') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Upload Data Penduduk</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" id="customFile" name="file">
                                <label class="custom-file-label" for="customFile">Pilih File Excel</label>
                            </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">Upload</button>
                        </div>
                    </div>
                </div>
            </form>

        </div>


    </div>
@endsection

@push('scripts')
    <script>
        $(function() {
            var table = $('#table-1').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('penduduk.data') }}', // memanggil route yang menampilkan data json
                ajax: {
                    url: "{{ route('penduduk.data') }}",
                    data: function (d) {
                        d.kelurahan = $('#kelurahan').val(),
                        d.search = $('input[type="search"]').val()
                    }
                },
                columns: [                                
                    { data: 'DT_RowIndex',  orderable: false, searchable: false },
                    {
                        data: 'nik',
                        name: 'nik'
                    },
                    {
                        data: 'nama',
                        name: 'nama'
                    },
                    {
                        data: 'kelurahan',
                        name: 'kelurahan'
                    },
                    {
                        data: 'action',
                        name: 'action'
                    },
                ]
            });

            $('div.dataTables_filter input').focus()

            $('#kelurahan').change(function(){
                table.draw();
            });

            $('#table-1 tbody').on('click', 'button', table, function () {
                const data = table.row($(this).parents('tr')).data();
                var url = "{{ url('penduduk/delete') }}" + "/" + data.id;
                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 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 {

        //             }
        //         });
        // });

    </script>

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

    <script src="{{ asset('library/sweetalert/dist/sweetalert.min.js') }}"></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/jquery-ui-dist/jquery-ui.min.js') }}"></script>
    <script src="{{ asset('library/prismjs/prism.js') }}"></script>
    <!-- Page Specific JS File -->
    <script src="{{ asset('js/page/bootstrap-modal.js') }}"></script>
@endpush