@extends('layouts.administrator.master')

@section('title')
    Verifikasi Perseorangan
@endsection

@section('content')
    <div class="nk-content-body">
        <div class="nk-block-head nk-block-head-sm">
            <div class="nk-block-between">
                <div class="nk-block-head-content">
                    <h3 class="nk-block-title page-title">{{ __('Verifikasi Keanggotaan Perseorangan Pertapindo') }}</h3>
                    <p>{{ __('Kelola data keanggotaan perseorangan') }}</p>
                </div>
                <div class="nk-block-head-content">
                    <a href="{{ route('registration.verification') }}" class="btn btn-primary btn-sm"><em
                            class="icon ni ni-arrow-left"></em>
                        Kembali</a>
                </div>
            </div>
        </div>
        <div class="nk-block">
            <div class="card card-preview">
                <div class="card-inner">
                    <div class="filter-container"
                            style="width: 210px;
                                   position: relative;
                                   top:36px;
                                   left:220px;
                            ">
                        <select id="filterColumn" class="form-control">
                            <option value="">-Semua Data-</option>
                            @foreach (Helper::noRegStat('-') as $key => $item)
                                <option value="{{$key}}">{{$item}}</option>
                            @endforeach
                        </select>
                    </div>
                    <table class="datatable nowrap table" data-export-title="Export">
                        <thead>
                            <tr>
                                <th class="nk-tb-col"><span class="sub-text">Gambar</span></th>
                                <th class="nk-tb-col"><span class="sub-text">No Register</span></th>
                                <th class="nk-tb-col"><span class="sub-text">Nama Lengkap</span></th>
                                <th class="nk-tb-col"><span class="sub-text">Email</span></th>
                                <th class="nk-tb-col"><span class="sub-text">Status</span></th>
                                <th>#</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>

                </div>
            </div>
        </div><!-- .nk-block -->

        {{-- Modal Import --}}
        <div class="modal fade" role="dialog" id="create-newsCategory">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                    <a href="#" class="close" data-bs-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                    <div class="modal-header">
                        <h5>Import Anggota</h5>
                    </div>
                    <div class="modal-body">

                        <form id="import-form" enctype="multipart/form-data">
                            @csrf
                            <div class="input-group mb-3">
                                <input type="file" class="form-control" id="excel_file" name="excel_file" required>
                            </div>
                            <button type="button" class="input-group-text btn btn-primary"
                                id="import-button">Import</button>
                        </form>

                    </div><!-- .modal-body -->
                </div><!-- .modal-content -->
            </div><!-- .modal-dialog -->
        </div>
        
        @push('script')
            <script>
                var token = "{{ csrf_token() }}";
                NioApp.DataTable('.datatable', {
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: '{{ route('registration.verification.personal.data') }}',
                        beforeSend: function () {
                            loadSpin(true, '.datatable');
                        },
                        complete: function () {
                            loadSpin(false, '.datatable');
                        },
                        type: 'POST',
                        data: function (d) {
                            d._token = token;
                            d.filterColumn = $('#filterColumn').val();
                        },
                    },
                    columns: [
                        { data: 'gambar' },
                        { data: 'no_reg' },
                        { data: 'full_name' },
                        { data: 'email' },
                        { data: 'status_registration' },
                        { data: 'action', className: 'text-center' },
                    ],
                    ordering: false,
                    responsive: { details: true },
                });

                $('#filterColumn').change(function () {
                    var filterValue = $(this).val();
                    $(".datatable").DataTable().ajax.reload();
                });

                $("#import-button").click(function() {
                    $('#create-newsCategory').modal('toggle');
                    var formData = new FormData($('#import-form')[0]);
                    $.ajax({
                        url: '{{ route('admin.pages.landingPage.membership.import') }}',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(r) {
                            NioApp.Toast(r.message, (r.success ? "success" : "error"), {
                                position: "top-right"
                            });
                            $(".datatable").DataTable().ajax.reload();
                        },
                        error: function(error) {
                            console.log(error);
                        }
                    });
                });
            </script>
        @endpush
    </div>
@endsection