@extends('main')
@section('body')
    <div class="container mt-0 mt-md-5">
        <div id="notes" class="mb-2 d-none"></div>
        <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-list-check fa-10x icon-design-large"></i>
            </div>
            <div class="col-12 col-md-5">
                <div class="mb-3">
                    <h3 class="mb-1 fw-bold">{!! __("universal.page.order_status.title") !!}</h3>
                    <p>{!! __("universal.page.order_status.text") !!}</p>
                </div>
                <form id="form_auth">
                    <div class="row">
                        <div class="col-12 pb-2">
                            @component("components.inputs.input_info", ["id" => "number", "placeholder" => __("universal.order_no"), "dataTarget" => "modal_info_number"])
                            @endcomponent
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 pb-2">
                            @component("components.inputs.input_info", ["id" => "postal_code", "type" => "password", "placeholder" => __("universal.postal_code"), "dataTarget" => "modal_info_postal_code"])
                            @endcomponent
                        </div>
                    </div>
                    <section id="captcha" class="mt-3">
                        @include("captcha.index")
                    </section>
                    <div class="row mt-3">
                        <div class="col-12 d-grid gap-2">
                            @component("components.buttons.button", [
                                 "id" => "btn_check_status",
                                 "title" => __("universal.button.check_status")
                             ])
                            @endcomponent
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @component("components.modals.modal", ["id" => "modal_info_number", "modalTitle" => __(GetAppText("info.order_status_number.title"))])
        @slot("modalBody")
            {!! __(GetAppText("info.order_status_number.text")) !!}
        @endSlot
    @endcomponent
    @component("components.modals.modal", ["id" => "modal_info_postal_code", "modalTitle" => __(GetAppText("info.order_status_postal_code.title"))])
        @slot("modalBody")
            {!! __(GetAppText("info.order_status_postal_code.text")) !!}
        @endSlot
    @endcomponent
@endsection