@extends('layouts.layout-2')

@section('content')
    @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
    <h4 class="font-weight-bold py-2 mb-2">
        {{ __('navigation.my_profile') }}
    </h4>
    <div class="card mb-4 mt-3">
        <h5 class="card-header">
            <div class="row">
                <div class="col-md-12">
                    Über Dich
                </div>
            </div>
        </h5>
        <div class="card-body">
            <div class="form-row">
                <div class="form-group col-md-4">
                    @if ($user->hasProfileImage())
                        <div class="text-center" style="border: 1px solid #eee;">
                            <img src="{{ route('response_file', ['user', $user->getProfileImage()]) }}?{{ time() }}" alt="" class=" img-fluid">
                            <br>
                            <a href="{{ route('user_profile_image_delete', ['avatar']) }}"
                                class="btn btn-sm btn-primary mt-2 mb-2"
                                onclick="return confirm('Bild wirklich löschen?');">Bild löschen</a>
                        </div>
                    @else
                        <style>
                            .dz-message {
                                margin: 2rem 0;
                            }
                            .default-style .dz-message {
                                font-size: 1.1em;
                            }
                        </style>
                        {!! Form::open(['action' => route('user_profile_image_upload'), 'class' => 'avatar  px-2', 'enctype' => 'multipart/form-data']) !!}
                            <div class="slim_holder text-center">
                                <div class="slim" style="margin:0 auto;"
                                    data-label='<span class="text-green">Foto-Upload</span><br>(Datei suchen oder Drag & Drop)'
                                    data-fetcher="fetch.php" data-size="600,600" data-min-size="200,200" data-max-file-size="10"
                                    data-status-image-too-small="Bild zu klein<br>min. $0 Pixel"
                                    data-status-file-type="Ungültige Datei<br>bitte nur: $0"
                                    data-status-file-size="Die Datei ist zu groß<br>max. $0 MB"
                                    data-button-confirm-label="bestätigen" data-button-cancel-label="abbrechen"
                                    data-button-confirm-title="bestätigen" data-button-cancel-title="abbrechen"
                                    data-button-rotate-title="drehen" data-ratio="1:1">
                                    <input type="file" name="avatar[]" required />
                                </div>
                            </div>
                            <button class="btn btn-secondary mt-2" type="submit">Foto speichern</button>
                        {!! Form::close() !!}
                    @endif
                </div>
                <div class="form-group col-md-8">
                    {!! Form::open(['action' => route('user_profile'), 'class' => 'form-horizontal']) !!}
                        <input type="hidden" name="user_id" id="user_id" value="@if ($user->id > 0){{ $user->id }}@else new @endif">
                        <label class="form-label" for="about_you">Kurzer Text über Dich (max. 600 Zeichen)</label>
                        {{ Form::textarea('about_you', $user->account->about_you, ['placeholder' => __('Über dich'), 'class' => 'form-control bootstrap-maxlength text-autosize', 'maxlength' => 600, 'rows' => 1, 'id' => 'about_you']) }}
                        <button type="submit" class="btn btn-secondary mt-2">{{ __('save changes') }}</button>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
    <script type="application/javascript">
        $(document).ready(function() {

        });
    </script>
@endsection