
     <style>
       
        table.table-product,
        table.table-product tr td,
        table.table-product tr th {
            border: none;
        }

        table.table-product tr.border-top td {
            border-top: 1px solid #b8b8b9;
        }

        table.table-product tr.border-bottom td,
        table.table-product tr.border-bottom th {
            border-bottom: 1px solid #b8b8b9;
        }
       

            .btn-md-extra {
                padding: 0.3rem 0.6rem;
                font-size: 0.8rem;
                line-height: 1.5;
                border-radius: 0.25rem;
            }

            .md-btn-extra {
                width: calc(1.7rem + 2px) !important;
                line-height: 1.5rem;
            }

            .form-control.input-extra {
                padding: 0.28rem 0.6rem;
                font-size: 0.8rem;
                font-weight: 500;
                min-height: calc(1.8rem + 2px);
                height: calc(1.8rem + 2px);
                width: 44px;
            }

            .input-group-min-w {
                min-width: 102px;
            }

            .img-extra {
                min-width: 55px;
                max-height: 160px;
            }

            @media (max-width: 767px) {
                .default-style:not([dir=rtl]) div.card-datatable table.dataTable thead th:first-child, .default-style:not([dir=rtl]) div.card-datatable table.dataTable tbody td:first-child, .default-style:not([dir=rtl]) div.card-datatable table.dataTable tfoot th:first-child {
                    padding-left: 0.6rem !important;
                }

                .img-extra {
                    min-width: 35px;
                    max-height: 160px;
                }
            }

    </style>
<div class="card mb-2">
    <h5 class="card-header">
        Deine Shop Domain
    </h5>
    <div class="card-body">
        <div class="form-row">
            <div class="form-group col-md-8">
                <div class="input-group mt-2 mb-2 ">
                    <span class="input-group-prepend">
                        <div class="py-2 px-1">
                            <strong>{{ config('app.shop_domain') }} &nbsp;</strong>
                        </div>
                    </span>
                    {{ Form::text('user_shop_url', $user_shop->url, ['placeholder' => 'z.B. "thomas" oder "dani21" o.ä.', 'class' => 'form-control' . ($errors->has('user_shop_url') ? ' is-invalid' : ''), 'id' => 'user_shop_url', 'required' => true]) }}
                </div>
                @if ($errors->has('user_shop_url'))
                    <span class="invalid-feedback" style="display: inline-block;">
                        <strong>{{ $errors->first('user_shop_url') }}</strong>
                    </span>
                @endif
            </div>
            <div class="form-group col-md-4">
                <div class="px-3 py-0 py-md-3">
                    <div class="badge badge-success" style="display: none" id="user_shop_url_success"><i
                            class="fa fa-check"></i> ist noch frei</div>
                    <div class="badge badge-danger" style="display: none" id="user_shop_url_error"><i
                            class="fa fa-times"></i> nicht verfügbar/Fehler</div>
                </div>
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-sm-10 mb-0">
                <label  class="form-label">Vorschau Domain / URL für Deinen Shop</label>
                <div class="input-group">
                    <span class="input-group-prepend">
                    <button class="btn btn-sm btn-secondary" type="button" title="Kopiert!" data-clipboard-demo data-clipboard-target="#preview_user_shop_url"><i class="ion ion-ios-copy"></i> Domain kopieren</button>
                    </span>
                    {{ Form::text('preview_user_shop_url', $user_shop->getUrlPreview(), ['placeholder' => __('Vorschau Shop-Internet Adresse'), 'class' => 'form-control', 'id' => 'preview_user_shop_url', 'readonly']) }}
                </div>
            </div>
            <div class="form-group col-sm-2 mb-0">
                <label class="form-label">&nbsp;</label>
                <div>
                    <a class="btn btn-sm btn-outline-primary mt-1"  href="{{ $user_shop->getUrlPreview() }}" target="_blank"><i class="ion ion-ios-share-alt"></i></a>
                </div>
            </div>
        </div>
        <p class="mt-2 mb-0"><i>Wird die Domain für den Shop geändert, ist die aktuelle Domain ab sofort nicht mehr aufrufbar, bitte denke daran Deine Kunden zu informieren.</i></p>

    </div>
</div>


