File: /home/imensosw/.trash/resources.2/views/admin/user_profile.blade.php
@extends('layouts.admin')
@section("style")
<link href="{{ asset('assets/plugins/select2/css/select2.min.css')}}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/select2/css/select2-bootstrap4.css')}}" rel="stylesheet" />
@endsection
@section('pageTitle')
<title>{{ trans('panel.site_title') }} {{ trans('global.profile') }}</title>
@endsection
@section('content')
<!--start page wrapper -->
<div class="page-wrapper">
<div class="page-content">
<!--breadcrumb-->
<div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
<div class="breadcrumb-title pe-3">{{ trans('global.profile') }}</div>
<div class="ps-3">
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-0 p-0">
<li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt"></i></a>
</li>
<li class="breadcrumb-item active" aria-current="page">{{ trans('global.myprofile') }} </li>
</ol>
</nav>
</div>
</div>
<!--end breadcrumb-->
<hr/>
@include('layouts/notification')
<form method="POST" action="{{route('admin.update_user_profile')}}">
@csrf
<div class="row">
<div class="col-4">
<div class="card">
<div class="card-body">
<div>
<div class="profile_area">
<div class="profile_pic">
<a href="javascript:;" id="pop" img_url="{{$user_profile_img}}" class="show_image_popup_"><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();"><i class="fadeIn animated bx bx-edit-alt"></i></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 mb-3 mt-3 bg-white" style="height: 5px">
<div class="progress-bar user_profile_img_bar" role="progressbar" style="width: 0%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></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>
</div>
</div>
@if($user_type == 'Partner')
<div class="card">
<div class="card-body">
<h3>Social Profile Links</h3>
<div class="row">
<div class="col-12">
<div class="form-group {{ $errors->has('org_facebook_links') ? 'has-error' : '' }}">
<label for="org_facebook_links">Facebook<small class="text-danger">*</small></label>
<input type="url" id="org_facebook_links" name="org_facebook_links" class="form-control " value="{{ old('org_facebook_links', isset($user) ? $user->org_facebook_links : '') }}" >
@if($errors->has('org_facebook_links'))
<p class="text-danger small">
{{ $errors->first('org_facebook_links') }}
</p>
@endif
</div>
</div>
<div class="col-12">
<div class="form-group {{ $errors->has('org_linkdin_links') ? 'has-error' : '' }}">
<label for="org_linkdin_links">Linkdin<small class="text-danger">*</small></label>
<input type="url" id="org_linkdin_links" name="org_linkdin_links" class="form-control " value="{{ old('org_linkdin_links', isset($user) ? $user->org_linkdin_links : '') }}" >
@if($errors->has('org_linkdin_links'))
<p class="text-danger small">
{{ $errors->first('org_linkdin_links') }}
</p>
@endif
</div>
</div>
<div class="col-12">
<div class="form-group {{ $errors->has('org_youtube_links') ? 'has-error' : '' }}">
<label for="org_youtube_links">Youtube<small class="text-danger">*</small></label>
<input type="url" id="org_youtube_links" name="org_youtube_links" class="form-control " value="{{ old('org_youtube_links', isset($user) ? $user->org_youtube_links : '') }}" >
@if($errors->has('org_youtube_links'))
<p class="text-danger small">
{{ $errors->first('org_youtube_links') }}
</p>
@endif
</div>
</div>
<div class="col-12">
<div class="form-group {{ $errors->has('org_twitter_links') ? 'has-error' : '' }}">
<label for="org_twitter_links">Twitter<small class="text-danger">*</small></label>
<input type="url" id="org_twitter_links" name="org_twitter_links" class="form-control " value="{{ old('org_twitter_links', isset($user) ? $user->org_twitter_links : '') }}" >
@if($errors->has('org_twitter_links'))
<p class="text-danger small">
{{ $errors->first('org_twitter_links') }}
</p>
@endif
</div>
</div>
</div>
<div>
<button class="btn btn-primary" type="submit" >{{ trans('global.update') }}</button>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-12">
<div class="form-group {{ $errors->has('org_logo') ? 'has-error' : '' }}">
<label for="org_logo">Logo<small class="text-danger">*</small></label>
<input class="form-control upload_org_logo" type="file" id="org_logo" accept="image/*" value="Upload" />
<div class="progress mb-3 mt-3 bg-white" style="height: 5px">
<div class="progress-bar org_logo_bar" role="progressbar" style="width: 0%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="col-12">
<?php if(isset($user->org_logo) && !empty($user->org_logo)){ $org_logo = URL::asset('Profile/'.$user->id.'/'.$user->org_logo); }else { $org_logo = URL::asset('images/org_logo.png'); } ?>
<img src="{{$org_logo}}" class="org_logo_file img-responsive" width="100%;" />
@if(!empty($user->org_logo))
<a href="javascript:;" class="text-danger delete_org_logo" data_id="{{$user->id}}" data_col="org_logo">Delete</a>
@endif
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="row align-items-center">
<h3>Image Gallery</h3>
<div class="col-sm-12 text-right">
<a onclick="upload_user_docs('#exampleModal','DOC','.upload_user_docs');" class="btn btn-primary btn-circle waves-effect waves-ripple" href="javascript:;" data-bs-toggle="modal" data-bs-target="#exampleModal" > <i class="ri-add-line"></i> <span class="tooltiptext">Add Images</span> </a>
</div>
<div class="col-md-12">
<table class="table table-striped table-hover">
<thead>
<tr>
<th class="sorting-none">Image</th>
<th class="text-center sorting-none" > </th>
</tr>
</thead>
<tbody class="upload_user_docs">
@if($user_docs->count())
@foreach($user_docs as $key=>$this_doc)
<tr class="{{$this_doc->doc_type}}_{{$this_doc->id}}">
<td class="sorting-none">
<a href="javascript:;" doc_type="{{$this_doc->doc_type}}" doc_url="{{URL::asset('Profile'.'/'.$this_doc->user_id.'/'.$this_doc->doc_type)}}/{{$this_doc->doc_name}}" class="document_pop"><img height="50" class="user_docs" src="{{URL::asset('Profile'.'/'.$this_doc->user_id.'/'.$this_doc->doc_type)}}/{{$this_doc->doc_name}}" /></a>
</td>
<td class="text-center sorting-none" width="70">
<a class="btn btn-link" onclick="delete_user_doc('{{$this_doc->id}}','{{$this_doc->doc_type}}');" href="javascript:;"><i class="fadeIn animated bx bx-trash-alt"></i></a>
</td>
@endforeach
@endif
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
@endif
</div>
<div class="col-8">
<!-- Tabs content -->
<div class="card">
<div class="card-body">
<h3>Profile Detail</h3>
<hr/>
<input type="hidden" id="roles" name="roles[]" class="" value="3" required>
<input type="hidden" id="user_type" name="user_type" class="" value="Partner" required>
<div class="row">
<div class="col-12">
<div class="form-group {{ $errors->has('name') ? 'has-error' : '' }}">
<label for="name">User Name<small class="text-danger">*</small></label>
<input type="text" id="name" name="name" class="form-control" value="{{ old('name', isset($user) ? $user->name : '') }}" required>
@if($errors->has('name'))
<p class="text-danger small">
{{ $errors->first('name') }}
</p>
@endif
</div>
</div>
<div class="col-12">
<div class="form-group {{ $errors->has('email') ? 'has-error' : '' }}">
<label for="email">Email<small class="text-danger">*</small></label>
<input type="email" id="email" name="email" class="form-control" value="{{ old('email', isset($user) ? $user->email : '') }}" required>
@if($errors->has('email'))
<p class="text-danger small">
{{ $errors->first('email') }}
</p>
@endif
</div>
</div>
</div>
</div>
</div>
@if($user_type == 'Partner')
<div class="card">
<div class="card-body">
<h3>Organization Detail</h3>
<div class="row">
<div class="col-12">
<div class="form-group {{ $errors->has('org_type') ? 'has-error' : '' }}">
<label for="org_type">Organization Type<small class="text-danger">*</small></label>
<select name="org_type" class="form-control select2 single-select org_type" id="org_type">
<option value="">Select Organization</option>
@if($organizations->count())
@foreach($organizations as $key=>$organization)
<option value="{{$organization->id}}" @if(old('org_type', isset($user) ? $user->org_type : '') == $organization->id || $organizations->count() == 1) selected @endif >{{$organization->title}}</option>
@endforeach
@endif
</select>
@if($errors->has('org_type'))
<p class="text-danger small">
{{ $errors->first('org_type') }}
</p>
@endif
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group {{ $errors->has('org_name') ? 'has-error' : '' }}">
<label for="org_name">Organization Name<small class="text-danger">*</small></label>
<input type="text" id="org_name" name="org_name" class="form-control" value="{{ old('org_name', isset($user) ? $user->org_name : '') }}" required>
@if($errors->has('org_name'))
<p class="text-danger small">
{{ $errors->first('org_name') }}
</p>
@endif
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="form-group {{ $errors->has('org_contact') ? 'has-error' : '' }}">
<label for="org_contact">Organization Contact<small class="text-danger">*</small></label>
<input type="tel" id="org_contact" name="org_contact" class="form-control" value="{{ old('org_contact', isset($user) ? $user->org_contact : '') }}" >
@if($errors->has('org_contact'))
<p class="text-danger small">
{{ $errors->first('org_contact') }}
</p>
@endif
</div>
</div>
<div class="col-6">
<div class="form-group {{ $errors->has('org_email') ? 'has-error' : '' }}">
<label for="org_email">Organization Email<small class="text-danger">*</small></label>
<input type="org_email" id="org_email" name="org_email" class="form-control" value="{{ old('org_email', isset($user) ? $user->org_email : '') }}" required>
@if($errors->has('org_email'))
<p class="text-danger small">
{{ $errors->first('org_email') }}
</p>
@endif
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h3>Organization Address</h3>
<div class="row">
<div class="col-6">
<div class="form-group {{ $errors->has('org_country') ? 'has-error' : '' }}">
<label for="org_country">Country<small class="text-danger">*</small></label>
<select name="org_country" class="form-control select2 org_country" id="org_country">
<option value="">Select Country</option>
@if($countries->count())
@foreach($countries as $key=>$country)
<option value="{{$country->country_code}}" @if(old('org_country', isset($user) ? $user->org_country : '') == $country->country_code) selected @endif >{{$country->country_name}}</option>
@endforeach
@endif
</select>
@if($errors->has('org_country'))
<p class="text-danger small">
{{ $errors->first('org_country') }}
</p>
@endif
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="form-group {{ $errors->has('org_street') ? 'has-error' : '' }}">
<label for="org_street">Street/Block/Sector/House No.<small class="text-danger">*</small></label>
<input type="text" id="org_street" name="org_street" class="form-control" value="{{ old('org_street', isset($user) ? $user->org_street : '') }}" >
@if($errors->has('org_street'))
<p class="text-danger small">
{{ $errors->first('org_street') }}
</p>
@endif
</div>
</div>
<div class="col-8">
<div class="form-group {{ $errors->has('org_address') ? 'has-error' : '' }}">
<label for="org_address">Area<small class="text-danger">*</small></label>
<input type="text" id="org_address" name="org_address" class="form-control" value="{{ old('org_address', isset($user) ? $user->org_address : '') }}" >
<input type="hidden" name="org_lat" id="org_lat" />
<input type="hidden" name="org_lang" id="org_lang" />
@if($errors->has('org_address'))
<p class="text-danger small">
{{ $errors->first('org_address') }}
</p>
@endif
</div>
</div>
<div class="col-4">
<div class="form-group {{ $errors->has('org_city') ? 'has-error' : '' }}">
<label for="org_city">City<small class="text-danger">*</small></label>
<input type="text" id="org_city" name="org_city" class="form-control" value="{{ old('org_city', isset($user) ? $user->org_city : '') }}" >
@if($errors->has('org_city'))
<p class="text-danger small">
{{ $errors->first('org_city') }}
</p>
@endif
</div>
</div>
<div class="col-4">
<div class="form-group {{ $errors->has('org_town') ? 'has-error' : '' }}">
<label for="org_town">Town<small class="text-danger">*</small></label>
<input type="text" id="org_town" name="org_town" class="form-control" value="{{ old('org_town', isset($user) ? $user->org_town : '') }}" >
@if($errors->has('org_town'))
<p class="text-danger small">
{{ $errors->first('org_town') }}
</p>
@endif
</div>
</div>
<div class="col-4">
<div class="form-group {{ $errors->has('org_postcode') ? 'has-error' : '' }}">
<label for="org_postcode">Postcode<small class="text-danger">*</small></label>
<input type="text" id="org_postcode" name="org_postcode" class="form-control" value="{{ old('org_postcode', isset($user) ? $user->org_postcode : '') }}" >
@if($errors->has('org_postcode'))
<p class="text-danger small">
{{ $errors->first('org_postcode') }}
</p>
@endif
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-12">
<div class="form-group {{ $errors->has('org_desc') ? 'has-error' : '' }}">
<label for="org_desc">Description<small class="text-danger">*</small></label>
<textarea type="text" id="org_desc" name="org_desc" class="form-control textarea_editor" >{!! old('org_desc', isset($user) ? $user->org_desc : '') !!}</textarea>
@if($errors->has('org_desc'))
<p class="text-danger small">
{{ $errors->first('org_desc') }}
</p>
@endif
</div>
</div>
</div>
</div>
</div>
@endif
<div class="card">
<div class="card-body">
<div>
<button class="btn btn-primary" type="submit" >{{ trans('global.update') }}</button>
<a class="btn btn-secondary waves-effect waves-ripple mr-3" href="{{ url()->previous() }}">{{ trans('global.back_to_list') }}</a>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add Images</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<input type="hidden" name="document_type" id="document_type" />
<div class="document_file_div">
<div class="input-group mb-3 ">
<input class="form-control " name="document_file" id="document_file" type="file" accept="image/*" value="Upload" />
</div>
<div class="progress mb-3 mt-3 bg-white" style="height: 5px">
<div class="progress-bar document_file_bar" role="progressbar" style="width: 0%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="text-success user_document_msg">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="document_image_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Image</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img src="" id="document_image_preview" style="width:100%;" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<a href="#" type="button" class="btn btn-primary document_image_download" target="_blank" download >Download</a>
</div>
</div>
</div>
</div>
<!-- Creates the bootstrap modal where the image will appear -->
<div class="modal fade" 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 src="{{ asset('assets/plugins/select2/js/select2.min.js')}}"></script>
<script>
function upload_user_docs(modal_id,doc_type,append_to){
$(modal_id).find('#document_type').val(doc_type);
$(modal_id).find('#document_file').attr('append_to',append_to);
$(modal_id).find('.document_file_bar').addClass('bg-danger');
$(modal_id).find('.document_file_bar').removeClass('bg-success');
$(modal_id).find('.document_file_bar').attr('style','');
$(modal_id).find('.user_document_msg').html('');
}
function delete_user_doc(doc_id,doc_type){
var user_id = '{{$user->id}}';
if(doc_id || doc_type){
swal({
title: "Are you sure?",
text: "{{ trans('global.areYouSure') }}",
icon: "info", //Success, warning, info, error
buttons: true,
dangerMode: true,
})
.then((willComment) => {
if (willComment) {
var postData=new FormData();
postData.append('doc_id',doc_id);
postData.append('doc_type',doc_type);
postData.append('user_id',user_id);
var url="{{ route('admin.partners.delete_user_document_file') }}";
$.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.status == 'success'){
swal("Done!",data.msg,"success");
$('.'+doc_type+'_'+doc_id).remove();
}else{
swal("Opps!",data.msg,"error");
}
},
error: function(data, errorThrown)
{
swal("Opps!",errorThrown,"error");
},
});
}
});
}else{
swal("Opps!",'Not Found!',"error");
}
}
$(document).ready(function(){
$("body").on("click",'.document_pop', function() {
$('#document_image_preview').attr('src', $(this).attr('doc_url')); // here asign the image to the modal when the user click the enlarge link
$('.document_image_download').attr('href', $(this).attr('doc_url'));
$('#document_image_modal').modal('show'); // imagemodal is the id attribute assigned to the bootstrap modal, then i use the show function
});
$('body').on('change', '#document_file', 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 = $(this).attr('append_to');
var doc_name = $('#document_name').val();
var doc_type = $('#document_type').val();
$('body').find('.'+prograss_bar).parent('.progress').show();
$('body').find('.'+prograss_bar).addClass('bg-danger');
$('body').find('.'+prograss_bar).attr('style','');
var imgtype=filedata.type;
var reader=new FileReader();
reader.onload=function(ev){
}
reader.readAsDataURL(this.files[0]);
var postData=new FormData();
postData.append('user_id','{{$user->id}}');
postData.append('doc_type',doc_type);
postData.append('field_name',input);
postData.append('field_value',this.files[0]);
var url="{{ route('admin.partners.upload_user_docs') }}";
$.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.status == 'success'){
//$('body').find('.'+files_div).attr('src',data.doc_url);
$('body').find('.'+prograss_bar).removeClass('bg-danger');
$('body').find('.'+prograss_bar).addClass('bg-success');
$('.user_document_msg').html(data.msg);
var doc_html = '<tr class="'+doc_type+'_'+data.doc_id+'"><td style="min-width:70px" class="sorting-none"><a href="javascript:;" doc_type="'+doc_type+'" doc_url="'+data.doc_url+'" class="document_pop"><img class="user_docs" height="50" src="'+data.doc_url+'" /></a></td><td class="text-center sorting-none" width="70"><a class="btn btn-link" onclick="delete_user_doc('+data.doc_id+','+"'"+doc_type+"'"+');" href="javascript:;"><i class="fadeIn animated bx bx-trash-alt"></i></a></td></tr>';
$(files_div).append(doc_html);
var $el = $('#'+input_id);
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();
}else{
swal("Opps!",data.msg,"error");
}
},
error: function(data, errorThrown)
{
swal("Opps!",errorThrown.msg,"error");
},
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);
}
}, false);
xhr.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
}
}, false);
return xhr;
}
});
});
$('body').on('click', '.delete_org_logo', function(ev) {
var data_id = $(this).attr('data_id');
var data_col = $(this).attr('data_col');
var files_div = data_col+'_file';
var postData=new FormData();
postData.append('partner_id',data_id);
postData.append('data_col',data_col);
var url="{{ route('admin.partners.delete_org_logo') }}";
$.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);
$('.delete_org_logo').hide();
}
},
error: function(data, errorThrown)
{
alert('request failed :'+errorThrown);
},
});
});
$('body').on('change', '.upload_org_logo', 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).attr('style','');
$('body').find('.'+prograss_bar).removeClass('bg-success');
$('body').find('.'+prograss_bar).addClass('bg-danger');
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('partner_id','{{$user->id}}');
postData.append('field_name',input);
postData.append('field_value',this.files[0]);
var url="{{ route('admin.partners.upload_org_logo') }}";
$.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);
}
}, false);
xhr.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
}
}, false);
return xhr;
}
});
});
});
$('.single-select').select2({
theme: 'bootstrap4',
width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
placeholder: $(this).data('placeholder'),
allowClear: Boolean($(this).data('allow-clear')),
});
$('.multiple-select').select2({
theme: 'bootstrap4',
width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
placeholder: $(this).data('placeholder'),
allowClear: Boolean($(this).data('allow-clear')),
});
</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('admin.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);
}
}, 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').modal('show'); // imagemodal is the id attribute assigned to the bootstrap modal, then i use the show function
});
});
function show_image_popup(img_url){
}
</script>
@endsection