@extends("admin.template.layout")
@section('header')
    <style>
        .form-control-plaintext {
            padding-left: 7px;
            border: 1px solid #990253;
            border-radius: 10px;
            color: #212529;
            text-align: left;
            margin-bottom: 15px;
        }

        .form-label {
            margin-bottom: 5px;
        }
    </style>
@endsection
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">

        <!-- Ajax Sourced Server-side -->
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">{{$mode ?? $page_heading}}</h5>
            </div>
            <div class="card-body py-0">
                <div class="row">
                    <div class="col-md-2 col-sm-4 primary-btn    py-4 rounded">
                        <div class="card">
                            <div class="card-body">
                                <div class="text-center">
                                    <img src="{{get_uploaded_image_url($user->user_image, 'user_image_upload_dir')}}"
                                         class="img-fluid rounded-circle"
                                         alt="Responsive image">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-10 col-sm-8 py-4">
                        <div class="row">                
                            <div class="col-md-6">
                                <label class="form-label">Full Name</label>
                                <div class="form-control-plaintext">{{$user->name ?? $user->first_name." ".$user->last_name}}</div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Email</label>
                                <div class="form-control-plaintext">{{$user->email}}</div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <label class="form-label">Phone Number</label>
                                <div class="form-control-plaintext">{{$user->dial_code.$user->phone}}</div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Nationality</label>
                                <div class="form-control-plaintext">{{$user->nationalCountry ? $user->nationalCountry->country_name : 'Not Specified'}}</div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <label class="form-label">Gender</label>
                                <div class="form-control-plaintext">{{$user->getGender()}}</div>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Interested In</label>
                                <div class="form-control-plaintext">{{$user->getInterestedIn()}}</div>
                            </div>        
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <label class="form-label">Account Status</label>
                                <div class="form-control-plaintext">{{$user->user_status ? 'Active': 'Inactive'}}</div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Marital Status</label>
                                <div class="form-control-plaintext">{{$user->getMaritalStatus()}}</div>
                            </div>                            
                            <div class="col-md-6">
                                <label class="form-label">DOB</label>
                                <div class="form-control-plaintext">{{$user->dob ?? 'Not specified'}}</div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <label class="form-label">Facebook ID</label>
                                <div class="form-control-plaintext">{{$user->facebook_id ?? 'Not added yet'}}</div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Google ID</label>
                                <div class="form-control-plaintext">{{$user->google_id ?? 'Not added yet'}}</div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Apple ID</label>
                                <div class="form-control-plaintext">{{$user->apple_id ?? 'Not added yet'}}</div>
                            </div>
                        </div>                        
                        <div class="row">
                            <div class="col-12">
                                <label class="form-label">About</label>
                                <div class="form-control-plaintext">{{$user->about_me}}</div>
                            </div>
                            

                        </div>                       
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop
@section('script')
    <script>
        jQuery(document).ready(function () {

            App.initTreeView();

        })
    </script>
@stop