@extends('template.'.config('settings.template').'.content.master')
@section('head')
<style>
    p{
        font-size: 20px;
        margin-bottom: 23px;
    }
</style>
@stop
@section('content')
<div class="row" style="padding-top: 60px;">
    <div class="col-12 col-md-6">
        <h1 class="mt-2">Alpaka Tour</h1>
        <br>
        <p>
            Nach einer kurzen Einführung starten wir unsere Wanderung
        </p>
        <p>
            Sie lernen das sanftmütige Wesen der Tiere näher kennen und genießen die
            wunderschöne Landschaft. Die Alpakas geben das Tempo vor, so dass die Tour auch für
            Kinder geeignet ist.
        </p>
        <p>
            Allerdings dürfen Kinder unter 10 Jahren nur in Begleitung eines
            Erwachsenen ein Alpaka führen. Während der Wanderung erfahren Sie viel
            Wissenswertes über Alpakas.
        </p>
        <p>
            Unsere Wanderung führt uns größtenteils abseits befahrener Straßen auf Wander - und
            Fußwegen durch die Landschaft rund um unseren Hof.
        </p>
        <p>
            Um die Wanderung bequem genießen zu können, empfehlen wir wandertaugliches
            Schuhwerk und der Witterung angepasste Kleidung.
        </p>
        <p>
            Unsere Alpakawanderungen finden bei jeder Witterung und auch im Winter statt.
        </p>
        <p>
            Hunde dürfen leider nicht mit laufen, weil unsere Alpakas das nicht gewohnt sind.
        </p>
        <p>
            Für Rückfragen und Reservierungen stehen wir Ihnen gerne zur Verfügung und
            freuen uns auf Ihren Besuch.
        </p>
        <h5>Preise</h5>
    <table class="table">
    <thead>
        <tr>
        <th scope="col">Beschreibung</th>
        <th scope="col">Kosten</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <td>Erwachsene</td>
        <td>20 €</td>
        </tr>

        <tr>
            <td>Kinder
                <br>
                <i class="text-muted">10-12 Jahre</i></td>
            </td>
            <td>15 €</td>
        </tr>
        <tr>
            <td>Wanderung ohne Alpaka & Kinder<br>
                <i class="text-muted">6-10 Jahre</i></td>

        <td>5 €</td>
        </tr>

        <tr>
            <td>Kinder bis 6 Jahre<br>


            <td>frei</td>
        </tr>

    </tbody>
    </table>
    </div>
    <div class="col-12 col-md-5 offset-md-1 mt-5">
        <div class="card shadow-lg" style="background-color: #ebe5d84d">
            <div class="card-body">
                @if(session()->has('success'))
                    <div class="alert alert-success">
                        Vielen Dank, wir haben Ihre Anfrage erhalten!
                    </div>
                @endif
                @if(session()->has('error'))
                    <div class="alert alert-danger">
                        {{session()->get('error')}}
                    </div>
                @endif
                <x-form id-name="buchungsformular" channels="antwort-kunde,benachrichtigung-konradenhof,areya">
                    <h4 class="text-center">Alpaka Tour Anfragen</h5>
                    <br>
                    <div class="mb-4">
                        <label for="exampleInputEmail1" class="form-label">Vor und Nachname</label>
                        <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Max Meyer" name="name">
                    </div>
                    <div class="mb-4">
                        <label for="exampleInputEmail1" class="form-label">Telefonnummer</label>
                        <input type="tel" class="form-control" id="exampleInputEmail1" name="tel" aria-describedby="emailHelp" placeholder="09654 5529550">
                    </div>
                    <div class="mb-4">
                        <label for="exampleInputEmail1" class="form-label">E-Mail Adresse</label>
                        <input type="email" class="form-control" name="email" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="vor.nachname@areya.de" >
                    </div>
                    <div class="mb-5">
                        <label for="exampleInputEmail1" class="form-label">Wunschdatum Alpakatour</label>
                        <input type="date" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" min="2021-07-17" name="datum">
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <div class="mb-5">
                                <label for="anzahlerwachsene" class="form-label">Anzahl Erwachsene</label>
                                <select class="form-select" aria-label="Default select example" id="anzahlerwachsene" name="anzahlerwachsene">
                                    <option selected disabled>Anzahl Erwachsene</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                    <option value="9">9</option>
                                    <option value="10">10</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-5">
                                <label for="anzahlkinder" class="form-label">Anzahl Kinder</label>
                                <select class="form-select" aria-label="Default select example" id="anzahlkinder" name="anzahlkinder">
                                    <option selected disabled>Anzahl Kinder</option>
                                    <option value="0">0</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                    <option value="9">9</option>
                                    <option value="10">10</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="mb-5">
                        <label for="anzahlkinder" class="form-label">Anzahl Alpakas</label>
                        <select class="form-select" aria-label="Default select example" id="anzahlalpakas" name="anzahlalpakas">
                            <option selected disabled>Anzahl Alpakas</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                        </select>
                    </div>
                    <br>
                    <div style="margin-left: 20px;">
                        <h5>Kosten</h5>
                        <table class="table" style="display: none;">
                            <thead>
                                <tr>
                                <th scope="col">Anzahl</th>
                                <th scope="col">Beschreibung</th>
                                <th scope="col">Kosten</th>
                                </tr>
                            </thead>
                            <tbody id="extract">
                            </tbody>
                        </table>
                        <p class="fw-light fst-italic" style="font-size:13px;">Geld wird nach Bestätigung per Überweisung oder Bar vor der Tour bezahlt.</p>
                        <input type="hidden" name="kosten" id="kosten">
                    </div>
                    <button type="submit" class="btn btn-ci btn-lg d-block mt-5">
                        <svg style="fill: white; width: 18px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M424 336h-96c-22.1 0-40-17.9-40-40s17.9-40 40-40h88s96-107 96-160-43-96-96-96-96 43-96 96c0 29.8 30.3 76.7 56.9 112H328c-48.5 0-88 39.5-88 88s39.5 88 88 88h96c22.1 0 40 17.9 40 40s-17.9 40-40 40H135.1c26.6-35.3 56.9-82.2 56.9-112 0-53-43-96-96-96S0 299 0 352s96 160 96 160h328c48.5 0 88-39.5 88-88s-39.5-88-88-88zM368 96c0-26.5 21.5-48 48-48s48 21.5 48 47.9c-.5 13.4-20.8 48.2-48 84.4-27.2-36.2-47.5-70.9-48-84.3zM96 436.3c-27.2-36.2-47.5-70.9-48-84.3 0-26.5 21.5-48 48-48s48 21.5 48 47.9c-.5 13.4-20.8 48.2-48 84.4zM96 336c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16zM432 96c0-8.8-7.2-16-16-16s-16 7.2-16 16 7.2 16 16 16 16-7.2 16-16z"/></svg>
                        Alpaka Tour anfragen
                    </button>
                </x-form>
            </div>
        </div>
    </div>
