@extends('main')
@section('body')
    <div class="container my-0 my-md-5">
        <div class="row justify-content-center align-items-center">
            <div class="col-12 col-md-4 d-none d-lg-block">
                <i class="fa-solid fa-envelope fa-10x icon-design-large"></i>
            </div>
            <div class="col-12 col-md-6">
                <div class="mb-3">
                    <h3 class="mb-1 fw-bold">{!! __("universal.page.contact_form.title") !!}</h3>
                    <p>{!!__("universal.page.contact_form.text") !!}</p>
                </div>
                <form id="form_contact">
                    <div class="row">
                        <div class="col-12 pb-2">
                            @component("components.inputs.input_info", ["id" => "order_no", "label" => __("universal.order_no"),"placeholder" => __("universal.order_no"), "value" => $orderNo, "dataTarget" => "modal_info_order_no", "helpText" => __("universal.help.contact_form.order_no")])
                            @endcomponent
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6 pb-2">
                            @component("components.inputs.input", ["id" => "first_name", "label" => __("universal.first_name"), "placeholder" => __("universal.first_name"), "value" => session("user.firstName", ""), "mandatory" => true])
                            @endcomponent
                        </div>
                        <div class="col-6 pb-2">
                            @component("components.inputs.input", ["id" => "last_name", "label" => __("universal.last_name"), "placeholder" => __("universal.last_name"), "value" => session("user.lastName", ""), "mandatory" => true])
                            @endcomponent
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 pb-2">
                            @component("components.inputs.textarea", ["id" => "message", "label" => __("universal.your_message"), "placeholder" => __("universal.your_message"), "mandatory" => true])
                            @endcomponent
                        </div>
                    </div>
                    <div class="mt-1">
                        <h6 class="mb-1 fw-bold">
                            {{__("universal.page.contact_form_reply_options.title")}}
                            <sup><i class="fa-solid fa-asterisk fa-xs text-danger"></i></sup>
                        </h6>
                        <p>{!!__("universal.page.contact_form_reply_options.text")!!}</p>
                    </div>
                    <div class="row">
                        <div class="col-12 pb-2">
                            @component("components.radios.radio", ["id" => "reply_option_phone", "name" => "reply_options", "value" => "phone", "label" => __("universal.phone")])
                            @endcomponent
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 pb-2">
                            @component("components.radios.radio", ["id" => "reply_option_mail", "name" => "reply_options", "value" => "email", "label" => __("universal.email")])
                            @endcomponent
                        </div>
                    </div>
                    <div id="section_reply_by_phone" class="row d-none">
                        <div class="col-12">
                            @component("components.inputs.input", ["id" => "phone_no", "label" => __("universal.phone"), "placeholder" => __("universal.phone")])
                            @endcomponent
                        </div>
                    </div>
                    <div id="section_reply_by_mail" class="row d-none">
                        <div class="col-12">
                            @component("components.inputs.input", ["id" => "email", "label" => __("universal.email"), "placeholder" => __("universal.email")])
                            @endcomponent
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-12 text-end">
                            @component("components.buttons.button", [
                                 "id" => "btn_send",
                                 "title" => __("universal.button.send"),
                                 "style" => "min-width: 8em;",
                                 "buttonClass" => "btn-default"
                             ])
                            @endcomponent
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @component("components.modals.modal", ["id" => "modal_info_order_no", "modalTitle" => __("universal.info.contact_order_no.title")])
        @slot("modalBody")
            {!! __("universal.info.contact_order_no.text") !!}
        @endSlot
    @endcomponent
@endsection