File: /home/imensosw/liftcincy.imenso.co/resources/views/admin/volunteer_request/add_hours.blade.php
@extends('layouts.admin')
@section('style')
<link href="{{ asset('assets/plugins/datatable/css/dataTables.bootstrap5.min.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/select2/css/select2.min.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/select2/css/select2-bootstrap4.css') }}" rel="stylesheet" />
<link rel="stylesheet"
href="{{ URL::asset('assets/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.min.css') }}">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
@endsection
@section('pageTitle')
<title>{{ trans('panel.site_title') }} {{ trans('volunteers_request.add_hours') }}</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('volunteers_request.title') }}</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('volunteers_request.add_hours') }}
</li>
</ol>
</nav>
</div>
<hr />
</div>
<!--end breadcrumb-->
@include('layouts/notification')
<form action="{{ route('admin.volunteers_request.volunteers_request_add_hours_store') }}" method="POST"
enctype="multipart/form-data">
@csrf
<div class="card">
<div class="card-body">
<h3>Volunteer Request</h3>
<hr />
<div class="row">
<div class="ccol-sm-4 col-md-6">
<div class="form-group {{ $errors->has('volunteer_id') ? 'has-error' : '' }}">
<label for="volunteer_id">{{ trans('volunteers_request.volunteers') }}<small
class="text-danger">*</small></label>
<select name="volunteer_id" class="form-control select2 single-select opportunity_type"
id="volunteer_id">
<option value="">Select Volunteer</option>
@foreach ($volunteers as $volunteer)
<option value="{{ $volunteer->id }}"
{{ old('volunteer_id') == $volunteer->id ? 'selected' : '' }}>
{{ $volunteer->name }}
</option>
@endforeach
</select>
@if ($errors->has('volunteer_id'))
<p class="text-danger small">
{{ $errors->first('volunteer_id') }}
</p>
@endif
</div>
</div>
<div class=" ccol-sm-4 col-md-6">
<div class="form-group {{ $errors->has('opportunity_id') ? 'has-error' : '' }}">
<label for="opportunity_id">{{ trans('volunteers_request.opportunity') }}<small
class="text-danger">*</small></label>
<select class="select2 single-select form-control" id="opportunity_id"
name="opportunity_id">
<option value="">Select opportunity</option>
@foreach ($opportunity as $key => $opportunity)
<option value="{{ $opportunity->id }}"
{{ old('opportunity_id') == $opportunity->id ? 'selected' : '' }}>
{{ $opportunity->opportunity_title }}
</option>
@endforeach
</select>
@if ($errors->has('opportunity_id'))
<p class="text-danger small">
{{ $errors->first('opportunity_id') }}
</p>
@endif
</div>
</div>
</div>
<div class="row opportunity_details" style="display:none;">
<div class="col-md-4">
<div class="table-responsive_">
<table class="table table-striped table-bordered" >
<tr>
<th class="text-secondary">Opportunity Hours</th>
<th><span id="opportunity_hours"
class="text-secondary"></span></th>
</tr>
</table>
</div>
<h2>Volunteers</h2>
<div class="table-responsive_">
<table class="table table-striped table-bordered" >
<tr>
<th class="text-dark">Required</th>
<th><span id="no_of_volunteers"
class="text-dark"></span></th>
</tr>
<tr>
<th class="text-success">Approved</th>
<th ><span id="volunteer_approved"
class="text-success"></span></th>
</tr>
<tr>
<th class="text-warning">Pending</th>
<th><span id="volunteer_pending"
class="text-warning"></span></th>
</tr>
<tr>
<th class="text-danger">Rejected</th>
<th><span id="volunteer_rejected"
class="text-danger"></span></th>
</tr>
<tr>
<th class="text-info">Can Apply</th>
<th><span id="volunteer_can_apply"
class="text-info"></span></th>
</tr>
</table>
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">{{ trans('volunteers_request.button_text') }}</button>
</div>
</div>
</form>
<div class="table-responsive">
<table class="datatable table table-striped table-bordered" id="volunteer_history" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Hours</th>
<th>Status</th>
</tr>
</thead>
</table>
</div>
</div>
@endsection
@section('script')
<script src="{{ asset('assets/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatable/js/dataTables.bootstrap5.min.js') }}"></script>
<script>
$(document).ready(function(){
$('#opportunity_id').on('change',function(){
if($(this).val().length > 0){
$('.opportunity_details').show();
}else{
$('.opportunity_details').hide();
}
get_volunteer_history();
});
$('#volunteer_id').on('change',function(){
get_volunteer_history();
});
});
function get_volunteer_history(){
$('#opportunity_hours').html('');
var opportunity_id = $('#opportunity_id').val();
var volunteer_id = $('#volunteer_id').val();
var posthata=new FormData();
posthata.append('opportunity_id',opportunity_id);
posthata.append('volunteer_id',volunteer_id);
var url = "{{ route('admin.volunteer.get_volunteer_history') }}";
$.ajax({
headers:{'X-CSRF-Token':'{{ csrf_token() }}'},
async:true,
type:"post",
dataType: 'json',
contentType:false,
url:url,
data:posthata,
processData:false,
success: function(response) {
if (response != null) {
if(parseInt(opportunity_id) > 0){
$('#opportunity_hours').html(response.opportunity_hours);
$('#no_of_volunteers').html(response.no_of_volunteers);
$('#volunteer_rejected').html(response.volunteer_rejected);
$('#volunteer_approved').html(response.volunteer_approved);
$('#volunteer_pending').html(response.volunteer_pending);
$('#volunteer_can_apply').html(parseInt(response.no_of_volunteers) - (parseInt(response.volunteer_approved)+parseInt(response.volunteer_pending)));
}
if(response.data.length > 0){
populateDataTable(response.data);
}else{
$('#volunteer_history').dataTable().fnClearTable();
}
}
},
});
}
function populateDataTable(data) {
$('#volunteer_history').dataTable().fnClearTable();
var row = 1;
$.each(data, function (index, value) {
//console.log(value.opportunity_hours);
var volunteer_status = '';
if(value.volunteer_status == 0){ volunteer_status = "Pending";}
if(value.volunteer_status == 1){ volunteer_status = "Approved";}
if(value.volunteer_status == 2){ volunteer_status = "Rejected";}
$('#volunteer_history').dataTable().fnAddData( [
row,
value.opportunity_title,
value.no_of_hours,
volunteer_status,
]);
row++;
});
}
</script>
@endsection