@extends('main-template')

@section('content')

    {!! NoCaptcha::renderJs() !!}
    <div id="register-dialog" class="mfp-with-anim mfp-dialog clearfix">
        <i class="fa fa-edit dialog-icon hidden-md hidden-sm hidden-xs"></i>
        <h1 class="page-title">sign up</h1>
{{--        <h5>Please complete the form below</h5>--}}

        @include('layouts/form_errors')


        <form method="POST" action="{{ url('/register') }}" class="dialog-form" autocomplete="off">
            {!! csrf_field() !!}

            <div class="form-group">
                <label class="sign-label-color">first name</label>
                <input type="text" placeholder="first name" class="form-control" name="first_name" value="{{ old('first_name') }}">
            </div>

            <div class="form-group">
                <label class="sign-label-color">last name</label>
                <input type="text" placeholder="last name" class="form-control" name="last_name" value="{{ old('last_name') }}">
            </div>

            <div class="form-group">
                <label class="sign-label-color">username</label>
                <input type="text" placeholder="username" class="form-control" name="username" value="{{ old('username') }}">
            </div>

            <div class="form-group">
                <label class="sign-label-color">email</label>
                <input type="text" placeholder="email@domain.com" class="form-control" name="email" value="{{ old('email') }}">
            </div>

            <div class="form-group">
                <label class="sign-label-color">country</label>
                @include('blocks.selectbox-countries', [
                'countries' => $countries,
                'name' => 'country_id'
                ])
            </div>

            <div class="form-group">
                <label for="user_type" class="sign-label-color">type of account</label>
                <select class="form-control" name="user_type">
                    <option value="" selected disabled="disabled">please select user type</option>
                    @foreach($user_types as $ut)
                        <option @if(old('user_type') == $ut->id) selected @endif value="{{ $ut->id }}">{{ $ut->long_name }}</option>
                    @endforeach
                </select>
            </div>


            <div class="form-group">
                <label class="sign-label-color">password</label>
                <input type="password" placeholder="my secret password" name="password" class="form-control" value="">
            </div>
            <div class="form-group">
                <label class="sign-label-color">repeat password</label>
                <input type="password" placeholder="type your password again" name="password_confirmation" class="form-control" value="">
            </div>
            <div class="form-group">
                {!! NoCaptcha::display() !!}
            </div>

{{--            <div class="form-group">--}}
{{--                <div class="checkbox">--}}
{{--                    <input type="checkbox" id="is_buyer" name="is_buyer" value="1"> <label for="is_buyer" style="font-size: 1.8rem;"><strong>I am Buyer</strong></label>--}}
{{--                </div>--}}
{{--            </div>--}}
            <div class="form-group">
                <div class="checkbox">
                    <input type="checkbox" id="subscribe" name="subscribe">
                    <label class="sign-label-color" for="subscribe">tick to subscribe to salvoNEWS <br />don’t worry we’re mailbox minimalists</label>
                </div>
            </div>
            <hr/>
            <input type="submit" value="sign up" class="btn btn-default sing-up-input">
        </form>

        <div class="form-group col-xs-8 sign-up-already">
            <span>already got an account?</span>
            <a class="popup-text" href="{{ url('login') }}" data-effect="mfp-zoom-out"><button class="btn btn-dark">sign in here</button></a>
        </div>

{{--        <ul class="dialog-alt-links">--}}

{{--            <li><a class="popup-text" href="{{ url('login') }}" data-effect="mfp-zoom-out"></a></li>--}}
{{--        </ul>--}}
    </div>

@stop


<!-- mfp-hide -->