@extends('adminlte::page')

@section('title', 'Reef | User')
@section('content_header')
    <h1 class="m-0 text-dark">User Profile</h1>
@stop

@section('css')
  {{-- <link rel="stylesheet" href="{{ mix('css/admin-style.css') }}"> --}}
  {{-- <link href="{{ mix('css/bootstrap4-toggle.min.css') }}" rel="stylesheet"> --}}

@stop

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">{{ $user->first_name }} {{ $user->last_name }} Info</h3>
                </div>
                <div class="card-body">
                        <div class="row">
                            <div class="col-md-4 border-right">
                                <div class="d-flex flex-column align-items-center text-center p-3 py-5">
                                    <img class="rounded-circle mt-5"
                                        @if($user->avatar && !empty($user->avatar))
                                            src="{{ route('file_storage_serve', ['params' => 'images', 'file' => $user->avatar]) }}"
                                        @else
                                            src="{{ '/images/avatar.png' }}"

                                        @endif
                                    width="200">
                                </div>
                            </div>
                            <div class="col-md-8">
                                <div class="p-3 py-5">
                                    <div class="row mt-2">
                                        <div class="col-md-6">
                                            <input class="form-control" value="Role: {{ $user->user_role()->name }}" disabled>
                                        </div>

                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-md-6">
                                            <input class="form-control" value="First Name: {{ $user->first_name }}" disabled>
                                        </div>
                                        <div class="col-md-6">
                                            <input class="form-control" value="Last Name: {{ $user->last_name }}" disabled>
                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-md-6">
                                            <input class="form-control" value="Email: {{ $user->email }}" disabled>
                                        </div>
                                        <div class="col-md-6">
                                            <input class="form-control" value="Username: {{ $user->username }}" disabled>
                                        </div>

                                        @if($user->user_role()['slug'] == 'super_admin' || $user->user_role()['slug'] == 'admin')
                                            <div class="col-md-6 mt-3">
                                                <p class="m-0 p-0">Recive blog Emails:</p>
                                                <input name="recive_email" type="checkbox" id="{{ $user->id }}" class="recive_email" data-animate="true" {{ $user->recive_blog_emails ? 'checked' : '' }} data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="success" data-offstyle="secondary" data-width="25%" disabled>

                                            </div>
                                        @endif
                                    </div>
                                    <div class="mt-5 text-right">
                                        <a class="btn btn-primary" href="{{ route('dashboard_user_edit', $user->id) }}">Edit</a>
                                    </div>
                                </div>
                            </div>
                        </div>

                </div>
            </div>
        </div>
    </div>
@stop

@section('js')
{{-- <script src="{{ mix('js/bootstrap4-toggle.min.js') }}"></script> --}}

<script type="text/javascript">

    $(document).ready( function () {
        setInterval(function(){
          $('.recive_email').bootstrapToggle();
         }, 200);
    })
</script>

@stop