@extends('layouts.master')
@section('background-image', '/assets/images/login.jpg')
@section('content')
    <div class="container">
        <div class="nk-gap-6"></div>
        <div class="row">
            <div class="col-6 offset-3 bg-dark-1 block-border block-shadow rounded p-20">
                <div class="text-center">
                    <h2 class="nk-title">Complete your account</h2>
                    <small>These informations below is missing in your account.</small>
                    <div class="nk-title-sep-icon" style="margin: 5px auto;">
                        <span class="icon"><span class="ion-android-warning text-warning"></span></span>
                    </div>
                </div>
                @include("components.error-alert")
                <form method="post" enctype="multipart/form-data" action="{{ route('auth.doCompleteLogin') }}">
                    @csrf
                    @method("PUT")
                    <input type="hidden" name="missingData" value="true" />
                    @if ($missingData["name"])
                        @include('components.form-group', [
                            "label" => "First name",
                            "name" => "name",
                            "placeholder" => "Your name ...",
                            "value" => old('name')
                        ])
                    @endif
                    @if ($missingData["lastName"])
                        @include('components.form-group', [
                            "label" => "Last name",
                            "name" => "last_name",
                            "placeholder" => "your last name ...",
                            "value" => old('last_name')
                        ])
                    @endif
                    @if ($missingData["phone"])
                        @include('components.form-group', [
                            "label" => "Phone number",
                            "name" => "phone",
                            "min" => 4,
                            "max" => 15,
                            "placeholder" => "Your phone number, only numbers, will be used in purchases only ...",
                            "value" => old('phone'),
                            "helper" => "Don't need to put + in front of number, only numbers."
                        ])
                    @endif
                    @if (($missingData["question"] && $missingData["answer"]) || $missingData["question"])
                        <div class="form-group">
                            <label for="sec">{{ __("auth.SecretQuestion") }}</label>
                            <select id="sec" name="sec" class="form-control">
                                <option value="-1">{{ __("auth.SecretQuestionSelect") }} ...</option>
                                @foreach ($data["questions"] as $question)
                                    <option value="{{ $question["QST_ID"] }}"{{ old('sec') == $question["QST_ID"] ? " selected" : "" }}>{{ $question["QST_TEXT"] }}</option>
                                @endforeach
                            </select>
                        </div>
                        @include('components.form-group', [
                            "label" => "Secret Question Answer",
                            "name" => "sec_ans",
                            "placeholder" => "Secret Question Answer ...",
                            "value" => old('sec_ans')
                        ])
                    @elseif ($missingData["answer"])
                        <div class="form-group">
                            <label>Secret question</label>
                            <div class="form-text">{{ $data["question"] }}</div>
                        </div>
                        @include('components.form-group', [
                            "label" => "Secret Question Answer",
                            "name" => "sec_ans",
                            "placeholder" => "Secret Question Answer ...",
                            "value" => old('sec_ans')
                        ])
                    @endif
                    @include("components.form-group", [
                        "control" => "button",
                        "value" => "Complete account data"
                    ])
                </form>
            </div>
        </div>
        <div class="nk-gap-6"></div>
    </div>
@endsection