mein-sterntours/resources/views/request/index.blade.php
2020-03-07 19:45:39 +01:00

322 lines
No EOL
16 KiB
PHP
Executable file

@extends('layouts.layout-2')
@section('content')
<h4 class="font-weight-bold py-3 mb-1">
{{ __('Anfragen') }}
</h4>
<div class="card">
<div class="ui-bordered px-4 pt-3 mb-0">
<div class="form-row align-items-center">
<div class="col-md-4 mb-4">
<label class="form-label" for="travel_option_search">Filter Anreise</label>
<select class="custom-select" name="travel_option_search" id="travel_option_search">
<option value="">Filter aus</option>
<option value="before_2">Anreise vor 2 Monaten</option>
<option value="brefore_1">Anreise vor 1 Monat</option>
<option value="on_site">vor Ort</option>
<option value="after_1">Anreise in 1 Monat</option>
<option value="after_1">Anreise in 2 Monat</option>
</select>
</div>
<div class="col-md-4 mb-4">
<label class="form-label">Filter Anreise Datum</label>
<div class="row">
<div class="input-group col-6 pr-0">
<div class="input-group-prepend">
<span class="input-group-text">ab</span>
</div>
<input class="form-control datepicker-base" name="arrival_start_date" type="text" value="">
</div>
<div class="input-group col-6 pl-1">
<div class="input-group-prepend">
<span class="input-group-text">bis</span>
</div>
<input class="form-control datepicker-base" name="arrival_end_date" type="text" value="">
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<label class="form-label">Filter Abreise Datum</label>
<div class="row">
<div class="input-group col-6 pr-0">
<div class="input-group-prepend">
<span class="input-group-text">ab</span>
</div>
<input class="form-control datepicker-base" name="departure_start_date" type="text" value="">
</div>
<div class="input-group col-6 pl-1">
<div class="input-group-prepend">
<span class="input-group-text">bis</span>
</div>
<input class="form-control datepicker-base" name="departure_end_date" type="text" value="">
</div>
</div>
</div>
</div>
<div class="form-row align-items-center">
<div class="col-md-6 mb-4">
<label class="form-label" for="travel_option_country_id">Filter Reiseland</label>
<select class="custom-select" name="travel_option_country_id" id="travel_option_country_id">
<option value="">Filter aus</option>
@foreach($travel_countries as $id=>$name)
<option value="{{$id}}">{{$name}}</option>
@endforeach
</select>
</div>
<div class="col-md-6 mb-4">
<label class="form-label" for="travel_option_agenda_id">Filter Programm</label>
<select class="custom-select" name="travel_option_agenda_id" id="travel_option_agenda_id">
<option value="">Filter aus</option>
</select>
</div>
</div>
<div class="form-row align-items-center">
<div class="col-5 col-sm-2 mb-4">
<label class="form-label">LeadID</label>
<input class="form-control full_search" name="full_lead_id_search" placeholder="suche" type="text" value="">
</div>
<div class="col-6 col-sm-3 mb-4">
<label class="form-label">Vorname</label>
<input class="form-control full_search" name="full_firstname_search" placeholder="suche" type="text" value="">
</div>
<div class="col-6 col-sm-3 mb-4">
<label class="form-label">Nachname</label>
<input class="form-control full_search" name="full_lastname_search" placeholder="suche" type="text" value="">
</div>
<div class="col-5 col-sm-2 mb-4">
<label class="form-label">BookingID</label>
<input class="form-control full_search" name="full_booking_id_search" placeholder="suche" type="text" value="">
</div>
<div class="col-2 col-sm-2 mb-4 mt-4">
<a href="{{ route('requests') }}" class="btn icon-btn btn-sm btn-outline-dark float-right">
<span class="fa fa-sync"></span>
</a>
</div>
</div>
</div>
<div class="card-datatable table-responsive py-2">
<input type="hidden" name="sort_travel_country_id" value="">
<input type="hidden" name="sort_travelagenda_id" value="">
<input type="hidden" name="sort_travel_documents" value="">
<input type="hidden" name="sort_sf_guard_user_id" value="">
<input type="hidden" name="sort_lead_status_id" value="">
<table id="datatables-requests" class="table table-striped table-bordered">
<thead>
<tr>
<!--<th style="max-width: 1px;">&nbsp;</th> -->
<th>{{__('LeadID')}}</th>
<th>{{__('Vorname')}}</th>
<th>{{__('Nachname')}}</th>
<th>{{__('BookingID')}}</th>
<th>{{__('Reiseland')}}</th>
<th>{{__('Programm')}}</th>
{{--<th>{{__('Kategorie')}}</th>--}}
<th>{{__('Anreise')}}</th>
<th>{{__('Abreise')}}</th>
<th>{{__('Reiseunterlage')}}</th>
<th>{{__('Sachbearbeiter')}}</th>
<th>{{__('Status')}}</th>
</tr>
</thead>
</table>
</div>
</div>
<script>
$( document ).ready(function() {
$('#travel_option_agenda_id').prop('disabled', true);
var table = $('#datatables-requests').DataTable({
"processing": true,
"serverSide": true,
"searching": false,
ajax: {
url: '{!! route( 'data_table_requests' ) !!}',
data: function(d) {
d.arrival_start_date = $('input[name=arrival_start_date]').val();
d.arrival_end_date = $('input[name=arrival_end_date]').val();
d.departure_start_date = $('input[name=departure_start_date]').val();
d.departure_end_date = $('input[name=departure_end_date]').val();
d.sort_travel_country_id = $('input[name=sort_travel_country_id]').val();
d.sort_travelagenda_id = $('input[name=sort_travelagenda_id]').val();
d.sort_travel_documents = $('input[name=sort_travel_documents]').val();
d.sort_sf_guard_user_id = $('input[name=sort_sf_guard_user_id]').val();
d.sort_lead_status_id = $('input[name=sort_lead_status_id]').val();
d.full_firstname_search = $('input[name=full_firstname_search]').val();
d.full_lastname_search = $('input[name=full_lastname_search]').val();
d.full_lead_id_search = $('input[name=full_lead_id_search]').val();
d.full_booking_id_search = $('input[name=full_booking_id_search]').val();
d.travel_option_search = $('select[name=travel_option_search]').val();
d.travel_option_country_id = $('select[name=travel_option_country_id]').val();
d.travel_option_agenda_id = $('select[name=travel_option_agenda_id]').val();
}
},
"columns": [
// { data: 'action_edit', orderable: false, searchable: false},
{ data: 'lead_id', name: 'lead_id' },
{ data: 'participant_firstname', name: 'participant_firstname' },
{ data: 'participant_name', name: 'participant_name' },
{ data: 'id', name: 'id' },
{ data: 'travel_country_id', name: 'travel_country_id', orderable: false },
{ data: 'travelagenda_id', name: 'travelagenda_id', orderable: false },
{ data: 'start_date', name: 'start_date' },
{ data: 'end_date', name: 'end_date' },
{ data: 'travel_documents', name: 'travel_documents', orderable: false },
{ data: 'sf_guard_user_id', name: 'sf_guard_user_id', orderable: false },
{ data: 'lead.status_id', name: 'lead.status_id', orderable: false },
],
"bLengthChange": false,
"iDisplayLength": 50,
"orderSequence": ["desc", "asc"],
"order": [[ 3, "desc" ]],
"language": {
"url": "/js/German.json"
},
initComplete: function () {
this.api().columns(8).every( function () {
var column = this;
var title = $(column.header()).html();
var select = $('<select class="selectpicker"><option value="">'+title+'</option></select>')
.appendTo( $(column.header()).empty() )
.on( 'change', function () {
$('input[name=sort_travel_documents]').val($(this).val());
table.order( [ 3, 'desc' ] ).draw();
} );
column.data().unique().sort().each( function ( d, j ) {
if(d !== ""){
var text = $(d).data('order') ? "Ja" : "Nein";
if(text != "" && text != "-"){
select.append( '<option value="'+$(d).data('order')+'">'+ text+'</option>' );
}
}
} );
} );
this.api().columns(9).every( function () {
var column = this;
var title = $(column.header()).html();
var select = $('<select class="selectpicker"><option value="">'+title+'</option></select>')
.appendTo( $(column.header()).empty() )
.on( 'change', function () {
$('input[name=sort_sf_guard_user_id]').val($(this).val());
table.order( [ 3, 'desc' ] ).draw();
} );
column.data().unique().sort().each( function ( d, j ) {
if(d !== ""){
var text = $(d+' span').text();
if(text != "" && text != "-"){
select.append( '<option value="'+$(d).data('order')+'">'+ $(d+' span').text()+'</option>' );
}
}
} );
} );
$('.selectpicker').selectpicker();
},
drawCallback: function () {
console.log($('#travel_option_agenda_id').prop('disabled'));
//only when is disabled, refesh list is load by other filter.
if($('#travel_option_agenda_id').prop('disabled')) {
var data = table.ajax.params();
//console.log(data);
var url = '{!! route( 'data_ajax_requests' ) !!}';
contentType = 'application/x-www-form-urlencoded; charset=UTF-8';
$.ajax({
url: url,
data: data,
type: "POST",
dataType: "json",
cache: false,
contentType: contentType,
encode: true,
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success: function (data) {
console.log(data);
var select = $('#travel_option_agenda_id');
select.empty().append('<option value="">Filter aus</option>');
console.log(select);
$.each(data, function (i, item) {
select.append('<option value="' + i + '">' + item + '</option>');
});
$('#travel_option_agenda_id').prop('disabled', false);
},
error: function (xhr, status, errorThrown) {
console.log(xhr);
console.log(xhr.responseText);
console.log(errorThrown);
console.log("Sorry, there was a problem!");
}
});
}
}
});
function clearTravelOptionAgenda(){
$('#travel_option_agenda_id').empty().prop('disabled', true);
}
$('#travel_option_search').on('change', function(){
if($(this).val() !== ""){
$('.datepicker-base').removeClass('active');
$('.datepicker-base').addClass('deactive');
$(this).removeClass('deactive');
$(this).addClass('active');
$('.datepicker-base').val(null);
}else{
$('.datepicker-base').removeClass('deactive');
$(this).removeClass('active');
}
clearTravelOptionAgenda();
table.order( [ 3, 'desc' ] ).draw();
});
$('#travel_option_country_id').on('change', function(){
clearTravelOptionAgenda();
table.order( [ 3, 'desc' ] ).draw();
});
$('#travel_option_agenda_id').on('change', function(){
table.order( [ 3, 'desc' ] ).draw();
});
$('.datepicker-base').on('change', function(){
if($(this).val() != ""){
$('#travel_option_search').removeClass('active');
$('#travel_option_search').addClass('deactive');
$('.datepicker-base').removeClass('deactive');
$('.datepicker-base').addClass('active');
$('#travel_option_search').val(null);
}else{
$('.datepicker-base').removeClass('active');
$('#travel_option_search').removeClass('deactive');
}
clearTravelOptionAgenda();
table.order( [ 3, 'desc' ] ).draw();
});
$('.full_search').on('keyup', function(){
clearTravelOptionAgenda();
table.order( [ 3, 'desc' ] ).draw();
});
});
</script>
@endsection