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

@section('content')

    <form class="twa-form disable-on-submit" 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'] ? "*" : "") ])

                        <div class="twa-form not-responsive">
                            <input type="hidden" class="dateField" name="{{$field['name']}}" value="toBeChanged" required placeholder="{{__($field['label'])}}"></input>
                            @component('EcomGeneralViews::components.form.input', [ "parentClass" => "", "size" => "third not-responsive", "type" => "select", "label" => ___('ecom.day') ])
                                <select name="day" required >
                                    <option selected disabled value="">{{ ___('ecom.day') }}</option>
                                    @for($i=1;$i<=31;$i++)
                                        <option value="{{ $i }}">{{ $i }}</option>
                                    @endfor
                                </select>
                            @endcomponent
                            @component('EcomGeneralViews::components.form.input', [ "parentClass" => "", "size" => "third  not-responsive", "type" => "select", "label" => ___('ecom.month') ])
                                <select name="month" required>
                                    <option selected disabled value="">{{ ___('ecom.month') }}</option>
                                    @for($i=1;$i<=12;$i++)
                                        <option value="{{ $i }}">{{ \Carbon\Carbon::create()->day(1)->month($i)->format('F') }}</option>
                                    @endfor
                                </select>
                            @endcomponent

                            @component('EcomGeneralViews::components.form.input', [ "parentClass" => "", "size" => "third  not-responsive", "type" => "select", "label" => ___('ecom.year') ])
                                <select name="year" required>
                                    <option selected disabled value="">{{ ___('ecom.year') }}</option>
                                    @for($i=date("Y");$i>=date("Y")-100;$i--)
                                        <option value="{{ $i }}">{{ $i }}</option>
                                    @endfor
                                </select>
                            @endcomponent
                        </div>
                        <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'], $field['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'] , $field['value'])}}" 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' => $field['value'] , 'country_code' =>$country_code ] ) @endcomponent
                    @break

            @endswitch

        @endforeach


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



    </form>

@endsection

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

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

@endsection