</div>
<section>
    <div class="row text-center" style="font-size: 20px; margin-top:100px;">
        <div class="col-6 col-md-3 mb-5">
            <img src="{{asset('template/images/alpakas-1.jpg')}}" class="img-fluid rounded border shadow-sm" loading="lazy">
        </div>
        <div class="col-6 col-md-3 mb-5">
            <img src="{{asset('template/images/alpakas-4.jpg')}}" class="img-fluid rounded border shadow-sm" loading="lazy">
        </div>
        <div class="col-6 col-md-3 mb-5">
            <img src="{{asset('template/images/alpakas-2.jpg')}}" class="img-fluid rounded border shadow-sm" loading="lazy">
        </div>
        <div class="col-6 col-md-3 mb-5">
            <img src="{{asset('template/images/alpakas-3.jpg')}}" class="img-fluid rounded border shadow-sm" loading="lazy">
        </div>
    </div>
</section>
@stop
@section('scripts')
<script>
    let priceReserveAnzahlErwachsene = 10;
    let priceReserveAnzahlKinder = 5;
    let priceReserveAnzahlAlpakas = 10;
    function addExtractRow(count, total){
        $('#extract').append(`
            <tr>
                <td>${count}x</td>
                <td>Anzahl Alpakas</td>
                <td>${total} €</td>
            </tr>
        `);
    }
    function addExtractTotalRow(value){
        $('#extract').append(`
            <tr class="fw-bolder">
                <td>Gesamt:</td>
                <td></td>
                <td>${value} €</td>
            </tr>
        `);
    }
    $('#anzahlerwachsene').change(function(){ showPrices(); });
    $('#anzahlkinder').change(function(){ showPrices(); });
    $('#anzahlalpakas').change(function(){ showPrices(); });
    function showPrices(){
        $('#extract').html(``);
        let countReserveAnzahlErwachsene = $('#anzahlerwachsene').val() != null?$('#anzahlerwachsene').val():0;
        let totalReserveAnzahlErwachsene = countReserveAnzahlErwachsene*priceReserveAnzahlErwachsene;
        let countReserveAnzahlKinder = $('#anzahlkinder').val() != null?$('#anzahlkinder').val():0;
        let totalReserveAnzahlKinder = countReserveAnzahlKinder*priceReserveAnzahlKinder;
        let countReserveAnzahlAlpakas = $('#anzahlalpakas').val() != null?$('#anzahlalpakas').val():0;
        let totalReserveAnzahlAlpakas = countReserveAnzahlAlpakas*priceReserveAnzahlAlpakas;
        if(totalReserveAnzahlErwachsene > 0) addExtractRow(countReserveAnzahlErwachsene, totalReserveAnzahlErwachsene);
        if(totalReserveAnzahlKinder > 0) addExtractRow(countReserveAnzahlKinder, totalReserveAnzahlKinder);
        if(totalReserveAnzahlAlpakas > 0) addExtractRow(countReserveAnzahlAlpakas, totalReserveAnzahlAlpakas);
        let totalPrice = totalReserveAnzahlErwachsene+totalReserveAnzahlKinder+totalReserveAnzahlAlpakas;
        if(countReserveAnzahlErwachsene != 0 || countReserveAnzahlKinder != 0 || countReserveAnzahlAlpakas != 0) {
            addExtractTotalRow(totalPrice);
            $('#kosten').val(totalPrice);
            $('#extract').parent().show();
        }else $('#extract').parent().hide();
    }
</script>
@stop