@extends('layouts.master')

@section('title', 'Import - Member')

@section("content")
    <div class="row mr-auto">
        <div class="col-md-4 col-sm-12 mx-auto">
            <div class="card">
                <div class="card-body p-2 text-center">
                    <a class="text-primary text-center w-100" href="{{ url('samleFlie/member-sample.csv') }}">Download Sample File</a>
                    <form action="{{ url('/admin/pay-run/import/member/store') }}" method="post" class="m-2" id="form" enctype="multipart/form-data" onsubmit="return false;">
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <input type="file" class="form-control rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11" name="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
                                </div>
                            </div>
                            <div class="col-12 text-center">
                                <button class="btn btn-primary" id="submitBtn">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
<script>
    $(document).on('submit', '#form', function (e) {
        e.preventDefault();
        let url = $(this).attr('action');
        let formData = new FormData($('#form')[0]);
        let submitBtn = $("#form #submitBtn");
        let submitBtnText = $("#form #submitBtn").html();
        $.ajax({
            url: url,
            type: 'POST',
            data: formData,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            contentType: false,
            processData: false,
            beforeSend: function () {
                submitBtn.prop('disabled', true);
                submitBtn.text('Loading...');
            },
            success: function (response) {
                submitBtn.prop('disabled', false);
                submitBtn.text(submitBtnText);
                if(response.success){
                    $("#form")[0].reset();
                }
                swalMsg(response.msg,'success');
            },
            error: function (jqXHR) {
                submitBtn.prop('disabled', false);
                submitBtn.text('Update');
                if (globalErrorHandler(jqXHR.responseJSON))
                    return false
                if (jqXHR.responseJSON && jqXHR.responseJSON.errors) {
                    $.each(jqXHR.responseJSON.errors, function (index, errorMessage) {
                        $("input[name='" + index + "']").parent().next('span').remove();
                        $("select[name='" + index + "']").parent().next('span').remove();
                        let spanEl = document.createElement('span')
                        $(spanEl).addClass('text-danger').text(errorMessage).insertAfter($("input[name='" + index + "']").parent())
                        $(spanEl).addClass('text-danger').text(errorMessage).insertAfter($("select[name='" + index + "']").parent())
                    });
                }
            }
        });
    })
</script>
@endpush