200 lines
8.3 KiB
PHP
200 lines
8.3 KiB
PHP
|
@extends('backend.layouts.app')
|
||
|
|
|
||
|
|
@section('title',__('label.create_vihar_page_title').' | '.env('APP_NAME'))
|
||
|
|
|
||
|
|
@push('after-styles')
|
||
|
|
@endpush
|
||
|
|
|
||
|
|
@section('breadcrumb')
|
||
|
|
<div class="subheader py-2 py-lg-4 subheader-solid" id="kt_subheader">
|
||
|
|
<div class="container-fluid d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
|
||
|
|
<!--begin::Info-->
|
||
|
|
<div class="d-flex align-items-center flex-wrap mr-1">
|
||
|
|
<!--begin::Page Heading-->
|
||
|
|
<div class="d-flex align-items-baseline mr-5">
|
||
|
|
<!--begin::Page Title-->
|
||
|
|
<!--end::Page Title-->
|
||
|
|
<!--begin::Breadcrumb-->
|
||
|
|
<ul class="breadcrumb breadcrumb-transparent breadcrumb-dot font-weight-bold p-0 my-2 font-size-sm">
|
||
|
|
<li class="breadcrumb-item active">
|
||
|
|
<a href="{{ route('admin.dashboard') }}" class="text-muted">{{ __('breadcrumb.dashboard') }}</a>
|
||
|
|
</li>
|
||
|
|
<li class="breadcrumb-item active">
|
||
|
|
<a href="{{ route('admin.sant.vihar.index', $sant->id) }}" class="text-muted">{{ __('breadcrumb.vihar') }}</a>
|
||
|
|
</li>
|
||
|
|
<li class="breadcrumb-item">
|
||
|
|
{{ __('breadcrumb.add_vihar') }}
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!--end::Breadcrumb-->
|
||
|
|
</div>
|
||
|
|
<!--end::Page Heading-->
|
||
|
|
</div>
|
||
|
|
<!--end::Info-->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
@endsection
|
||
|
|
|
||
|
|
@section('content')
|
||
|
|
<div class="container">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-12">
|
||
|
|
<div class="card card-custom">
|
||
|
|
<div class="card-header">
|
||
|
|
<h3 class="card-title">
|
||
|
|
{{ __('label.create_vihar_form_title') }}
|
||
|
|
</h3>
|
||
|
|
<div class="card-toolbar">
|
||
|
|
<div class="example-tools justify-content-center">
|
||
|
|
<span class="example-toggle" data-toggle="tooltip" title="View code"></span>
|
||
|
|
<span class="example-copy" data-toggle="tooltip" title="Copy code"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!--begin::Form-->
|
||
|
|
{{ Form::open(['route' => ['admin.sant.vihar.store', $sant->id], 'id' => 'createViharForm', 'files' => true]) }}
|
||
|
|
@include('backend.sant.sant-vihar.partials._form')
|
||
|
|
{{ Form::close() }}
|
||
|
|
|
||
|
|
<!--end::Form-->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
@endsection
|
||
|
|
|
||
|
|
@section('after-scripts')
|
||
|
|
@component('backend.layouts.components.validation')@endcomponent
|
||
|
|
<script>
|
||
|
|
function demo1() {
|
||
|
|
|
||
|
|
$('#start_time, #end_time').timepicker().on('changeTime.timepicker', function(e) {
|
||
|
|
let timePicked = $(this).val();
|
||
|
|
// only H:i
|
||
|
|
(timePicked.length < 5) ? $(this).val("0" + timePicked) : '';
|
||
|
|
});
|
||
|
|
|
||
|
|
$.validator.addMethod('validDate', function (value, element) {
|
||
|
|
return this.optional(element) || /^(0?[1-9]|1[012])[ /](0?[1-9]|[12][0-9]|3[01])[ /][0-9]{4}$/.test(value);
|
||
|
|
}, 'Please provide a date in the mm/dd/yyyy format');
|
||
|
|
|
||
|
|
$.validator.addMethod('dateBefore', function (value, element, params) {
|
||
|
|
// if end date is valid, validate it as well
|
||
|
|
var end = $(params);
|
||
|
|
if (!end.data('validation.running')) {
|
||
|
|
$(element).data('validation.running', true);
|
||
|
|
setTimeout($.proxy(
|
||
|
|
|
||
|
|
function () {
|
||
|
|
this.element(end);
|
||
|
|
}, this), 0);
|
||
|
|
// Ensure clearing the 'flag' happens after the validation of 'end' to prevent endless looping
|
||
|
|
setTimeout(function () {
|
||
|
|
$(element).data('validation.running', false);
|
||
|
|
}, 0);
|
||
|
|
}
|
||
|
|
return this.optional(element) || this.optional(end[0]) || new Date(value) < new Date(end.val());
|
||
|
|
|
||
|
|
}, 'Must be before corresponding end date');
|
||
|
|
|
||
|
|
$.validator.addMethod('dateAfter', function (value, element, params) {
|
||
|
|
// if start date is valid, validate it as well
|
||
|
|
var start = $(params);
|
||
|
|
if (!start.data('validation.running')) {
|
||
|
|
$(element).data('validation.running', true);
|
||
|
|
setTimeout($.proxy(
|
||
|
|
|
||
|
|
function () {
|
||
|
|
this.element(start);
|
||
|
|
}, this), 0);
|
||
|
|
setTimeout(function () {
|
||
|
|
$(element).data('validation.running', false);
|
||
|
|
}, 0);
|
||
|
|
}
|
||
|
|
return this.optional(element) || this.optional(start[0]) || new Date(value) > new Date($(params).val());
|
||
|
|
|
||
|
|
}, 'Must be after corresponding Start date');
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
$(document).ready(function () {
|
||
|
|
demo1();
|
||
|
|
$("#createViharForm").validate({
|
||
|
|
errorClass: 'is-invalid',
|
||
|
|
normalizer: function(value) {
|
||
|
|
return $.trim(value);
|
||
|
|
},
|
||
|
|
rules: {
|
||
|
|
from: {
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
to: {
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
start_date: {
|
||
|
|
dateBefore: '#end_date',
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
// end_date: {
|
||
|
|
// dateAfter: '#start_date',
|
||
|
|
// required: true
|
||
|
|
// },
|
||
|
|
start_time: {
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
// end_time: {
|
||
|
|
// required: true
|
||
|
|
// }
|
||
|
|
},
|
||
|
|
onfocusout: function(element) {
|
||
|
|
// "eager" validation
|
||
|
|
// this.element(element);
|
||
|
|
},
|
||
|
|
errorPlacement: function ( error, element ) {
|
||
|
|
if(element.parent().hasClass('input-group')){
|
||
|
|
error.insertAfter( element.parent() );
|
||
|
|
} else{
|
||
|
|
error.insertAfter( element );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
{{-- Google Map script --}}
|
||
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAoZv-67UKDVz5Rp3fa3e2xcHunahFGKOc&libraries=places&callback=dummy"></script>
|
||
|
|
<script>
|
||
|
|
google.maps.event.addDomListener(window, 'load', initialize);
|
||
|
|
function initialize() {
|
||
|
|
var from = document.getElementById('from');
|
||
|
|
var to = document.getElementById('to');
|
||
|
|
var fromautocomplete = new google.maps.places.Autocomplete(from);
|
||
|
|
var toautocomplete = new google.maps.places.Autocomplete(to);
|
||
|
|
|
||
|
|
fromautocomplete.addListener('place_changed', function () {
|
||
|
|
var fromplace = fromautocomplete.getPlace();
|
||
|
|
$('#from_latitude_show').val(fromplace.geometry['location'].lat());
|
||
|
|
$('#from_longitude_show').val(fromplace.geometry['location'].lng());
|
||
|
|
|
||
|
|
$('#from_latitude').val(fromplace.geometry['location'].lat());
|
||
|
|
$('#from_longitude').val(fromplace.geometry['location'].lng());
|
||
|
|
|
||
|
|
$("#fromLatitudeArea").removeAttr('hidden');
|
||
|
|
$("#fromLongtitudeArea").removeAttr('hidden');
|
||
|
|
});
|
||
|
|
|
||
|
|
toautocomplete.addListener('place_changed', function () {
|
||
|
|
var toplace = toautocomplete.getPlace();
|
||
|
|
$('#to_latitude_show').val(toplace.geometry['location'].lat());
|
||
|
|
$('#to_longitude_show').val(toplace.geometry['location'].lng());
|
||
|
|
|
||
|
|
$('#to_latitude').val(toplace.geometry['location'].lat());
|
||
|
|
$('#to_longitude').val(toplace.geometry['location'].lng());
|
||
|
|
|
||
|
|
$("#toLatitudeArea").removeAttr('hidden');
|
||
|
|
$("#toLongtitudeArea").removeAttr('hidden');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
@endsection
|