@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.analysis_request_heading')}} </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"><a href="{{route('analysis_request.index')}}">{{ trans('admin.analysis_request') }}</a></li>
                            <li class="breadcrumb-item active">{{ trans('admin.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.analysis_request_details')}}
              </h4>
              @can('analysis-list')
                <a href="{{route('analysis_request.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"  action="" accept-charset="UTF-8" enctype="multipart/form-data" >
                <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.analysis_request_requested_by')}}</label>
                        <input type="text" class="form-control" name="user_id" value="{{$analysis->user->profile->name}}" disabled>
                      </div>  
                    </div>
                    <div class="col-md-6">
                     <div class="form-group">
                        <label for="recommender name" class="content-label">{{trans('admin.analysis_request_requested_to')}}</label>
                        <input type="text" class="form-control" name="recommender_id" value="{{$analysis->recommender->profile->name}}" disabled>
                      </div>  
                    </div>
                    <div class="col-md-6">
                     <div class="form-group">
                        <label for="recommender mobile number" class="content-label">{{trans('admin.analysis_request_amount')}}</label>
                        <input type="text" class="form-control"  name="amount" value="{{$analysis->amount.' KWD'}}" disabled>
                       </div>  
                    </div>
                    <div class="col-md-6">
                     <div class="form-group">
                        <label for="recommender mobile number" class="content-label">{{trans('admin.analysis_request_status')}}</label>
                        <input type="text" class="form-control"  name="status" value="{{trans('admin.'.$analysis->status)}}" disabled>
                       </div>  
                    </div>
                  </div>
                  
                  @if($analysis->image != null)
                  <div class="row">
                    <div class="col-md-12">
                      <div class="form-group">
                        <label for="recommender_profile_image" class="content-label">{{trans('admin.image')}}</label>
                        <input type="file" id="image" name="profile_image" disabled >
                      </div>
                    </div>
                  </div>
                  @endif

                  <div class="row">
                    <div class="col-md-12">
                      <div class="form-group">
                        <label for="recommender_profile_image" class="content-label">{{trans('admin.request_description')}}</label>
                        <textarea class="form-control" disabled rows="3">{{$analysis->request_description}}</textarea>
                      </div>
                    </div>
                  </div>
                  @if($analysis->analysis_description != null)
                  <div class="row">
                    <div class="col-md-12">
                      <div class="form-group">
                        <label for="recommender_profile_image" class="content-label">{{trans('admin.analysis_description')}}</label>
                        <textarea class="form-control" disabled rows="3">{{$analysis->analysis_description}}</textarea>
                      </div>
                    </div>
                  </div>
                  @endif
                </div>
                <div class="modal-footer">
                </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    

   
</div>
</div>
@endsection
@section('js')

@if($analysis->image != null)
<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,{
        
          disabled:true,
          allowBrowse:false,
          allowRemove:false,
          allowDrop:false,
          files: [
            {
                // the server file reference
                source: "{{asset($analysis->image)}}",

                // 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>
@endif




@endsection