@extends('seller.seller_app')

@section('content')
<div class="content-wrapper">
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row">
            <div class="col-md-12">
                <div class="card mb-4">
                    <h5 class="card-header">Invite User </h5>
                    <div class="card-body">
                        <div id="user_invite_success">
                            @if(session()->has('success'))
                            <div class="alert alert-success" role="alert">
                                {{ session()->get('success') }}
                            </div>
                            @endif
                        </div>
                        <div id="user_invite_errors">
                            @if(session()->has('error'))
                            <div class="alert alert-danger" role="alert">
                                {{ session()->get('error') }}
                            </div>
                            @endif
                        </div>
                        <form action="{{ route('seller.users.user_invite_post') }}" autocomplete="off" id="formAccount" method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('POST')
                            <div class="row">
                                <div class="mb-3 col-md-6">
                                    <label for="email" class="form-label">E-mail</label>
                                    <input class="form-control" type="text" id="email" name="email" value="" />
                                </div>
                                <div class="mt-2">
                                    <button type="submit" name="submit" class="btn btn-primary me-2">Invite</button>
                                    <a href="{{route('seller.users.index')}}" class="btn btn-danger btn-outline-secondary">Cancel</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    var currentRequest = null;
    $("#formAccount").validate({
        rules:{
            email :{
                required: true,
                email : true
            }
        },
        messages:{
            email:{
                required: 'Please enter an email address',
                email : 'Please enter valid email address'
            }
        },
        submitHandler:function(form){
            $('#loading').show();
            var formData = new FormData(form);
            currentRequest = jQuery.ajax({
                type : 'POST',
                data : formData,
                url : '{{ route("seller.users.user_invite_post") }}',
                dataType : 'JSON',
                contentType : false,
                processData : false,
                beforeSend : function(){
                    if(currentRequest != null){
                        currentRequest.abort();
                    }
                },
                success:function(data){
                    $("#user_invite_success").html('');
                    $("#user_invite_errors").html('');
                    if(data.errors) {
                        var errors = data.errors;
                        $.each(errors, function(i, val) {
                            $('#user_invite_errors').append('<div class="alert alert-danger" role="alert">'+val+'</div>');
                        })
                    }
                    else if(data.status == '1'){
                        $('#user_invite_success').html('<div class="alert alert-success" role="alert">'+data.message+'</div>');
                        $('#email').val('')
                        // location.reload();
                    }
                    else{
                      $('#user_invite_errors').html('<div class="alert alert-danger" role="alert">'+data.message+'</div>');
                    //   location.reload();
                    }
                    $('#loading').hide();
                    $('html, body').animate({
                        scrollTop: 0
                    }, 1000);
                    setTimeout(() => {
                        $('#user_invite_errors').html('');
                        $('#user_invite_success').html('');
                    }, 3000);
                },
                error: function(e) {
                    // Error
                    $('#loading').show();
                    return false;
                }
            });
            return false;
        }
    });
</script>
@endsection