@extends('EcomAuthViews::layouts.authentication.layout' , ['title' => 'Register Account'])

@section('content')
    @php



            $country_code = $data['phone_country_code'];
            $phone_value = $data['phone'];
            $email = $data['email'];

    @endphp
    <form class="twa-form" style="gap:0" method="POST"  id="otp-form" >

        @csrf
{{--        <input type="hidden" name="user_id" value="{{$verify['id'] }}">--}}

        @foreach($fields as $field)
            @php
                $value = isset($data[$field['name']]) ? $data[$field['name']] : "";
            @endphp
            @switch($field['type'])



                @case('text')


                    @component('EcomGeneralViews::components.form.input', [ "parentClass" => "", "size" => $field['size'], "type" => "text", "label" => ___($field['label']). " ". ( $field['required'] ? "*" : "") ])
                        <input name="{{$field['name']}}" value="{{old($field['name'] , $value)}}" required placeholder="{{___($field['label'])}}"></input>
                        <span class="invalid-field"> @error($field['name']) {{$message}}  @enderror </span>
                    @endcomponent

                @break

                @case('password')

                    @component('EcomGeneralViews::components.form.input', [ "parentClass" => "", "size" => $field['size'], "type" => "text", "label" => ___($field['label']). " ". ( $field['required'] ? "*" : "") ])
                            <div class="password-group">
                                <input name="{{$field['name']}}" type="password" value="{{old($field['name'])}}" required placeholder="{{___($field['label'])}}"></input>
                                <button type="button" onclick="togglePassword($(this))"> <i class="fa-solid fa-eye" ></i> </button>
                            </div>
                            <span class="invalid-field"> @error($field['name']) {{$message}}  @enderror </span>
                    @endcomponent

                    @break

                @case('phone')
                    @php
                        $country_code = isset($data[$field['name'].'_country_code']) ? $data[$field['name'].'_country_code'] : "";
                    @endphp
                    @component('EcomAuthViews::components.phone' , ['phone_value' => $value , 'country_code' =>$country_code ] ) @endcomponent
                @break

            @endswitch

        @endforeach


                @component('EcomGeneralViews::components.form.input', [ "parentClass" => "", "size" => "full", "type" => "submit", "label" => "" ])
                    <input type="submit" value="{{ ___('authentication.register') }}" />
                @endcomponent

{{--        @component('EcomGeneralViews::components.form.input', [ "parentClass" => "", "size" => "full", "type" => "text", "label" => ___('authentication.last_name'). " *" ])--}}
{{--            <input name="last_name" value="{{old('last_name')}}" required placeholder="{{ ___('authentication.last_name') }}"></input>--}}
{{--            <span class="invalid-field"> @error('last_name') {{$message}}  @enderror </span>--}}
{{--        @endcomponent--}}

{{--        @switch($type)--}}
{{--            @case("phone")--}}
{{--                @component('EcomGeneralViews::components.form.input', [ "parentClass" => "", "size" => "full", "type" => "text", "label" => ___('authentication.phone_number') . " *" ])--}}
{{--                    <input class="phone-field" required--}}
{{--                           data-custom-container="" data-allow-dropdown="true"--}}
{{--                           data-autohide-dialcode="true" data-format="true" data-national-mode="true" placeholder=" "--}}
{{--                           name="phone" data-initial-country="{{old('phone_country_code' , $country_code)}}"--}}
{{--                           value="{{old('phone' , isset($phone_value) ? $phone_value : '')}}"--}}
{{--                    />--}}
{{--                    <input type="hidden" name="phone_country_code" class="phone_country_code" value="{{old('phone_country_code' , $country_code)}}" />--}}
{{--                    <span class="invalid-field"> @error('phone') {{$message}}  @enderror </span>--}}
{{--                @endcomponent--}}
{{--            @break--}}
{{--            @case("email")--}}
{{--                @component('EcomGeneralViews::components.form.input', [ "parentClass" => "", "size" => "full", "type" => "text", "label" => ___('authentication.email'). " *" ])--}}
{{--                    <input name="email" required value="{{old('email',$email)}}" placeholder="{{ ___('authentication.email') }}"></input>--}}
{{--                    <span class="invalid-field"> @error('email') {{$message}}  @enderror </span>--}}
{{--                @endcomponent--}}
{{--            @break--}}
{{--        @endswitch--}}


