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

@section('content')

    <form class="twa-form" style="gap:0" method="POST"  id="otp-form" >
        <div style="font-weight: bold; font-size: 16px; margin-bottom: 10px;">Complete your profile by filling the below required information.</div>

        <div class="otp-sent-wrapper">
        @if($user->email)
            <div class="entered-email">
                @include('EcomAuthViews::icons.envelope')
                <span>{{$user->email }} </span>
            </div>
        @endif
        @if($user->phone)
            <div class="entered-email">
                @include('EcomAuthViews::icons.phone')
                <span>{{$user->phone }} </span>
            </div>
        @endif
        </div>

        <sep></sep>

        @csrf

        @foreach($fields as $field)

            @switch($field['type'])

                @case('date')


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

                    @break

                @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'])}}" 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')

                @component('EcomAuthViews::components.phone' , ['phone_value' => "" , 'country_code' =>"" ] ) @endcomponent
                @break

            @endswitch

        @endforeach


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



    </form>

@endsection

@section('scripts')
    <style>
        .otp-sent-wrapper {
            width: 100%;
        }

        .entered-email {
            display: flex;
            justify-content: flex-start;
            width: 100%;
        }
    </style>
    <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