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

@push('style')
    <!-- CSS Libraries -->
    <link rel="stylesheet" href="{{ asset('library/bootstrap-daterangepicker/daterangepicker.css') }}">
    <link rel="stylesheet" href="{{ asset('library/datatables/media/css/jquery.dataTables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    {{-- <link rel="stylesheet" href="{{ asset('library/prismjs/themes/prism.min.css') }}"> --}}
    <link rel="stylesheet"
    href="{{ asset('library/bootstrap-timepicker/css/bootstrap-timepicker.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>Arsip Surat Desa</h4>
                        </div>
                        
                        @if (Auth::user()->role != 3)
                        <div class="form-row">
                            <div>
                                &nbsp; &nbsp; &nbsp; 
                            </div>
                            <div class="col-3">
                                <div class="form-group">
                                    <select id='kelurahan' class="form-control" style="display: flex; justify-content: flex-end">
                                        <option value="" disabled selected>Pilih Surat</option>
                                        <option value="">Semua Surat</option>
                                        @foreach ($surat as $item)
                                        <option value="{{ $item->id }}">{{ $item->jenis_surat }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text">
                                                <i class="fas fa-calendar"></i>
                                            </div>
                                        </div>
                                        <input type="text"
                                            class="form-control daterange-cus" name="daterange" id="tanggal">
                                    </div>
                                </div>
                            </div>
                            <button id="clear" class="btn btn-icon btn-danger icon-left mb-4">Clear</button>
                        </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>Jenis Surat</th>
                                            <th>NIK</th>
                                            <th>Nama</th>
                                            <th>Tanggal</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() {
        $('input[name="daterange"]').daterangepicker({
            // autoApply: true,
            // autoUpdateInput: FALSE,
            opens: 'left',
            locale: {
            format: 'YYYY-MM-DD'
            }
        });
    });
    </script>
    <script>
        $( document ).ready(function() {
            var table = $('#table-1').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('surat.arsipData', $desa_id) }}', // memanggil route yang menampilkan data json
                ajax: {
                    url: "{{ route('surat.arsipData', $desa_id) }}",
                    data: function (d) {
                        d.jenis = $('#kelurahan').val(),
                        d.tanggal = $('input[name="daterange"]').val(),
                        d.search = $('input[type="search"]').val()
                    }
                },
                columns: [
                    { data: 'DT_RowIndex',  orderable: false, searchable: false, defaultContent: ""},
                    {
                        data: 'jenis_surat_id',
                        name: 'jenis_surat_id'
                    },
                    {
                        data: 'nik',
                        name: 'nik'
                    },
                    {
                        data: 'nama',
                        name: 'nama'
                    },
                    {
                        data: 'tanggal',
                        name: 'tanggal'
                    },
                    {
                        data: 'action',
                        name: 'action'
                    },
                ]
            });

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

        $('#clear').click(function(){
            var today = new Date();
            var dd = String(today.getDate()).padStart(2, '0');
            var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
            var yyyy = today.getFullYear();

            today = yyyy + '-' + mm  + '-' + dd + ' - ' + yyyy + '-' + mm + '-' + dd;
            $('#kelurahan').val('');
            $('#tanggal').val(today);
            $('#table-1').DataTable().ajax.reload();
        });
    </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 type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <!-- Page Specific JS File -->
    {{-- <script src="{{ asset('js/page/forms-advanced-forms.js') }}"></script> --}}
@endpush