@extends('template.'.config('settings.template').'.content.master')
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1 class="mt-4 mb-5">Kontakt</h2>
            </div>

            <div class="col-md-4 text-center">
                <div class="icon-box-2">
                    <div class="icon-box-content">
                        <svg style="fill: {{$_title_color}} ; width: 70px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M487.8 24.1L387 .8c-14.7-3.4-29.8 4.2-35.8 18.1l-46.5 108.5c-5.5 12.7-1.8 27.7 8.9 36.5l53.9 44.1c-34 69.2-90.3 125.6-159.6 159.6l-44.1-53.9c-8.8-10.7-23.8-14.4-36.5-8.9L18.9 351.3C5 357.3-2.6 372.3.8 387L24 487.7C27.3 502 39.9 512 54.5 512 306.7 512 512 307.8 512 54.5c0-14.6-10-27.2-24.2-30.4zM55.1 480l-23-99.6 107.4-46 59.5 72.8c103.6-48.6 159.7-104.9 208.1-208.1l-72.8-59.5 46-107.4 99.6 23C479.7 289.7 289.6 479.7 55.1 480z"/></svg>
                        <p class="mt-4">
                            Telefon: <a href="tel://{{$_telefonnummer}}" class="text-decoration-none">{{$_telefonnummer}}</a>
                        </p>
                        <br>
                        <br>
                        <br>
                    </div>
                </div>
            </div>

            <div class="col-md-4 text-center">
                <div class="icon-box-2">
                    <svg style="fill: {{$_title_color}}; width: 70px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C118.941 8 8 118.919 8 256c0 137.058 110.919 248 248 248 52.925 0 104.68-17.078 147.092-48.319 5.501-4.052 6.423-11.924 2.095-17.211l-5.074-6.198c-4.018-4.909-11.193-5.883-16.307-2.129C346.93 457.208 301.974 472 256 472c-119.373 0-216-96.607-216-216 0-119.375 96.607-216 216-216 118.445 0 216 80.024 216 200 0 72.873-52.819 108.241-116.065 108.241-19.734 0-23.695-10.816-19.503-33.868l32.07-164.071c1.449-7.411-4.226-14.302-11.777-14.302h-12.421a12 12 0 0 0-11.781 9.718c-2.294 11.846-2.86 13.464-3.861 25.647-11.729-27.078-38.639-43.023-73.375-43.023-68.044 0-133.176 62.95-133.176 157.027 0 61.587 33.915 98.354 90.723 98.354 39.729 0 70.601-24.278 86.633-46.982-1.211 27.786 17.455 42.213 45.975 42.213C453.089 378.954 504 321.729 504 240 504 103.814 393.863 8 256 8zm-37.92 342.627c-36.681 0-58.58-25.108-58.58-67.166 0-74.69 50.765-121.545 97.217-121.545 38.857 0 58.102 27.79 58.102 65.735 0 58.133-38.369 122.976-96.739 122.976z"/></svg>
                    <div class="icon-box-content">
                        <p class="mt-4">
                            <a href="mailto:{{config('settings.contact_email')}}" class="text-decoration-none">
                                {{config('settings.contact_email')}}
                            </a>
                        </p>
                        <br>
                        <br>
                        <br>
                    </div>
                </div>
            </div>

            <div class="col-md-4 text-center">
                <div class="icon-box-2">
                    <svg style="fill: {{$_title_color}}; width: 70px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M570.53,242,512,190.75V48a16,16,0,0,0-16-16H400a16,16,0,0,0-16,16V78.75L298.53,4a16,16,0,0,0-21.06,0L5.47,242a16,16,0,0,0,21.07,24.09L64,233.27V464a48.05,48.05,0,0,0,48,48H464a48.05,48.05,0,0,0,48-48V233.27l37.46,32.79A16,16,0,0,0,570.53,242ZM480,464a16,16,0,0,1-16,16H112a16,16,0,0,1-16-16V205.27l192-168,192,168Zm0-301.25-64-56V64h64ZM208,218.67V325.34A26.75,26.75,0,0,0,234.66,352H341.3A26.76,26.76,0,0,0,368,325.34V218.67A26.75,26.75,0,0,0,341.3,192H234.66A26.74,26.74,0,0,0,208,218.67ZM240,224h96v96H240Z"/></svg>
                    <div class="icon-box-content">
                        <p class="mt-4">
                            <strong>{{$_legal_name}}</strong>
                            <br>
                            {{$_legal_address}}
                            <br>
                            {{$_legal_zip_code}} {{$_legal_city}}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>


    @if($_show_contactform)

        <style>
            .form-control{
                background-color: {{$_primary_ci_color}}20;
            }
            .form-control:focus{
                background-color: {{$_primary_ci_color}}30;
            }


        </style>

        <div class="container-fluid py-5 bg-secondary">
            <div class="container py-5">
                <div class="row">
                    <div class="col-12">
                        <h2 class="h3 mb-5">Kontaktforumlar</h2>
                    </div>

                    <div class="col-12 col-lg-7 offset-lg-4">

                        @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;">
                                                <lottie-player src="https://assets6.lottiefiles.com/packages/lf20_mddh5ano.json" background="transparent" speed="1" style="width: 190px; height: 190px; display: inline-block;" autoplay></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="kontaktformular" id-name="kontaktformular" channels="kunde-bestaetigung,anfrage-kontaktformular" >
                                    <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" id="tel" aria-describedby="emailHelp" placeholder="0170 1234 56478" autocomplete="on">
                                    </div>

                                    <div class="mb-4">
                                        <label for="exampleInputEmail1" class="form-label">E-Mail:</label>
                                        <input type="name" name="email"class="form-control" id="email" aria-describedby="emailHelp" placeholder="beispiel@areya.de" autocomplete="on">
                                    </div>


                                    <div class="form-floating mb-4">
                                        <textarea style="height: 160px;" class="form-control" placeholder="Leave a comment here" id="nachricht" name="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="text-end">
                                        <button type="submit" class="btn btn-primary">Abschicken
                                            <svg style="fill: currentColor;width: 17px;margin-left: 6px;margin-bottom: 4px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><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>
    @endif


    <div class="container-fluid">
        @if(isset($_COOKIE["cookies-consent"]) && $_COOKIE["cookies-consent"])

            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2616.891113063286!2d12.10357687683789!3d49.0126564898375!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x479fc10aad3c56e3%3A0x4e1e3fd12a6be9a3!2sImmobilienverwaltung%20V%C3%B6lkl!5e0!3m2!1sde!2sde!4v1692953660472!5m2!1sde!2sde" width="100%" height="600" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        @else
            <div class="container">
                <div class="row">
                    <div class="col text-center p-5">
                        <h5>Google Maps ist derzeit deaktiviert</h5>
                        <br>
                        <i class="text-muted small">Sie müssen laut unser Datenschutzbestimmungen Cookies akzeptieren um externe Dienste nutzen zu können</i>

                        <br>
                        <br>
                        <a href="" class="btn btn-outline-primary btn-sm">Google Maps anzeigen</a>
                    </div>
                </div>

            </div>
        @endif
    </div>



@stop
    @section('scripts')
@stop