<div class="card mb-2">
    <h5 class="card-header">
        Deine Shop Inhalte
    </h5>
    <div class="card-body">
        <div class="form-row">
            <div class="form-group col-md-12 {{ $errors->has('name') ? 'has-error' : '' }}">
                <label class="custom-control custom-checkbox float-right">
                    {!! Form::checkbox('active', 1, $user_shop->active, ['class' => 'custom-control-input']) !!}
                    <span class="custom-control-label">{{ __('Shop aktiv') }}</span>
                </label>
                <label class="form-label" for="name">Dein angezeigter Name (erscheint auf Deiner Shop Seite) max. 50 Zeichen*</label>
                {{ Form::text('name', $user_shop->name, ['placeholder' => __('Shop Titel'), 'class' => 'form-control bootstrap-maxlength', 'maxlength'=>50, 'id' => 'name', 'required' => true]) }}
                @if ($errors->has('name'))
                    <span class="help-block">
                        <strong>{{ $errors->first('name') }}</strong>
                    </span>
                @endif
            </div>
            {{--  
                <div class="form-group col-12">
                <label class="form-label" for="description">Kurzbeschreibung Deines Shops (erscheint auf Deiner Shop Seite) max. 600 Zeichen</label>
                {{ Form::textarea('description', $user_shop->description, ['placeholder' => __('Kurzbeschreibung'), 'class' => 'form-control bootstrap-maxlength text-autosize', 'maxlength'=>600, 'rows' => 1, 'id' => 'description']) }}
            </div>
            --}}

            <div class="form-group col-12">
                <label class="form-label" for="about_you">Kurzer Text über Dich (erscheint auf Deiner Shop Seite) max. 600 Zeichen</label>
                {{ Form::textarea('about_you', $user_shop->about_you, ['placeholder' => __('Über dich'), 'class' => 'form-control bootstrap-maxlength text-autosize', 'maxlength'=>600, 'rows' => 1, 'id' => 'about_you']) }}
                <p class="mt-2 mb-0"><i>Einen kurzen Text über Dich kannst Du in <a class="btn btn-xs btn-outline-primary" href="{{ route('user_profile') }}">"Mein Konto - Mein Profil"</a> hinterlegen, dieser wird automatisch hier eingefügt, kann aber abgeändert werden.</i></p>
            </div>
        </div>

        <div class="form-row">
            {{-- <div class="form-group col-sm-12">
                <hr>
                <label class="custom-control custom-checkbox mt-2">
                    {!! Form::checkbox('pick_up', 1, $user_shop->pick_up, ['class' => 'custom-control-input']) !!}
                    <span class="custom-control-label">Kunden können bei mir persönlich abholen.</span>
                </label>
            </div>
             --}}
            <div class="from-group mb-2 col-md-6">
                <label class="form-label">Deine Kontaktadresse</label>
                {{ Form::textarea('user_address', $user_shop->user_address, ['class' => 'form-control', 'rows' => 5, 'id' => 'user_address']) }}
            </div>
        </div>
    </div>
</div>

<script type="application/javascript">


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

        });
        // Set up validator
        var message = 'Default error message';
        $('#user-shop-form-validations').validate({
            rules: {
                'user_shop_url': {
                    required: true,
                    remote: {
                        url: "{{ route('user_shop_load') }}",
                        type: "post",
                        data: {
                            user_shop_url: function() {
                                return $(
                                    '#user-shop-form-validations :input[name="user_shop_url"]'
                                    ).val();
                            },
                            action: 'validate_url',
                            usid: '{{ $user_shop->id }}',
                        },
                        encode: true,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        dataFilter: function(response) {
                            response = $.parseJSON(response);
                            console.log(response);
                            $('#user_shop_url_success').hide();
                            $('#user_shop_url_error').hide();
                            if (response.success === true) {
                                $('#user_shop_url_success').show();
                                $('#preview_user_shop_url').val(response
                                    .preview_user_shop_url);
                                return true;
                            } else {
                                $('#user_shop_url_error').show();
                                message = response.errors.user_shop_url;
                                console.log(message);

                                $('#preview_user_shop_url').val('');
                                return false;
                            }
                        }
                    }
                },
            },
            errorPlacement: function errorPlacement(error, element) {
                //console.log(error);
                $(element).parents('.form-group').find('.input-group').after(
                    error.addClass('invalid-feedback d-block font-weight-bold')
                )
            },
            highlight: function(element) {
                if($(element).attr('required')){
                    $(element).parent().find('button').removeClass('btn-success');
                    $(element).parent().find('button').addClass('btn-danger');
                    $(element).parent().find('button i').removeClass('fa-check');
                    $(element).parent().find('button i').addClass('fa-times');
                    $(element).removeClass('is-valid');
                    $(element).addClass('is-invalid');
                }
            },
            unhighlight: function(element) {
                if($(element).attr('required')){
                    $(element).removeClass('is-invalid');
                    $(element).addClass('is-valid');
                    $(element).parent().find('button').removeClass('btn-danger');
                    $(element).parent().find('button').addClass('btn-success');
                    $(element).parent().find('button i').removeClass('fa-times');
                    $(element).parent().find('button i').addClass('fa-check');
                    $(element).parents('.form-group').find('.is-invalid').removeClass('is-invalid');
                }
            },
            messages: {
                required: "{{ __('This field is required.') }}",
                user_shop_url: {
                    email: "{{ __('Please enter a valid email address.') }}",
                    remote: function() {
                        return message;
                    }
                },
            },
            onkeyup: function(element) {
                $(element).valid()
            },
        });


    });
</script>


@section('scripts')
@endsection