@extends('frontend.layouts.app')

@section('title', app_name() . ' | ' . __('labels.frontend.auth.register_box_title'))

@section('content')
    <div class="row justify-content-center align-items-center">
        <div class="col col-sm-8 align-self-center">
            {{--            <div class="card">--}}
            {{--                <div class="card-header">--}}
            <div class="g_et_al_header2 text-center" style="padding-bottom: 20px">
                About you
                {{--                        @lang('labels.frontend.auth.register_box_title')--}}
            </div><!--card-header-->

            <div class="container">
                {{ html()->form('POST', route('frontend.user.firstlogin.post'))->open() }}

                <div class="row">
                    <div class="col-12 col-md-4">
                        <div class="form-group">
                            {{ html()->label('Prefix')->for('prefix_lookup_id') }}

                            {{ html()->select('prefix_lookup_id')
                                ->class('form-control')
                                ->options($prefix_lookup->pluck('text', 'id'))
                                ->placeholder('Prefix')
                                ->value(old('prefix_lookup_id'))
                                ->required()}}
                        </div><!--col-->
                    </div><!--row-->
                    <div class="col-12 col-md-4">
                        <div class="form-group">
                            {{ html()->label(__('validation.attributes.frontend.first_name'))->for('first_name') }}
                            {{ html()->text('first_name')
                                ->class('form-control')
                                ->placeholder(__('validation.attributes.frontend.first_name'))
                                ->attribute('maxlength', 191)
                                ->disabled($logged_in_user->providers->count())
                                ->value($logged_in_user->providers->count()?$logged_in_user->first_name:old('first_name'))
                                ->required()}}
                        </div><!--col-->
                    </div><!--row-->

                    <div class="col-12 col-md-4">
                        <div class="form-group">
                            {{ html()->label(__('validation.attributes.frontend.last_name'))->for('last_name') }}
                            {{ html()->text('last_name')
                                ->class('form-control')
                                ->placeholder(__('validation.attributes.frontend.last_name'))
                                 ->disabled($logged_in_user->providers->count())
                                ->value($logged_in_user->providers->count()?$logged_in_user->last_name:old('last_name'))
                                ->attribute('maxlength', 191)
                                ->required() }}
                        </div><!--form-group-->
                    </div><!--col-->
                </div><!--row-->

                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            {{ html()->label('Phone')->for('phone') }}
                            {{ html()->text('phone')
                                ->class('form-control')
                                ->placeholder('Phone number')
                                ->value(old('phone'))
                                ->attribute('maxlength', 11)
                                ->attribute('type', 'tel')
                                ->required() }}
                        </div><!--form-group-->
                    </div><!--col-->
                </div><!--row-->
                <div class="row">
                    <div class="col-12 col-md-6">
                        <div class="form-group">
                            {{ html()->label('Institution')->for('institution_lookup_id') }}

                            {{ html()->select('institution_lookup_id')
                               ->class('form-control')
                               ->options($institution_lookup->pluck('text', 'id'))
                                ->value(old('institution_lookup_id'))

                               }}
                        </div><!--form-group-->
                    </div><!--col-->
                    <div class="col-12 col-md-6">
                        <div class="form-group">
                            {{ html()->label('Position')->for('position_lookup_id') }}

                            {{ html()->select('position_lookup_id')
                              ->class('form-control')
                              ->options($position_lookup->pluck('text', 'id'))
                               ->value(old('position_lookup_id'))
                              }}
                        </div><!--col-->
                    </div><!--row-->

                </div><!--row-->


                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            {{ html()->label('Research focus')->for('research_focus_lookup_id[]') }}
                            {{ html()->select('research_focus_lookup_id[]')
                              ->class('form-control')
                              ->attribute('multiple', 'multiple')
                              ->options($research_lookup->pluck('text', 'id'))
                               ->value(old('research_focus_lookup_id[]'))
                              }}
                        </div><!--form-group-->
                    </div><!--col-->
                </div><!--row-->
                @if(!$invited)
                    <div class="row g_et_al_header2 text-center" style="padding-bottom: 10px">
                        <div class="col">
                            Subscription
                        </div>
                    </div>


                    <div class="row">
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                {{ html()->label('Subscription level')->for('subscription_level') }}
                                <div class="custom-control custom-radio">
                                    {{html()->radio('subscription_level')->class('custom-control-input')->id('radio1')->value('free')->required()
    ->attribute('onchange', "$('#payment_freq_group').hide();$('#radio5').removeAttr('required')")}}
                                    <label class="custom-control-label" for="radio1">Free :)</label>
                                </div>
                                <div class="custom-control custom-radio">
                                    {{html()->radio('subscription_level')->class('custom-control-input')->id('radio2')->value('student')
    ->attribute('onchange', "$('#payment_freq_group').show();$('#radio5').attr('required', 'required')")}}
                                    <label class="custom-control-label" for="radio2">Student</label>
                                </div>
                                <div class="custom-control custom-radio">
                                    {{html()->radio('subscription_level')->class('custom-control-input')->id('radio3')->value('researcher')
    ->attribute('onchange', "$('#payment_freq_group').show();$('#radio5').attr('required', 'required')")}}
                                    <label class="custom-control-label" for="radio3">Researcher</label>
                                </div>
                                <div class="custom-control custom-radio">
                                    {{html()->radio('subscription_level')->class('custom-control-input')->id('radio4')->value('lab')
    ->attribute('onchange', "$('#payment_freq_group').show();$('#radio5').attr('required', 'required')")}}
                                    <label class="custom-control-label" for="radio4">Lab</label>
                                </div>

                                {{--                                               onchange="$('#payment_freq_group').show();$('#payment_freq_group').attr('required', '')"/>--}}
                            </div><!--form-group-->
                        </div><!--col-->
                        <div class="col-12 col-md-6">
                            <div class="form-group" id="payment_freq_group">
                                {{ html()->label('Payment frequency')->for('payment_frequency') }}
                                <div class="custom-control custom-radio">
                                    {{html()->radio('payment_frequency')->class('custom-control-input')->id('radio5')->required()->value('yearly')}}
                                    <label class="custom-control-label" for="radio5">Yearly</label>
                                </div>
                                <div class="custom-control custom-radio">
                                    {{html()->radio('payment_frequency')->class('custom-control-input')->id('radio6')->value('monthly')}}
                                    <label class="custom-control-label" for="radio6">Monthly</label>
                                </div>
                            </div><!--form-group-->
                        </div><!--row-->

                    </div><!--row-->
                    <div class="row" id="lab_name_group" style="display: none">
                        <div class="col">
                            <div class="form-group">
                                {{ html()->label('Lab name')->for('lab_name') }}
                                {{ html()->text('lab_name')
                                    ->class('form-control')
                                    ->placeholder('My awesome lab')
                                    ->value(old('lab_name'))
                                    ->attribute('maxlength', 191)
                                   }}
                            </div><!--form-group-->
                        </div><!--col-->
                    </div><!--row-->

                @endif

                <div class="row">
                    <div class="col">
                        <div class="form-group mb-0 clearfix">
                            {{ form_submit('Continue...')->style(['width'=>'100%']) }}
                        </div><!--form-group-->
                    </div><!--col-->
                </div><!--row-->
                {{ html()->form()->close() }}

                {{--                    <div class="row">--}}
                {{--                        <div class="col">--}}
                {{--                            <div class="text-center">--}}
                {{--                                @include('frontend.auth.includes.socialite')--}}
                {{--                            </div>--}}
                {{--                        </div><!--/ .col -->--}}
                {{--                    </div><!-- / .row -->--}}
            </div><!-- card-body -->


            {{--            </div><!-- card -->--}}
        </div><!-- col-md-8 -->
    </div><!-- row -->
@endsection

@push('after-scripts')
    <script>
        $(document).ready(function () {
            $('select').select2({
                placeholder: 'Select...',
                tags: true
            });
            // toggle lab name
            $('input[type=radio]').on('change', function(){
                console.log($('#radio4').is(':checked'))
                if ($('#radio4').is(':checked')) {
                    $('#lab_name_group').show();
                    $('#lab_name').attr('required', 'required');
                } else {
                    $('#lab_name_group').hide();
                    $('#lab_name').removeAttr('required');
                }
            })
        })


    </script>
@endpush

@push('after-styles')
    <style>
        .select2 {
            width: 100% !important;
        }
    </style>
@endpush