@extends('layouts.new-app')
@section('content')
<div class="container-fluid">
    <div class="col-md-12 col-sm-12 col-lg-12">
        <div class="row">
            <div class="col-md-9 col-sm-9 col-lg-9 breadcrumbcustomize">
                <div class="row">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ url('/home') }}">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Prerequisite</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid">
    
    <div class="row m-0">
        <div class="col-lg-8">
            <div class="chapterscontainer">
                <div class="coursepaymentcontainer">
                    <h4>Prerequisite For Class C Operator</h4>
                    <p style="padding:10px 15px;">As per Ohio Bureau of underground storage tank regulations, to complete Class C operator training, one must be endorsed by either Class A or Class B operator.</p>
                </div>
                <div class="row">

                <div style="width: 100%;padding:0px 20px;">
                	<p class="text-mandatory"><span class="red">*</span> Mandatory to provide below details</p>
                	@if($item!='')
                	{{ Form::model($item, ['url'=>'user/pre-requisite', 'method'=>'POST', 'id'=>'validateForm']) }}
                	@else
                	{{ Form::open(['url'=>'user/pre-requisite', 'method'=>'POST', 'id'=>'validateForm']) }}
                	@endif
                	<div class="row m-0">
                    <div class="col-sm-12 col-md-12 col-lg-12 formlogin">
                        <div class="input-group radio-group" style="width: 100%">
                            <i class="material-icons">person</i>
                            <div class="form-group label-floating" style="width: 100%">
                                <label class="control-label">Full Name *</label>
                                <input name="name" type="text" class="form-control" required>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 col-lg-12 formlogin">
                        <div class="form-group label-floating">
                            <i class="material-icons">location_on</i>
                            <select class="form-control" name="operator" required>
                                <option value="" selected>Select Operator *</option>
                            	<option value="1">Class A</option>
                            	<option value="2">Class B</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-12 col-lg-12 formlogin">
                        <div class="input-group radio-group" style="width: 100%">
                            <i class="material-icons">email</i>
                            <div class="form-group label-floating" style="width: 100%">
                                <label class="control-label">Email *</label>
                                <input name="email" type="email" class="form-control" required>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-12 col-lg-12 formlogin">
                        <div class="input-group radio-group" style="width: 100%">
                            <i class="material-icons">call</i>
                            <div class="form-group label-floating" style="width: 100%">
                                <label class="control-label">Phone *</label>
                                <input name="phone" type="text" class="form-control" required minlength="10" maxlength="12">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12" style="width: 100%;margin-top:20px;margin-bottom: 10px;">
	                    <div class="row">
		                    <div class="col-md-6 col-sm-6 col-lg-6">
		                        <a href="{{ url('/home') }}" class="btn btn-outline-success">CANCEL</a>
		                    </div>
		                    <div class="col-md-6 col-sm-6 col-lg-6 rightbuttons">
		                        <button type="submit" class="btn buttonorange">SUBMIT</button>
		                    </div>
	                    </div>
                    </div>
                    </div>
                    {{ Form::close() }}
                </div>
            </div>
                
            </div>
        </div>
        <div class="col-lg-4">
            <div class="chapterscontainer">
                    <div class="coursepaymentcontainer">
                        <h4>Endorsed By</h4>
                        <div class="row m-0 p-8">
                            <div class="col-md-4 col-sm-12">Full Name</div>
                            <div class="col-md-8 col-sm-12">:@if($item!='') {{ $item->name }} @endif</div>
                            <div class="col-md-4 col-sm-12">Class Operator</div>
                            <div class="col-md-8 col-sm-12">:@if($item!='')  @if($item->operator == 1) Class A @endif  @if($item->operator == 2) Class B @endif @endif</div>
                            <div class="col-md-4 col-sm-12">Email</div>
                            <div class="col-md-8 col-sm-12">:@if($item!='') {{ $item->email }} @endif</div>
                            <div class="col-md-4 col-sm-12">Phone No</div>
                            <div class="col-md-8 col-sm-12">:@if($item!='') {{ $item->phone }} @endif</div>
                        </div>
                    </div>
            </div>
        </div>
    </div>
  
</div>

<script>
$(function () {
    $('#validateForm').validate({
            rules: {
                'name': {
                    required: true
                },
                'email': {
                    required: true,
                    email: true
                },
                'phone': {
                    required: true,
                    number: true,
                },
                select: {
                    required: true,
                }
            },
            messages: {
                name: "Please enter your full name",
                email: "Please enter valid email",
                phone: "Please provide valide number",
                select: "Please select operator class"
            },
            highlight: function (input) {
                $(input).parents('.form-line').addClass('error');
            },
            unhighlight: function (input) {
                $(input).parents('.form-line').removeClass('error');
            },
            errorPlacement: function (error, element) {
                $(element).parents('.formlogin').append(error);
            }
        });
});

$('#validateForm').submit(function() {
    if($('#validateForm').valid()) {
        $('#validateForm').submit();
    } else {
        return false;
    }
})
</script>
@endsection