@extends('layouts.admin')

@section('content')

<div class="row">
  <div class="col-md-6">
     <div class="card shadow-lg">
      <!-- <div class="card-header card-header-primary">
        <h4 class="card-title">Edit User</h4>
      </div> -->
      <div class="card-body pt-5">
        <div class="text-center">
          <h1 class="h4 text-gray-900 mb-4">Edit User</h1>
        </div>
        <form class="user" action="{{ route('users.update') }}" method="post">
          @csrf
          <input type="hidden" name="id" value="{{ $user->id }}">
          <div class="row form-group  justify-content-md-center">
            @if ($errors->any())
              <div class="col-md-10 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-10 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="100" 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="100" 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="100" 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="100" 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-md-5 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 form-control-user" value="{{ $user->first_name }}" required placeholder="First Name *">
                {!! $errors->first('first_name', '<p class="help-block text-danger mb-0">:message</p>') !!}
              </div>
            </div>
            <div class="col-md-5 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 form-control-user" value="{{ $user->last_name }}" placeholder="Last Name">
                {!! $errors->first('last_name', '<p class="help-block text-danger mb-0">:message</p>') !!}
              </div>
            </div>
            <div class="col-md-10 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 form-control-user" value="{{ $user->email }}" required placeholder="Email Address *">
                {!! $errors->first('email', '<p class="help-block text-danger mb-0">:message</p>') !!}
              </div>
            </div>
            <div class="col-md-10 mt-3">
              <div class="form-group bmd-form-group">
                <!-- <label class="bmd-label-floating">Password</label> -->
                <input type="password" name="password" class="form-control form-control-user" placeholder="Password">
              </div>
            </div>
            <div class="col-md-10 mt-3">
              <div class="form-group bmd-form-group">
                <label class="bmd-label-floating">Role</label>
                <select 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>

            <div class="col-md-10 mt-3">
              <div class="form-group bmd-form-group">
                <label class="bmd-label-floating">Department</label>
                <select name="departmentFK" class="form-control form-control-user">
                  <option value="0"> - Select Department - </option>
                  @foreach($department as $key=>$value)
                    <option @if($user->departmentFK == $value->id) selected @endif value="{{$value->id}}">{{$value->name}}</option>
                  @endforeach
                </select>
              </div>
            </div>
            
             <div class="col-md-8 mt-5">
                <button type="submit" class="btn btn-primary btn-block btn-user">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;
    }
    select:invalid { color: gray; }
    .form-control-user{
      font-size: .8rem;
      border-radius: 10rem;
      padding: 0rem 1rem !important;
    }
</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