@extends('layouts.back-end.body')

@section('content')
    <style>
        .text-end {
            text-align: right !important;
        }
    </style>

    <div class="app-content pt-3 p-md-3 p-lg-4">
        <div class="container-xl">

            <div class="row g-3 align-items-center justify-content-between">
                <div class="col-auto">
                    <h1 class="app-page-title">{{ __('message.my account') }}</h1>
                </div>
                <div class="col-auto no-padding-margin" id="back-to-list">
                    <div class="page-utilities">
                        <div class="row g-2 justify-content-start justify-content-md-end align-items-center">
                            <div class="col-auto">
                                <div class="table-search-form row gx-1 align-items-center">
                                    <div class="col-auto">
                                        <a href="{{ route('users.index') }}"><button type="button"
                                                onclick="redirect_back();"
                                                class="btn btn-warning float-right cancel-margin"><svg
                                                    xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                    fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
                                                    <path fill-rule="evenodd"
                                                        d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" />
                                                </svg> {{ __('message.go back') }}</button></a>
                                    </div>
                                </div>
                            </div><!--//col-->
                        </div><!--//row-->
                    </div><!--//table-utilities-->
                </div><!--//col-auto-->
            </div>
        </div>



        <div class="row gy-4">
            <div class="col-12 col-lg-6">
                <div class="app-card app-card-account shadow-sm d-flex flex-column align-items-start">
                    <div class="app-card-header p-3 border-bottom-0">
                        <div class="row align-items-center gx-3">
                            <div class="col-auto">
                                <div class="app-icon-holder">
                                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person"
                                        fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd"
                                            d="M10 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm6 5c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z">
                                        </path>
                                    </svg>
                                </div><!--//icon-holder-->

                            </div><!--//col-->
                            <div class="col-auto">
                                <h4 class="app-card-title">{{ __('message.profile') }}</h4>
                            </div><!--//col-->
                        </div><!--//row-->
                    </div><!--//app-card-header-->
                    <div class="app-card-body px-4 w-100">
                        <div class="item border-bottom py-3">
                            <div class="row justify-content-between align-items-center">
                                <div class="col-auto">
                                    <div class="item-label mb-2"><strong>{{ __('message.photo') }}</strong></div>
                                    <div class="item-data"><img class="profile-image"
                                            src="{{ asset('assets/portal/images/app-logo.svg') }}" alt=""></div>
                                </div><!--//col-->
                                <div class="col text-end">
                                    <a class="btn-sm app-btn-secondary" href="#">{{ __('message.change') }}</a>
                                </div><!--//col-->
                            </div><!--//row-->
                        </div><!--//item-->
                        <div class="item border-bottom py-3">
                            <div class="row justify-content-between align-items-center">
                                <div class="col-auto">
                                    <div class="item-label"><strong>{{ __('message.actual name') }}</strong></div>
                                    <div class="item-data">{{ isset($user->actual_name) ? $user->actual_name : '' }}</div>
                                </div><!--//col-->
                                <div class="col text-end">
                                    <a class="btn-sm app-btn-secondary" href="#">{{ __('message.change') }}</a>
                                </div><!--//col-->
                            </div><!--//row-->
                        </div><!--//item-->
                        <div class="item border-bottom py-3">
                            <div class="row justify-content-between align-items-center">
                                <div class="col-auto">
                                    <div class="item-label"><strong>{{ __('message.email') }}</strong></div>
                                    <div class="item-data">{{ isset($user->email) ? $user->email : '' }}</div>
                                </div><!--//col-->
                                <div class="col text-end">
                                    <a class="btn-sm app-btn-secondary" href="#">{{ __('message.change') }}</a>
                                </div><!--//col-->
                            </div><!--//row-->
                        </div><!--//item-->
                        <div class="item border-bottom py-3">
                            <div class="row justify-content-between align-items-center">
                                <div class="col-auto">
                                    <div class="item-label"><strong>{{ __('message.phone') }}</strong></div>
                                    <div class="item-data">
                                        {{ isset($user->phone) ? $user->phone : '' }}
                                    </div>
                                </div><!--//col-->
                                <div class="col text-end">
                                    <a class="btn-sm app-btn-secondary" href="#">{{ __('message.change') }}</a>
                                </div><!--//col-->
                            </div><!--//row-->
                        </div><!--//item-->
                        <div class="item border-bottom py-3">
                            <div class="row justify-content-between align-items-center">
                                <div class="col-auto">
                                    <div class="item-label"><strong>{{ __('message.id card') }} | {{ __('message.passport') }}</strong></div>
                                    <div class="item-data">
                                        {{ isset($user->identity) ? $user->identity : '' }}
                                    </div>
                                </div><!--//col-->
                                <div class="col text-end">
                                    <a class="btn-sm app-btn-secondary" href="#">{{ __('message.change') }}</a>
                                </div><!--//col-->
                            </div><!--//row-->
                        </div><!--//item-->
                        <div class="item border-bottom py-3">
                            <div class="row justify-content-between align-items-center">
                                <div class="col-auto">
                                    <div class="item-label"><strong>{{ __('message.address') }}</strong></div>
                                    <div class="item-data">
                                        {{ isset($user->description) ? $user->description : '' }}
                                    </div>
                                </div><!--//col-->
                                <div class="col text-end">
                                    <a class="btn-sm app-btn-secondary" href="#">{{ __('message.change') }}</a>
                                </div><!--//col-->
                            </div><!--//row-->
                        </div><!--//item-->
                    </div><!--//app-card-body-->
                    <div class="app-card-footer p-4 mt-auto">
                        <a class="btn app-btn-secondary" href="#">{{ __('message.manage profile') }}</a>
                    </div><!--//app-card-footer-->

                </div><!--//app-card-->
            </div><!--//col-->

            <div class="col-12 col-lg-6">
                <div class="app-card app-card-account shadow-sm d-flex flex-column align-items-start">
                    <div class="app-card-header p-3 border-bottom-0">
                        <div class="row align-items-center gx-3">
                            <div class="col-auto">
                                <div class="app-icon-holder">
                                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-shield-check"
                                        fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd"
                                            d="M5.443 1.991a60.17 60.17 0 0 0-2.725.802.454.454 0 0 0-.315.366C1.87 7.056 3.1 9.9 4.567 11.773c.736.94 1.533 1.636 2.197 2.093.333.228.626.394.857.5.116.053.21.089.282.11A.73.73 0 0 0 8 14.5c.007-.001.038-.005.097-.023.072-.022.166-.058.282-.111.23-.106.525-.272.857-.5a10.197 10.197 0 0 0 2.197-2.093C12.9 9.9 14.13 7.056 13.597 3.159a.454.454 0 0 0-.315-.366c-.626-.2-1.682-.526-2.725-.802C9.491 1.71 8.51 1.5 8 1.5c-.51 0-1.49.21-2.557.491zm-.256-.966C6.23.749 7.337.5 8 .5c.662 0 1.77.249 2.813.525a61.09 61.09 0 0 1 2.772.815c.528.168.926.623 1.003 1.184.573 4.197-.756 7.307-2.367 9.365a11.191 11.191 0 0 1-2.418 2.3 6.942 6.942 0 0 1-1.007.586c-.27.124-.558.225-.796.225s-.526-.101-.796-.225a6.908 6.908 0 0 1-1.007-.586 11.192 11.192 0 0 1-2.417-2.3C2.167 10.331.839 7.221 1.412 3.024A1.454 1.454 0 0 1 2.415 1.84a61.11 61.11 0 0 1 2.772-.815z">
                                        </path>
                                        <path fill-rule="evenodd"
                                            d="M10.854 6.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 8.793l2.646-2.647a.5.5 0 0 1 .708 0z">
                                        </path>
                                    </svg>
                                </div><!--//icon-holder-->

                            </div><!--//col-->
                            <div class="col-auto">
                                <h4 class="app-card-title">{{ __('message.security') }}</h4>
                            </div><!--//col-->
                        </div><!--//row-->
                    </div><!--//app-card-header-->
                    <div class="app-card-body px-4 w-100">
                        <div class="item border-bottom py-3">
                            <div class="row justify-content-between align-items-center">
                                <div class="col-auto">
                                    <div class="item-label"><strong>{{ __('message.username') }}</strong></div>
                                    <div class="item-data">
                                        {{ isset($user->name) ? $user->name : '' }}
                                    </div>
                                </div><!--//col-->
                                <div class="col text-end">
                                    <a class="btn-sm app-btn-secondary" href="#">{{ __('message.change') }}</a>
                                </div><!--//col-->
                            </div><!--//row-->
                        </div><!--//item-->

                        <div class="item border-bottom py-3">
                            <div class="row justify-content-between align-items-center">
                                <div class="col-auto">
                                    <div class="item-label"><strong>{{ __('message.password') }}</strong></div>
                                    <div class="item-data">••••••</div>
                                </div><!--//col-->
                                <div class="col text-end">
                                    <a class="btn-sm app-btn-secondary" href="#">{{ __('message.change') }}</a>
                                </div><!--//col-->
                            </div><!--//row-->
                        </div><!--//item-->

                    </div><!--//app-card-body-->

                    <div class="app-card-footer p-4 mt-auto">
                        <a class="btn app-btn-secondary" href="#">{{ __('message.manage security') }}</a>
                    </div><!--//app-card-footer-->

                </div><!--//app-card-->
            </div>
        </div><!--//row-->

    </div><!--//container-fluid-->
    </div>
@endsection