@extends('layouts.main')

@push('styles')
    <link href="{{ asset('elite/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet"
        type="text/css" />
    <style type="text/css">
        .object-fit_fill {
            object-fit: fill
        }

        .object-fit_contain {
            object-fit: contain
        }

        .object-fit_cover {
            object-fit: cover
        }

        .object-fit_none {
            object-fit: none
        }

        .object-fit_scale-down {
            object-fit: scale-down
        }

        /*    .html {
                    color: #eee;
                    padding: 30px;
                    font-family: 'Source Code Pro', Monaco;
                    background-color: #333;
                }*/

        /*    p { font-weight: 200; font-size: 13px; margin-bottom: 10px; margin-top: 0;}*/

        .img-custom {
            height: 240px;
            background-color: #444;
        }

        .img-custom[class] {
            width: 100%;
        }

        .original-image {
            /*margin-bottom: 50px;*/
        }

        .image {
            /*float: left;*/
            width: 100%;
            /* Was 40% */
            margin: 0 30px 20px 0;

            &:nth-child(2n) {
                clear: left;
            }

            &:nth-child(2n+1) {
                margin-right: 0;
            }
        }
    </style>
@endpush

@section('content')
    <div class="row bg-title">
        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
            <h4 class="page-title">{{ __('users.user_details') }}</h4>
        </div>
        <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
            <ol class="breadcrumb">
                <li><a href="{{ route('home') }}">{{ __('users.dashboard') }}</a></li>
                <li><a href="{{ route('users.index') }}">{{ __('users.users') }}</a></li>
                <li class="active">{{ __('users.user_details') }}</li>
            </ol>
        </div>
        <!-- /.col-lg-12 -->
    </div>

    <!-- .row -->
    <div class="row" style="margin-top: -20px;">
        <div class="col-sm-12">
            <!--Flash messages at the top -->
            <div>@include('flash::message')</div>

            <div class="white-box">
                <div class="row">
                    <div class="col-md-4 col-xs-12">
                        <div class="white-box">
                            <div class="user-bg image"> <img class="object-fit_scale-down img-custom" alt="user"
                                    src="{{ asset('uploads/users/' . ($user->photo ?? 'placeholder.png')) }}"> </div>
                            <div class="user-btm-box" style="margin-top: -45px;">
                                <!-- .row -->
                                <div class="row text-center m-t-10">
                                    <div class="col-md-6 b-r"><strong>{{ __('users.names') }}</strong>
                                        <p>{{ $user->first_name }} {{ $user->last_name }}</p>
                                    </div>
                                    <div class="col-md-6"><strong>{{ __('users.position') }}</strong>
                                        <p>{{ $positions[$user->position_id] ?? '' }}</p>
                                    </div>
                                </div>
                                <!-- /.row -->
                                <hr>
                                <!-- .row -->
                                <div class="row text-center m-t-10">
                                    <div class="col-md-6 b-r"><strong>{{ __('users.email_address') }}</strong>
                                        <p>{{ $user->email == null ? 'NA' : $user->email }}</p>
                                    </div>
                                    <div class="col-md-6"><strong>{{ __('users.phone_number') }}</strong>
                                        <p>{{ $user->phone }}</p>
                                    </div>
                                </div>
                                <!-- /.row -->
                                <hr>
                                <!-- .row -->
                                <div class="row text-center m-t-10">
                                    <div class="col-md-12"><strong>{{ __('users.roles_on_streamline') }}</strong>
                                        <p>
                                            @if (!empty($user->getRoleNames()))
                                                @foreach ($user->getRoleNames() as $v)
                                                    <span
                                                        class="label label-success label-rounded badge">{{ $v }}</span>
                                                @endforeach
                                            @endif
                                        </p>
                                    </div>
                                </div>
                                <hr>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-8 col-xs-12">
                        <div class="white-box">
                            <div class="row">
                                <div class="col-md-3 col-xs-6 b-r"> <strong>{{ __('users.username') }}</strong>
                                    <br>
                                    <p class="text-muted">{{ $user->username }}</p>
                                </div>

                                <div class="col-md-3 col-xs-6 b-r"> <strong>{{ __('users.blood_group') }}</strong>
                                    <br>
                                    <p class="text-muted">
                                        {{ $blood_groups[$user->blood_group_id] ?? '' }}
                                    </p>
                                </div>

                                <div class="col-md-3 col-xs-6 b-r"> <strong>{{ __('users.willing_to_donate') }}</strong>
                                    <br>
                                    <p class="text-muted">
                                        {{ $user->willing_to_donate == 1 ? __('users.yes') : __('users.no') }}</p>
                                </div>
                                <div class="col-md-3 col-xs-6"> <strong>{{ __('users.last_donation') }}</strong>
                                    <br>
                                    <p class="text-muted">
                                        {{ $user->last_donation_date == null ? 'NA' : $user->last_donation_date }}</p>
                                </div>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-md-3 col-xs-6 b-r"> <strong>{{ __('users.council_registration') }}</strong>
                                    <br>
                                    <p class="text-muted">
                                        {{ $user->council_id == 0 ? 'NA' : $councils[$user->council_id] }}</p>
                                </div>
                                <div class="col-md-3 col-xs-6 b-r"> <strong>{{ __('users.registration_number') }}</strong>
                                    <br>
                                    <p class="text-muted">
                                        {{ $user->registration_number == null ? 'NA' : $user->registration_number }}</p>
                                </div>
                                <div class="col-md-3 col-xs-6 b-r"> <strong>{{ __('users.expiry_date') }}</strong>
                                    <br>
                                    <p class="text-muted">{{ $user->expiry_date == null ? 'NA' : $user->expiry_date }}</p>
                                </div>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-md-3 col-xs-6 b-r"> <strong>{{ __('users.security_question') }}</strong>
                                    <br>
                                    <p class="text-muted">
                                        {{ $user->security_question_id == null ? 'NA' : $security_questions[$user->security_question_id] }}
                                    </p>
                                </div>
                                <div class="col-md-3 col-xs-6 b-r"> <strong>{{ __('users.security_answer') }}</strong>
                                    <br>
                                    <p class="text-muted">******</p>
                                </div>
                                <div class="col-md-3 col-xs-6 b-r"> <strong>{{ __('users.secret_pin') }}</strong>
                                    <br>
                                    <p class="text-muted">******</p>
                                </div>
                            </div>
                            <hr>
                            <p class="text-muted text-right">{{ __('users.registered_on') }}
                                <code>{{ $user->created_at }}</code>
                            </p>

                        </div>
                    </div>
                </div>




            </div>
        </div>
    </div>
    <!-- /.row -->
@endsection

@push('scripts')
    <script type="text/javascript"></script>
@endpush