@extends('layouts.admin.app')
@section('css')
<link href="{{asset('css/filepond/filepond.css')}}" rel="stylesheet">
<link href="{{asset('css/filepond/filepond-plugin-image-preview.css')}}" rel="stylesheet">
<link href="{{asset('css/filepond/filepond-plugin-image-edit.css')}}" rel="stylesheet">
@endsection
@section('content')
<!-- BEGIN: Content-->
<div class="app-content content">
  <div class="content-wrapper">
    <div class="content-header row">
        <div class="content-header-left col-md-9 col-12 mb-2">
            <div class="row breadcrumbs-top">
                <div class="col-12">
                    <h2 class="content-header-title float-left mb-0">{{ucfirst($admin->name)}}</h2>
                    <div class="breadcrumb-wrapper col-12">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{route('home')}}">{{ trans('common.home') }}</a>
                            </li>
                            <li class="breadcrumb-item active">{{ trans('admin.edit_profile') }}
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="content-body">
      @if ($errors->any())
      <div class="alert alert-danger">
          <b>{{trans('common.whoops')}}</b>
          <ul>
              @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
              @endforeach
          </ul>
      </div>
      @endif
      <!-- // Basic multiple Column Form section start -->
      <section id="multiple-column-form">
        <div class="row match-height">
          <div class="col-12">
            <div class="card">
              <div class="card-header">
                <h4 class="card-title">
                {{ trans('admin.edit_profile')}}
                </h4>
              </div>
              <div class="card-content">
                <div class="card-body">
                  <form method="POST" id="users" action="{{route('update_profile')}}" accept-charset="UTF-8" enctype="multipart/form-data">
                    @csrf
                    <div class="form-body">
                      <div class="row">
                         
                          <div class="col-md-6">
                            <div class="form-group @error('name') ? has-error : ''  @enderror">
                              <label for="name" class="content-label">{{trans('admin.name')}}<span class="text-danger custom_asterisk">*</span></label>
                              <input class="form-control" minlength="2" maxlength="30" placeholder="{{trans('admin.name')}}" name="name" type="text" value="{{ old('name') ? old('name') : $admin['name']}}" required>
                              @if ($errors->has('name')) 
                                <strong class="help-block alert-danger">{{ $errors->first('name') }}</strong>
                              @endif
                            </div>  
                          </div>
                         
                          <div class="col-md-6">
                            <div class="form-group @error('email') ? has-error : ''  @enderror">
                              <label for="email" class="content-label">{{trans('admin.email')}}<span class="text-danger custom_asterisk">*</span></label>
                              <input class="form-control" minlength="2" maxlength="180" placeholder="{{trans('admin.email')}}" name="email" type="email" value="{{ old('email') ? old('email') : $admin['email']}}" required>
                              @if ($errors->has('email')) 
                                <strong class="help-block alert-danger">{{ $errors->first('email') }}</strong>
                              @endif
                            </div> 
                          </div>
                             
                      </div>
                      <div class="row">
                            <div class="col-md-4">
                              <div class="form-group @error('old_password') ? has-error : ''  @enderror">
                                <label for="old_password" class="content-label">{{trans('admin.old_password')}}</label>
                                <input class="form-control" minlength="8" maxlength="15" placeholder="{{trans('admin.old_password')}}" name="old_password" type="password" value="{{ old('old_password') ? old('old_password') : $admin['old_password']}}">
                                @if ($errors->has('old_password')) 
                                  <strong class="help-block alert-danger">{{ $errors->first('old_password') }}</strong>
                                @endif
                              </div> 
                            </div>
                            <div class="col-md-4">
                              <div class="form-group @error('new_password') ? has-error : ''  @enderror">
                                <label for="new_password" class="content-label">{{trans('admin.new_password')}}</label>
                                <input class="form-control" minlength="8" maxlength="15" placeholder="{{trans('admin.new_password')}}" name="new_password" type="password" value="{{ old('new_password') ? old('new_password') : $admin['new_password']}}">
                                @if ($errors->has('new_password')) 
                                  <strong class="help-block alert-danger">{{ $errors->first('new_password') }}</strong>
                                @endif
                              </div> 
                            </div>
                            <div class="col-md-4">
                              <div class="form-group @error('confirm_password') ? has-error : ''  @enderror">
                                <label for="confirm_password" class="content-label">{{trans('admin.confirm_password')}}</label>
                                <input class="form-control" minlength="8" maxlength="15" placeholder="{{trans('admin.confirm_password')}}" name="confirm_password" type="password" value="{{ old('confirm_password') ? old('confirm_password') : $admin['confirm_password']}}">
                                @if ($errors->has('confirm_password')) 
                                  <strong class="help-block alert-danger">{{ $errors->first('confirm_password') }}</strong>
                                @endif
                              </div> 
                            </div>
                      </div>
                      <div class="row">
                         
                        <div class="col-md-6">
                          <div class="form-group @error('bank_name') ? has-error : ''  @enderror">
                            <label for="bank_name" class="content-label">{{trans('admin.bank_name')}}<span class="text-danger custom_asterisk">*</span></label>
                            <input class="form-control" minlength="2" maxlength="50" placeholder="{{trans('admin.bank_name')}}" name="bank_name" type="text" value="{{ old('bank_name') ? old('bank_name') : $admin->bank_details ? $admin->bank_details->bank_name : ''}}" required>
                            @if ($errors->has('bank_name')) 
                              <strong class="help-block alert-danger">{{ $errors->first('bank_name') }}</strong>
                            @endif
                          </div>  
                        </div>
                        <div class="col-md-6">
                          <div class="form-group @error('account_name') ? has-error : ''  @enderror">
                            <label for="account_name" class="content-label">{{trans('admin.account_name')}}<span class="text-danger custom_asterisk">*</span></label>
                            <input class="form-control" minlength="2" maxlength="50" placeholder="{{trans('admin.account_name')}}" name="account_name" type="text" value="{{ old('account_name') ? old('account_name') : $admin->bank_details ? $admin->bank_details->account_name : ''}}" required>
                            @if ($errors->has('account_name')) 
                              <strong class="help-block alert-danger">{{ $errors->first('account_name') }}</strong>
                            @endif
                          </div>  
                        </div>
                        <div class="col-md-6">
                          <div class="form-group @error('account_number') ? has-error : ''  @enderror">
                            <label for="account_number" class="content-label">{{trans('admin.account_number')}}<span class="text-danger custom_asterisk">*</span></label>
                            <input class="form-control" minlength="2" maxlength="50" placeholder="{{trans('admin.account_number')}}" name="account_number" type="number" value="{{ old('account_number') ? old('account_number') : $admin->bank_details ? $admin->bank_details->account_number : ''}}"  oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" required>
                            @if ($errors->has('account_number')) 
                              <strong class="help-block alert-danger">{{ $errors->first('account_number') }}</strong>
                            @endif
                          </div>  
                        </div>
                        <div class="col-md-6">
                          <div class="form-group @error('iban_code') ? has-error : ''  @enderror">
                            <label for="iban_code" class="content-label">{{trans('admin.iban_code')}}<span class="text-danger custom_asterisk">*</span></label>
                            <input class="form-control" minlength="2" maxlength="50" placeholder="{{trans('admin.iban_code')}}" name="iban_code" type="text" value="{{ old('iban_code') ? old('iban_code') : $admin->bank_details ? $admin->bank_details->iban_code : ''}}" required>
                            @if ($errors->has('iban_code')) 
                              <strong class="help-block alert-danger">{{ $errors->first('iban_code') }}</strong>
                            @endif
                          </div>  
                        </div>
                            
                      </div>
                        <label>{{ trans('admin.profile_image') }}</label> 
                        
                        <br>

                        <div class="row">
                          <div class="col-md-12">
                              <div class="form-group">
                                <input type="file" name="profile_image" placeholder="Choose image" id="image">
                                @error('profile_image')
                                  <div class="alert alert-danger">{{ $message }}</div>
                                @enderror
                              </div>
                          </div>
                           <!-- <div class="col-md-6">
                              <img id="preview" src="{{($admin->profile_image != null) ? asset($admin->profile_image) : asset('admin_assets/app-assets/images/user.jpg')}}" alt="preview image" onerror="this.style.opacity='0'" style="max-height: 200px; max-width:500px;">
                            </div> -->
                        </div>

                      
                    </div>
                    <div class="modal-footer">
                      <button id="edit_btn" type="submit" class="btn btn-info btn-fill btn-wd">{{trans('common.submit')}}</button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- // Basic Floating Label Form section end -->
    </div>
  </div>
