261 lines
13 KiB
PHP
261 lines
13 KiB
PHP
@extends('template.'.config('settings.template').'.content.master')
|
||
|
||
@section('head')
|
||
<link rel="stylesheet" href="{{storage('assets/libs/intl-tel-input-17.0.0/css/intlTelInput.min.css')}}">
|
||
<style>
|
||
.form-anchor{
|
||
opacity:0;
|
||
}
|
||
.form-anchor.show{
|
||
transition: opacity 1s;
|
||
opacity:1;
|
||
}
|
||
</style>
|
||
@stop
|
||
|
||
@section('content')
|
||
|
||
<div class="pt-3 pb-2 mb-5" style="background-color: {{$_primary_ci_color}}">
|
||
<div class="container">
|
||
<nav style="--bs-breadcrumb-divider: '›';" aria-label="breadcrumb">
|
||
<ol class="breadcrumb text-decoration-none">
|
||
<li class="breadcrumb-item"><a href="{{url('/')}}">Home</a></li>
|
||
<li class="breadcrumb-item"><a href="{{url('/leistungen')}}">Leistungen</a></li>
|
||
<li class="breadcrumb-item active" aria-current="page">{{$content->title}}</li>
|
||
</ol>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-12 col-lg-7">
|
||
<div class="row">
|
||
|
||
<div class="col-12 col-md-11 d-flex">
|
||
<h1 class="mt-3 mb-2 ">{{$content->title}}</h1>
|
||
</div>
|
||
<div class="fw-bolder my-4">
|
||
{!! $content->kurzbeschreibung !!}
|
||
</div>
|
||
|
||
<div class="col-12 col-lg-9">
|
||
<x-img src="{{ $content->image() }}" sizes="(max-width: 330px) 330px, (max-width: 540px) 540px, 720px," class="img-fluid card-img-top"/>
|
||
<br>
|
||
</div>
|
||
<div class="col-12 mb-5 mt-5 fs-5">
|
||
{!! $content->beschreibung !!}
|
||
</div>
|
||
|
||
@isset($content->bilder)
|
||
<div class="col-12 mb-5">
|
||
<h2 class="mb-4 mt-5 h3">Bilder</h2>
|
||
</div>
|
||
@foreach($content->bilder as $image)
|
||
<div class="col-12 col-md-6 col-lg-3 text-center">
|
||
<x-img src="{{$image}}" class="rounded img-fluid border mb-3"/>
|
||
</div>
|
||
@endforeach
|
||
@endisset
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-12 col-lg-4 offset-lg-1" id="lumino-form-sent">
|
||
<div class="card mb-5 mt-5 shadow-lg position-sticky" style="top:5rem;">
|
||
<div class="card-header text-center">
|
||
<h3 class="fs-5 fw-bold">Unverbindlich anfragen</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
@if(session()->has('error'))
|
||
<div class="alert alert-danger mb-4">
|
||
<span class="fw-bold">Fehler!</span>
|
||
<br>
|
||
{{session()->get('error')}}
|
||
</div>
|
||
@endif
|
||
|
||
@if(session()->has('success'))
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="alert alert-success" id="successful-submitting-form" role="alert">
|
||
<div class="row text-center">
|
||
<div class="col-12" style="text-align: center;">
|
||
<script src="{{storage('assets/libs/lottie-player-0.4.0.js')}}"></script>
|
||
|
||
<lottie-player src="{{storage('assets/animations/form-sent.json')}}" background="transparent" speed="1" style="width: 190px; height: 190px; display: inline-block;" autoplay loop></lottie-player>
|
||
</div>
|
||
<div class="col-12">
|
||
<h2 class="mt-3 fs-4 text-muted">Anfrage erfolgreich abgesendet!</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@else
|
||
<x-form id="anfrage" class="form-load" id-name="anfrage" channels="email-anfrage,bestaetigung-kunde">
|
||
<div class="mb-4">
|
||
<label for="exampleInputEmail1" class="form-label">Name:</label>
|
||
<input type="name" name="name" class="form-control" id="name" aria-describedby="emailHelp" placeholder="Max Mustermann" autocomplete="on" required>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<label for="exampleInputEmail1" class="form-label">Telefonnummer:</label>
|
||
<input type="tel" name="tel" class="form-control phone" id="tel" aria-describedby="emailHelp" placeholder="0170 1234 56478" autocomplete="on">
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<label for="email" class="form-label">E-Mail:</label>
|
||
<input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="beispiel@areya.de" autocomplete="on" required>
|
||
</div>
|
||
|
||
<div class="form-floating mb-4">
|
||
<textarea style="height: 80px;" name="nachricht" class="form-control" placeholder="Leave a comment here" id="nachricht"></textarea>
|
||
<label for="floatingTextarea">Nachricht</label>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<i class="text-muted small">Wir verwenden Ihre Daten ausschließlich gemäß unserer <a href="{{url('/datenschutz')}}" class="text-decoration-none" >Datenschutzerklärung</a>.</i>
|
||
</div>
|
||
|
||
<div class="d-grid gap-2">
|
||
<button type="submit" d-load-message="Wird verschickt" class="btn btn-primary btn-block btn-load">Anfrage unverbindlich absenden
|
||
<svg style="fill: currentColor;width: 17px;margin-left: 6px;margin-bottom: 4px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z"/></svg>
|
||
</button>
|
||
</div>
|
||
</x-form>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
@php($otherContents = filterByContentType("Leistungen")->filter(function ($item) use ($content) { return $item->id != $content->id; }))
|
||
|
||
@if($otherContents->isNotEmpty())
|
||
<div class="row mb-5">
|
||
<div class="col-12">
|
||
<hr class="pb-5 mt-5">
|
||
<h2 class="mb-4 mt-5 h3">Weitere Leistungen</h2>
|
||
</div>
|
||
|
||
@foreach($otherContents->take(3) as $index => $otherContent)
|
||
|
||
<div class="col-12 col-md-6 col-lg-4 mb-3">
|
||
<a href="{{$otherContent->path}}" class="text-decoration-none">
|
||
<div class="card shadow-sm h-100" data-aos="fade-up" data-aos-delay="{{$index * 250}}">
|
||
<x-img src="{{$otherContent->image()}}" class="img-fluid card-img-top"/>
|
||
<div class="card-body">
|
||
<h3 class="h5 mb-3">{{$otherContent->title}}</h3>
|
||
{{$otherContent->kurzbeschreibung}}
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
@endforeach
|
||
|
||
</div>
|
||
@endif
|
||
</div>
|
||
|
||
<div class="fixed-bottom d-lg-none text-center pb-3 form-anchor">
|
||
|
||
<div class="d-grid gap-2 px-4">
|
||
<a href="#lumino-form-sent" class="btn btn-primary btn-block">Angebot anfordern
|
||
<svg style="fill: currentColor;width: 17px;margin-left: 6px;margin-bottom: 4px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z"/></svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
@stop
|
||
@section('scripts')
|
||
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
|
||
<script>
|
||
const shareData = {
|
||
title: "{{ $content->title }}",
|
||
text: 'Text',
|
||
url: window.location.href,
|
||
}
|
||
</script>
|
||
<!-- <script src="{{ asset('template/js/pages/news/methods.js') }}"></script>
|
||
<script src="{{ asset('template/js/pages/news/events.js') }}"></script>
|
||
<script src="{{ asset('template/js/pages/news/script.js') }}"></script> -->
|
||
<script src="{{ asset('template/assets/libs/intl-tel-input-17.0.0/js/intlTelInput.min.js') }}"></script>
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", () => {
|
||
let baseUrl = document.querySelector("meta[name=url-base]").getAttribute('content');
|
||
|
||
let input = document.querySelector(".phone");
|
||
let iti = window.intlTelInput(input, {
|
||
initialCountry: "de",
|
||
geoIpLookup: function(callback) {
|
||
$.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
|
||
var countryCode = (resp && resp.country) ? resp.country : "us";
|
||
callback(countryCode);
|
||
});
|
||
},
|
||
utilsScript: baseUrl+"/template/assets/libs/intl-tel-input-17.0.0/js/utils.min.js"
|
||
});
|
||
|
||
$("#anfrage").submit(function() {
|
||
if (iti.isValidNumber() == false) {
|
||
alert('Telefonnummer nicht gültig!');
|
||
return false;
|
||
}
|
||
return true;
|
||
});
|
||
});
|
||
</script>
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", () => {
|
||
document.querySelectorAll(".form-load").forEach(formLoad => formLoad.addEventListener("submit", () => {
|
||
let btnLoad = formLoad.querySelector('.btn-load');
|
||
let message = btnLoad.getAttribute('d-load-message');
|
||
|
||
btnLoad.innerHTML = `
|
||
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
|
||
<span role="status">${message}...</span>
|
||
`;
|
||
}));
|
||
});
|
||
</script>
|
||
|
||
|
||
<script>
|
||
// Get the elements
|
||
const targetElement = document.querySelector('#lumino-form-sent');
|
||
const elementToRemove = document.querySelector('.form-anchor');
|
||
|
||
// Create an Intersection Observer
|
||
const observer = new IntersectionObserver(entries => {
|
||
entries.forEach(entry => {
|
||
// If target element is visible
|
||
if (entry.isIntersecting) {
|
||
// Remove the element to remove
|
||
elementToRemove.classList.remove('show');
|
||
setTimeout(() => elementToRemove.style.display = 'none', 1000);
|
||
} else {
|
||
const fixedElementRect = elementToRemove.getBoundingClientRect();
|
||
const referenceElementRect = targetElement.getBoundingClientRect();
|
||
|
||
if (fixedElementRect.bottom < referenceElementRect.top) {
|
||
// Show the element to remove
|
||
elementToRemove.style.display = 'block';
|
||
setTimeout(() => elementToRemove.classList.add('show'), 1000);
|
||
} else {
|
||
// Hide the element to remove
|
||
//elementToRemove.style.display = 'none';
|
||
elementToRemove.classList.remove('show');
|
||
setTimeout(() => elementToRemove.style.display = 'none', 1000);
|
||
}
|
||
}
|
||
// Stop observing once it's removed (optional)
|
||
// observer.unobserve(targetElement);
|
||
});
|
||
});
|
||
|
||
// Observe the target element
|
||
observer.observe(targetElement);
|
||
|
||
</script>
|
||
@stop
|