@extends('layouts.layout-2-without')

@section('content')


    @if($homeparty_user === null)
        <h4 class="font-weight-bold py-2 mb-2 d-flex justify-content-between align-items-center w-100 ">
            <div>Auszeitparty / {{ $homeparty->name }} - {{ $homeparty->date }}</div>
        </h4>
        @if(Session::has('alert-save'))
            <div class="alert alert-dark-secondary alert-dismissible fade show">
                <div class="font-weight-bold">
                    {{__('saved')}}: 
                    Deine Daten erfolgreich wurden angelegt. Viel Spaß bei der Auszeitparty!
                </div>
            </div>
        @endif
  

        <div class="card mb-4">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h4 class="font-weight-normal mb-0">
                            @if($homeparty_host)
                                @if($homeparty_host->billing_salutation === 'mr')
                                    Dein Gastgeber
                                @else
                                    Deine Gastgeberin
                                @endif
                            @endif
                        </h4>
                        <div class="media align-items-center py-3 mb-3 mt-0">
                            <img src="{{ asset('images/avatar.png') }}" alt="" class="d-block ui-w-80 rounded-circle">
                            <div class="media-body ml-4">
                                <div class="text-body text-big font-weight-semibold mb-0">
                                    @if($homeparty_host)
                                    {{$homeparty_host->billing_firstname}} {{$homeparty_host->billing_lastname}}
                                    @endif
                                </div>
                                <div class="text-muted mb-2"><i class="ion ion-md-mail pr-1"></i>
                                    @if($homeparty_host)
                                        {{ $homeparty_host->billing_email }}
                                    @endif
                                </div>
                                <div class="text-muted mb-2"><i class="ion ion-md-phone-portrait pr-2"></i>
                                    @if($homeparty_host)
                                        {{ $homeparty_host->billing_phone }}
                                    @endif
                                </div>
                            </div>
                
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h4 class="font-weight-normal mb-0">Deine MIVITA Beratung</h4>
                        <div class="media align-items-center py-3 mb-3 mt-0">
                            <img src="{{ asset('images/avatar.png') }}" alt="" class="d-block ui-w-80 rounded-circle">
                            <div class="media-body ml-4">
                                <div class="text-body text-big font-weight-semibold mb-0">
                                    @if($mivita_member)
                                        {{ $mivita_member->account->first_name }} {{ $mivita_member->account->last_name }}
                                    @endif
                                </div>
                                <div class="text-muted mb-2"><i class="ion ion-md-mail pr-1"></i>
                                    @if($mivita_member)
                                        {{ $mivita_member->email }}
                                   @endif
                                </div>
                                <div class="text-muted mb-2"><i class="ion ion-md-phone-portrait pr-2"></i>
                                    @if($mivita_member)
                                        {{ $mivita_member->account->getPhoneNumber() }}
                                   @endif
                                   
                                </div>
                            </div>
                
                        </div>
                    </div>
                </div>        
            </div>
            <div class="progress rounded-0" style="height: 2px;">
                <div class="progress-bar" style="width: 100%;"></div>
            </div>
           <div class="card-body pt-3 pb-3">
                <h4 class="font-weight-normal mb-2">Einladung</h4>
                {{$homeparty->description}}
           </div>
           <div class="card-body pt-0">
               <div class="row">
                   <div class="col">
                       <div class="text-muted small">Datum</div>
                       <div class="font-weight-bold">{{$homeparty->date}}</div>
                   </div>
                   <div class="col">
                       <div class="text-muted small">Veranstaltungsort</div>
                       <div class="font-weight-bold">{{$homeparty->place}}</div>
                   </div>
                   <div class="col">
                       <div class="text-muted small">Straße / Hausnummer</div>
                       <div class="font-weight-bold">
                        @if($homeparty_host)
                            {{ $homeparty_host->billing_address }}
                        @endif
                       </div>
                   </div>
                   <div class="col">
                       <div class="text-muted small">PLZ &amp; Ort</div>
                       <div class="font-weight-bold">
                        @if($homeparty_host)
                            {{ $homeparty_host->billing_zipcode }}  {{ $homeparty_host->billing_city }}
                        @endif
                       </div>
                   </div>
                   <div class="col">
                       <div class="text-muted small">Land</div>
                       <div class="font-weight-bold">
                        @if($homeparty_host && $homeparty_host->billing_country)
                            {{ $homeparty_host->billing_country->de }}
                        @endif
                       </div>
                   </div>
               </div>
           </div>
        </div>
       

        <div class="row">
            <div class="col-12">
                @php($g_count = 1)
                @foreach($homeparty->homeparty_guests as $homeparty_user)
                    <div class="card mb-3">
                        <div class="card-body d-flex justify-content-between align-items-start pt-3 pb-3">
                            <div>
                                <div class="text-body text-big font-weight-semibold">
                                    @if($homeparty_user->is_host)
                                        <span class="text-muted">Gastgeber/in: </span>
                                    @else
                                        <span class="text-muted">Gast {{$g_count++}}: </span>
                                    @endif
                                    {{$homeparty_user->billing_firstname}} {{$homeparty_user->billing_lastname}}
                                </div>
                                {{-- <span class="badge badge-success align-text-bottom ml-1">offen ...</span> --}}
                            </div>
                           {{--   <div>
                                <a href="{{route('homeparty', [$homeparty->token, $homeparty_user->id])}}" class="btn btn-sm btn-secondary mr-2"><i class="fa fa-edit"></i> bearbeiten</a>
                            </div>
                            --}}
                        </div>
                        {{--  <div class="progress rounded-0" style="height: 2px;">
                            <div class="progress-bar" style="width: 100%;"></div>
                        </div>
                        <div class="card-body pt-3">
                            <div class="row">
                                <div class="col">
                                    <div class="text-muted small">Adresse</div>
                                    <div class="font-weight-bold">{{$homeparty_user->billing_address}}
                                        {{$homeparty_user->billing_zipcode}}
                                        {{$homeparty_user->city}}
                                        @if($homeparty_user->billing_country_id){{ $homeparty_user->billing_country->getLocated() }}@endif
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="text-muted small">E-Telefon</div>
                                    <div class="font-weight-bold">{{$homeparty_user->billing_phone}}</div>
                                </div>
                                <div class="col">
                                    <div class="text-muted small">E-Mail</div>
                                    <div class="font-weight-bold">{{$homeparty_user->billing_email}}</div>
                                </div>
                            </div>
                        </div>--}}
                    </div>
                @endforeach
            </div>
        </div>
        <a href="{{route('homeparty', [$homeparty->token, 'new'])}}" class="btn btn-md btn-secondary rounded-pill"><span class="ion ion-md-person-add"></span>&nbsp; als Gast eintragen</a>

    @else
        <h4 class="font-weight-bold py-2 mb-2 d-flex justify-content-between align-items-center w-100 ">
            <div>Auszeitparty / {{ $homeparty->name }} - {{ $homeparty->date }}</div>
            <a href="{{route('homeparty', [$homeparty->token])}}" class="btn btn-sm btn-default float-right">zurück</a>
        </h4>

    {!! Form::open(['url' => route('homeparty', [$homeparty->token, $homeparty_user->id]), 'class' => 'form-horizontal', 'id'=>'homeparty-user-form-validation']) !!}
    @if(Session::has('alert-save'))
        <div class="alert alert-dark-secondary alert-dismissible fade show">
            <div class="font-weight-bold">
            {{__('saved')}}: {{__('The changes have been saved.')}}
            </div>
        </div>
    @endif
    @if ($errors->any())
        <div class="row">
            <div class="col-sm-12">
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    @endif
    <div class="card mb-4">
        <div class="col-md-12 px-4 pt-4">
            <h6 class="mb-2">Eingabe Deiner persönlichen Daten für die Auszeitparty</h6>
            <p>Hinweis: Aus Datenschutzgründen werden Deine persönlichen Daten hier den anderen Teilnehmern nicht angezeigt. Nach dem Absenden können Sie auch nicht mehr bearbeitet werden. Möchtest Du nachträglich eine Änderung vornehmen, wende Dich bitte an Deinen persönlichen MIVITA Berater.</p>
            <hr>
        </div>
        <h5 class="card-header">
            <div class="row">
                <div class="col-xs-12 col-sm-6">
                    @if($homeparty_user->is_host) Gastgeber/in, @else Gast-, @endif Rechungsadresse
                </div>
                <div class="col-xs-12 col-sm-6">
                    <span class="text-tiny float-right">* {{trans('register.required_fields')}}</span>
                    <span class="d-none d-lg-inline">Lieferadresse</span>
                </div>
            </div>
        </h5>
        @include('user.homeparty._edit')
        <hr class="mt-0">
            <div class="form-row px-4">
                <div class="form-group mb-0">
                    <label class="custom-control custom-checkbox m-2 ">
                        <input type="checkbox" class="custom-control-input" name="checkbox_datenverarbeitung" id="checkbox_datenverarbeitung" required>
                        <span class="custom-control-label secondary">
                             <span class="fa fa-angle-double-left text-primary fa-lg"></span>
                             Hiermit willige ich in die im Rahmen der <button type="button" class="btn btn-outline-primary btn-xs update_modal_data_load" data-url="https://my.mivita.test/loading/modal" data-data="data_protection" data-target="#modal-loading">Datenschutzerklärung</button>
