| Path : /var/www/html/solarwindia/resources/views/plants/ |
| Current File : /var/www/html/solarwindia/resources/views/plants/create.blade.php |
@extends('layouts.main')
@section('title', 'Plants')
@section('content')
<div class="m-content">
<div class="row">
<div class="m-portlet m-portlet--mobile filter_row">
<!--begin: Portlet Head-->
<div class="m-portlet__head">
<div class="m-portlet__head-caption">
<div class="m-portlet__head-title">
<h3 class="m-portlet__head-text">
Add Plant
</h3>
</div>
</div>
<div class="m-portlet__head-tools">
<a href="{{ route('plant.index') }}" class="btn btn-sm btn-accent m-btn m-btn--custom m-btn--icon m-btn--air">
<span>
<i class="la la-arrow-left"></i>
<span>
Back
</span>
</span>
</a>
</div>
</div>
<!--end: Portlet Head-->
<!--begin: Form Wizard-->
<div class="m-wizard m-wizard--1 m-wizard--success" id="m_wizard">
<!--begin: Message container -->
<div class="m-portlet__padding-x">
<!-- Here you can put a message or alert -->
</div>
<!--end: Message container -->
<!--begin: Form Wizard Head -->
<div class="m-wizard__head m-portlet__padding-x">
<!--begin: Form Wizard Progress -->
<div class="m-wizard__progress">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</div>
<!--end: Form Wizard Progress -->
<!--begin: Form Wizard Nav -->
<div class="m-wizard__nav">
<div class="m-wizard__steps">
<div class="m-wizard__step m-wizard__step--current" m-wizard-target="m_wizard_form_step_1">
<div class="m-wizard__step-info">
<a href="#" class="m-wizard__step-number">
<span>
<span>
1
</span>
</span>
</a>
<div class="m-wizard__step-line">
<span></span>
</div>
<div class="m-wizard__step-label">
Plant Information
</div>
</div>
</div>
<div class="m-wizard__step" m-wizard-target="m_wizard_form_step_2">
<div class="m-wizard__step-info">
<a href="#" class="m-wizard__step-number">
<span>
<span>
2
</span>
</span>
</a>
<div class="m-wizard__step-line">
<span></span>
</div>
<div class="m-wizard__step-label">
Plant User
</div>
</div>
</div>
</div>
</div>
<!--end: Form Wizard Nav -->
</div>
<!--end: Form Wizard Head -->
<!--begin: Form Wizard Form-->
<div class="m-wizard__form">
<!--
1) Use m-form--label-align-left class to alight the form input lables to the right
2) Use m-form--state class to highlight input control borders on form validation
-->
<form class="m-form m-form--label-align-left- m-form--state-" id="m_form" autocomplete="off"
action="{{ route('plant.store') }}" method="POST" role="form" data-parsley-validate="parsley">
{{ csrf_field() }}
<!--begin: Form Body -->
<div class="m-portlet__body">
<!--begin: Form Wizard Step 1-->
<div class="m-wizard__form-step m-wizard__form-step--current" id="m_wizard_form_step_1">
<div class="m-form__heading">
<h3 class="m-form__heading-title">
Plant Details
</h3>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group m-form__group">
<label for="exampleInputEmail1">
Plant Name
</label>
<input type="text" class="form-control m-input" name="plant_name" value="{{ old('plant_name') }}"
placeholder="Plant Name" data-parsley-required='required'
data-parsley-required-message='Plant name is required'
data-parsley-trigger='change focusout'
data-parsley-minlength='3'
data-parsley-maxlength='32'
data-parsley-minlength-message='You need to enter at least a 3 characters'
data-parsley-maxlength-message='You need to enter maximum 32 characters'
data-parsley-pattern-message='Enter valid plant name'
data-parsley-group='m_step_1'>
<span class="m-form__help"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-form__group">
<label class="">
Company Name <span class="text-danger">*</span>
</label>
<select class="form-control" id = 'company'name="company_id"
data-parsley-required="true"
data-parsley-required-message='Please select the company'
data-parsley-trigger='change focusout'
data-parsley-group='m_step_1'>
<option value="">Select Company</option>
@foreach($companies as $company)
<option value="{{ $company->id }}"
@if ( old('company_id') == $company->id)
selected='selected'
@endif>{{ $company->company_name }}</option>
@endforeach
</select>
<span class="m-form__help"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group m-form__group">
<label for="exampleInputEmail1">
Capacity<span class="text-danger">*</span>
</label>
<input type="text" class="form-control m-input" name="capacity"
placeholder="Capacity" data-parsley-required='required' value="{{ old('capacity') }}"
data-parsley-required-message='Capacity is required'
data-parsley-trigger='change focusout'
data-parsley-minlength='2'
data-parsley-maxlength='32'
data-parsley-type="digits"
data-parsley-type-message="Capacity should be a number "
data-parsley-group='m_step_1'>
<span class="m-form__help"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-form__group">
<label class="">
Data Logger detail <span class="text-danger">*</span>
</label>
<input type="text" class="form-control m-input" name="data_logger" value="{{ old('data_logger') }}"
placeholder="Data Logger"
data-parsley-required='required'
data-parsley-required-message='Data logger detail is required'
data-parsley-trigger='change focusout'
data-parsley-minlength='2'
data-parsley-maxlength='32' data-parsley-group='m_step_1'>
<span class="m-form__help"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group m-form__group">
<label for="exampleInputEmail1">
Inverter Details<span class="text-danger">*</span>
</label>
<input type="text" class="form-control m-input" name="inverter"
placeholder="Inverter" value="{{ old('inverter') }}"
data-parsley-required='required'
data-parsley-required-message='Inverter details is required'
data-parsley-trigger='change focusout'
data-parsley-minlength='2'
data-parsley-maxlength='32'
data-parsley-group='m_step_1'>
<span class="m-form__help"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-form__group">
<label class="">
Country <span class="text-danger">*</span>
</label>
<select class="form-control m-select2" id="m_select2_5" name="country_id" data-parsley-required="true"
data-parsley-required-message='Please select the Country'
data-parsley-trigger='change focusout'
data-parsley-group='m_step_1'
>
<option value="">Select Country</option>
@foreach($countries as $country)
<option value="{{ $country->id }}"
@if( old('country_id') == $country->id)
selected='selected'
@endif>{{ $country->name }}</option>
@endforeach
</select>
<span class="m-form__help"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group m-form__group">
<label for="exampleInputEmail1">
State<span class="text-danger">*</span>
</label>
<select class="form-control" name="state" id="m_select2_7"
data-parsley-required="required"
data-parsley-required-message='Country is required'
data-parsley-errors-container="#checkbox_status_errors">
<option value="">Select State</option>
</select>
<div id="checkbox_status_errors"></div>
<span class="m-form__help"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-form__group">
<label class="">
City <span class="text-danger">*</span>
</label>
<input type="text" class="form-control m-input" name="city" placeholder="City"
value="{{ old('city') }}" data-parsley-required='required'
data-parsley-required-message='City is required'
data-parsley-trigger='change focusout'
data-parsley-minlength='2'
data-parsley-maxlength='32'
data-parsley-group='m_step_1'>
<span class="m-form__help"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group m-form__group">
<label class="">
Longitude <span class="text-danger">*</span>
</label>
<input type="text" class="form-control m-input" name="longitude"
placeholder="Logitude" value="{{ old('longitude') }}"
data-parsley-required='required'
data-parsley-required-message='Longitude is required'
data-parsley-trigger='change focusout'
data-parsley-minlength='2'
data-parsley-maxlength='32'
data-parsley-pattern='/^(\+|-)?(?:180(?:(?:\.0{1,6})?)|(?:[0-9]|[1-9][0-9]|1[0-7][0-9])(?:(?:\.[0-9]{1,6})?))$/'
data-parsley-pattern-message="Enter valid longitude "
data-parsley-group='m_step_1'>
<span class="m-form__help"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-form__group">
<label class="">
Latitude <span class="text-danger">*</span>
</label>
<input type="text" class="form-control m-input" name="latitude"
placeholder="Latitude" value="{{ old('latitude') }}"
data-parsley-required='required'
data-parsley-required-message='Latitude is required'
data-parsley-trigger='change focusout'
data-parsley-minlength='2'
data-parsley-maxlength='32'
data-parsley-pattern='/^(\+|-)?(?:90(?:(?:\.0{1,6})?)|(?:[0-9]|[1-8][0-9])(?:(?:\.[0-9]{1,6})?))$/'
data-parsley-pattern-message="Enter valid latitude "
data-parsley-group='m_step_1'>
<span class="m-form__help"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group m-form__group">
<label for="exampleInputEmail1">
Address<span class="text-danger">*</span>
</label>
<textarea type="text" class="form-control m-input" name="address"
placeholder="Address"
data-parsley-required='required'
data-parsley-required-message='Address is required'
data-parsley-trigger='change focusout'
data-parsley-minlength='20'
data-parsley-maxlength='200'
data-parsley-minlength-message='You need to enter at least a 20 characters'
data-parsley-maxlength-message='You need to enter maximum 200 characters'
data-parsley-group='m_step_1'>{{ old('address')}}</textarea>
<span class="m-form__help"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-form__group">
<label for="exampleInputEmail1">
Status
</label>
<select class="form-control" name="status">
<option value="">Select Status</option>
<option value="1" selected="" >Active</option>
<option value="0">InActive</option>
</select>
<span class="m-form__help"></span>
</div>
</div>
</div>
</div>
<!--end: Form Wizard Step 1-->
<!--begin: Form Wizard Step 2-->
<div class="m-wizard__form-step" id="m_wizard_form_step_2">
<div class="m-form__heading">
<h3 class="m-form__heading-title">
Plant User
</h3>
</div>
<div class="row">
<div class="col-md-6">
<div class="m-form__group form-group">
<div class="m-radio-inline">
<label class="m-radio">
<input type="radio" name='plant_user' value='1' data-id="new_user"
class="user_type" checked="checked" />
New User
<span></span>
</label>
<label class="m-radio">
<input type="radio" name='plant_user' value='0' data-id="old_user"
class="user_type" />
Existing User
<span></span>
</label>
</div>
<span class="m-form__help"></span>
</div>
</div>
<div class="col-md-6"></div>
</div>
<div id="new_user">
<div class="row">
<div class="col-md-6">
<div class="form-group m-form__group">
<label>
First Name <span class="text-danger">*</span>
</label>
<input type="text" class="form-control m-input" name="first_name"
value="{{ old('first_name') }}"
placeholder="First name"
data-parsley-required="required"
data-parsley-required-message='First name is required'
data-parsley-trigger='change focusout'
data-parsley-minlength='3'
data-parsley-maxlength='32'
data-parsley-pattern='/^[a-zA-Z_ ]*$/'
data-parsley-pattern-message='Enter valid name'
data-parsley-group='m_step_2'
autocomplete="false">
<span class="m-form__help"></span>
@if ($errors->has('first_name'))
<span class="invalid-feedback">
<strong>{{ $errors->first('first_name') }}</strong>
</span>
@endif
</div>
</div>
<div class="col-md-6">
<div class="form-group m-form__group">
<label>
Last Name <span class="text-danger">*</span>
</label>
<input type="text" class="form-control m-input" name="last_name"
value="{{ old('last_name') }}"
placeholder="Last name"
data-parsley-required="required"
data-parsley-required-message='Last last name is required'
data-parsley-trigger='change focusout'
data-parsley-minlength='3'
data-parsley-maxlength='32'
data-parsley-pattern='/^[a-zA-Z_ ]*$/'
data-parsley-pattern-message='Enter valid name'
data-parsley-group='m_step_2'
autocomplete="false">
<span class="m-form__help"></span>
@if ($errors->has('last_name'))
<span class="invalid-feedback">
<strong>{{ $errors->first('last_name') }}</strong>
</span>
@endif
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group m-form__group">
<label>
Email address <span class="text-danger">*</span>
</label>
<input type="email" class="form-control m-input" name="email"
value="{{ old('email') }}"
placeholder="[email protected]"
data-parsley-checkemail=""
data-parsley-required="required"
data-parsley-required-message='Email address is required'
data-parsley-trigger='change focusout'
data-parsley-type="email"
data-parsley-type-message="Enter valid email address"
data-parsley-group='m_step_2'
autocomplete="false">
<span class="m-form__help"></span>
@if ($errors->has('email'))
<span class="invalid-feedback">
<strong>{{ $errors->first('email') }}</strong>
</span>
@endif
</div>
</div>
<div class="col-md-6">
<div class="form-group m-form__group">
<label>
Contact Number <span class="text-danger">*</span>
</label>
<input type="text" class="form-control m-input" name="mobile"
value="{{ old('mobile') }}"
placeholder="xxxxxxxx"
data-parsley-required="required"
data-parsley-required-message='Contact number is required'
data-parsley-trigger='change focusout'
data-parsley-minlength='10'
data-parsley-maxlength='10'
data-parsley-checknumber =""
data-parsley-minlength-message='Contact number should be 10 digits number.'
data-parsley-maxlength-message='Contact number should be 10 digits number.'
data-parsley-trigger='change focusout'
data-parsley-pattern = '^[789]\d{9}$'
data-parsley-pattern-message = 'please enter valid number'
data-parsley-group='m_step_2'
autocomplete="false">
<span class="m-form__help"></span>
@if ($errors->has('last_name'))
<span class="invalid-feedback">
<strong>{{ $errors->first('last_name') }}</strong>
</span>
@endif
</div>
</div>
</div>
</div>
<div id="old_user" class="none">
<div class="row">
<div class="col-md-6">
<div class="form-group m-form__group">
<label class="">
Select Plant User
</label><br>
<select class="form-control" id="m_select2_1" name="plant_users[]"
data-parsley-required="required"
data-parsley-required-message='Please select plant user' multiple="multiple">
<option value="">Select Plant User</option>
</select>
<span class="m-form__help"></span>
</div>
</div>
<div class="col-md-6"></div>
</div>
</div>
</div>
<!--end: Form Wizard Step 2-->
</div>
<!--end: Form Body -->
<!--begin: Form Actions -->
<div class="m-portlet__foot m-portlet__foot--fit m--margin-top-40">
<div class="m-form__actions m-form__actions">
<div class="row">
<div class="col-lg-6 m--align-right">
<button class="btn btn-secondary m-btn m-btn--custom m-btn--icon"
data-wizard-action="prev">
<span>
<i class="la la-arrow-left"></i>
<span>
Back
</span>
</span>
</button>
</div>
<div class="col-lg-6">
<button class="btn btn-primary m-btn m-btn--custom m-btn--icon m--align-left"
data-wizard-action="submit">
<span>
<i class="la la-check"></i>
<span>
Submit
</span>
</span>
</button>
<div class="m--align-right">
<button type="button" class="btn btn-warning m-btn m-btn--custom m-btn--icon nextMove"
data-wizard-action="next" style="float:right">
<span>
<span>
Continue
</span>
<i class="la la-arrow-right"></i>
</span>
</button>
</div>
</div>
<div class="col-lg-2"></div>
</div>
</div>
</div>
<!--end: Form Actions -->
</form>
</div>
<!--end: Form Wizard Form-->
</div>
<!--end: Form Wizard-->
</div>
</div>
</div>
@endsection
@section('script')
<script>
$(document).ready(function () {
// WizardDemo.init();
$('#m_form').parsley();
wizard = new mWizard('m_wizard', {
startStep: 1
}).on("beforeNext", function () {
$('#m_form').parsley().validate({
group: 'm_step_' + wizard.currentStep,
force: true
});
if ($('#m_form').parsley().isValid({
group: 'm_step_' + wizard.currentStep,
force: true
}) != true) {
this.stop();
}
}).on("change", function (e) {
mUtil.scrollTop();
})
$("#m_form").find('[data-wizard-action="submit"]').on("click", function () {
$(this).submit();
});
$(".user_type").trigger("change");
$('#m_form').parsley().destroy();
$('#new_user').find(':input').each(function () {
$('#m_form').parsley();
$(this).attr('data-parsley-required', 'required');
$(this).attr('data-parsley-group', 'm_step_2');
});
$('#old_user').find('select').each(function () {
$('#m_form').parsley();
$(this).removeAttr('data-parsley-required');
$(this).removeAttr('data-parsley-group');
});
$('#new_user').show();
$('#old_user').hide();
$(document).on("change", ".user_type", function () {
var value = $(this).val();
if (value == 0) {
$('#m_form').parsley().destroy();
$('#new_user').find(':input').each(function () {
$('#m_form').parsley();
$(this).removeAttr('data-parsley-required');
$(this).removeAttr('data-parsley-group');
});
$('#old_user').find('select').each(function () {
$('#m_form').parsley();
$(this).attr('data-parsley-required', 'required');
$(this).attr('data-parsley-group', 'm_step_2');
});
$('#new_user').hide();
$('#old_user').show();
}
if (value == 1) {
$('#m_form').parsley().destroy();
$('#old_user').find('select').each(function () {
$('#m_form').parsley();
$(this).removeAttr('data-parsley-required');
$(this).removeAttr('data-parsley-group');
});
$('#new_user').find(':input').each(function () {
$('#m_form').parsley()
$(this).attr('data-parsley-required', 'required');
$(this).attr('data-parsley-group', 'm_step_2');
});
$('#old_user').hide();
$('#new_user').show();
}
});
window.Parsley.addValidator('checkemail', {
validateString: function(value) {
var email = value;
var token = '{{ csrf_token() }}'
var url = '{{ route("checkEmail") }}';
var response = checkEmail(email,token,url);
return response;
},
messages: {
en: 'Email address has already been taken'
}
});
window.Parsley.addValidator('checknumber', {
validateString: function(value) {
var number = value;
var token = '{{ csrf_token() }}'
var url = '{{ route("checkNumber") }}';
var response = checkNumber(number,token,url);
return response;
},
messages: {
en: 'Mobile number is already registered'
}
});
$('#company').on('change',function() {
var company_id = this.value;
$.ajax({
data: {'company_id': company_id,"_token": "{{ csrf_token() }}"},
type: 'POST',
url: "{{route('getUsers')}}",
success: function (response) {
console.log(response);
$('#m_select2_1').empty();
$('#m_select2_1').append('<option value="">Please choose one</option>');
$.each(response, function (index, user) {
$('#m_select2_1').append('<option value="' + user.id + '">' + user.first_name +' '+user.last_name +'('+user.email +')'+ '</option>');
});
}
});
});
$('#m_select2_5').change(function () {
var country = this.value;
$.ajax({
data: {'country': country,"_token": "{{ csrf_token() }}"},
type: 'POST',
url: "{{route('getStates')}}",
success: function (response) {
$('#m_select2_7').empty();
$('#m_select2_7').append('<option value="">Please select state</option>');
$.each(response, function (index, state) {
$('#m_select2_7').append('<option value="' + state.id + '">' + state.name + '</option>');
});
$('#m_select2_7').val(22).trigger('change');
}
});
});
$("#m_select2_5").val(101).trigger('change');
});
</script>
@endsection