@extends('layouts.master')
@section('title','Create Representative')
@section('css')
@endsection
@section('content')
<!-- BEGIN: Content-->
<div class="app-content content ">
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-9 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <h2 class="content-header-title float-left mb-0">Create Representative</h2>
                        <div class="breadcrumb-wrapper">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('representatives.index') }}">Representatives</a>
                                </li>
                                <li class="breadcrumb-item active">Create Representative
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-body">
            <!-- users edit start -->
            <section class="app-user-edit">
                @include('errormessage')
                <div class="card">
                    <div class="card-body">
                        <div class="tab-content">
                            <!-- Account Tab starts -->
                            <div class="tab-pane active" id="account" aria-labelledby="account-tab" role="tabpanel">
                                <!-- users edit account form start -->
                                {!! Form::open(['route' => 'representatives.store','name'=>'createform', 'id'=>"createform",'enctype'=>'multipart/form-data']) !!} 
                                @include('admin.representatives.common')
                                {!! Form::close() !!}
                                <!-- users edit account form ends -->
                            </div>
                            <!-- Account Tab ends -->
                        </div>
                    </div>
                </div>
            </section>
            <!-- users edit ends -->
        </div>
    </div>
</div>
<!-- END: Content-->
@endsection
@section('script')
<script type="text/javascript">
    $(document).ready(function () {

        /* Initialize Select2 */
        $("#status").select2({
            placeholder: "Select Status",
            allowClear: true
        });

        /* Password Validation */
        $.validator.addMethod("password", function (value, element) {
            let password = value;
            if (!(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[#?!@$%^&*-])/.test(password))) {
                return false;
            }
            return true;
        }, function (value, element) {
            let password = $(element).val();
            if (!(/^(?=.*[A-Z])/.test(password))) {
                return "@lang('admin.uppercasePassword')";
            } else if (!(/^(?=.*[a-z])/.test(password))) {
                return "@lang('admin.lowercasePassword')";
            } else if (!(/^(?=.*[0-9])/.test(password))) {
                return "@lang('admin.digitPassword')";
            } else if (!(/^(?=.*[#?!@$%^&*-])/.test(password))) {
                return "@lang('admin.specialcharacterPassword')";
            }
            return false;
        });

        /* Phone Number Vaildation */
        $.validator.addMethod("phonenumber", function(value, element) {
            return this.optional(element) || /\(?([0-9]{3})\)?([ .-]?)([0-9]{3})\2([0-9]{4})/.test(value);
        }, "