File: /home/imensosw/liftcincy.imenso.co/resources/views/frontend/setting.blade.php
@extends('frontend.layouts.layout_page')
@section("style")
@endsection
@section('pageTitle')
<title>{{ trans('panel.site_title') }} {{ trans('new.profile') }}</title>
@endsection
@section('content')
@include('frontend/include/notification')
@include('frontend/include/inner_nave_header')
<section style="padding:0px;">
@include('frontend/include/inner_nave')
<div class="profile_section burger strip_bg1">
<div class="ccontainer">
<div class="crow flex-justify-center ticket_area">
<div class="ccol ccol-xl-4 ccol-lg-4 ccol-md-5 ccol-sm-6">
<div class="profile_area">
<div class="profile_pic">
<a href="javascript:;" id="pop" img_url="{{$user_profile_img}}" class="show_image_popup_ modal_trigger" data-modal="#imagemodal_"> <img class="imageresource user_profile_img_file profile_img" src="{{$user_profile_img}}" alt="Image"/></a>
</div>
<a href="javascript:;" class="profile_update" onclick="$('#user_profile_img').click();"><img width="15" height="15" src="{{URL::asset('frontend/images/edit.png')}}" /></a>
</div>
<div class="col-xl-12">
<input class="form-control upload_profile_img d-none hide" type="file" id="user_profile_img" accept="image/*" value="Upload" />
<div class="progress-bar">
<div class="progress user_profile_img_bar" style="width:0%"></div>
</div>
</div>
<div class="text-center">
<h5 class="mb-0">{{$user->name}}</h5>
@foreach($user->roles as $key => $item)
<h6 class="text-muted mb-0">{{ $item->title }}</h6>
@endforeach
</div>
<div class="ccol ccol-xl-8 ccol-lg-8 ccol-md-8 ccol-sm-8 ticket_dtl text-left">
<form action="{{ route('dashboard.update_user_profile') }}" method="POST" enctype="multipart/form-data" autocomplete="off">
@csrf
<div class="crow">
<div class="ccol ccol-sm-4 pb-0">
<div class="form_fld">
<label>First Name</label>
<input type="text" name="first_name" class="fld-control {{ $errors->has('first_name') ? 'has-error' : '' }}" value="{{ old('first_name', isset($volunteer) ? $volunteer->first_name : '') }}">
@if($errors->has('first_name'))
<p class="text-danger small">
{{ $errors->first('first_name') }}
</p>
@endif
</div>
</div>
<div class="ccol ccol-sm-4 pb-0">
<div class="form_fld">
<label>Last Name</label>
<input type="text" name="last_name" class="fld-control {{ $errors->has('first_name') ? 'has-error' : '' }}" value="{{ old('last_name', isset($volunteer) ? $volunteer->last_name : '') }}">
@if($errors->has('last_name'))
<p class="text-danger small">
{{ $errors->first('last_name') }}
</p>
@endif
</div>
</div>
</div>
<div class="crow">
<div class="ccol ccol-8 pb-0">
<div class="form_fld">
<label>Email</label>
<input type="email" name="email" class="fld-control {{ $errors->has('first_name') ? 'has-error' : '' }}" value="{{ old('email', isset($volunteer) ? $volunteer->email : '') }}">
@if($errors->has('email'))
<p class="text-danger small">
{{ $errors->first('email') }}
</p>
@endif
</div>
</div>
</div>
<div class="crow" >
<div class="ccol ccol-sm-4 pb-0">
<div class="form_fld">
<label>Birthday</label>
<input type="date" max="2010-01-01" name="dob" class="fld-control {{ $errors->has('password_confirmation') ? 'has-error' : '' }}" value="{{ old('dob', isset($volunteer) ? $volunteer->dob : '') }}">
@if($errors->has('dob'))
<p class="text-danger small">
{{ $errors->first('dob') }}
</p>
@endif
</div>
</div>
<div class="ccol ccol-sm-4 pb-0">
<div class="form_fld">
<label>Phone Number</label>
<input type="tel" id="org_contact" name="org_contact" class="fld-control {{ $errors->has('org_contact') ? 'has-error' : '' }}" value="{{ old('org_contact', isset($volunteer) ? $volunteer->org_contact : '') }}">
@if($errors->has('org_contact'))
<p class="text-danger small">
{{ $errors->first('org_contact') }}
</p>
@endif
</div>
</div>
</div>
<div class="crow ">
<div class="ccol ccol-8 pb-0 mobilehide">
<div class="form_fld">
<label>Home Metro</label>
<select name="home_metro_id" class="fld-control home_metro {{ $errors->has('home_metro_id') ? 'has-error' : '' }}" value="{{ old('home_metro_id', isset($user) ? $user->home_metro_id : '') }}">
@if ($metros->count())
<option value="">Choose your Location</option>
@foreach ($metros as $key => $metro)
<option value="{{ $metro->id }}" @if(old('home_metro_id', isset($volunteer) ? $volunteer->home_metro_id : '') == $metro->id) selected @endif >
{{ $metro->metro_name }}
</option>
@endforeach
@endif
</select>
@if($errors->has('home_metro_id'))
<p class="text-danger small">
{{ $errors->first('home_metro_id') }}
{{-- The home metro field is required --}}
</p>
@endif
</div>
</div>
</div>
<div class="crow">
<div class="ccol ccol-8 pb-0 mobileshow">
<div class="form_fld">
<label>Home Metro</label>
<select name="home_metro_id" class="fld-control home_metro {{ $errors->has('home_metro_id') ? 'has-error' : '' }}" value="{{ old('home_metro_id', isset($user) ? $user->home_metro_id : '') }}">
@if ($metros->count())
<option value="">Choose your Location</option>
@foreach ($metros as $key => $metro)
<option value="{{ $metro->id }}" @if(old('home_metro_id', isset($volunteer) ? $volunteer->home_metro_id : '') == $metro->id) selected @endif>
Greater {{ $metro->metro_name }}
</option>
@endforeach
@endif
</select>
@if($errors->has('home_metro_id'))
<p class="text-danger small">
{{ $errors->first('home_metro_id') }}
{{-- The home metro field is required --}}
</p>
@endif
</div>
</div>
</div>
<div class="crow">
<div class="ccol ccol-8 pb-0">
<div class="form_fld">
<label>Mailing Address</label>
<input type="text" name="address_location" id="address_location" class="fld-control {{ $errors->has('address_location') ? 'has-error' : '' }}" value="{{ old('address_location', isset($volunteer) ? $volunteer->address_location : '') }}" autocomplete="off">
@if($errors->has('address_location'))
<p class="text-danger small">
{{ $errors->first('address_location') }}
</p>
@endif
</div>
<div class="form_fld">
<label>Apartment, Unit, Suite (Optional)</label>
<input type="text" name="address_line1" class="fld-control {{ $errors->has('address_line1') ? 'has-error' : '' }}" value="{{ old('address_line1', isset($volunteer) ? $volunteer->address_line1 : '') }}">
</div>
</div>
</div>
<div class="crow" >
<div class="ccol ccol-sm-4 pb-0">
<div class="form_fld">
<label>City</label>
<input type="text" name="address_city" id="locality" class="fld-control {{ $errors->has('address_city') ? 'has-error' : '' }}" value="{{ old('address_city', isset($volunteer) ? $volunteer->address_city : '') }}">
@if($errors->has('address_city'))
<p class="text-danger small">
{{ $errors->first('address_city') }}
</p>
@endif
</div>
</div>
<div class="ccol ccol-sm-4 pb-0">
<div class="form_fld">
<label>Zip Code</label>
<input type="text" name="address_postcode" id="address_postcode" class="fld-control {{ $errors->has('address_postcode') ? 'has-error' : '' }}" value="{{ old('address_postcode', isset($volunteer) ? $volunteer->address_postcode : '') }}">
@if($errors->has('address_postcode'))
<p class="text-danger small">
{{ $errors->first('address_postcode') }}
</p>
@endif
</div>
</div>
</div>
<div class="crow" >
<div class="ccol ccol-sm-4 pb-0">
<div class="form_fld">
<label>State</label>
<input type="text" name="address_state" id="administrative_area_level_1" class="fld-control {{ $errors->has('address_state') ? 'has-error' : '' }}" value="{{ old('address_state', isset($volunteer) ? $volunteer->address_state : '') }}">
@if($errors->has('address_state'))
<p class="text-danger small">
{{ $errors->first('address_state') }}
</p>
@endif
</div>
</div>
<div class="ccol ccol-sm-4 pb-0">
<div class="form_fld">
<label>Country</label>
<input type="hidden" id="country" name="country" class="form-control" value="" >
<input type="text" id="country_code" name="address_country" class="fld-control" value="{{ old('address_country', isset($volunteer) ? $volunteer->address_country : '') }}" >
@if($errors->has('address_country'))
<p class="text-danger small">
{{ $errors->first('address_country') }}
</p>
@endif
</div>
</div>
</div>
<div class="crow hide d-none" >
<div class="ccol ccol-sm-4 pb-0">
<div class="form_fld">
<label>Lat</label>
<input type="text" name="address_lat" id="lat" class="fld-control {{ $errors->has('address_lat') ? 'has-error' : '' }}" value="{{ old('address_lat', isset($volunteer) ? $volunteer->address_lat : '') }}">
@if($errors->has('address_lat'))
<p class="text-danger small">
{{ $errors->first('address_lat') }}
</p>
@endif
</div>
</div>
<div class="ccol ccol-sm-4 pb-0">
<div class="form_fld">
<label>Long</label>
<input type="text" id="lng" name="address_long" class="fld-control" value="{{ old('address_long', isset($volunteer) ? $volunteer->address_long : '') }}" >
@if($errors->has('address_long'))
<p class="text-danger small">
{{ $errors->first('address_long') }}
</p>
@endif
</div>
</div>
</div>
<div class="mt-3">
<button class="cbtn cbtn-primary" type="submit">Update profile </button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Modal -->
<!-- Creates the bootstrap modal where the image will appear -->
<div class=" fade modal upper_modal " id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Profile Image</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<div class="modal-body">
<img src="" id="imagepreview" style="width:100%;" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="$('#user_profile_img').click();" data-bs-dismiss="modal">Change</button>
<button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
@endsection
@section('scripts')
<script>
$('.home_metro').on('change',function(){
$('.home_metro').val($(this).val());
});
</script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyC_yU9pJxAP7_h1YlGOpMPBHgZrpPkoc9k"></script>
<script>
//new google.maps.places.Autocomplete(document.getElementById("address_location"));
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = '';
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
console.log(place.address_components[i]);
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
// for the country, get the country code (the "short name") also
if (addressType == "country") {
document.getElementById("country_code").value = place.address_components[i].short_name;
}
if (addressType == "postal_code") {
document.getElementById("address_postcode").value = place.address_components[i].short_name;
}
}
}
var placeSearch, autocomplete;
var componentForm = {
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
};
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(document.getElementById('address_location'));
// When the user selects an address from the dropdown, populate the address
// fields in the form.
// Get Latitude and longitude
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
document.getElementById('lat').value = place.geometry.location.lat();
document.getElementById('lng').value = place.geometry.location.lng();
fillInAddress();
});
}
google.maps.event.addDomListener(window, 'load', initAutocomplete);
</script>
<script src="{{ asset('assets/js/sweet-alert.min.js')}}"></script>
<script>
$(document).ready(function() {
$('body').on('change', '.upload_profile_img', function(ev) {
var filedata=this.files[0];
var input = $(this).attr('id');
var input_id = $(this).attr('id');
var prograss_bar = input+'_bar';
var files_div = input+'_file';
$('body').find('.'+prograss_bar).parent('.progress').show();
$('body').find('.'+prograss_bar).addClass('bg-danger wd-5p');
var imgtype=filedata.type;
var reader=new FileReader();
reader.onload=function(ev){
//$('.front_door_img_file').attr('src',ev.target.result).css('width','150px').css('height','150px');
}
reader.readAsDataURL(this.files[0]);
var postData=new FormData();
postData.append('field_name',input);
postData.append('field_value',this.files[0]);
var url="{{ route('dashboard.upload_profile_img') }}";
$.ajax({
headers:{'X-CSRF-Token':'{{ csrf_token() }}'},
async:true,
type:"post",
dataType: 'json',
contentType:false,
url:url,
data:postData,
processData:false,
success:function(data){
if(data.success == 'done'){
$('body').find('.'+files_div).attr('src',data.doc_url);
$('body').find('.'+prograss_bar).removeClass('bg-danger');
$('body').find('.'+prograss_bar).addClass('bg-success');
var $el = $('#'+input_id);
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();
}
},
error: function(data, errorThrown)
{
alert('request failed :'+errorThrown);
},
xhr: function()
{
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
var pers = parseInt(percentComplete * 100);
var bar_per = 5;
if(pers > 5){
bar_per = (pers / 5) * 5;
}
var class_p = 'width: '+bar_per+'%';
$('body').find('.'+prograss_bar).attr('style',class_p);
if(bar_per == 100){
setTimeout(set_off_bar, 2000);
}
}
}, false);
xhr.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
}
}, false);
return xhr;
}
});
});
$('.show_image_popup').click(function(){
var img_url = $(this).attr('img_url');
swal({
title: '<i>HTML</i> <u>example</u>',
icon: 'info',
content:
'You can use <b>bold text</b>, ' +
'<a href="//github.com">links</a> ' +
'and other HTML tags',
})
});
$("#pop").on("click", function() {
$('#imagepreview').attr('src', $('.user_profile_img_file').attr('src')); // here asign the image to the modal when the user click the enlarge link
$('#imagemodal').show(); // imagemodal is the id attribute assigned to the bootstrap modal, then i use the show function
});
});
function show_image_popup(img_url){
}
function set_off_bar(){
$('body').find('.user_profile_img_bar').attr('style',"width:0%;");
}
</script>
@endsection