@extends('portal.layouts.app', ['activePage' => 'photographers', 'titlePage' => __('Add new photographer')])

@section('content')
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <form method="post" action="{{ route('user.store') }}" autocomplete="off" class="form-horizontal">
                        @csrf
                        @method('post')

                        <div class="card ">
                            <div class="card-header card-header-primary">
                                <h4 class="card-title">{{ __('Add User') }}</h4>
                                <p class="card-category"></p>
                            </div>
                            <div class="card-body ">
                                <div class="row">
                                    <div class="col-md-12 text-right">
                                        <a href="{{ route('user.index') }}" class="btn btn-sm btn-primary">{{ __('Back to list') }}</a>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="row">
                                            <div class="col-sm-4 text-center">
                                                <div class="kv-avatar">
                                                    <div class="file-loading">
                                                        <input id="avatar-1" name="avatar" type="file">
                                                    </div>
                                                </div>
                                                <div class="kv-avatar-hint">
                                                    <small>Select file < 1500 KB</small>
                                                </div>
                                            </div>
                                            <div id="kv-avatar-errors-1" class="center-block"
                                                 style="width:800px;display:none"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-8">
                                        <div class="row">
                                            <label class="col-sm-2 col-form-label">{{ __('Role') }}</label>
                                            <div class="col-sm-7">
                                                <div class="form-group{{ $errors->has('role') ? ' has-danger' : '' }}">
                                                    <select class="form-control" name="role_id" required>
                                                        <option selected readonly="" disabled>--Select Role--</option>
                                                        @foreach(\TCG\Voyager\Models\Role::all() as $role)
                                                            <option value="{{$role->id}}">{{$role->name}}</option>
                                                        @endforeach
                                                    </select>
                                                    @if ($errors->has('name'))
                                                        <span id="name-error" class="error text-danger"
                                                              for="input-name">{{ $errors->first('name') }}</span>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <label class="col-sm-2 col-form-label">{{ __('Name') }}</label>
                                            <div class="col-sm-7">
                                                <div class="form-group{{ $errors->has('name') ? ' has-danger' : '' }}">
                                                    <input
                                                        class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}"
                                                        name="name" id="input-name" type="text"
                                                        placeholder="{{ __('Name') }}"
                                                        value="{{ old('name') }}" required="true"
                                                        aria-required="true"/>
                                                    @if ($errors->has('name'))
                                                        <span id="name-error" class="error text-danger"
                                                              for="input-name">{{ $errors->first('name') }}</span>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <label class="col-sm-2 col-form-label">{{ __('Email') }}</label>
                                            <div class="col-sm-7">
                                                <div class="form-group{{ $errors->has('email') ? ' has-danger' : '' }}">
                                                    <input
                                                        class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}"
                                                        name="email" id="input-email" type="text"
                                                        placeholder="{{ __('Email') }}"
                                                        value="{{ old('email') }}"
                                                        required="true"
                                                        aria-required="true"/>
                                                    @if ($errors->has('email'))
                                                        <span id="email-error" class="error text-danger"
                                                              for="input-email">{{ $errors->first('email') }}</span>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <label class="col-sm-2 col-form-label">{{ __('Phone') }}</label>
                                            <div class="col-sm-7">
                                                <div class="form-group{{ $errors->has('phone') ? ' has-danger' : '' }}">
                                                    <input
                                                        class="form-control{{ $errors->has('phone') ? ' is-invalid' : '' }}"
                                                        name="phone" type="text" placeholder="{{ __('phone') }}"
                                                        value="{{ old('phone') }}" required/>
                                                    @if ($errors->has('phone'))
                                                        <span id="email-error" class="error text-danger"
                                                              for="input-email">{{ $errors->first('phone') }}</span>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <label class="col-sm-2 col-form-label">{{ __('Location') }}</label>
                                            <div class="col-sm-7">
                                                <div
                                                    class="form-group{{ $errors->has('location') ? ' has-danger' : '' }}">
                                                    <input
                                                        class="form-control{{ $errors->has('location') ? ' is-invalid' : '' }}"
                                                        name="location" type="text" placeholder="{{ __('Location') }}"
                                                        value="{{ old('location') }}"/>
                                                    @if ($errors->has('location'))
                                                        <span id="email-error" class="error text-danger"
                                                              for="input-email">{{ $errors->first('location') }}</span>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <label class="col-sm-2 col-form-label">{{ __('Bio') }}</label>
                                            <div class="col-sm-7">
                                                <div class="form-group{{ $errors->has('bio') ? ' has-danger' : '' }}">
                                                <textarea
                                                    class="form-control{{ $errors->has('bio') ? ' is-invalid' : '' }}"
                                                    name="bio" type="text" placeholder="{{ __('Bio') }}"
                                                    value="{{ old('bio') }}"></textarea>
                                                    @if ($errors->has('bio'))
                                                        <span id="email-error" class="error text-danger"
                                                              for="input-email">{{ $errors->first('bio') }}</span>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <label class="col-sm-2 col-form-label" for="input-password">{{ __(' Password') }}</label>
                                            <div class="col-sm-7">
                                                <div class="form-group{{ $errors->has('password') ? ' has-danger' : '' }}">
                                                    <input class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" input type="text" name="password" id="input-password" placeholder="{{ __('Password') }}" value="" required />
                                                    @if ($errors->has('password'))
                                                        <span id="name-error" class="error text-danger" for="input-name">{{ $errors->first('password') }}</span>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer ml-auto mr-auto">
                                <button type="submit" class="btn btn-primary">{{ __('Add User') }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="{{asset('js/plugins/piexif.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/plugins/sortable.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/fileinput.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/locales/fr.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/locales/es.js')}}" type="text/javascript"></script>
    <script src="{{asset('themes/fas/theme.js')}}" type="text/javascript"></script>
    <script src="{{asset('themes/explorer-fas/theme.js')}}" type="text/javascript"></script>

    <!-- the fileinput plugin initialization -->
    <script>
        $("#avatar-1").fileinput({
            theme: 'fas',
            overwriteInitial: true,
            maxFileSize: 1500,
            showClose: false,
            showCaption: false,
            browseLabel: '',
            removeLabel: '',
            browseIcon: '<i class="fa fa-folder-open"></i>',
            removeIcon: '<i class="fa fa-trash"></i>',
            removeTitle: 'Cancel or reset changes',
            elErrorContainer: '#kv-avatar-errors-1',
            msgErrorClass: 'alert alert-block alert-danger',
            defaultPreviewContent: '<img  style="width: 200px" src="{{Storage::disk('public')->url('users/default.png')}}" alt="Your Avatar">',
            layoutTemplates: {main2: '{preview}  {remove} {browse}'},
            allowedFileExtensions: ["jpg", "png", "gif"]
        });
    </script>
@endsection
@section('style')
    <link href="{{asset('css/fileinput.css')}}" media="all" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">
    <link href="{{asset('themes/explorer-fas/theme.css')}}" media="all" rel="stylesheet" type="text/css"/>
    <style>
        .kv-avatar .krajee-default.file-preview-frame, .kv-avatar .krajee-default.file-preview-frame:hover {
            margin: 0;
            padding: 0;
            border: none;
            box-shadow: none;
            text-align: center;
        }

        .kv-avatar {
            display: inline-block;
        }

        .kv-avatar .file-input {
            display: table-cell;
            width: 213px;
        }

        .kv-reqd {
            color: red;
            font-family: monospace;
            font-weight: normal;
        }
    </style>
@endsection