@extends('layouts.layout-2')

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

    @if(!$homeparty->completed)
    <div class="card mb-3">
        <div class="card-body py-3">
            <div class="form-group mb-0">
                <label  class="form-label">{{ __('homeparty.invitation_link_for_guests') }} <span class="text-muted"> ({{ __('homeparty.let_your_guests_fill_in_their_own_details') }})</span></label>
                <div class="input-group">
                <span class="input-group-prepend">
                <button class="btn btn-sm btn-secondary" type="button" title="{{ __('homeparty.copy') }}" data-clipboard-demo data-clipboard-target="#homeparty_link_{{$homeparty->id}}"><i class="ion ion-ios-copy"></i> {{ __('homeparty.copy_link') }}</button>
                </span>
                    <input type="text" class="form-control" name="homeparty_link_{{$homeparty->id}}" value="{{ $homeparty->getTokenLink() }}" id="homeparty_link_{{$homeparty->id}}" placeholder="">
                </div>
            </div>
        </div>
    </div>
    @endif
    {!! Form::open(['action' => route('user_homeparty_guest_detail', [$homeparty->id, $homeparty_user->id]), 'class' => 'form-horizontal', 'id'=>'homeparty-user-form-validation']) !!}
    <div class="card mb-4">
        <h5 class="card-header">
            <div class="row">
                <div class="col-xs-12 col-sm-6">
                    @if($homeparty_user->is_host) {{ __('homeparty.host') }}, @else {{ __('homeparty.guest') }}, @endif {{ __('homeparty.invoice_address') }} 
                </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">{{ __('Delivery address') }}</span>
                </div>
            </div>
        </h5>
        @include('user.homeparty._edit')
    </div>
    <div class="text-left mt-3">
        <button type="submit" class="btn btn-secondary mr-2 mb-2" name="action" value="homeparty-user-store">{{ __('save') }}</button>&nbsp;
        <a href="{{route('user_homeparty_guests', [$homeparty->id])}}" class="btn btn-default mb-2">{{ __('back_to_overview') }}</a>
    </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: "{{__('account.validator_required')}}",
                maxlength: $.validator.format( "{{__('account.validator_maxlength')}}" ),
                minlength: $.validator.format( "{{__('account.validator_minlength')}}" ),
                rangelength: $.validator.format( "{{__('account.validator_rangelength')}}" ),
                email: "{{__('account.validator_email')}}",
                url: "{{__('account.validator_url')}}",
                date: "{{__('account.validator_date')}}",
                number: "{{__('account.validator_number')}}",
                digits: "{{__('account.validator_digits')}}",
                equalTo: "{{__('account.validator_equalTo')}}",
                range: $.validator.format( "{{__('account.validator_range')}}" ),
                max: $.validator.format( "{{__('account.validator_max')}}" ),
                min: $.validator.format( "{{__('account.validator_min')}}" ),
                creditcard: "{{__('account.validator_creditcard')}}"
            });
    



            // 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: "{{__('please specify')}}",
                    },
                    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>

    <script>
        $( document ).ready(function() {
            var clipboardDemos = new ClipboardJS('[data-clipboard-demo]');
            clipboardDemos.on('success', function (e) {
                e.clearSelection();
                $(e.trigger).tooltip('enable').tooltip('show');
            });
            clipboardDemos.on('error', function (e) {
                console.error('Action:', e.action);
                console.error('Trigger:', e.trigger);
            });

            $('button[data-clipboard-demo]').on('mouseout', function () {
                $(this).tooltip('disable');
            })
        });
    </script>
@endsection