@extends('main')
@section('body')
    <div class="container mt-0 mt-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-user-pen fa-10x text-ingram-blue"></i>
            </div>
            <div class="col-12 col-md-6">
                <div class="mb-3">
                    <h3 class="mb-1 fw-bold">{!! __(GetAppText("page.edit_user_profile.title")) !!}</h3>
                    <p>{!!__(GetAppText("page.edit_user_profile.text")) !!}</p>
                </div>
                <form>
                    <div class="row">
                        <div class="col-12 col-lg-6 pb-2">
                            @component("components.inputs.input", ["id" => "first_name", "label" => __("universal.first_name"), "value" => session("user.firstName"), "mandatory" => true])
                            @endcomponent
                        </div>
                        <div class="col-12 col-lg-6 pb-2">
                            @component("components.inputs.input", ["id" => "last_name", "label" => __("universal.last_name"), "value" => session("user.lastName"), "mandatory" => true])
                            @endcomponent
                        </div>
                    </div>
                    <div class="row">
                         <div class="col-12 pb-2">
                            @component("components.inputs.input_info", ["id" => "personal_email", "label" => __(GetAppText("personal_email")), "value" => session("user.personalEmail"), "dataTarget" => "modal_info_personal_email", "mandatory" => true])
                            @endcomponent
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-12 text-end">
                            @component("components.buttons.button", [
                                 "id" => "btn_save",
                                 "title" => __("universal.button.save"),
                                 "style" => "min-width: 8em;"
                             ])
                            @endcomponent
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="container py-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-address-card fa-10x text-ingram-blue"></i>
            </div>
            <div class="col-12 col-md-6">
                <div class="row">
                    <div class="col-12">
                        <h3 class="mb-1 fw-bold">{!! __(GetAppText("page.edit_general_customer_data.title")) !!}</h3>
                        <p>{!! __(GetAppText("page.edit_general_customer_data.text")) !!}</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <table class="table table-striped">
                            <tr>
                                <th>{{__("universal.company")}}:</th>
                                <td>{{session("user.company")}}</td>
                            </tr>
                            <tr>
                                <th>{{__("universal.address_1")}}:</th>
                                <td>{{session("user.address_1")}}</td>
                            </tr>
                            <tr>
                                <th>{{__("universal.address_2")}}:</th>
                                <td>{{session("user.address_2")}}</td>
                            </tr>
                            <tr>
                                <th>{{__("universal.postal_code")}}:</th>
                                <td>{{session("user.postalCode")}}</td>
                            </tr>
                            <tr>
                                <th>{{__("universal.city")}}:</th>
                                <td>{{session("user.city")}}</td>
                            </tr>
                            <tr>
                                <th>{{__("universal.country")}}:</th>
                                <td>{{session("user.country")}}</td>
                            </tr>
                        </table>
                        <table class="table table-striped mt-4">
                            <tr>
                                <th>{{__("universal.phone")}}:</th>
                                <td>{{session("user.generalPhone")}}</td>
                            </tr>
                            <tr>
                                <th>{{__("universal.email")}}:</th>
                                <td>{{session("user.generalEmail")}}</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-12 text-end">
                        @component("components.links.link", [
                            "id" => "lnk_general_customer_data",
                            "title" => __("universal.link.contact_customer_service"),
                            "url" => "/contact/form",
                            "linkClass" => "btn btn-secondary",
                            "style" => "min-width: 8em;"
                        ])
                        @endcomponent
                    </div>
                </div>
            </div>
        </div>
    </div>
    @component("components.modals.modal", ["id" => "modal_info_personal_email", "modalTitle" => __(GetAppText("info.personal_email.title"))])
        @slot("modalBody")
            {!! __(GetAppText("info.personal_email.text")) !!}
        @endSlot
    @endcomponent
@endsection