@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;
            transform: translateX(200%);
            transition: opacity 1s 0s, transform 0s 1s;
        }
        .form-anchor.show{
            opacity:1;
            transform: translateX(0%);
            transition: opacity 1s 0s, transform 0s 0s;
        }
    </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>






                @if($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
                    @endif
                </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="name" class="form-label">Name:</label>
                                    <input type="name" name="name" class="form-control" id="name" aria-describedby="name" placeholder="Max Mustermann" autocomplete="on" required>
                                </div>

                                <div class="mb-4">
                                    <label for="tel" 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="nachricht">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-3">
            <a href="#lumino-form-sent" id="link-to-form" class="btn btn-primary btn-block">Angebot anfordern
                <svg style="fill: currentColor;width: 17px;margin-left: 4px;margin-bottom: 4px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M454.6 45.3l12.1 12.1c12.5 12.5 12.5 32.8 0 45.3L440 129.4 382.6 72l26.7-26.7c12.5-12.5 32.8-12.5 45.3 0zM189 265.6l171-171L417.4 152l-171 171c-4.2 4.2-9.6 7.2-15.4 8.6l-65.6 15.1L180.5 281c1.3-5.8 4.3-11.2 8.6-15.4zm197.7-243L166.4 243c-8.5 8.5-14.4 19.2-17.1 30.9l-20.9 90.6c-1.2 5.4 .4 11 4.3 14.9s9.5 5.5 14.9 4.3l90.6-20.9c11.7-2.7 22.4-8.6 30.9-17.1L489.4 125.3c25-25 25-65.5 0-90.5L477.3 22.6c-25-25-65.5-25-90.5 0zM80 64C35.8 64 0 99.8 0 144V432c0 44.2 35.8 80 80 80H368c44.2 0 80-35.8 80-80V304c0-8.8-7.2-16-16-16s-16 7.2-16 16V432c0 26.5-21.5 48-48 48H80c-26.5 0-48-21.5-48-48V144c0-26.5 21.5-48 48-48H208c8.8 0 16-7.2 16-16s-7.2-16-16-16H80z"/></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");
            if(input){
                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.disabled = true;
                btnLoad.innerHTML = `
                    <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
                    <span role="status">${message}...</span>
                `;
            }));
        });
    </script>

    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

    <script>
        let formSent = "{!! session()->has('success') !!}";
        if(!formSent){
            // 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');
                    } else {
                        const fixedElementRect = elementToRemove.getBoundingClientRect();
                        const referenceElementRect = targetElement.getBoundingClientRect();

                        if (fixedElementRect.bottom < referenceElementRect.top) {
                            // Show the element to remove
                            elementToRemove.classList.add('show');
                        } else {
                            // Hide the element to remove
                            elementToRemove.classList.remove('show');
                        }
                    }
                    // Stop observing once it's removed (optional)
                    // observer.unobserve(targetElement);
                });
            });

            // Observe the target element
            observer.observe(targetElement);

            document.getElementById('link-to-form').addEventListener('click', function () {
                const nameField = document.getElementById('name');
                nameField.placeholder = "";
                const targetElement = document.querySelector('#lumino-form-sent');

                const observer = new IntersectionObserver(entries => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            let typedOptions = {
                                strings: ['Max Mustermann'],
                                typeSpeed: 50,
                                backSpeed: 25,
                                showCursor: false,
                                startDelay: 500,
                                loop: false,
                                attr: 'placeholder'
                            };

                            if(/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
                                nameField.focus();
                                setTimeout(() => new Typed('#name', typedOptions), 500);
                            }
                            else setTimeout(() => {
                                nameField.focus();
                                setTimeout(() => new Typed('#name', typedOptions), 500);
                            }, 2000);

                            observer.unobserve(targetElement);
                        }
                    });
                });

                observer.observe(targetElement);
            });
        }
    </script>
@stop