@extends('adminlte::page')

@section('title', 'Reef | User')
@section('content_header')
    <h1 class="m-0 text-dark">New User</h1>
@stop

@section('css')
  <link rel="stylesheet" href="{{ mix('css/admin-style.css') }}">
@stop

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">New User Info</h3>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('dashboard_user_save') }}" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-4 border-right">
                                <div class="d-flex flex-column align-items-center text-center p-3 py-5">
                                    <input name="avatar" type='file' id="imgInp" style="display:none">
                                    <img id="user_image" class="rounded-circle mt-5" src="{{ route('file_storage_serve', ['params' => 'images', 'file' => 'avatar.png']) }}"
                                     width="200" style="cursor: pointer">
                                    <span>Click to change image</span>
                                    @if ($errors->has('avatar'))
                                    <span class="help-block error">
                                    <strong>{{ $errors->first('avatar') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-8">
                                <div class="p-3 py-5">
                                    <div class="row mt-2">
                                        <div class="col-md-6">
                                            <select id="role-select" name="role" class="form-control" required>
                                                @php
                                                $user_role = Auth::user()->user_role();
                                                @endphp
                                                <option value="" disabled selected>Select role</option>
                                                @foreach($roles as $role)
                                                    @if($role->id > $user_role->id)
                                                    <option value="{{ $role->id }}">{{ $role->name }}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>

                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-md-6">
                                            <input name="first_name" type="text" class="form-control{{ $errors->has('first_name') ? ' is-invalid' : '' }}" value="{!! old('first_name') !!}" placeholder="First Name" required>
                                            @if ($errors->has('first_name'))
                                            <span id="first_name-error" class="error invalid-feedback">{{ $errors->first('first_name') }}</span>
                                            @endif
                                        </div>
                                        <div class="col-md-6">
                                            <input name="last_name" type="text" class="form-control{{ $errors->has('last_name') ? ' is-invalid' : '' }}" value="{!! old('last_name') !!}" placeholder="Last Name" required>
                                            @if ($errors->has('last_name'))
                                            <span id="last_name-error" class="error invalid-feedback">{{ $errors->first('last_name') }}</span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-md-6">
                                            <input name="email" type="text" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" value="{!! old('email') !!}" placeholder="Email" required>
                                            @if ($errors->has('email'))
                                            <span id="email-error" class="error invalid-feedback">{{ $errors->first('email') }}</span>
                                            @endif
                                        </div>
                                        <div class="col-md-6">
                                            <input name="username" type="text" class="form-control{{ $errors->has('username') ? ' is-invalid' : '' }}" value="{!! old('username') !!}" placeholder="Username" required>
                                            @if ($errors->has('username'))
                                            <span id="username-error" class="error invalid-feedback">{{ $errors->first('username') }}</span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-md-6">
                                            <input name="password" type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" placeholder="Password" required>
                                            @if ($errors->has('password'))
                                            <span id="password-error" class="error invalid-feedback">{{ $errors->first('password') }}</span>
                                            @endif
                                        </div>
                                        <div class="col-md-6">
                                            <input name="password_confirmation" type="password" class="form-control{{ $errors->has('password_confirmation') ? ' is-invalid' : '' }}" placeholder="Password Confirmation" required>
                                            @if ($errors->has('password_confirmation'))
                                            <span id="password_confirmation-error" class="error invalid-feedback">{{ $errors->first('password_confirmation') }}</span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="mt-5 text-right"><button class="btn btn-primary profile-button" type="submit">Add User</button></div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@stop

@section('js')
<script type="text/javascript">
    $(document).ready( function () {
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#user_image').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }

        $("#imgInp").change(function(){
            readURL(this);
        });

        $('#user_image').click(function(){ $('#imgInp').trigger('click'); });

        $('#role-select').change(function(){
            if($(this).val() == '1' || $(this).val() == '2' || $(this).val() == '3'){
                $('#language-select').css('display', 'block');
            } else {
                $('#language-select').css('display', 'none');
            }
        });

        @if(session()->has('error'))
          $(document).Toasts('create', {
            class: 'bg-danger',
            title: 'Error',
            body: '{!! session()->get('error') !!}',
            autohide: true,
            delay: 5000
          })
        @elseif(session()->has('success'))
          $(document).Toasts('create', {
            class: 'bg-success',
            title: 'Success',
            body: '{!! session()->get('success') !!}',
            autohide: true,
            delay: 5000
          });
        @endif
    } );
</script>
@stop