@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">{{trans('admin.trader_heading')}} </h2>
                    <div class="breadcrumb-wrapper col-12">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{route('home')}}">{{ trans('admin.home') }}</a>
                            </li>
                            <li class="breadcrumb-item"><a href="{{route('trader.index')}}">{{ trans('admin.trader') }}</a></li>
                            <li class="breadcrumb-item active">{{ trans('admin.trader_details') }}
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
     <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.trader_details')}}
              </h4>
              @can('currency-list')
                <a href="{{route('trader.index')}}" class="btn btn-success">
                    <i class="fa fa-arrow-left"></i>
                    {{ trans('common.back') }}
                </a>
              @endcan
            </div>
            <div class="card-content">
              <div class="card-body">    
                <form method="POST" id="currencyForm" action="{{route('trader.store')}}" accept-charset="UTF-8" enctype="multipart/form-data" >
                <!--   <input name="_method" type="hidden" value="PUT">
                 -->  @csrf
                <div class="form-body">
                         <div class="row">
                    <div class="col-md-6">
                     <div class="form-group">
                        <label for="recommender name" class="content-label">{{trans('admin.name')}}</label>
                        <input type="text" class="form-control @error('name') ? is-invalid : ''  @enderror" minlength="2" maxlength="30" placeholder="{{trans('admin.trader_name')}}" name="name" value="{{$trader->profile ? $trader->profile->name :''}}" disabled>
                      </div>  
                    </div>
                    <div class="col-md-6">
                     <div class="form-group">
                       <label for="trader email" class="content-label">{{trans('admin.email')}}</label>
                        <input type="text" class="form-control @error('email') ? is-invalid : ''  @enderror" placeholder="{{trans('admin.email')}}" name="email" value="{{old('email') ? old('email') : $trader->email}}" disabled>
                      </div>  
                    </div>
                    <div class="col-md-6">
                     <div class="form-group">
                        <label for="recommender mobile number" class="content-label">{{trans('admin.mobile_number')}}</label>
                        <input type="text" class="form-control @error('mobile_number') ? is-invalid : ''  @enderror" placeholder="{{trans('admin.mobile_number')}}" name="mobile_number" value="{{old('mobile_number') ? old('mobile_number') : $trader->mobile_number}}" disabled>
                      </div>  
                    </div>
                    <div class="col-md-6">
                     <div class="form-group">
                        <label for="recommender mobile number" class="content-label">{{trans('admin.created_at')}}</label>
                        <input type="text" class="form-control" placeholder="{{trans('admin.created_at')}}" name="created_at" value="{{ $trader->created_at->format('d/m/Y H:i:s')}}" disabled>
                      </div>  
                    </div>
                  </div>
                
                  <div class="row">
                    <div class="col-md-12">
                      <div class="form-group">
                        <label for="trader_profile_image" class="content-label">{{trans('admin.profile_image')}}</label>
                        <input type="file" id="profile_image" name="profile_image" disabled >
                      </div>
                    </div>
                  </div>

                    @if($recommender)                  
                   <div class="row">
                    <div class="col-md-6">
                     <div class="form-group">
                        <label for="is_recommender" class="content-label"><input type="checkbox" class="@error('is_recommender') ? is-invalid : ''  @enderror"  name="is_recommender" id="is_recommender" disabled {{ @($trader->account_switch_id) ? 'checked':'' }} > {{ trans('admin.is_recommender') }}</label>
                      </div>
                    </div>
                    <div class="col-md-6" id="recommender_list_div">
                     <div class="form-group">
                        <label for="recommender list" class="content-label"> {{ trans('admin.recommender') }} </label>
                          <p class="details">{{$recommender->profile ? $recommender->profile->name :''}}</p>
                     
                      </div>
                      </div>
                      @endif
                  </div>

                </div>
                
                <section id="basic-datatable">
                  <div class="row">
                    <div class="col-12">
                      <div class="card">
                        <div class="card-header">
                          <h4 class="card-title">{{ trans('admin.subscribed_recommender_list') }}</h4>
                        </div>
                        <div class="card-content">
                          <div class="card-body card-dashboard">
                            <div class="table-responsive">
                              <table class="table zero-configuration data_table_ajax">
                                <thead>
                                  <tr>
                                    <th>{{trans('admin.id')}}</th>
                                    <th>{{trans('admin.profile_image')}}</th>
                                    <th>{{trans('admin.recommender_name')}}</th>
                                    <th>{{trans('admin.payment_id')}}</th>
                                    <th>{{trans('admin.created_at')}}</th>
                                    
                                    
                                  </tr>
                                </thead>
                                <tbody>
                                </tbody>
                                <tfoot>
                                  <tr>
                                    <th>{{trans('admin.id')}}</th>
                                    <th>{{trans('admin.profile_image')}}</th>
                                    <th>{{trans('admin.recommender_name')}}</th>
                                    <th>{{trans('admin.payment_id')}}</th>
                                    <th>{{trans('admin.created_at')}}</th>
                                    
                                  </tr>
                                </tfoot>
                              </table>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
                <div class="modal-footer">
                </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

</div>
@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('#profile_image');
      const pond1 = FilePond.create(input,{
        
          disabled:true,
          allowBrowse:false,
          allowRemove:false,
          allowDrop:false,
          files: [
            {
                // the server file reference
                source: "{{$trader->profile_image ? asset($trader->profile_image) : asset('images/customer_avatar.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>


<script type="text/javascript">
 $(document).ready(function(){
   $('.data_table_ajax').DataTable({
      aaSorting : [[0, 'desc']],
      processing: true,
      serverSide: true,
      serverMethod:'POST',
      processing: true,

       lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
        pageLength: 10,
      
        language: {
              processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">{{trans("common.loading")}}</span> ',
              emptyTable: "{{trans('admin.empty_subscriptions')}}",
              zeroRecords:"{{trans('admin.no_subscriptions')}}",
               url: lang_url,
            },
      ajax: {
          url: "{{route('dt_trader_subs')}}",
          data: {"_token": "{{csrf_token()}}",
                 "user_id": "{{$trader->id}}",
                },
      },
      columns: [
         { data: 'id'},
         { data: 'id',
            mRender : function(data, type, row) {
        
              return row['image'];
            },orderable: false 
          },
         { data: 'name',orderable:false},
          { data: 'payment_id',
            mRender : function(data, type, row) {
        
              return row['payment_id'];
            },orderable: false 
          },
          { data: 'created_at',
            mRender : function(data, type, row) {
        
              return row['created'];
            },orderable: false 
          },
          
            
        ]
   });
});
</script>
@endsection