{{--            @if($type == "phone" && in_array($type,array_diff($config['auth_types'] , $config['auth_verifications'])))--}}
{{--                @component('EcomGeneralViews::components.form.input', [ "parentClass" => "", "size" => "full", "type" => "text", "label" => ___('authentication.phone_number') . " *" ])--}}
{{--                    <input class="phone-field" required--}}
{{--                           data-custom-container="" data-allow-dropdown="true"--}}
{{--                           data-autohide-dialcode="true" data-format="true" data-national-mode="true" placeholder=" "--}}
{{--                           name="phone" data-initial-country="{{old('phone_country_code' , $country_code)}}"--}}
{{--                           value="{{old('phone' , isset($phone_value) ? $phone_value : '')}}"--}}
{{--                    />--}}
{{--                    <input type="hidden" name="phone_country_code" class="phone_country_code" value="{{old('phone_country_code' , $country_code)}}" />--}}
{{--                    <span class="invalid-field"> @error('phone') {{$message}}  @enderror </span>--}}
{{--                @endcomponent--}}
{{--            @endif--}}
{{--            @if($type == "email" && in_array($type,array_diff($config['auth_types'] , $config['auth_verifications'])))--}}
{{--                @component('EcomGeneralViews::components.form.input', [ "parentClass" => "", "size" => "full", "type" => "text", "label" => ___('authentication.email'). " *" ])--}}
{{--                    <input name="email" required value="{{old('email',$email)}}" placeholder="{{ ___('authentication.email') }}"></input>--}}
{{--                    <span class="invalid-field"> @error('email') {{$message}}  @enderror </span>--}}
{{--                @endcomponent--}}
{{--            @endif--}}



{{--        @component('EcomGeneralViews::components.form.input', [ "parentClass" => "", "size" => "full", "type" => "text", "label" => ___('authentication.password') . " *" ])--}}
{{--            <input type="password" name="password" required placeholder="{{ ___('authentication.password') }}"></input>--}}
{{--            <span class="invalid-field"> @error('password') {{$message}}  @enderror </span>--}}
{{--        @endcomponent--}}
{{--        @component('EcomGeneralViews::components.form.input', [ "parentClass" => "", "size" => "full", "type" => "text", "label" => ___('authentication.confirm_password'). " *" ])--}}
{{--            <input type="password"  name="confirm_password" required placeholder="{{ ___('authentication.confirm_password') }}"></input>--}}
{{--            <span class="invalid-field"> @error('confirm_password') {{$message}}  @enderror </span>--}}
{{--        @endcomponent--}}
{{--        <div class="sep-15"></div>--}}
{{--        @component('EcomGeneralViews::components.form.input', [ "parentClass" => "", "size" => "full", "type" => "submit", "label" => "" ])--}}
{{--            <input type="submit" value="{{ ___('authentication.register') }}" />--}}
{{--        @endcomponent--}}

        <div class="sep-30"></div>
        <div class="seperator-line">{{ ___('authentication.or')  }}</div>
        <div class="sep-30"></div>
        <div class="other-auth-methods">
            <div>
                <span>{{ ___('authentication.already_have_account')  }}</span> <a class="auth-link" href="{{route('account-auth')}}">{{ ___('authentication.login') }}</a>
            </div>
        </div>

    </form>

@endsection

@section('scripts')

    <script>
        function togglePassword(elem){
            let input = elem.parent().find('input');
            let type = input.attr('type');
            input.attr('type' , input.attr('type') == "password" ? 'text' : 'password');

            elem.find('i').toggleClass('fa-eye-slash');

        }
    </script>
@endsection