@extends('frontend.layouts.master')

@section('page_title')
    {{ __('account.register.title') }}
@endsection

@section('head')
@endsection

@section('content-wrapper')
   
        <div class="py-5 text-center align-items-center d-flex h-100 portada jarallax" style="">
            <div class="tinte2"></div>
            <div class="container py-5">
                <div class="row text-center">
                    <div class="col-lg-12 col-md-12 col-12 col-sm-12">
                        <h1 class="display-4 mb-4 text-white">
                            {{ __('account.register.title') }}
                        </h1>
                    </div>
                </div>
            </div>
        </div>
   
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb d-flex justify-content-center">
            <li class="breadcrumb-item s-text"><a href="{{ route('frontend.home.index') }}">{{ __('frontend-menu.home') }}</a></li>
            <li class="breadcrumb-item s-text active" aria-current="page">{{ __('account.register.title') }}</li>            
        </ol>
    </nav>

    <div class="container">
        <div class="row mt-4 d-flex justify-content-center ">
            <div class=" col-lg-8  col-md-12">
                <div class="pb-4">
                    <form class="login-register" method="post" action="{{ route('backend.register.store') }}" @submit.prevent="onSubmit">

                        {{ csrf_field() }}                                            
                        <p class="mb-4 s-text"><span style="color: red;font-size: 18px; ">*</span> {{ __('account.register.required-fields') }}</p>

                        @if(array_key_exists('type', $fields))
                        <div class="form-check form-check-inline mb-4" :class="[errors.has('type') ? 'has-error' : '']">
                            <input type="radio" value="fisica" name="type" {{ old('type') == 'fisica' && old('type') == null ? 'checked' : ''  }} 
                                id="type" v-validate="'required'" class="form-control" 
                                data-vv-as="&quot;{{ __('account.dashboard.profile.type') }}&quot;" />
                            <label class="form-label required" for="type">{{ __('account.dashboard.profile.type-fisica') }}</label>
                        </div>

                        <div class="form-check form-check-inline mb-4" :class="[errors.has('type') ? 'has-error' : '']">
                            <input type="radio" name="type" {{ old('type') == 'juridica' ? 'checked' : ''  }} 
                                id="type" value="juridica" v-validate="'required'" class="form-control" 
                                data-vv-as="&quot;{{ __('account.dashboard.profile.type') }}&quot;" />
                            <label class="form-label required" for="type">{{ __('account.dashboard.profile.type-juridica') }}</label>
                            
                        </div>

                        <div class="form-check mb-4">
                            <span class="control-error" v-if="errors.has('type')">@{{ errors.first('type') }}</span>
                        </div>
                        @endif

                        <div class="form-group mb-4" >
                            <label class="form-label" for="entity_id">{{ __('account.dashboard.profile-eivissa.entity_id') }}</label>
                            <select name="entity_id">                            
                                <option value="142">CONSELL INSULAR D'EIVISSA</option>
                                <option value="143">AJUNTAMENT DE LA CIUTAT D'EIVISSA</option>
                                <option value="144">AJUNTAMENT DE SANTA EULÀRIA DES RIU</option>
                                <option value="145">AJUNTAMENT DE SANT ANTONI DE PORTMANY</option>
                                <option value="146">AJUNTAMENT DE SANT JOSEP DE SA TALAIA</option>
                                <option value="147">AJUNTAMENT DE SANT JOAN DE LABRITJA</option>
                            </select>
                        </div>

                        @if(array_key_exists('first_name', $fields))
                        <div class="form-group mb-4" :class="[errors.has('first_name') ? 'has-error' : '']">
                            <label class="form-label required" for="first_name">{{ __('account.dashboard.profile.name') }}</label>
                            <input type="text" name="first_name" value="{{ old('first_name') }}" id="first_name" v-validate="'required'" class="form-control" data-vv-as="&quot;{{ __('account.dashboard.profile.name') }}&quot;" />
                            <span class="control-error" v-if="errors.has('first_name')">@{{ errors.first('first_name') }}</span>
                        </div>
                        @endif

                        @if(array_key_exists('last_name', $fields))
                        <div class="form-group mb-4" :class="[errors.has('last_name') ? 'has-error' : '']">
                            <label class="form-label required" for="last_name">{{ __('account.dashboard.profile.last-name') }}</label>
                            <input type="text" name="last_name" value="{{ old('last_name') }}" id="last_name" v-validate="'required'" class="form-control" data-vv-as="&quot;{{ __('account.dashboard.profile.last-name') }}&quot;" />
                            <span class="control-error" v-if="errors.has('last_name')">@{{ errors.first('last_name') }}</span>
                        </div>
                        @endif

                        @if(array_key_exists('birth_day', $fields))
                        <div class="form-group mb-4" :class="[errors.has('birth_day') ? 'has-error' : '']">
                            <label class="form-label {{ ($fields['birth_day']) ? 'required' : '' }}" for="birth_day">{{ __('account.dashboard.profile.birth-day') }}</label>
                            <input type="date" name="birth_day" value="{{ old('birth_day') }}" id="birth_day" @if($fields['birth_day']) v-validate="'required'" @endif class="form-control" data-vv-as="&quot;{{ __('account.dashboard.profile.birth-day') }}&quot;" />
                            <span class="control-error" v-if="errors.has('birth_day')">@{{ errors.first('birth_day') }}</span>
                        </div>
                        @endif

                        @if(array_key_exists('gender', $fields))
                        <div class="form-group mb-4" :class="[errors.has('gender') ? 'has-error' : '']">
                            <label class="form-label {{ ($fields['gender']) ? 'required' : ''}}" for="gender">{{ __('account.dashboard.profile.gender') }}</label>
                            <select name="gender" @if($fields['gender']) v-validate="'required'" @endif class="form-control" data-vv-as="&quot;{{ __('account.dashboard.profile.gender') }}&quot;">
                                <option value=""></option>
                                <option {{ (old('gender') == 'F') ? 'selected' : '' }} value="F">{{ __('account.dashboard.profile.gender-female') }}</option>
                                <option {{ (old('gender') == 'M') ? 'selected' : '' }} value="M">{{ __('account.dashboard.profile.gender-male') }}</option>
                                <option {{ (old('gender') == 'NB') ? 'selected' : '' }} value="NB">{{ __('account.dashboard.profile.gender-nb') }}</option>
                            </select>
                        </div>
                        @endif

                        @if(array_key_exists('professio', $fields))
                        <div class="form-group mb-4" :class="[errors.has('professio') ? 'has-error' : '']">
                            <label class="form-label required" for="professio">{{ __('account.dashboard.profile.professio') }}</label>
                            <select name="professio" v-validate="'required'" class="form-control" data-vv-as="&quot;{{ __('account.dashboard.profile.professio') }}&quot;">
                                <option value=""></option>
                                @foreach($professions as $professio)
                                <option {{ (old('professio') == $professio) ? 'selected' : '' }} 
                                    value="{{ $professio }}">{{ $professio }}</option>
                                @endforeach
                            </select>
                        </div>
                        @endif
                        
                        @if(array_key_exists('identity_document', $fields))
                        <div class="form-group mb-4" :class="[errors.has('identity_document') ? 'has-error' : '']">
                            <label class="form-label {{ ($fields['identity_document']) ? 'required' : '' }}" for="identity_document">{{ __('account.dashboard.profile.identity-document') }}</label>
                            <input type="text" name="identity_document" value="{{ old('identity_document') }}" id="identity_document" v-validate="'{{ ($fields['identity_document']) ? 'required|' : '' }}alpha_dash|min:9|max:9'" class="form-control" data-vv-as="&quot;{{ __('account.dashboard.profile.identity-document') }}&quot;" />
                            <span class="control-error" v-if="errors.has('identity_document')">@{{ errors.first('identity_document') }}</span>
                        </div>
                        @endif

                        @if(array_key_exists('phone', $fields))
                        <div class="form-group mb-4" :class="[errors.has('phone') ? 'has-error' : '']">
                            <label class="form-label {{ ($fields['phone']) ? 'required' : '' }}" for="phone">{{ __('account.dashboard.profile.phone') }}</label>
                            <input type="text" name="phone" value="{{ old('phone') }}" id="phone" @if($fields['phone']) v-validate="'required'" @endif  class="form-control" data-vv-as="&quot;{{ __('account.dashboard.profile.phone') }}&quot;" />
                            <span class="control-error" v-if="errors.has('phone')">@{{ errors.first('phone') }}</span>
                        </div>
                        @endif

                        <div class="form-group mb-4" :class="[errors.has('country') ? 'has-error' : '']">
                            <label class="form-label required" for="country">{{ __('account.dashboard.profile.country') }}</label>
                            <select name="country" v-validate="'required'" class="form-control" data-vv-as="&quot;{{ __('account.dashboard.profile.country') }}&quot;" >
                                @foreach($countries as $country)
                                <option {{ (old('country') == $country['idPais'] || $country['idPais'] == 63) ? 'selected' : '' }} 
                                    value="{{ $country['idPais'] }}">{{ $country['nom'] }}</option>
                                @endforeach
                            </select>
                        </div>

                        @if(array_key_exists('barri', $fields))
                        <div class="form-group mb-4" :class="[errors.has('barri') ? 'has-error' : '']">
                            <label class="form-label required" for="barri">{{ __('account.dashboard.profile.barri') }}</label>
                            <select name="barri" v-validate="'required'" class="form-control" data-vv-as="&quot;{{ __('account.dashboard.profile.barri') }}&quot;" >
                                <option value=""></option>
                                @foreach($barris as $barri)
                                <option {{ (old('barri') == $barri['id']) ? 'selected' : '' }} 
                                    value="{{ $barri['id'] }}">{{ $barri['barri'] }}</option>
                                @endforeach
                            </select>
                        </div>
                        @endif

                        @if(array_key_exists('address', $fields))
                        <div class="form-row">
                            
                            <div class="col-md-4 mb-3">
                                <div class="form-group mb-4" :class="[errors.has('road_type') ? 'has-error' : '']">
                                    <label class="form-label {{ $fields['address'] ? 'required' : '' }}" for="road_type">{{ __('account.dashboard.profile.road-type') }}</label>
                                    <select  name="road_type" id="road_type" @if($fields['address']) v-validate="'required'" @endif class="form-control" data-vv-as="&quot;{{ __('account.dashboard.profile.road-type') }}&quot;">
                                        <option value="" ></option>
                                        @foreach($roadTypes as $roadType)
                                            <option value="{{ $roadType['id'] }}" {{ ($roadType['id'] == old('road_type') ? 'selected' : '') }} value="{{ $roadType['id'] }}">{{ $roadType['name'] }}</option>
                                        @endforeach
                                    </select>
                                    <span class="control-error" v-if="errors.has('road_type')">@{{ errors.first('road_type') }}</span>
                                </div>
                            </div>

                            <div class="col-md-4 mb-3">
                                <div class="form-group mb-4" :class="[errors.has('road_name') ? 'has-error' : '']">
                                    <label class="form-label {{ $fields['address'] ? 'required' : '' }}" for="road_name">{{ __('account.dashboard.profile.road-name') }}</label>
                                    <input type="text" name="road_name" value="{{ old('road_name') }}" id="road_name" @if($fields['address']) v-validate="'required'" @endif class="form-control" data-vv-as="&quot;{{ __('account.dashboard.profile.road-name') }}&quot;" />
                                    <span class="control-error" v-if="errors.has('road_name')">@{{ errors.first('road_name') }}</span>
                                </div>
                            </div>

                            <div class="col-md-4 mb-3">
                                <div class="form-group mb-4" :class="[errors.has('road_number') ? 'has-error' : '']">
                                    <label class="form-label {{ $fields['address'] ? 'required' : '' }}" for="road_number">{{ __('account.dashboard.profile.road-number') }}</label>
                                    <input type="text" name="road_number" value="{{ old('road_number') }}" id="road_number" @if($fields['address']) v-validate="'required'" @endif class="form-control" data-vv-as="&quot;{{ __('account.dashboard.profile.road-number') }}&quot;" />
                                    <span class="control-error" v-if="errors.has('road_number')">@{{ errors.first('road_number') }}</span>
                                </div>
                            </div>

                        </div>
                        @endif

                        @if(array_key_exists('postcode', $fields))
                        <div class="form-row">
                            
                            <div class="col-md-6 mb-3">
                                <div class="form-group mb-4" :class="[errors.has('postcode') ? 'has-error' : '']">
                                    <label class="form-label {{ ($fields['postcode']) ? 'required' : '' }}" for="postcode">{{ __('account.dashboard.profile.postcode') }}</label>
                                    <input type="text" name="postcode" value="{{ old('postcode') }}" id="postcode" @if($fields['postcode']) v-validate="'required|numeric|digits:5'" @endif class="form-control" data-vv-as="&quot;{{ __('account.dashboard.profile.postcode') }}&quot;" />
                                    <span class="control-error" v-if="errors.has('postcode')">@{{ errors.first('postcode') }}</span>
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <div class="form-group mb-4" :class="[errors.has('location') ? 'has-error' : '']">
                                    <label class="form-label {{ ($fields['postcode']) ? 'required' : '' }}" for="location">{{ __('account.dashboard.profile.location') }}</label>
                                    <select  name="location" id="location" @if($fields['postcode']) v-validate="'required'" @endif class="form-control" data-vv-as="&quot;{{ __('account.dashboard.profile.location') }}&quot;">
                                        <option value=""></option>
                                    </select>
                                    <span class="control-error" v-if="errors.has('location')">@{{ errors.first('location') }}</span>
                                </div>
                            </div>

                        </div>
                        @endif

                        @if(array_key_exists('email', $fields))
                        <div class="form-group mb-4" :class="[errors.has('email') ? 'has-error' : '']">
                            <label class="form-label {{ $fields['email'] ? 'required' : '' }}" for="email">{{ __('account.dashboard.profile.email') }}</label>
                            <input type="email" ref="email" name="email" value="{{ old('email') }}" id="email" v-validate="'{{ $fields['email'] ? 'required|' : '' }}email'" class="form-control" data-vv-as="&quot;{{ __('account.dashboard.profile.email') }}&quot;" />
                            <span class="control-error" v-if="errors.has('email')">@{{ errors.first('email') }}</span>
                        </div>

                        <div class="form-group mb-4" :class="[errors.has('email_confirmation') ? 'has-error' : '']">
                            <label class="form-label {{ $fields['email'] ? 'required' : '' }}" for="email_confirmation">{{ __('account.dashboard.profile.email-confirmation') }}</label>
                            <input type="email_confirmation" name="email_confirmation" value="{{ old('email_confirmation') }}" id="email_confirmation" v-validate="'{{ $fields['email'] ? 'required|' : '' }}email|confirmed:email'" class="form-control" data-vv-as="&quot;{{ __('account.dashboard.profile.email-confirmation') }}&quot;" />
                            <span class="control-error" v-if="errors.has('email_confirmation')">@{{ errors.first('email_confirmation') }}</span>
                        </div>
                        @endif

                        @if(array_key_exists('password', $fields))
                        <div class="form-group mb-4" :class="[errors.has('password') ? 'has-error' : '']">
                            <label class="form-label {{ $fields['password'] ? 'required' : '' }}" for="password">{{ __('account.dashboard.profile.password') }}</label>
                            <div class="input-group">
                                <input type="password" ref="password" value="{{ old('password') }}" name="password" v-validate="'{{ $fields['password'] ? 'required|' : '' }}min:8|alpha_dash'" id="password" class="form-control" data-vv-as="&quot;{{ __('account.dashboard.profile.password') }}&quot;" />
                                <div class="input-group-prepend">
                                    <div class="input-group-text"><i class="fa fa-eye"></i></div>
                                </div>
                            </div>
                            <p class="s-text p-1">{{ __('account.dashboard.profile.password-info') }}</p>
                            <span class="control-error" v-if="errors.has('password')">@{{ errors.first('password') }}</span>
                        </div>

                        <div class="form-group mb-4" :class="[errors.has('password_confirmation') ? 'has-error' : '']">
                            <label class="form-label {{ $fields['password'] ? 'required' : '' }}" for="password_confirmation">{{ __('account.dashboard.profile.password-confirmation') }}</label>
                            <div class="input-group">
                                <input type="password" value="{{ old('password_confirmation') }}" name="password_confirmation" v-validate="'{{ $fields['password'] ? 'required|' : '' }}min:8|confirmed:password'" id="password_confirmation" class="form-control" data-vv-as="&quot;{{ __('account.dashboard.profile.password-confirmation') }}&quot;" />
                                <div class="input-group-prepend">
                                    <div class="input-group-text"><i class="fa fa-eye"></i></div>
                                </div>
                            </div>
                            <span class="control-error" v-if="errors.has('password_confirmation')">@{{ errors.first('password_confirmation') }}</span>
                        </div>
                        @endif

                        {!! RecaptchaV3::field('register', 'g-recaptcha-response') !!}
                       
                        <div class="form-check mt-2" :class="[errors.has('newsletter') ? 'has-error' : '']">
                                            
                            <input type="checkbox" name="newsletter" class="form-check-input" id="newsletter" data-vv-as="&quot;{{ __('account.register.newsletter') }}&quot;">
                            <label for="newsletter" class="form-check-label">{{ __('account.register.newsletter') }}</label>
                            <br>
                            <span class="control-error" v-if="errors.has('newsletter')">@{{ errors.first('newsletter') }}</span>
                        </div>

                        <div class="form-check mt-2" :class="[errors.has('cond') ? 'has-error' : '']">
                                            
                            <input type="checkbox" v-validate="'required'" name="cond" class="form-check-input" id="conditions" data-vv-as="&quot;{{ __('account.register.cond-name') }}&quot;">
                            <label for="conditions" class="form-check-label required">{{ __('account.register.cond-accept') }} 
                                <a target="_blank" href="{{ 

                                    (isset($infoAsso['file_condicions']) && $infoAsso['file_condicions'] != '') ? 
                                    $currentCompany->moneder_intranet . '/uploads/CondicionsUs/' . $infoAsso['file_condicions']
                                    :
                                    __('account.register.cond-link') 
                                    
                                    }}">{{ __('account.register.cond-text-link') }}</a>
                            </label>
                            <br>
                            <span class="control-error" v-if="errors.has('cond')">@{{ errors.first('cond') }}</span>
                        </div>

                        @if(isset($infoAsso['file_annex_cli']) && $infoAsso['file_annex_cli'] != '')
                        <div class="form-check mt-2" :class="[errors.has('annex') ? 'has-error' : '']">
                                            
                            <input type="checkbox" v-validate="'required'" name="annex" class="form-check-input" id="annex" data-vv-as="&quot;{{ __('account.register.annex-name') }}&quot;">
                            <label for="conditions" class="form-check-label required">{{ __('account.register.annex-accept') }} 
                                <a target="_blank" href="{{ 
                                    $currentCompany->moneder_intranet . '/uploads/CondicionsUs/' . $infoAsso['file_annex_cli']
                                    }}">{{ __('account.register.annex-text-link') }}</a>
                            </label>
                            <br>
                            <span class="control-error" v-if="errors.has('annex')">@{{ errors.first('annex') }}</span>
                        </div>
                        @endif

                        <!-- Submit button -->
                        <button type="submit" class="site-btn link wow bounceInUp btn-block mt-4 mb-4">{{ __('account.register.submit') }}</button>

                        @if($currentCompany->type == 'bonnus')
                        <!-- Register buttons -->
                        <div class="text-center">
                            <p>{{ __('account.register.btn-login') }} <a href="{{ route('backend.session.login') }}">{{ __('account.login.menu') }}</a></p>
                        </div>
                        @endif
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')

