{% extends 'base.html' %}

{% block body %}

<div id="wrapper">
	{% include 'navbar.html' %}

	<div id="page-wrapper" class="gray-bg">
		{% include 'header.html' %}
		<div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-10">
                <h2>Vendor Registration</h2>
            </div>
            <div class="col-lg-2">

            </div>
        </div>
		<!-- test -->
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox">
                        <div class="ibox-content">
                            <form class="form-horizontal" action="/demo/hr-department/vendor-registration" method="post" enctype="multipart/form-data">
                                {% csrf_token %}
                                <div class="row">
                                    
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Name *</label>
                                            <input oninput="this.value = this.value.toUpperCase()" type="text" name="name" placeholder="" id="exampleInputEmail2" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Email ID *</label>
                                            <input type="email" name="email" placeholder="" id="exampleInputEmail2" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Mobile No. *</label>
                                            <input type="mobile" name="mobile" placeholder="" id="exampleInputEmail2" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>PAN No.*</label>
                                            <input type="text" name="pan_no" placeholder="" id="exampleInputEmail2" class="form-control" required>
                                        </div>
                                    </div>

                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>PAN Card</label>
                                            <input type="file" name="pan_card" placeholder="" id="exampleInputEmail2" class="form-control">
                                        </div>
                                    </div>
                                    
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label>Address *</label>
                                            <textarea class="form-control" name="address" required></textarea>
                                        </div>
                                    </div>

                                    <div class="col-6">
                                        <div class="form-group">
                                            <label>Message (optional)</label>
                                            <textarea class="form-control" name="message"></textarea>
                                        </div>
                                    </div>
                                </div>

                                <div class="text-center">
                                    <button type="submit" class="btn btn-w-s btn-primary"> Submit </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
	</div>
</div>

<script>

</script>


{% for message in messages %}
	<script>
		showNotification('{{message}}', '{{message.tags}}')
	</script>
{% endfor %}
{% endblock %}