@extends('main')
@section('body')
    <div class="container my-0 my-md-5">
        <div class="row mb-3">
            <div class="col-12 text-end">
                <h5 class="d-inline justify-content-end"><span class="badge text-bg-primary">{{__(GetAppText("registered"))}}: {{FormatDateTime($user->added)}}</span></h5>
                @if(!empty($user->activated))
                    <h5 class="d-inline justify-content-end"><span class="badge text-bg-success">{{__(GetAppText("activated"))}}: {{FormatDateTime($user->activated)}}</span></h5>
                @else
                    <h5 class="d-inline"><span class="badge text-bg-danger">{{__(GetAppText("not_activated"))}}</span></h5>
                @endif
                @if(!empty($user->lastAccess))
                    <h5 class="d-inline justify-content-end"><span class="badge text-bg-secondary">{{__(GetAppText("last_access"))}}: {{FormatDateTime($user->lastAccess)}}</span></h5>
                @endif
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <h3 class="mb-1 fw-bold">{!! __(GetAppText("page.admin_user.title")) !!}</h3>
                <p>{!!__(GetAppText("page.admin_user.text")) !!}</p>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="border-bottom pb-1 mb-2">
                    <h5 class="mb-1"><i class="fa-solid fa-address-card text-ingram-blue me-2"></i>{!! __(GetAppText("page.admin_user_change_personal_data.title")) !!}</h5>
                </div>
                <p>
                    {{__(GetAppText("page.admin_user_change_personal_data.text"))}}
                </p>
                <div class="row">
                    <div class="col-12 col-lg-6 pb-2">
                        @component("components.inputs.input", ["id" => "first_name", "label" => __("universal.first_name"), "value" => $user->firstName ?? ""])
                        @endcomponent
                    </div>
                    <div class="col-12 col-lg-6 pb-2">
                        @component("components.inputs.input", ["id" => "last_name", "label" => __("universal.last_name"), "value" => $user->lastName ?? ""])
                        @endcomponent
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 pb-2">
                        @component("components.inputs.input", ["id" => "personal_email", "label" => __(GetAppText("personal_email")), "value" => $user->personalEmail ?? ""])
                        @endcomponent
                    </div>
                </div>
                <div class="row mt-3 mb-4">
                    <div class="col-12 text-end">
                        @component("components.links.link", [
                            "title" => __("universal.link.back"),
                            "url" => "/admin/users",
                            "linkClass" => "btn btn-secondary",
                            "style" => "min-width: 8em;"
                        ])
                        @endcomponent
                        @component("components.buttons.button", [
                             "id" => "btn_change_personal_data",
                             "title" => __("universal.button.save"),
                             "buttonClass" => "btn-primary",
                             "style" => "min-width: 8em;"
                         ])
                        @endcomponent
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="border-bottom pb-1 mb-2">
                    <h5 class="mb-1"><i class="fa-solid fa-user text-ingram-blue me-2"></i>{!! __(GetAppText("page.admin_user_change_username.title")) !!}</h5>
                </div>
                <p>
                    {{__(GetAppText("page.admin_user_change_username.text"))}}
                </p>
                <div class="row">
                    <div class="col-12 pb-2">
                        @component("components.inputs.input_info", ["id" => "username", "label" => __(GetAppText("username")), "value" => $user->username ?? "", "placeholder" => __(GetAppText("username")), "dataTarget" => "modal_info_complexity_requirements_username"])
                        @endcomponent
                    </div>
                </div>
                <div class="row mt-3 mb-4">
                    <div class="col-12 text-end">
                        @component("components.links.link", [
                            "title" => __("universal.link.back"),
                            "url" => "/admin/users",
                            "linkClass" => "btn btn-secondary",
                            "style" => "min-width: 8em;"
                        ])
                        @endcomponent
                        @component("components.buttons.button", [
                             "id" => "btn_change_username",
                             "title" => __("universal.button.save"),
                             "buttonClass" => "btn-primary",
                             "style" => "min-width: 8em;"
                         ])
                        @endcomponent
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="border-bottom pb-1 mb-2">
                    <h5 class="mb-1"><i class="fa-solid fa-key text-ingram-blue me-2"></i>{!! __(GetAppText("page.admin_user_change_password.title")) !!}</h5>
                </div>
                <p>
                    {{__(GetAppText("page.admin_user_change_password.text"))}}
                </p>
                <div class="row">
                    <div class="col-12 pb-2">
                        @component("components.inputs.input_info", ["id" => "password", "label" => __(GetAppText("password")), "type" => "password", "placeholder" => __(GetAppText("password")), "dataTarget" => "modal_info_complexity_requirements_password"])
                        @endcomponent
                    </div>
                </div>
                <div class="row mt-3 mb-4">
                    <div class="col-12 text-end">
                        @component("components.links.link", [
                            "title" => __("universal.link.back"),
                            "url" => "/admin/users",
                            "linkClass" => "btn btn-secondary",
                            "style" => "min-width: 8em;"
                        ])
                        @endcomponent
                        @component("components.buttons.button", [
                             "id" => "btn_change_password",
                             "title" => __("universal.button.save"),
                             "buttonClass" => "btn-primary",
                             "style" => "min-width: 8em;"
                         ])
                        @endcomponent
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="border-bottom pb-1 mb-2">
                    <h5 class="mb-1"><i class="fa-solid fa-lock text-ingram-blue me-2"></i>{!! __(GetAppText("page.admin_user_select_mfa_method.title")) !!}</h5>
                </div>
                <p>
                    {{__(GetAppText("page.admin_user_select_mfa_method.text"))}}
                </p>
                <div class="row">
                    <div class="col-12 pb-2">
                        @component("components.selects.select", ["id" => "mfa_method", "label" => __(GetAppText("mfa_method"))])
                            @slot("options")
                                @if($user->mfaMethod == "email")
                                    <option value="email">{{__("universal.email")}}</option>
                                    <option value="">{{__("universal.disabled")}}</option>
                                @else
                                    <option value="">{{__("universal.disabled")}}</option>
                                    <option value="email">{{__("universal.email")}}</option>
                                @endif
                            @endslot
                        @endcomponent

                    </div>
                </div>
                <div class="row mt-3 mb-4">
                    <div class="col-12 text-end">
                        @component("components.links.link", [
                            "title" => __("universal.link.back"),
                            "url" => "/admin/users",
                            "linkClass" => "btn btn-secondary",
                            "style" => "min-width: 8em;"
                        ])
                        @endcomponent
                        @component("components.buttons.button", [
                             "id" => "btn_select_2FA",
                             "title" => __("universal.button.save"),
                             "buttonClass" => "btn-primary",
                             "style" => "min-width: 8em;"
                         ])
                        @endcomponent
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="border-bottom pb-1 mb-2">
                    <h5 class="mb-1"><i class="fa-solid fa-user-lock text-ingram-blue me-2"></i>{!! __(GetAppText("page.admin_user_change_lock_status.title")) !!}</h5>
                </div>
                <p>
                    {{__(GetAppText("page.admin_user_change_lock_status.text"))}}
                </p>
                <div class="row">
                    <div class="col-12 pb-2">
                        @component("components.checkboxes.checkbox", ["id" => "locked", "label" => __(GetAppText("account_locked")), "value" => 1, "checked" => !empty($user->locked) ? "checked" : ""])
                        @endcomponent
                    </div>
                </div>
                <div class="row mt-3 mb-4">
                    <div class="col-12 text-end">
                        @component("components.links.link", [
                            "title" => __("universal.link.back"),
                            "url" => "/admin/users",
                            "linkClass" => "btn btn-secondary",
                            "style" => "min-width: 8em;"
                        ])
                        @endcomponent
                        @component("components.buttons.button", [
                             "id" => "btn_change_lock_status",
                             "title" => __("universal.button.save"),
                             "buttonClass" => "btn-primary",
                             "style" => "min-width: 8em;"
                         ])
                        @endcomponent
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="border-bottom pb-1 mb-2">
                    <h5 class="mb-1"><i class="fa-solid fa-user-tag text-ingram-blue me-2"></i>{!! __(GetAppText("page.admin_user_change_customer_type.title")) !!}</h5>
                </div>
                <p>
                    {{__(GetAppText("page.admin_user_change_customer_type.text"))}}
                </p>
                <div class="row">
                    <div class="col-12 pb-2">
                        @component("components.selects.select", ["id" => "user_category", "label" => __(GetAppText("user_category"))])
                            @slot("options")
                                <option value="{{$user->categoryCode}}">{{$user->categoryName}}</option>
                                @foreach($userCategories AS $category)
                                    @if($category->code != $user->categoryCode)
                                        <option value="{{$category->code ?? ""}}">{{$category->name ?? ""}}</option>
                                    @endif
                                @endforeach
                            @endslot
                        @endcomponent
                    </div>
                </div>
                <div class="row mt-3 mb-4">
                    <div class="col-12 text-end">
                        @component("components.links.link", [
                            "title" => __("universal.link.back"),
                            "url" => "/admin/users",
                            "linkClass" => "btn btn-secondary",
                            "style" => "min-width: 8em;"
                        ])
                        @endcomponent
                        @component("components.buttons.button", [
                             "id" => "btn_change_customer_type",
                             "title" => __("universal.button.save"),
                             "buttonClass" => "btn-primary",
                             "style" => "min-width: 8em;"
                         ])
                        @endcomponent
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="border-bottom pb-1 mb-2">
                    <h5 class="mb-1"><i class="fa-solid fa-user-tie text-ingram-blue me-2"></i>{!! __(GetAppText("page.admin_user_change_business_owner.title")) !!}</h5>
                </div>
                <p>
                    {{__(GetAppText("page.admin_user_change_business_owner.text"))}}
                </p>
                <div class="row">
                    <div class="col-12 pb-2">
                        @component("components.selects.select", ["id" => "business_owner", "label" => __(GetAppText("business_owner"))])
                            @slot("options")
                                <option value="{{$businessOwnerUserToBeManaged->id}}">{{$businessOwnerUserToBeManaged->name}}</option>
                                @foreach($businessOwners AS $businessOwner)
                                    @if($businessOwner["id"] != $businessOwnerUserToBeManaged->id)
                                        <option value="{{$businessOwner["id"] ?? ""}}">{{$businessOwner["name"] ?? ""}}</option>
                                    @endif
                                @endforeach
                            @endslot
                        @endcomponent
                    </div>
                </div>
                <div class="row mt-3 mb-4">
                    <div class="col-12 text-end">
                        @component("components.links.link", [
                            "title" => __("universal.link.back"),
                            "url" => "/admin/users",
                            "linkClass" => "btn btn-secondary",
                            "style" => "min-width: 8em;"
                        ])
                        @endcomponent
                        @component("components.buttons.button", [
                             "id" => "btn_change_business_owner",
                             "title" => __("universal.button.save"),
                             "buttonClass" => "btn-primary",
                             "style" => "min-width: 8em;"
                         ])
                        @endcomponent
                    </div>
                </div>
            </div>
        </div>
        @if(!empty($user->activated) && !empty($user->customerNo))
            <div class="row">
                <div class="col-12">
                    <div class="border-bottom pb-1 mb-2">
                        <h5 class="mb-1"><i class="fa-solid fa-link text-ingram-blue me-2"></i>{!! __(GetAppText("page.admin_user_change_customer_assignment.title")) !!}</h5>
                    </div>
                    <p>
                        {{__(GetAppText("page.admin_user_change_customer_assignment.text"))}}
                    </p>
                    <div class="row">
                        <div class="col-12">
                            @component("components.inputs.input", ["id" => "customer_no", "label" => __("universal.customer_no"), "value" => $user->customerNo ?? "", "placeholder" => __("universal.customer_no")])
                            @endcomponent
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-auto pb-2">
                            <span class="fw-bold">{{__("universal.customer_no")}}:</span>
                            <span>{{$user->customerNo ?? ""}}</span>
                        </div>
                        <div class="col-auto pb-2">
                            <span class="fw-bold">{{__("universal.company")}}:</span>
                            <span>{{$user->company ?? ""}}</span>
                        </div>
                        <div class="col-auto pb-2">
                            <span class="fw-bold">{{__("universal.address_1")}}:</span>
                            <span>{{$user->address_1 ?? ""}}</span>
                        </div>
                        <div class="col-auto pb-2">
                            <span class="fw-bold">{{__("universal.address_2")}}:</span>
                            <span>{{$user->address_2 ?? ""}}</span>
                        </div>
                        <div class="col-auto pb-2">
                            <span class="fw-bold">{{__("universal.postal_code")}}:</span>
                            <span>{{$user->postalCode ?? ""}}</span>
                        </div>
                        <div class="col-auto pb-2">
                            <span class="fw-bold">{{__("universal.city")}}:</span>
                            <span>{{$user->city ?? ""}}</span>
                        </div>
                        <div class="col-auto pb-2">
                            <span class="fw-bold">{{__("universal.country")}}:</span>
                            <span>{{$user->country ?? ""}} {{$user->countryCode ?? ""}}</span>
                        </div>
                        <div class="col-auto pb-2">
                            <span class="fw-bold">{{__("universal.phone")}}:</span>
                            <span>{{$user->generalPhone ?? ""}}</span>
                        </div>
                        <div class="col-auto pb-2">
                            <span class="fw-bold">{{__("universal.email")}}:</span>
                            <span>{{$user->generalEmail ?? ""}}</span>
                        </div>
                    </div>
                    <div class="row mt-3 mb-4">
                        <div class="col-12 text-end">
                            @component("components.links.link", [
                                "title" => __("universal.link.back"),
                                "url" => "/admin/users",
                                "linkClass" => "btn btn-secondary",
                                "style" => "min-width: 8em;"
                            ])
                            @endcomponent
                            @component("components.buttons.button", [
                                 "id" => "btn_change_assignment_to_customer",
                                 "title" => __("universal.button.save"),
                                 "buttonClass" => "btn-primary",
                                 "style" => "min-width: 8em;"
                             ])
                            @endcomponent
                        </div>
                    </div>
                </div>
            </div>
        @endif
        <div class="row">
            <div class="col-12">
                <div class="border-bottom pb-1 mb-2">
                    <h5 class="mb-1"><i class="fa-solid fa-user-group text-ingram-blue me-2"></i>{!! __(GetAppText("page.admin_user_change_group_membership.title")) !!}</h5>
                </div>
                <p>
                    {{__(GetAppText("page.admin_user_change_group_membership.text"))}}
                </p>
                <div class="row">
                    <div class="col-12 pb-2">
                        <table id="table_groups" class="table table-striped">
                            <thead>
                            <tr>
                                <th>{{__("universal.name")}}</th>
                                <th>{{__("universal.description")}}</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($groups AS $group)
                                <tr>
                                    <td>{{$group->name ?? ""}}</td>
                                    <td>{{$group->description ?? ""}}</td>
                                    <td>
                                        @component("components.checkboxes.checkbox", ["id" => $group->code, "name" => "groups", "value" => $group->code, "checked" => $group->checked])
                                        @endcomponent
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row mt-3 mb-5">
                    <div class="col-12 text-end">
                        @component("components.links.link", [
                            "title" => __("universal.link.back"),
                            "url" => "/admin/users",
                            "linkClass" => "btn btn-secondary",
                            "style" => "min-width: 8em;"
                        ])
                        @endcomponent
                        @component("components.buttons.button", [
                             "id" => "btn_change_group_membership",
                             "title" => __("universal.button.save"),
                             "buttonClass" => "btn-primary",
                             "style" => "min-width: 8em;"
                         ])
                        @endcomponent
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="border-bottom pb-1 mb-2">
                    <h5 class="mb-1"><i class="fa-solid fa-user-slash text-ingram-blue me-2"></i>{!! __(GetAppText("page.admin_user_delete_user.title")) !!}</h5>
                </div>
                <p>
                    {{__(GetAppText("page.admin_user_delete_user.text"))}}
                </p>
                <div class="row">
                    <div class="col-12 col-lg-6 pb-2">
                        @component("components.inputs.input", ["id" => "delete_user_account", "label" => __(GetAppText("username"))])
                        @endcomponent
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-3 mb-5">
            <div class="col-12 text-end">
                @component("components.links.link", [
                    "title" => __("universal.link.back"),
                    "url" => "/admin/users",
                    "linkClass" => "btn btn-secondary",
                    "style" => "min-width: 8em;"
                ])
                @endcomponent
                @component("components.buttons.button", [
                     "id" => "btn_delete_user_account",
                     "title" => __("universal.button.delete"),
                     "buttonClass" => "btn-danger",
                     "style" => "min-width: 8em;"
                 ])
                @endcomponent
            </div>
        </div>
    </div>
    @component("components.modals.modal", ["id" => "modal_info_complexity_requirements_username", "modalTitle" => __(GetAppText("info.complexity_requirements_username.title"))])
        @slot("modalBody")
            {!! __(GetAppText("info.complexity_requirements_username.text")) !!}
        @endSlot
    @endcomponent
    @component("components.modals.modal", ["id" => "modal_info_complexity_requirements_password", "modalTitle" => __(GetAppText("info.complexity_requirements_password.title"))])
        @slot("modalBody")
            {!! __(GetAppText("info.complexity_requirements_password.text")) !!}
        @endSlot
    @endcomponent
@endsection