@extends('admin.layouts.master')
@section('content')
@section('title', 'Profile')
<style>

  /* .avatar-wrapper {
            position: relative;
            height: 130px;
            width: 130px;
            margin: auto;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 1px 1px 15px -5px black;
            transition: all .3s ease;
        }

        .avatar-wrapper:hover {
            transform: scale(1.05);
            cursor: pointer;
        }

        .fa-arrow-circle-up {
    position: absolute;
    font-size: 234px;
    top: -17px;
    left: 0;
    text-align: center;
    opacity: 0;
    transition: all .3s ease;
    color: #34495e;
} */





</style>
@if(session('success'))
<div class="alert alert-success">{{session('success')}}</div>
@endif
<div class="row">
  <div class="col-md-12">
    <div class="card">
      <div class="card-header">
        <h4 class="card-title" id="horz-layout-basic">Profile</h4>
        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
        <div class="heading-elements">

        </div>
      </div>
      <div class="card-content collpase show">
        <div class="card-body">
          <form action="{{route('admin.profile.update')}}" method="post" class="form form-horizontal"
            enctype="multipart/form-data">
            @csrf
            @php $user = Auth::guard('admin')->user(); @endphp
            <div class="form-body">
              <h4 class="form-section"><i class="ft-user"></i> Profile Info</h4>
            </div>
           <!-- new profile section -->
            <div class="row gutters-sm">
              <div class="col-md-4 mb-3">
                <div class="card">
                  <div class="card-body">
                    <div class="d-flex flex-column align-items-center text-center">
                        @if($user->image)
                        <img src="{{asset('/uploads/admins/profile/'.$user->image)}}" alt="Admin" class="rounded-circle" width="150"
                        onclick="triggerClick()" id="profileDisplay">
                        
                        @else 
                        <img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="Admin" class="rounded-circle" width="150"
                        onclick="triggerClick()" id="profileDisplay">
                        @endif
                      
                      <div class="mt-3">
                        <h4>{{$user->name}}</h4>
                        <input type='file' onchange="displayImage(this)" id="profile"  name="image" style="display:none">
                    </div>
                    </div>
                  </div>
                </div>

              </div>
              <div class="col-md-8">
                <div class="card mb-3">
                  <div class="card-body">
                    <div class="row">
                      <div class="form-group col-md-6 mb-2">
                        <label for="name">Name</label>
                        <input type="text" id="name" class="form-control border-info" placeholder="name" name="name" value="{{ $user->name}}" required>
                        <span class="text-danger"></span>
                      </div>
                      <div class="col-md-6"></div>

                      <div class="form-group col-md-6 mb-2">
                        <label for="email">Email</label>
                        <input type="email" id="email" class="form-control border-info" placeholder="email" name="email" value="{{ $user->email }}" required>
                        <span class="text-danger"></span>
                      </div>
                      <div class="col-md-6"></div>

                    </div>


                    <hr>
                    <div class="row">
                      <div class="col-sm-12">
                        <button type="submit" class="btn btn-info" >Update</button>
                      </div>
                    </div>
                  </div>
                </div>





              </div>
            </div>

          </form>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection
@section('scriptcloning')
<script>
        function triggerClick()
    {
      document.querySelector('#profile').click();
    }

    function displayImage(e)
    {
      if (e.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e)
        {
          document.querySelector('#profileDisplay').setAttribute('src', e.target.result);
        }
        reader.readAsDataURL(e.files[0]);
      }
    }
    </script>

@endsection