@extends('admin.layouts.app')
@section('page_tab_title' ,"Profile")
@section('content')


<section class="content">
  <div class="row">
    <!-- right column -->
    <div class="col-md-12">
      @if ($errors->any())
        @foreach ($errors->all() as $error)
        <div class="alert alert-danger alert-dismissible">
          <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
          {{ $error }}
        </div>
        @endforeach
      @endif
      @if(session()->has('success'))
        <div class="alert alert-success alert-dismissible">
          <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
          {{ session()->get('success') }}
        </div>
      @endif
        <!-- Horizontal Form -->
      <div class="box box-success">
        <div class="box-header">
          <h1>
                Edit Profile
          </h1>
          <hr class="bdr-partition">
        </div>
        <form method="POST" id="editProfile" class="form-horizontal" enctype="multipart/form-data" action="{{ route('admin.updateProfile') }}">
            @csrf
            <div class="box-body">

              <div class="row">
                <div class="col-md-4">
                  <div class="form-group">

                <div class="col-md-12">
                  <label class="  control-label">First name <span class="required_span">*</span></label>
                  <input type="text" name="first_name" required class="form-control  alpha-only" value="{{$admin->first_name ?? old('first_name') }}" >
                  @if ($errors->has('first_name'))
                      <span class="invalid-feedback text-danger" role="alert">
                          <strong>{{ $errors->first('first_name') }}</strong>
                      </span>
                  @endif

                </div>
              </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">

                <div class="col-md-12">
                  <label class="  control-label">Last name <span class="required_span">*</span></label>
                  <input type="text" name="last_name" required class="form-control alpha-only" value="{{$admin->last_name ?? old('last_name') }}" >
                  @if ($errors->has('last_name'))
                      <span class="invalid-feedback text-danger" role="alert">
                          <strong>{{ $errors->first('last_name') }}</strong>
                      </span>
                  @endif
                </div>
              </div>
                </div>
              <div class="col-md-4">
                <div class="form-group">

                  <div class="col-md-12">
                    <label class="control-label">Email address <span class="required_span">*</span></label>

                    <input type="email" disabled class="form-control" value="{{$admin->email }}">

                  </div>
                </div>
              </div>
              </div>
              <div class="row">
                <div class="col-md-4">
                  <div class="form-group">

                    <div class="col-md-12">
                      <label class="  control-label">Phone number</label>
                      <input type="text" maxlength="15" data-parsley-phonenumber="" name="phone" class="form-control" value="{{$admin->phone ?? old('phone') }}" >
                      @if ($errors->has('phone'))
                          <span class="invalid-feedback text-danger" role="alert">
                              <strong>{{ $errors->first('phone') }}</strong>
                          </span>
                      @endif
                    </div>
                  </div>
                </div>

              </div>


              <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                      <div class="col-md-12">
                        <label class="control-label">Profile picture </label>
                        <div class="file-upload">
                          <div class="file-select">
                            <div class="file-select-button" id="fileName3">Choose File</div>
                            <div class="file-select-name" id="noFile3">No file chosen...</div>
                            <input type="file" name="profile_picture" id="profile_picture">
                          </div>
                        </div>
                      </div>
                  </div>
                </div>


                <div class="col-md-4 profile-preview">
                    <div class="form-group">
                        @if($admin->profile_picture)
                        <img src="{{$admin->admin_image_name_path ?? ""}}" id="profilePicturePreview" width="60" />
                        {{--  <i class="fa fa-trash-o profile-delete"></i>  --}}
                        @else
                        <img src="" id="profilePicturePreview" width="100"/>

                        @endif
                    </div>


                    <input type="hidden" id="profilePicturePath" name="profilePicturePath" value="{{url(config('settings.admin_picture_folder')).'/'}}">
                    <input type="hidden" name="profile_picture_hidden" id="profile_picture_hidden" >

                </div>

            </div>


            </div>
          <div class="button-area ">
              <button type="submit" class="btn btn-info ">Submit</button>
              <a href="{{route('admin.dashboard')}}" class="btn btn-default">Cancel</a>

          </div>
        </form>
      </div>
    </div>
  </div>
</section>

<!-- Profile picture Crop modal -->
<div id="uploadimageModal" class="modal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Crop Image</h4>
          </div>
          <div class="modal-body">
            <div class="row">
            <div class="col-md-12 text-center">
              <div id="profile_picture_preview"></div>
            </div>

        </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary crop-picture custom-btn" data-dismiss="modal">Crop</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
      </div>
    </div>
</div>


<script type="text/javascript">



  /**** Custom parsely validator for phone number ***/
  window.Parsley.addValidator('phonenumber', {
    validateString: function(number) {
      var p = /^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$/;
      if(number.match(p)){
          return true;
      }
      return false;

    },
    messages: {
      en: '