@extends('layouts.auth')
@section('content')
    <script src='https://www.google.com/recaptcha/api.js'></script>
    <div class="row ">
        <div class="col-md-4 py-5 text-white text-center bg-image-signup ">
            <div class=" ">
                <div class="card-body text-left">
                    <h2 class="py-3">Bliv en
                        Video Coach</h2>

                </div>
            </div>
        </div>

        <div class="col-md-7 p-5 register-form ">
            <h4 class="pb-4">General information</h4>
            <form method="post" enctype="multipart/form-data" id="coaches-form"
                  action="{{ route('coach.users.submit') }}" data-type="coach">

                {{ csrf_field() }}
                @include('common.flash_messages')
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="first_name" class="required">E-mail</label>
                        <input id="email" name="user[email]" class="form-control" type="text"
                               value="{{old('user.email')}}" autocomplete="off">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="first_name" class="required">Vælg land</label>

                        {{ Form::select('general[country]', [null=>'Vælg land'] + $countries, old('general.country') , ['class' => 'form-control ','id'=>'country','autocomplete'=>'off']) }}

                    </div>
          {{--          <div class="form-group col-md-6">
                        <label for="first_name" class="required">Invitationskode (hvem inviterede dig?)</label>
                        <input type="text" name="general[referral_invite_code]" class="form-control"
                               id="referral_invite_code" value="{{old('general.referral_invite_code')}}"
                               autocomplete="off">
                    </div>--}}
                </div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="first_name" class="required">Adgangskode  <i data-toggle="tooltip" data-placement="right" title="" class="fa fa-question-circle" data-original-title="Adgangskoden skal være på over 8 tegn, indeholde 1 stort bogstav, 1 tal og 1 specialtegn"></i></label>
                        <input id="password" name="user[password]" class="form-control" type="password"
                               autocomplete="off">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="first_name" class="required">Gentag Adgangskode</label>
                        <input type="password" class="form-control" name="user[password_confirmation]" id="password1"
                               autocomplete="off">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="first_name" class="required">Fornavn</label>
                        <input id="first_name" name="user[first_name]" class="form-control" type="text"
                               value="{{old('user.first_name')}}" autocomplete="off">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="first_name" class="required">Efternavn</label>
                        <input type="text" class="form-control" id="last_name" name="user[last_name]"
                               value="{{old('user.last_name')}}" autocomplete="off">
                    </div>
                </div>

                <div class="form-row">

                 {{--   <div class="form-group col-md-6">
                    <label for="first_name" class="">your own invitation code <span class="need-invite">(when you invite others)</span></label>
                        <input id="invite_code" value="{{old('general.invite_code')}}" name="general[invite_code]"
                               class="form-control" type="text" autocomplete="off">
                    </div>--}}


                </div>
                <h4 class="pb-4 py-4">Coach profil</h4>

                <div class="form-row">
                    <div class="form-group col-md-10">
                        <label for="first_name" class="">Profilbillede</label>
                        <div class="custom-file">


                            <input type="file" class="form-control-file" id="photo" name="photo"
                                   accept="image/jpeg, image/png" autocomplete="off">

                            <small class="form-text text-muted">Filen skal være jpg,png,mindre end 2mb og minimum billedopløsning er 500 x 500</small>
                        </div>
                    </div>


                </div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="comment" class="required">Tekst om dig selv</label>
                        <textarea name="general[introduction]" autocomplete="off" class="form-control" rows="5"
                                  id="introduction"
                                  placeholder="Her kan du skrive detaljeret om dig selv.">{{old('general.introduction')}}</textarea>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="comment" class="required">Ekspertise</label>
                        <textarea name="general[expertise]" autocomplete="off" class="form-control" rows="5"
                                  id="expertise" placeholder="Tilføj nogle nøgleord for at beskrive, hvad din ekspertise er. Dette kunne være foredragsholder, ledelse, coaching osv.
                                    ">{{old('general.expertise')}}</textarea>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="first_name" class="required">Website</label>
                        <input id="website" name="general[website]" value="{{old('general.website')}}"
                               class="form-control" type="text" autocomplete="off">
                    </div>

                    <div class="form-group col-md-6">
                        <label>Telefonnummer</label>
                        <div class="mobilem signup"><input id="phone" name="general[mobile]"
                                                           value="{{old('general.mobile')}}" class="form-control"
                                                           type="text" autocomplete="off"></div>

                    </div>
                </div>
                <div class="form-row">
                    <div class="form-check pt-3">
                        <label class="form-check-label">
                            <input type="checkbox" class="form-check-input" value="yes" name="terms" id="terms"
                                   autocomplete="off">acceptere vores <a class="termsacc"
                                href="{{route("cms.page", ["slug" => 'terms-and-conditions'])}}"
                                target="_blank"><strong>Betingelser &
                                    betingelser</strong> </a> for iviggo trænere
                        </label>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-check pt-3">
                        <label class="form-check-label">
                            <input type="checkbox" class="form-check-input" value="yes" name="privacy" id="privacy"
                                   autocomplete="off">acceptere vores  <a class="termsacc"
                                href="{{route("cms.page", ["slug" => 'privacy-policy'])}}" target="_blank"><strong>privatliv
                                    politik</strong></a>
                        </label>
                    </div>
                </div>

                @if(config('services.recaptcha.key'))
                    <div class="g-recaptcha"
                         data-sitekey="{{config('services.recaptcha.key')}}">
                    </div>
                @endif

                <div class="form-row pt-3">
                    <button type="submit" class="color-two btn-custom ">Indsend</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('styles')
    {!! Html::style('css/intlTelInput.css') !!}
@endpush
@push('scripts')
    {!! Html::script('js/intlTelInput.js') !!}
    <script>
        var input = document.querySelector("#phone");
        iti = intlTelInput(input, {
            formatOnDisplay: false,
            separateDialCode: true,
            autoPlaceholder: 'off',
            hiddenInput: "phone",
            autoHideDialCode: true,
            preferredCountries: ["dk"],
            utilsScript: "/js/build/js/utils.js",
        });
        var oldPhone = '{{old('general.phone')}}';
        if(typeof iti !== 'undefined' && oldPhone) {
            iti.setNumber(oldPhone);
        }
    </script>
@endpush