@extends('admin.admin_app')

@section('content')
<div class="content-wrapper">

    <div class="container-xxl flex-grow-1 container-p-y">

        <div class="col-md-12">
            <div class="card mb-4">
            <h5 class="card-header">Add New Seller</h5>
                <div class="card-body">
                    <div id="login_success">
                        @if(session()->has('success'))
                        <div class="alert alert-success" role="alert">
                            {{ session()->get('success') }}
                        </div>
                        @endif
                    </div>
                    <div class="seller_success"></div>
                    <div class="seller_errors"></div>
                    <form action="{{ route('sellers.store') }}" id="sellerForm" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('POST')
                        <div class="mb-3">
                            <label for="first_name" class="form-label">First Name <abbr class="required" title="required">*</abbr></label>
                            <input type="text" class="form-control" id="first_name" name="first_name"/>
                        </div>
                        <div class="mb-3">
                            <label for="last_name" class="form-label">Last Name <abbr class="required" title="required">*</abbr></label>
                            <input type="text" class="form-control" id="last_name" name="last_name"/>
                        </div>
                        <div class="mb-3">
                            <label for="organization_name" class="form-label">Organization Name <abbr class="required" title="required">*</abbr></label>
                            <input type="text" class="form-control" id="organization_name" name="organization_name"/>
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label">Email <abbr class="required" title="required">*</abbr></label>
                            <input type="email" class="form-control" id="email" name="email"/>
                        </div>
                        <div class="mb-3">
                            <label for="mobile_no" class="form-label">Mobile No.</label>
                            <input type="text" class="form-control" id="mobile_no" name="mobile_no"/>
                        </div>
                        <div class="mb-3">
                            <label for="attribute_name" class="form-label">Profile Image</label>
                            <input type="file" class="form-control" id="profile_image" name="profile_image" accept="image/*" />
                            <p id="error1" style="display:none; color:#FF0000;">
                                Invalid Image Format! Image Format Must Be JPG, JPEG, PNG or GIF.
                            </p>
                        </div>
                        {{-- <div class="mb-3">
                            <label for="status" class="form-label">Status <abbr class="required" title="required">*</abbr></label>
                            <select class="form-select" id="status" name="status" aria-label="Default select example" required>
                                <option value="" disabled> --- Select Status --- </option>
                                <option value="Active" selected>Active</option>
                                <option value="Inactive">Inactive</option>
                            </select>
                        </div> --}}
                        <button type="submit" name="submit" id="sellerSubmit" class="btn btn-primary">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    var currentRequest = null;
    $("#sellerForm").validate({
        rules: {
            first_name : {
                required : true,
            },
            last_name : {
                required : true,
            },
            organization_name : {
                required : true,
            },
            email : {
                required : true,
                email : true,
            },
            profile_image:{
                extension: "jpg|jpeg|png|gif",
                filesize : 3
            }
        },
        messages: {
            first_name :{
                required: "Please enter first name"
            },
            last_name :{
                required: "Please enter first name"
            },
            profile_image : {
                extension: "Please select only jpg, jpeg, png or gif file"
            },
        },
        submitHandler: function(form) {
            $('#loading').show();
            $('.seller_errors').html('');
            var formData = new FormData(form);
            currentRequest = jQuery.ajax({
                type: 'POST',
                data: formData,
                url: "{{ route('sellers.store') }}",
                dataType: 'JSON',
                processData: false,
                contentType: false,
                beforeSend : function()    {
                    if(currentRequest != null) {
                        currentRequest.abort();
                    }
                },
                success: function(data) {
                    $('.subtotal-promocode-wrap').html('');
                    if(data.errors) {
                        var errors = data.errors;
                        $.each(errors, function(i, val) {
                            $('.seller_errors').append('<div class="alert alert-danger alert-dismissible fade show text-left" role="alert">'+val[0]+'</div>');
                        })
                    }
                    else if (data.status == 0) {
                        $('.seller_errors').html(
                            '<div class="alert alert-danger alert-dismissible fade show text-left" role="alert">' +
                            data.message +
                            '</div>'
                            );
                    }
                    else {
                        $('.seller_success').html('<div class="alert alert-success" role="alert">' + data.message + '</div>');
                        $("#sellerForm")[0].reset();
                        $('#loading').hide();
                        $('html, body').animate({
                            scrollTop: 0
                        }, 1000);
                        setTimeout(function(){
                            window.location.href = '{{route("sellers.index")}}';
                        }, 3000);
                    }
                    $('#loading').hide();
                    setTimeout(() => {
                        $('.seller_errors').html('');
                    }, 3000);
                },
                error:function(e){
                // Error
                    $('#loading').hide();
                    return false;
                }
            });
            return false;
        }
    });
</script>
@endsection