genannte Datenverarbeitung ein. Ich wurde darüber informiert, dass ich diese Einwilligung jederzeit widerrufen kann.*
                        </span>
                    </label>
                </div>
            </div>
            <div class="form-row px-4">
                <div class="form-group">
                    <label class="custom-control custom-checkbox m-2">
                        <input type="checkbox" class="custom-control-input" name="checkbox_daten_completely" id="checkbox_daten_completely">
                        <span class="custom-control-label secondary">
                             <span class="fa fa-angle-double-left text-primary fa-lg"></span>
                             Ich bestätige, dass meine Daten richtig und vollständig sind. Eine Änderung ist nach dem Absenden nur noch über meinen persönlichen MIVITA Berater möglich.*
                        </span>
                    </label>
                </div>
            </div>
    </div>
    <div class="text-left mt-3">
        <button type="submit" class="btn btn-secondary mr-2 mb-2" name="action" value="homeparty-user-store"> @if($homeparty_user->id) {{ __('Änderungen speichern') }} @else {{ __('absenden') }} @endif</button>&nbsp;
    </div>
    {!! Form::close() !!}

    <script type="application/javascript">
        $( document ).ready(function() {

            // Shipping Address show|hide
            $("#same_as_billing").on("change", function () {
                $('#show_shipping_address').slideToggle(200, function () {

                    // scroll down to shipping area.
                    if ($('#show_shipping_address').is(":visible")) {
                        _scrollTo('#show_shipping_address', 20);
                    }
                });
            });

            $.extend( $.validator.messages, {
                required: "Dieses Feld ist ein Pflichtfeld.",
                maxlength: $.validator.format( "Geben Sie bitte maximal {0} Zeichen ein." ),
                minlength: $.validator.format( "Geben Sie bitte mindestens {0} Zeichen ein." ),
                rangelength: $.validator.format( "Geben Sie bitte mindestens {0} und maximal {1} Zeichen ein." ),
                email: "Geben Sie bitte eine gültige E-Mail Adresse ein.",
                url: "Geben Sie bitte eine gültige URL ein.",
                date: "Bitte geben Sie ein gültiges Datum ein.",
                number: "Geben Sie bitte eine Nummer ein.",
                digits: "Geben Sie bitte nur Ziffern ein.",
                equalTo: "Bitte denselben Wert wiederholen.",
                range: $.validator.format( "Geben Sie bitte einen Wert zwischen {0} und {1} ein." ),
                max: $.validator.format( "Geben Sie bitte einen Wert kleiner oder gleich {0} ein." ),
                min: $.validator.format( "Geben Sie bitte einen Wert größer oder gleich {0} ein." ),
                creditcard: "Geben Sie bitte eine gültige Kreditkarten-Nummer ein."
            });



            // Set up validator
            $('#homeparty-user-form-validation').validate({
                errorPlacement: function errorPlacement(error, element) {
                    $(element).parents('.form-group').append(
                        error.addClass('invalid-feedback small d-block')
                    )
                },
                highlight: function (element) {
                    if ($(element).hasClass('selectpicker')) {
                        $(element).parent().addClass('is-invalid');
                    }
                    $(element).addClass('is-invalid');
                },
                unhighlight: function (element) {
                    $(element).removeClass('is-invalid');
                    $(element).parents('.form-group').find('.is-invalid').removeClass('is-invalid');
                },
                messages :  {
                    required: "{{__('This field is required.')}}",
                    country_id : {
                        required: "{{__('This field is required.')}}",
                    },
                    salutation : {
                        required: "{{__('Bitte angeben.')}}",
                    },
                    first_name : {
                        required: "{{__('This field is required.')}}",
                    },
                    last_name : {
                        required: "{{__('This field is required.')}}",
                    },
                    zipcode : {
                        required: "{{__('This field is required.')}}",
                    },
                    address : {
                        required: "{{__('This field is required.')}}",
                    },
                    city : {
                        required: "{{__('This field is required.')}}",
                    }
                },
                onkeyup: false
            });

        });
    </script>

    @endif
@endsection