File: /home/imensosw/liftcincy.imenso.co/resources/views/frontend/opportunities.blade.php
@extends('frontend.layouts.layout_custom')
@section("style")
<style>
.iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.op-selected{background-color: red;}
</style>
@endsection
@section('pageTitle')
<title>{{ trans('panel.site_title') }} {{ trans('panel.opportunity_page_title') }}</title>
@endsection
@section('content')
<div class="modal upper_modal" id="opportunity_modal">
<div class="modal-content">
<div class="modal-body">
<div class="ccontainer">
<div class="crow">
<div class="ccol ccol-lg-4 ccol-sm-6 mx-auto">
<hr />
<h1 class="mb-1 opportunity_title">Loading...</h1>
<div class="d-flex flex-justify-between mb-1 opportunity_modal_data">
<div class="mr-1 col start_date_div">
<div style="min-width: 100px;">
<strong class="d-block">{{trans('opportunity.date')}}</strong>
<span class="start_date"></span>
</div>
</div>
<div class="mr-1 col start_time_div">
<div style="min-width: 100px;">
<strong class="d-block">{{trans('opportunity.time')}}</strong>
<span class="start_time"></span>
</div>
</div>
<div class="col">
<div style="min-width: 100px;">
<strong class="d-block">{{trans('opportunity.location')}}</strong>
<span class="address_location"></span> <a class='text-link address_link' href="" target="_blank">View on Map</a>
</div>
</div>
</div>
<div class="mb-2 opportunity_modal_data">
<strong class="d-block">{{trans('opportunity.desc')}}</strong>
<span class="opportunity_desc"></span>
</div>
<div class="opportunity_modal_data">
<a href="javascript:;" id="apply_to_opportunity_button" class="apply_to_opportunity_button cbtn cbtn-primary mr-2" ></a>
<a href="javascript:;" id="close_opportunity" class="cbtn cbtn-text-primary close">{{trans('opportunity.close')}}</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@if($opportunities->count() == -1)
@foreach($opportunities as $key=>$opportunity)
<?php
$feature_image = URL::asset('frontend/images/image_1.png');
if(!empty($opportunity->feature_image)){
$feature_image = URL::asset('Opportunity/'.$opportunity->partner_id.'/'.$opportunity->opportunity_id.'/'.$opportunity->feature_image);
}
?>
<div class="modal upper_modal" id="opportunity_modal_{{$opportunity->opportunity_id}}">
<div class="modal-content">
<div class="modal-body">
<div class="ccontainer">
<div class="crow">
<div class="ccol ccol-lg-4 ccol-sm-6 mx-auto">
<hr />
<h1 class="mb-1">{{$opportunity->opportunity_title}}</h1>
<div class="d-flex flex-justify-between mb-1">
<div class="mr-1 col">
<div style="min-width: 100px;">
<strong class="d-block">{{trans('opportunity.date')}}:</strong>
<span>{{date('M d Y', strtotime($opportunity->start_date))}}</span>
</div>
</div>
<div class="mr-1 col">
<div style="min-width: 100px;">
<strong class="d-block">{{trans('opportunity.time')}} :</strong>
<span>{{date('h:i A', strtotime($opportunity->start_date.' '.$opportunity->start_time))}}</span>
</div>
</div>
<div class="col">
<div style="min-width: 100px;">
<strong class="d-block">{{trans('opportunity.location')}}:</strong>
<span>{{$opportunity->address_location}} {{$opportunity->address_line1}}</span> <a class='text-link' href="https://www.google.com/maps/search/?api=1&query={{$opportunity->address_lat}},{{$opportunity->address_long}}" target="_blank">View on Map</a>
</div>
</div>
</div>
<!--<div class="d-flex mb-1 hide d-none">
<div class="mr-1">
<div style="min-width: 110px;">
<strong class="d-block">{{trans('opportunity.no_of_hours')}}:</strong>
<span>{{$opportunity->opportunity_hours}} hour</span>
</div>
</div>
<div class="">
<div style="min-width: 140px;">
<strong class="d-block">{{trans('opportunity.no_of_volunteers')}}:</strong>
<span>{{$opportunity->no_of_volunteers}} Volunteers</span>
</div>
</div>
</div> -->
<div class="mb-2">
<strong class="d-block">{{trans('opportunity.desc')}} :</strong>
<span>{!! $opportunity->opportunity_desc !!}</span>
</div>
<div>
@if(in_array($opportunity->opportunity_id,$volunteer_opportunities_applied))
<a href="javascript:;" id="signed_{{$opportunity->opportunity_id}}" class="cbtn cbtn-primary mr-2 applied_to_opportunity" >{{trans('opportunity.signed')}}</a>
@else
<a href="javascript:;" action_url="{{route('dashboard.apply_to_opportunity',$opportunity->opportunity_id)}}" data_id='{{$opportunity->opportunity_id}}' id="signup_{{$opportunity->opportunity_id}}" class="cbtn cbtn-primary mr-2 apply_to_opportunity" >{{trans('opportunity.signup')}} </a>
@endif
<a href="javascript:;" id="close_{{$opportunity->opportunity_id}}" class="cbtn cbtn-text-primary close">{{trans('opportunity.close')}} <!-- <span><img src="{{URL::asset('frontend/images/arrow.svg')}}" alt="arrow" class="img-svg" /></span> --></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endforeach
@endif
@include("frontend.include.navbar")
<div data-scroll-container class="page-wrapper">
@include('frontend/include/inner_nave_header')
<section style="padding: 0;" class="sidebar_parent">
@include('frontend/include/inner_nave')
<div class="pt-2 strip_bg1 burger_b">
<div class="ccontainer">
<div class="crow">
<div class="ccol ccol-lg-6 mx-auto">
<div class="grid_section ">
<span class="hide d-none">{{trans('opportunity.view')}}:</span>
<a href="javascript:;" class="active hide d-none"><img src="{{URL::asset('frontend/images/grid.svg')}}" alt="grid" class="img-svg" /></a>
<!--<a href="javascript:;"><img src="{{URL::asset('frontend/images/image.svg')}}" alt="image" class="img-svg" /></a>-->
</div>
</div>
</div>
<div class="crow flex-justify-center">
<div class="ccol ccol-lg-2 ccol-md-3 ccol-sm-3">
<div class="sidebar">
<h2>{{trans('opportunity.volunteer_opportunities')}}</h2>
<form action="{{route('dashboard.opportunities')}}" method="POST" enctype="multipart/form-data">
@csrf
<div class="form_fld">
<label>{{trans('opportunity.search_address')}}</label>
<input type="text" name="address_location" id="address_location" placeholder="Enter Address..." class="fld-control" value="@if(isset($request->address_location)) {{$request->address_location}} @endif">
<input type="hidden" name="address_lat" id="lat" value="@if(isset($request->address_lat)) {{$request->address_lat}} @endif" />
<input type="hidden" name="address_long" id="lng" value="@if(isset($request->address_long)) {{$request->address_long}} @endif" />
</div>
<div class="form_fld">
<label>{{trans('opportunity.search_radius')}}</label>
<select class="fld-control" name="location_miles">
<?php $miles = array(1,2,3,4,5,10,15,20,30,40,50,100,200); ?>
@foreach($miles as $mile)
<option value="{{$mile}}" @if(isset($request->location_miles) && $request->location_miles == $mile) selected @endif >{{$mile}} Mile</option>
@endforeach
</select>
</div>
<div class="form_fld">
<label>{{trans('opportunity.search_by_type')}}</label>
@if($categories->count())
@foreach($categories as $key=>$category)
<?php
$category_image = URL::asset('frontend/images/default_category.jpg');
if(!empty($category->category_image)){
$category_image = URL::asset('OpportunityCategory/'.$category->id.'/'.$category->category_image);
}
?>
<label class="checkbox_container"> <img src="{{$category_image}}" alt="" class="img" />
{{$category->category_title}}
<input type="checkbox" name="category_id[]" value="{{$category->id}}" @if(isset($request->category_id) && in_array($category->id,$request->category_id)) checked="checked" @endif >
<span class="checkmark"></span>
</label>
@endforeach
@endif
</div>
<div class="form_fld">
<button type="submit" name="submit" class="fld-control cbtn cbtn-primary" >Search</button>
</div>
</form>
</div>
</div>
<div class="ccol ccol-lg-4 ccol-md-5 ccol-sm-5">
<div class="crow g-0">
@if($opportunities->count())
@foreach($opportunities as $key=>$opportunity)
<?php
$feature_image = URL::asset('frontend/images/image_1.png');
if(!empty($opportunity->feature_image)){
$feature_image = URL::asset('Opportunity/'.$opportunity->partner_id.'/'.$opportunity->opportunity_id.'/'.$opportunity->feature_image);
}
?>
<div class="ccol ccol-lg-4 ccol-md-4 ccol-sm-4">
<div class="school_grid">
<a href="javascript:;" data-modal="#opportunity_modal" onClick="get_opportunity_detail('{{$opportunity->opportunity_id}}');" class="modal_trigger school_grid_img">
<img src="{{$feature_image}}" alt="{{$opportunity->opportunity_title}}" />
</a>
<div class="d-flex flex-justify-between flex-item-align-center">
<div class="badge badge-black mr-1">{{$opportunity->opportunity_hours}} hour</div>
<div>
<a href="{{route('dashboard.nonprofit_partner',$opportunity->partner_slug)}}" class="text-muted small"> {{$opportunity->partner_name}} </a>
</div>
</div>
<h3 data-modal="#opportunity_modal" onClick="get_opportunity_detail('{{$opportunity->opportunity_id}}');" class="modal_trigger">{{$opportunity->opportunity_title}}</h3>
<div>
<?php
$category_image = URL::asset('frontend/images/default_category.jpg');
if(!empty($opportunity->category_image)){
$category_image = URL::asset('OpportunityCategory/'.$opportunity->category_id.'/'.$opportunity->category_image);
}
?>
<img src="{{$category_image}}" alt="{{$opportunity->category_title}}" class="cat_img" height="30" />
</div>
</div>
</div>
@endforeach
@else
<p>{{trans('opportunity.not_found')}}</p>
@endif
</div>
</div>
</div>
</div>
</div>
</section>
@include("frontend.include.footer")
</div>
@endsection
@section('scripts')
<script src="{{ asset('assets/js/sweet-alert.min.js')}}"></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);
//Apply
$(document).ready(function(){
$('body').on('click','.applied_to_opportunity',function(){
swal("","{{ trans('new.applied_to_opportunity') }}");
});
$('body').on('click','.apply_to_opportunity',function(){
var opportunity_id = $(this).attr('data_id');
var action_url = $(this).attr('action_url');
var this_oppor = $(this);
var postData=new FormData();
postData.append('opportunity_id',opportunity_id);
swal({
title: "{{ trans('new.are_you_sure') }}",
text: "{{ trans('new.apply_to_opportunity') }}",
//icon: "info", //Success, warning, info, error
buttons: true,
dangerMode: true,
})
.then((willComment) => {
if (willComment) {
swal({
title: "{{trans('opportunity.proccessing')}}",
text: "{{trans('opportunity.proccessing_text')}}",
//icon: "warning", //Success, warning, info, error
buttons: false,
dangerMode: true,
});
$.ajax({
headers:{'X-CSRF-Token':'{{ csrf_token() }}'},
async:true,
type:"post",
dataType: 'json',
contentType:false,
url:action_url,
data:postData,
processData:false,
success:function(data){
if(data.success == 'done'){
//$('body').find('.'+files_div).attr('src',data.doc_url);
//$('.delete_feature_image').hide();
this_oppor.addClass('applied_to_opportunity');
this_oppor.removeClass('apply_to_opportunity');
this_oppor.html('Registered');
swal("Great!",data.msg,"success");
}else{
swal("You are in!",data.msg,"error");
}
},
error: function(data, errorThrown)
{
swal("Oops!",errorThrown,"error");
},
});
}
});
});
});
function get_opportunity_detail(opportunity_id){
$('#opportunity_modal').find('.opportunity_modal_data').hide();
$('#opportunity_modal').find('.start_date_div').show();
$('#opportunity_modal').find('.start_time_div').show();
$('#opportunity_modal').find('.opportunity_title').html('Loading...');
$('#opportunity_modal').find('.start_date').html('');
$('#opportunity_modal').find('.start_time').html('');
$('#opportunity_modal').find('.address_location').html('');
$('#opportunity_modal').find('.address_link').attr('href','#');
$('#opportunity_modal').find('.opportunity_desc').html('');
$('#opportunity_modal').find('.apply_to_opportunity_button').html('');
$('#opportunity_modal').find('.apply_to_opportunity_button').removeClass('apply_to_opportunity');
$('#opportunity_modal').find('.apply_to_opportunity_button').removeClass('applied_to_opportunity');
$('#opportunity_modal').find('.apply_to_opportunity_button').attr('action_url','');
$('#opportunity_modal').find('.apply_to_opportunity_button').attr('data_id','');
//
action_url = "{{ route('dashboard.volunteer.get_opportunity_detail','')}}/"+opportunity_id;
var postData=new FormData();
$.ajax({
headers:{'X-CSRF-Token':'{{ csrf_token() }}'},
async:true,
type:"post",
dataType: 'json',
contentType:false,
url:action_url,
data:postData,
processData:false,
success:function(data){
var opportunity = data.opportunity;
if(data.success == 'done'){
$('#opportunity_modal').find('.start_date_div').show();
$('#opportunity_modal').find('.start_time_div').show();
$('#opportunity_modal').find('.opportunity_title').html(opportunity.opportunity_title);
$('#opportunity_modal').find('.start_date').html(opportunity.start_date);
$('#opportunity_modal').find('.start_time').html(opportunity.start_time);
if(opportunity.on_going == 1){
$('#opportunity_modal').find('.start_date_div').hide();
$('#opportunity_modal').find('.start_time_div').hide();
}
$('#opportunity_modal').find('.address_location').html(opportunity.address_location);
$('#opportunity_modal').find('.address_link').attr('href',opportunity.address_link);
$('#opportunity_modal').find('.opportunity_desc').html(opportunity.opportunity_desc);
$('#opportunity_modal').find('.apply_to_opportunity_button').html(opportunity.apply_to_opportunity_button);
$('#opportunity_modal').find('.apply_to_opportunity_button').removeClass('apply_to_opportunity');
$('#opportunity_modal').find('.apply_to_opportunity_button').removeClass('applied_to_opportunity');
$('#opportunity_modal').find('.apply_to_opportunity_button').addClass(opportunity.apply_to_opportunity_button_class);
$('#opportunity_modal').find('.apply_to_opportunity_button').attr('action_url',opportunity.action_url);
$('#opportunity_modal').find('.apply_to_opportunity_button').attr('data_id',opportunity.id);
$('#opportunity_modal').find('.opportunity_modal_data').show();
//$('body').find('.'+files_div).attr('src',data.doc_url);
//$('.delete_feature_image').hide();
}else{
$('#opportunity_modal').find('.opportunity_modal_data').hide();
$('#opportunity_modal').find('.start_date_div').show();
$('#opportunity_modal').find('.start_time_div').show();
$('#opportunity_modal').find('.opportunity_title').html('Loading...');
$('#opportunity_modal').find('.start_date').html('');
$('#opportunity_modal').find('.start_time').html('');
$('#opportunity_modal').find('.address_location').html('');
$('#opportunity_modal').find('.address_link').attr('href','#');
$('#opportunity_modal').find('.opportunity_desc').html('');
$('#opportunity_modal').find('.apply_to_opportunity_button').html('');
$('#opportunity_modal').find('.apply_to_opportunity_button').removeClass('apply_to_opportunity');
$('#opportunity_modal').find('.apply_to_opportunity_button').removeClass('applied_to_opportunity');
$('#opportunity_modal').find('.apply_to_opportunity_button').attr('action_url','');
$('#opportunity_modal').find('.apply_to_opportunity_button').attr('data_id','');
}
},
error: function(data, errorThrown)
{
swal("Oops!",errorThrown,"error");
},
});
}
</script>
@endsection