306 lines
14 KiB
PHP
306 lines
14 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.2/dist/css/datepicker.min.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.2/dist/js/datepicker.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.2/dist/js/locales/de.js"></script>
|
|
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8">
|
|
<div class="card mt-4">
|
|
<div class="card-header">{{ $tour->name }}</div>
|
|
|
|
<div class="card-body">
|
|
|
|
<form style="background-color: #fff;" class="text-dark" method="post"
|
|
action="/tour/{{$tour->id}}" enctype="multipart/form-data">
|
|
|
|
@csrf
|
|
|
|
@method('PUT')
|
|
<input type="hidden" name="tour_id" value="{{ $tour->id }}">
|
|
<input type="hidden" name="user_id" value="{{ $tour->user_id }}">
|
|
|
|
<div class="form-group" style="display:flex;">
|
|
<!-- label class="ml-2 mt-4 col-form-label col-form-label-sm" style="width:150px; text-align:left;" for="name"><h4>Name:</h4></label> -->
|
|
<label class="ml-2 mt-3 col-form-label col-form-label-sm"
|
|
style="width:180px; text-align:left;font-size:18px;" for="name">Name:</label>
|
|
<input class="mt-3 mr-2 form-control input-sm" type="text" id="name" name="name"
|
|
value="{{ old('name') ?? $tour->name }}" required>
|
|
</div>
|
|
|
|
<div class="form-group" style="display:flex;">
|
|
<label class="ml-2 mt-3" style="width:180px; text-align:left;font-size:18px;"
|
|
for="name">Start:</label>
|
|
<input class="mt-3 mr-2 form-control input-sm" type="date" id="start" name="start"
|
|
value="{{ $tour->start }}" required>
|
|
</div>
|
|
|
|
<div class="form-group" style="display:flex;">
|
|
<label class="ml-2 mt-4" style="width:180px; text-align:left;font-size:18px;"
|
|
for="deadline">Anmeldeschluss:</label>
|
|
<input class="mt-3 mr-2 form-control" type="date" id="deadline" style="font-size:16px;"
|
|
name="deadline" value="{{ old('deadline') ?? $tour->deadline }}" required>
|
|
</div>
|
|
|
|
<div class="form-group" style="display:flex;">
|
|
<label class="ml-2 mt-4" style="width:180px; text-align:left;font-size:18px;"
|
|
for="name">Max Teilnehmer:</label>
|
|
<input class="mt-3 mr-2 form-control" type="text" id="max_participants"
|
|
style="font-size:16px;" name="max_participants" type="number" min="1" max="99"
|
|
value="{{ old('max_participants') ?? $tour->max_participants }}" required>
|
|
</div>
|
|
|
|
|
|
<div class="form-group" style="display:flex;">
|
|
<label class="ml-2 mt-4" style="width:150px; text-align:left;" for="bild"><h4>Bild:</h4>
|
|
</label>
|
|
|
|
@if(file_exists (public_path ('img/tour/'.$tour->id.'.jpg')))
|
|
<!--File exists -->
|
|
<a href="/img/tour/{{$tour->id}}_gross.jpg" data-lightbox="{{$tour->id}}_gross.jpg"
|
|
data-title="{{ $tour->name }}">
|
|
<img src="/img/tour/{{$tour->id}}.jpg" class="mt-3 ml-3">
|
|
</a>
|
|
@else
|
|
<img src="/img/placeholder/tour128x100.jpg" class="mt-3 ml-3">
|
|
@endif
|
|
|
|
<input type="file" class="mt-3 mr-2 form-control" id="bild" style="font-size:20px;"
|
|
name="bild" value="">
|
|
</div>
|
|
|
|
|
|
<div class="form-group" style="display:flex;">
|
|
<label class="ml-2 mt-3" style="width:140px; text-align:left;font-size:18px;"
|
|
for="is_cancelled">Storniert:</label>
|
|
<input class="mt-3 mr-2 form-control" type="checkbox" id="is_cancelled"
|
|
style="font-size:10px;width:20px;" name="is_cancelled"
|
|
@if($tour->is_cancelled)
|
|
checked
|
|
@endif
|
|
>
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
<textarea class="col-12" name="beschreibung" rows="10" cols="50">{{ $tour->beschreibung }}</textarea>
|
|
</div>
|
|
|
|
|
|
<a href="/tour/{{$tour->id}}">
|
|
<div type="submit" class="btn btn-success col-2 mb-2 float-right mr-2">Abbrechen</div>
|
|
</a>
|
|
<button type="submit" class="btn btn-danger col-2 mb-2 float-right mr-2">Speichern</button>
|
|
|
|
</form>
|
|
|
|
<!-- Modal Anzeige start -->
|
|
|
|
<!-- The Modal -->
|
|
<div id="myModal" class="modal">
|
|
|
|
<!-- Modal content -->
|
|
<div class="modal-content">
|
|
<span class="close">×</span>
|
|
<h2>Bitte Zimmer auswählen</h2>
|
|
<!-- Teilnehmer+Raum Anzeige/Auswahl: Nur buchbare -->
|
|
<div class="card-body">
|
|
<ul>
|
|
<!-- Intentional Assignment ! -->
|
|
@if ($room_id="") @endif
|
|
@foreach($rooms as $room)
|
|
@if( $room->room_id != 0 and $room->free_slots >0)
|
|
<!-- Dont show "Ungebucht", room_id=0 and only with available slots -->
|
|
@if ($room_id != $room->room_id)
|
|
@if(strlen($room_id))
|
|
<hr/>
|
|
@endif
|
|
<p style="list-style-type: none;">[{{$room->room_id}}]
|
|
<span>{{$room->room_name}}
|
|
</span><b><a id="booking_link"
|
|
href="/tour/{{$tour->id}}/join4user/{{$room->room_id}}/#USER_ID">
|
|
==> Buchen</a></b>
|
|
</p>
|
|
|
|
<!-- Intentional Assignment ! -->
|
|
@if ($room_id=$room->room_id) @endif
|
|
@endif
|
|
|
|
@if(strlen($room->user_name))
|
|
<li> {{ $room->user_name}}
|
|
</li>
|
|
@endif
|
|
@endif
|
|
@endforeach
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<!--Modal Anzeige end -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 mt-2">
|
|
<div class="card mt-4">
|
|
<div class="card-header"><h5>Teilnehmer</h5></div>
|
|
|
|
<div class="card-body" >
|
|
|
|
<!-- Intentional Assignment ! -->
|
|
@if ($room_id="") @endif
|
|
@foreach($rooms as $room)
|
|
|
|
@if ($room_id != $room->room_id)
|
|
@if($room_id!="")
|
|
@if($room->room_name=="Ungebucht")
|
|
</div> <div style="height:30px;"></div>
|
|
@else
|
|
</div> <div style="height:2px;"></div>
|
|
@endif
|
|
@endif
|
|
|
|
<div style="border:solid;border-width:1px;">
|
|
<div><b>{{$room->room_name}}
|
|
@if( $room->room_name != "Ungebucht" )
|
|
<!-- Delete link only for real room ids -->
|
|
<a id="room_booking_link" class="text-primary ts_tooltip"
|
|
href="/tour/{{$tour->id}}/delete_room/{{$room->room_id}}">
|
|
(X) <span class="ts_tooltiptext">Raum Löschen</span>
|
|
</a>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Intentional Assignment ! -->
|
|
@if ($room_id=$room->room_id) @endif
|
|
@endif
|
|
|
|
@if(strlen($room->user_name))
|
|
<div> {{ $room->user_name}}
|
|
@if( $room->room_name == "Ungebucht" )
|
|
<a href="#" data-user_id="{{$room->user_id}}" id="myBtn"
|
|
class="float-left ts_tooltip">
|
|
(+)
|
|
<span class="ts_tooltiptext">Zimmer zuweisen</span>
|
|
</a>
|
|
@else
|
|
<a href="/tour/{{$tour->id}}/join4user/0/{{$room->user_id}}"
|
|
class="float-left ts_tooltip">
|
|
(-)
|
|
<span class="ts_tooltiptext">Zimmer-Zuweisung löschen</span>
|
|
</a>
|
|
@endif
|
|
|
|
</div>
|
|
@endif
|
|
|
|
|
|
@endforeach
|
|
|
|
</div> <div style="height:2px;"></div>
|
|
|
|
<div class="card-header">
|
|
<p>
|
|
<a href="/tour/{{$tour->id}}/create_room/1" class="text-primary">+ Einzelzimmer
|
|
erstellen</a>
|
|
<!-- <button type="submit" class="btn">+ Einzelzimmer</button> -->
|
|
</p>
|
|
|
|
<p>
|
|
<a href="/tour/{{$tour->id}}/create_room/2" class="text-primary">+ Doppelzimmer
|
|
erstellen</a>
|
|
<!-- <button type="submit" class="btn">+ Doppelzimmer</button> -->
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
const elem = document.querySelector('input[name="start"]');
|
|
const datepicker_start = new Datepicker(elem, {
|
|
'autohide': true,
|
|
'format': 'dd.mm.yyyy',
|
|
'language': 'de'
|
|
});
|
|
|
|
const elem2 = document.querySelector('input[name="deadline"]');
|
|
const datepicker_deadline = new Datepicker(elem2, {
|
|
'autohide': true,
|
|
'format': 'dd.mm.yyyy',
|
|
'language': 'de'
|
|
});
|
|
|
|
//////////////////////////////////////////////////
|
|
// Get the modal
|
|
var modal = document.getElementById("myModal");
|
|
|
|
// Get the button that opens the modal
|
|
//var btn = document.getElementById("myBtn");
|
|
var btns = document.querySelectorAll("#myBtn");
|
|
for (let i = 0; i < btns.length; ++i) {
|
|
//btns[i].user_id=
|
|
btns[i].onclick = function (e) {
|
|
|
|
console.log("** CLICK **")
|
|
console.log(this)
|
|
let user_id = this.dataset.user_id
|
|
|
|
// Jetzt die Links
|
|
var elems = document.querySelectorAll("#booking_link")
|
|
for (var i = 0; i < elems.length; i++) {
|
|
console.log("Before: ")
|
|
console.log(elems[i].href)
|
|
elems[i].href = elems[i].href.replace("#USER_ID", user_id)
|
|
console.log("After:")
|
|
console.log(elems[i].href)
|
|
|
|
}
|
|
|
|
// When the user clicks on the button, open the modal
|
|
e.preventDefault();
|
|
modal.style.display = "block";
|
|
|
|
}
|
|
}
|
|
|
|
// Get the <span> element that closes the modal
|
|
var span = document.getElementsByClassName("close")[0];
|
|
|
|
|
|
// When the user clicks on <span> (x), close the modal, restore the links
|
|
span.onclick = function (e) {
|
|
e.preventDefault();
|
|
modal.style.display = "none";
|
|
|
|
// Jetzt die Links
|
|
var elems = document.querySelectorAll("#booking_link")
|
|
for (var i = 0; i < elems.length; i++) {
|
|
arr = elems[i].href.split("/")
|
|
arr.pop()
|
|
str = arr.join("/") + "/#USER_ID"
|
|
elems[i].href = str
|
|
}
|
|
|
|
}
|
|
|
|
// When the user clicks anywhere outside of the modal, close it
|
|
window.onclick = function (event) {
|
|
if (event.target == modal) {
|
|
modal.style.display = "none";
|
|
}
|
|
}
|
|
</script>
|
|
|
|
@endsection
|