@extends('main')
@section('body')
    <div id="sub_content">
        <div class="container my-0 my-md-5">
            <div class="row justify-content-center align-items-center">
                <div class="col-12 col-md-9">
                    <div class="row">
                        <div class="col-12">
                            @component("components.alerts.alert", ["class" => "alert-info alert-permanent", "headline" => __(GetAppText("info.for_dealers_only.title")), "text" => __(GetAppText("info.for_dealers_only.text"))])
                            @endcomponent
                        </div>
                    </div>
                    <div class="mb-3">
                        <h3 class="mb-1 fw-bold">{!! __(GetAppText("page.ext_user_register_index.title")) !!}</h3>
                        <p>{!! __(GetAppText("page.ext_user_register_index.text")) !!}</p>
                    </div>
                    <div class="row mb-2">
                        <div class="col-12">
                            @component("components.divider.divider_text", ["text" => __("universal.user_details"), "class" => "fw-bold"])
                            @endcomponent
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 pb-2">
                            @component("components.inputs.input_info", ["id" => "username", "label" => __(GetAppText("username")), "placeholder" => __(GetAppText("username")), "dataTarget" => "modal_info_username_complexity_requirements", "helpText" => __(GetAppText("help.register_user.username")), "mandatory" => true])
                            @endcomponent
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 col-md-6 pb-2">
                            @component("components.inputs.input_info", ["id" => "password", "type" => "password", "label" => __(GetAppText("password")), "placeholder" => __(GetAppText("password")),
                                "dataTarget" => "modal_info_password_complexity_requirements",
                                "helpText" => __(GetAppText("help.register_user.password")),
                                "mandatory" => true
                                ])
                            @endcomponent
                        </div>
                        <div class="col-12 col-md-6 pb-2">
                            @component("components.inputs.input", ["id" => "confirm_password", "type" => "password", "label" => __(GetAppText("confirm_password")), "placeholder" => __(GetAppText("confirm_password")), "mandatory" => true])
                            @endcomponent
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 col-md-6 pb-2">
                            @component("components.inputs.input_info", ["id" => "personal_email", "type" => "text", "label" => __(GetAppText("personal_email")), "placeholder" => __(GetAppText("personal_email")), "dataTarget" => "modal_info_personal_email", "mandatory" => true])
                            @endcomponent
                        </div>
                        <div class="col-12 col-md-6 pb-2">
                            @component("components.inputs.input", ["id" => "confirm_personal_email", "type" => "text", "label" => __(GetAppText("confirm_personal_email")), "placeholder" => __(GetAppText("confirm_personal_email")), "mandatory" => true])
                            @endcomponent
                        </div>
                    </div>
                    <div class="row mt-4 mb-2">
                        <div class="col-12">
                            @component("components.divider.divider_text", ["text" => __("universal.customer_details"), "class" => "fw-bold"])
                            @endcomponent
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6 pb-2">
                            @component("components.inputs.input", ["id" => "company", "type" => "text", "label" => __("universal.company"), "placeholder" => __("universal.company"),"mandatory" => true])
                            @endcomponent
                        </div>
                        <div class="col-6 pb-2">

                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6 pb-2">
                            @component("components.inputs.input", ["id" => "first_name", "type" => "text", "label" => __("universal.first_name"), "placeholder" => __("universal.first_name"), "mandatory" => true])
                            @endcomponent
                        </div>
                        <div class="col-6 pb-2">
                            @component("components.inputs.input", ["id" => "last_name", "type" => "text", "label" => __("universal.last_name"), "placeholder" => __("universal.last_name"), "mandatory" => true])
                            @endcomponent
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 pb-2">
                            @component("components.inputs.input", ["id" => "street", "type" => "text", "label" => __("universal.street"), "placeholder" => __("universal.street"), "mandatory" => true])
                            @endcomponent
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6 pb-2">
                            @component("components.inputs.input", ["id" => "postal_code", "type" => "text", "label" => __("universal.postal_code"), "placeholder" => __("universal.postal_code"), "mandatory" => true])
                            @endcomponent
                        </div>
                        <div class="col-6 pb-2">
                            @component("components.inputs.input", ["id" => "city", "type" => "text", "label" => __("universal.city"), "placeholder" => __("universal.city"), "mandatory" => true])
                            @endcomponent
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 pb-2">
                            @component("components.selects.select", ["id" => "country", "label" => __("universal.country"), "mandatory" => true])
                                @slot("options")
                                    <option value="">{{__("universal.please_select")}}</option>
                                    @foreach($countries AS $country)
                                        <option value="{{$country->code ?? ""}}">{{$country->name ?? ""}}</option>
                                    @endforeach
                                @endslot
                            @endcomponent
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6 pb-2">
                            @component("components.inputs.input", ["id" => "phone", "type" => "text", "label" => __("universal.phone"), "placeholder" => __("universal.phone"), "mandatory" => true])
                            @endcomponent
                        </div>
                        <div class="col-6 pb-2">
                            @component("components.inputs.input_info", ["id" => "email", "type" => "text", "label" => __("universal.email"), "placeholder" => __("universal.email"), "dataTarget" => "modal_info_general_email", "mandatory" => true])
                            @endcomponent
                        </div>
                    </div>
                    <div class="row mt-4 mb-2">
                        <div class="col-12">
                            @component("components.divider.divider_text", ["text" => __("universal.privacy_policy_and_consent"), "class" => "fw-bold"])
                            @endcomponent
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-12">
                            {{__("universal.privacy_policy_and_consent_notice")}}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            @component("components.checkboxes.checkbox_link_as_label", [
                                "checkboxId" => "privacy_policy",
                                "checkboxValue" => 1,
                                "linkId" => "lnk_privacy_policy",
                                "dataTarget" => "modal_info_privacy_policy",
                                "linkTitle" => __("universal.link.privacy_policy_and_consent")
                            ])
                            @endcomponent
                        </div>
                    </div>
                    <section id="captcha" class="mt-4">
                        @include("captcha.index")
                    </section>
                    <div class="row mt-3">
                        <div class="col-12 col-md-6 d-grid mb-1 mb-md-0">
                            @component("components.links.link", [
                                "id" => "lnk_register_user",
                                "title" => __("universal.link.back"),
                                "url" => session("url.loginPage"),
                                "linkClass" => "btn btn-danger"
                            ])
                            @endcomponent
                        </div>
                        <div class="col-12 col-md-6 d-grid">
                            @component("components.buttons.button", [
                                 "id" => "btn_register_user",
                                 "title" => __("universal.button.next")
                             ])
                            @endcomponent
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @component("components.modals.modal", ["id" => "modal_info_username_complexity_requirements", "modalTitle" => __(GetAppText("info.complexity_requirements_username.title"))])
        @slot("modalBody")
            {!! __(GetAppText("info.complexity_requirements_username.text")) !!}
        @endSlot
    @endcomponent
    @component("components.modals.modal", ["id" => "modal_info_password_complexity_requirements", "modalTitle" => __(GetAppText("info.complexity_requirements_password.title"))])
        @slot("modalBody")
            {!! __(GetAppText("info.complexity_requirements_password.text")) !!}
        @endSlot
    @endcomponent
    @component("components.modals.modal", ["id" => "modal_info_personal_email", "modalTitle" => __(GetAppText("info.personal_email.title"))])
        @slot("modalBody")
            {!! __(GetAppText("info.personal_email.text")) !!}
        @endSlot
    @endcomponent
    @component("components.modals.modal", ["id" => "modal_info_general_email", "modalTitle" => __(GetAppText("info.general_email.title"))])
        @slot("modalBody")
            {!! __(GetAppText("info.general_email.text")) !!}
        @endSlot
    @endcomponent
    @component("components.modals.modal", ["id" => "modal_info_privacy_policy", "modalTitle" => __("universal.info.privacy_policy.title"), "modalClass" => "modal-xl"])
        @slot("modalBody")
            {!! __("universal.info.privacy_policy.text") !!}
        @endSlot
    @endcomponent
@endsection