@extends('layouts.administrator.master')

@section('title')
    Pengguna
@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">Import Data</h3>
                </div>
                <div class="nk-block-head-content">
                    <a href="{{ route('admin.anggota.index') }}" class="btn btn-primary btn-sm">
                        <em class="icon ni ni-arrow-left"></em>
                        Back
                    </a>
                </div>
            </div>
        </div>

        <div class="nk-block">
            <div class="card card-preview">
                <div class="card-inner">

                    <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>
                            <input type="hidden" name="created_by" value="{{ Auth::user()->id }}">
                        </div>
                        <button type="button" class="input-group-text btn btn-primary" id="import-button">Import</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>

        $("#import-button").click(function () {
            var formData = new FormData($('#import-form')[0]);
            $.ajax({
                url: '{{ route('api.admin.data.anggota.import') }}',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                beforeSend:function() {
                    $.LoadingOverlay("show", {
                        background: "rgba(255, 255, 255, 0.8)",
                        image: "",
                        fontawesome: "fas fa-circle-notch fa-spin"
                    });
                },
                complete:function() {
                    $.LoadingOverlay("hide", {
                        background: "rgba(255, 255, 255, 0.8)",
                        image: "",
                        fontawesome: "fas fa-circle-notch fa-spin"
                    });
                },
                success: function (response) {
                    window.location.href = "{{ route('admin.anggota.index') }}";
                },
                error: function (error) {
                    console.log(error);
                }
            });
        });
    </script>
@endpush