@extends('layouts.instructor')
@section('content')

@php
$VIEW_DOCUMENT_ACCESS   = false;

$VIEW_DOCUMENT_ACCESS    = Helper::instructor_can_access('Documents');
@endphp 

<div class="main-content-wrap sidenav-open d-flex flex-column">
   <!-- ============ Body content start ============= -->
   <div class="main-content">
      <div class="row">
         <!-- ============Breadcrumb Pagination ============= -->
         <div class="col-sm-11">
            <ul class="breadcrumb">
               <li> <a href="{{url('/admin/instructors')}}">Instructors</a></li>
               <li>Documents</li>
            </ul>
         </div>
         <!-- ============Back Button ============= -->
         <div class="col-sm-1 back-arrow">
            <div class="text-center">
               <a href="javascript:history.back()"> <i class="fas fa-arrow-circle-left fa-2x"></i> </a>
            </div>
         </div>
      </div>
      <!-- ========================= -->
      <div class="row">
         <div class="card text-left">
            <div class="card-body">
               <div class="row">
                  <div class="col-md-3">
                     <h3 class="mb-3" style="font-weight:700"> {{ ucwords($user->first_name.' '.$user->last_name)}} @if($user->status=='1')<span class="badge badge-success status-css user-status-css">{{"Active"}}</span>@elseif($user->status=='0')<span class="badge badge-danger status-css user-status-css">{{"Inactive"}}</span>@else<span class="badge badge-warning status-css">{{"Pending"}}</span>@endif<br>
                        <small style="font-size: 66%;">Instructor ID: {{$user->id}}</small>
                     </h3>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-12" style="background-color:#1a68b3;">
                     @include('instructor.profile.submenu')
                  </div>
               </div>
               @if ($VIEW_DOCUMENT_ACCESS) 
               <form  method="post" action="{{route('instructor.updateProfile')}}" id="updateInstructorProfile" >
                  @csrf
                   <div class="row gx-3">
                    @if(count($documents)>0)
                    @foreach ($documents as $doc)
                                          <div class="col-md-4">
                         <div class="card card-border mnh-250p">
                            <div class="card-body">
                               <div class="card-action-wrap">
                                  <a class="btn btn-sm btn-icon btn-rounded btn-flush-danger flush-soft-hover del-document" data-id="{{$doc->id}}"  href="javascript:void(0)"><span class="icon"><span class="feather-icon"><i data-feather="trash-2"></i></span><span class="feather-icon d-none"><i data-feather="minimize"></i></span></span></a>
                                   <a class="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover editDocModal" row-id="{{$doc->id}}" row-title="{{$doc->id_type}}" row-file_name="{{$type}}" data-bs-toggle="tooltip" data-placement="top" title="" data-bs-original-title="Edit" href="javascript:;"><span class="icon" title="Edit"><span class="feather-icon"><i data-feather="edit-2"></i></span></span></a>
                               </div>
                               <i class="fa fa-file fs-3 d-block mb-1 text-primary"></i>
                  
                           <div style="border:1px solid #ddd; width:320px; padding:20px; margin-top:15px; text-align:center" id="fileResult">
                              <div class=''>
                                <a href="{{asset('uploads/user-attachment/'.$file)}}" download="{{$file}}"><img style="border: 1px solid #ddd; height: 171px; width:150px; object-fit: cover;" class="doc-icon" src="{{$type}}"></a>
                                 <!--<img src= "{{url('uploads/user/16793077364.jpg')}}" id="courseimg" name="courseimg"  alt='Preview' style="height: 100px;width: 180px;"> -->
                              </div>
                           </div>
                            <p style="line-height: 26px;">Created Date: <b>{{date('d M, Y h:i A', strtotime($doc->created_at))}}</b></p>
                            
                            </div>
                         </div>
                      </div>
                      @endforeach
                      @else
                        <p class="text-center text-danger">Oops! No document found!</p>
                      @endif
                   </div>
               </form>
               @endif
            </div>
         </div>
      </div>
   </div>
</div>

<script>
   $(function(){

    //
     $('.userAuthBtn').on('click', function() {
       var $this = $(this);
       var loadingText = '<i class="fa fa-circle-o-notch fa-spin"></i> loading...';
       if ($(this).html() !== loadingText) {
         $this.data('original-text', $(this).html());
         $this.html(loadingText);
       }
    });

    $(document).on('submit', 'form#updateInstructorProfile', function (event) {
    event.preventDefault();
    //clearing the error msg
    $('p.error_container').html("");
    $('.error-control').removeClass('border-danger');
    $('.userAuthBtn').attr('disabled',true);

    var form = $(this);
    var data = new FormData($(this)[0]);
    var url = form.attr("action");

     $.ajax({
         type: form.attr('method'),
         url: url,
         data: data,
         cache: false,
         contentType: false,
         processData: false,
         success: function (response) {

             console.log(response);
             if(response.success==true  ) {
                 //notify
                toastr.success("Profile updated successfully");
                 // redirect to google after 5 seconds
                 window.setTimeout(function() {
                     window.location.reload();
                 }, 2000);

             }
             //show the form validates error
             if(response.success==false ) {
               $('.userAuthBtn').attr('disabled',false);
                 var loadingText = 'Update';
                 $('.userAuthBtn').html(loadingText);
                 for (control in response.errors) {
                     $('#error-' + control).html(response.errors[control]);
                 }

                if( response.error_type == 'something_wrong' )
                {
                  toastr.error("Sorry, something went wrong. Please try again later.");
                }
             }
         },
         error: function (xhr, textStatus, errorThrown) {
             // alert("Error: " + errorThrown);
         }
     });
     return false;
    });
   });

</script>
@endsection