</div>
<!-- END: Content-->
@endsection 

@section('page_js')

@endsection

@section('js')
<script src="{{asset('js/filepond/filepond.min.js')}}"></script>
<!-- include FilePond plugins -->
<script src="{{asset('js/filepond/filepond-plugin-image-preview.min.js')}}"></script>
<script src="{{asset('js/filepond/filepond-plugin-file-validate-type.js')}}"></script>
<script src="{{asset('js/filepond/filepond-plugin-image-crop.js')}}"></script>
<script src="{{asset('js/filepond/filepond-plugin-image-resize.js')}}"></script>
<script src="{{asset('js/filepond/filepond-plugin-image-validate-size.js')}}"></script>
<script src="{{asset('js/filepond/filepond-plugin-image-transform.js')}}"></script>
<script src="{{asset('js/filepond/filepond-plugin-image-edit.js')}}"></script>
<script src="{{asset('js/filepond/ar_locale.js')}}"></script>
<script src="{{asset('js/filepond/filepond.jquery.js')}}"></script>

<script>
$(function(){
  
      FilePond.registerPlugin(
                FilePondPluginImagePreview,
                FilePondPluginFileValidateType,
                FilePondPluginImageCrop,
                FilePondPluginImageResize,
                FilePondPluginImageValidateSize,
                FilePondPluginImageTransform,
                FilePondPluginImageEdit,
            );
      
      const input = document.querySelector('#image');
      const pond1 = FilePond.create(input,{
        
          imagePreviewMaxHeight: 250,
          imagePreviewMaxWidth: 250,
          storeAsFile:true,
          maxFiles:1,
          credits:false,
          allowImageCrop:true,
          allowImageTransform:true,
          imageCropAspectRatio:'1:1',
          acceptedFileTypes:['image/png', 'image/jpeg','image/jpg'],
          allowImageResize:true,
          imageResizeTargetWidth:250,
          imageResizeTargetHeight:250,
          imageResizeUpscale:true,
          imageValidateSizeMinWidth:100,
          imageValidateSizeMinHeight:100,
          files: [
            {
                // the server file reference
                source: "{{($admin->profile_image != null) ? asset($admin->profile_image) : asset('admin_assets/app-assets/images/user.jpg')}}",

                // set type to local to indicate an already uploaded file
                options: {
                    type: 'remote',
                    
                
                },
            },
            
          ],
          
      });

       //Change Locale
      @if(config("app.locale") == 'ar'){
       FilePond.setOptions(labels);
      }
      @endif
  
});
    

</script>
@endsection