@extends('layouts.app')

@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6 row">
                    <h1 class="mr-4">Edit Profile</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                        <li class="breadcrumb-item active">Edit Profile</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        @if (isset($user))
                            {!! Form::model($user, ['route' => ['update-profile'], 'method' => 'POST', 'files' => true]) !!}
                        @else
                            {!! Form::open(['route' => 'user.store', 'role' => 'form', 'files' => true]) !!}
                        @endif
                        <div class="form-group">
                            <div class="col-md-6">
                                {!! Form::label('name', 'First Name') !!}
                                {!! Form::text('name', Input::old('name'), ['class' => 'form-control', 'required' =>
                                'required']) !!}
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-6">
                                {!! Form::label('email', 'Email') !!}
                                {!! Form::email('email', Input::old('email'), ['autocomplete' => 'off', 'class' =>
                                'form-control', 'required' => 'required']) !!}
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-6">
                                {!! Form::label('password', 'Password') !!}
                                {!! Form::password('password', ['class' => 'form-control', 'autocomplete' => 'off']) !!}
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-6">
                                {!! Form::label('profile', 'Profile picture') !!}
                                <div class="input-group">
                                    <div class="custom-file">
                                        {!! Form::file('profile', ['class' => 'custom-file-input', 'id' => 'profile', 'accept' => 'image/*'])
                                        !!}
                                        <label class="custom-file-label" for="exampleInputFile">Choose file</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @if ($user['profile'] ?? '')
                        <img width="10%" class="mt-2 mb-5 edit-profile-img"
                            src='{{ asset($user['profile']) }}' />
                        @else
                        <img width="10%" class="mt-2 mb-5 edit-profile-img"
                            src='{{ asset('/images/muscleme_logo_r2.png') }}' />
                        @endif
                        <div class="form-group ml-2">
                            {!! Form::submit('Submit', ['class' => 'btn btn-primary']) !!}
                        </div>
                        {{ Form::close() }}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script>
        $('#profile').on('change', function(e) {
            if (this.files && this.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('.edit-profile-img').attr('src', e.target.result);
                }
                reader.readAsDataURL(this.files[0]);
            }
        })

    </script>
@endsection