<script>
    
    var postcode = ('{{ old("postcode") }}' != '') ? '{{ old("postcode") }}' : '';
    var locationInput = ('{{ old("location") }}' != '') ? '{{ old("location") }}' : '';

    if(postcode != ''){
        getLocations(postcode);
    }

    function getLocations(postcode = ''){

        if(postcode.length != 5){return;} 

        $.ajax({
            type: 'POST',
            url: '/moneder-get-locations',
            data: {
                postcode: postcode
            },
            async: false,
            dataType: 'json',
            contentType: "application/x-www-form-urlencoded;charset=utf-8",

            success: function (json) {
                console.log(json);
                var html = '';
                json.forEach(element => {
                    html += `<option ${(element.geonameid == locationInput) ? 'selected' : ''} value="${element.geonameid}" >${element.name}</option>`;
                });
                $('#location').html(html);
            },

            error: function (e) {
                alert(e.message);
            },

            complete: function () {}
        });
    }


    $(document).ready(function () {

        $('#postcode').change(function () {
            postcode = $(this).val();

            getLocations(postcode);
        });

    });
    

</script>

<script>

var viewPass = false;
$(window).ready(function () {

    $('.input-group-text').click(function() {

        if(!viewPass){
            $('#password_confirmation').attr('type', 'text');
            $('#password').attr('type', 'text');
            $('.fa-eye').addClass('fa-eye-slash');
            $('.fa-eye').removeClass('fa-eye');
        } else {
            $('#password_confirmation').attr('type', 'password');
            $('#password').attr('type', 'password');
            $('.fa-eye-slash').addClass('fa-eye');
            $('.fa-eye-slash').removeClass('fa-eye-slash');
        }

        viewPass = !viewPass;

    });

});

</script>

@endpush