@extends('layouts.admin')

@section('content')

<div class="container">

    <div class="card o-hidden border-0 shadow-lg">
      <div class="card-body p-0">
        <!-- Nested Row within Card Body -->
        <div class="row">
          <div class="col-lg-5 d-none d-lg-block">
            <div style="display: flex;align-items: center;justify-content: center;background: #eee;height: 100%;">
              <img width="150" src="{{ asset('images/logo/logo.png') }}">
            </div>
          </div>
          <div class="col-lg-7">
            <div class="p-5">
              <div class="text-center">
                <h1 class="h4 text-gray-900 mb-4">Your profile</h1>
                <label>Department: {{ depName($user->departmentFK) }}</label>
              </div>
              <form class="user" action="{{ route('users.profile.update') }}" method="post">
                @csrf
                <input type="hidden" name="id" value="{{ $user->id }}">
                <input type="hidden" name="type" value="profile">
                <div class="form-group row">
                   @if ($errors->any())
                    <div class="col-sm-12 mt-3">
                      <div class="alert alert-danger bg-gradient-danger">
                        <ul style="list-style: none;margin-bottom: 0;color: #fff;">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                      </div>
                    </div>
                  @endif
                  <div class="col-md-12 mt-3" style="display: flex;align-items: center;justify-content: center;">
                    <ul class="list-style-none">
                      <li class="avatar-item text-center">
                        <label for="avatar_1">
                          <img width="90" src="{{ asset('images/avatar/man-01.png') }}"><br>
                          <input type="radio" name="avatar" @if($user->avatar == 'man-01.png') checked @endif id="avatar_1" value="man-01.png">
                        </label>
                      </li>
                      <li class="avatar-item text-center">
                        <label for="avatar_2">
                          <img width="90" src="{{ asset('images/avatar/man-02.png') }}"><br>
                          <input type="radio" name="avatar" @if($user->avatar == 'man-02.png') checked @endif id="avatar_2" value="man-02.png">
                        </label>
                      </li>
                      <li class="avatar-item text-center">
                        <label for="avatar_3">
                          <img width="90" src="{{ asset('images/avatar/women-01.png') }}"><br>
                          <input type="radio" name="avatar" @if($user->avatar == 'women-01.png') checked @endif id="avatar_3" value="women-01.png">
                        </label>
                      </li>
                      <li class="avatar-item text-center">
                        <label for="avatar_4">
                          <img width="90" src="{{ asset('images/avatar/women-02.png') }}"><br>
                          <input type="radio" name="avatar" @if($user->avatar == 'women-02.png') checked @endif id="avatar_4" value="women-02.png">
                        </label>
                      </li>
                    </ul>
                  </div>
                  <div class="col-sm-6 mb-3 mb-sm-0">
                    <input type="text" class="form-control form-control-user" id="exampleFirstName" name="first_name" placeholder="First Name *" value="{{ $user->first_name }}" required>
                  </div>
                  <div class="col-sm-6">
                    <input type="text" class="form-control form-control-user" id="exampleLastName" name="last_name" placeholder="Last Name" value="{{ $user->last_name }}">
                  </div>
                </div>
                <div class="form-group">
                  <input type="email" class="form-control form-control-user" id="exampleInputEmail" name="email" placeholder="Email Address *" value="{{ $user->email }}" required>
                </div>
                <div class="form-group row">
                  <div class="col-sm-12 mb-3">
                    <input type="password" class="form-control form-control-user" id="exampleInputPassword" name="password" placeholder="Password">
                  </div>
                  <div class="col-sm-12 mb-3">
                    <select class="" multiple="multiple" name="roles[]" id="permission-multi-select" tabindex="-1" data-ssid="ss-68174">
                      @foreach($roles as $key=>$value)
                        <option @if($value->selected > 0) selected @endif value="{{$value->slug}}">{{$value->name}}</option>
                      @endforeach
                    </select>
                  </div>
                </div>
                <button type="submit" class="btn btn-primary btn-user btn-block">
                  Update Account
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

<!-- 
<div class="row">
  <div class="col-md-6">
     <div class="card">
      <div class="card-header card-header-primary">
        <h4 class="card-title">Edit User</h4>
      </div>
      <div class="card-body pt-5">
        <form action="{{ route('users.update') }}" method="post">
          @csrf
          <input type="hidden" name="id" value="{{ $user->id }}">
          <div class="row justify-content-md-center">
            @if ($errors->any())
              <div class="col-md-8 mt-3">
                <div class="alert alert-danger bg-gradient-danger">
                  <ul style="list-style: none;margin-bottom: 0;color: #fff;">
                      @foreach ($errors->all() as $error)
                          <li>{{ $error }}</li>
                      @endforeach
                  </ul>
                </div>
              </div>
            @endif
            <div class="col-md-8 mt-3">
              <div class="form-group bmd-form-group">
                <label class="bmd-label-floating">First Name <span class="text-danger">*</span></label>
                <input type="text" name="first_name" class="form-control" value="{{ $user->first_name }}" required>
                {!! $errors->first('first_name', '<p class="help-block text-danger mb-0">:message</p>') !!}
              </div>
            </div>
            <div class="col-md-8 mt-3">
              <div class="form-group bmd-form-group">
                <label class="bmd-label-floating">Last Name</label>
                <input type="text" name="last_name" class="form-control" value="{{ $user->last_name }}">
                {!! $errors->first('last_name', '<p class="help-block text-danger mb-0">:message</p>') !!}
              </div>
            </div>
            <div class="col-md-8 mt-3">
              <div class="form-group bmd-form-group">
                <label class="bmd-label-floating">Email <span class="text-danger">*</span></label>
                <input type="email" name="email" class="form-control" value="{{ $user->email }}" required>
                {!! $errors->first('email', '<p class="help-block text-danger mb-0">:message</p>') !!}
              </div>
            </div>
            <div class="col-md-8 mt-3">
              <div class="form-group bmd-form-group">
                <label class="bmd-label-floating">Password</label>
                <input type="password" name="password" class="form-control">
              </div>
            </div>
            <div class="col-md-8 mt-3">
              <div class="form-group bmd-form-group">
                <label class="bmd-label-floating">Role</label>
                <select multiple="multiple" name="roles[]" id="permission-multi-selectd" tabindex="-1" data-ssid="ss-68174">
                  @foreach($roles as $key=>$value)
                    <option @if($value->selected > 0) selected @endif value="{{$value->slug}}">{{$value->name}}</option>
                  @endforeach
                </select>
              </div>
            </div>
            
             <div class="col-md-8 mt-5">
                <button type="submit" class="btn btn-primary btn-block">Save</button>
            </div>
          </div>          
          <div class="clearfix"></div>
        </form>
      </div>
    </div>
  </div>
</div> -->
@endsection


@section('style')
<link href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.7.0/slimselect.min.css" rel="stylesheet"></link>
<style type="text/css">
  .list-style-none{
      list-style: none;
    }
    .avatar-item{
      float: left;
    }
    .avatar-item:not(:first-child){
      margin-left: 15px;
    }
</style>
@endsection

@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.7.0/slimselect.min.js"></script>

    <script type="text/javascript">
      new SlimSelect({
        select: '#permission-multi-select'
      })
    </script>
@endsection