@php
    $documents = @$step_verified_data['documents']; 
    $pre_placement_doc = @$step_verified_data['pre_placement_doc'];
    $step_key = @$step_verified_data['step_key']; 
    $document_section_id = @$step_verified_data['document_section_id']; 
    $approved_documents = @$step_verified_data['approved_req_count'];
    $req_document_count = @$step_verified_data['req_count']; 
    $is_itn_user = (!empty($portfolio->placement_agency_id) && $portfolio->placementAgency->checkAgencySync()) ? 1 : 0;
@endphp 
<div class="row m-b-20"> 
    <div class="col-sm-6">
        <h3>{{ $step_title }}</h3>
        <div id="{{ $notify_id }}"></div> 
    </div>
    <div class="col-sm-6 text-right">
        @if(!empty($step_status) && check_route_access('user.document') && $is_itn_user == 0)
            <a href="{{ route('user.document',encrypt($user_id)) }}" onclick="event.preventDefault(); document.getElementById('document_section').submit();" data-toggle="tooltip" data-original-title="Approve/Reject documents" class="btn btn-info">Approve/Reject Document</a>
            <form id="document_section" action="{{ route('user.document',encrypt($user_id)) }}" method="get" style="display: none;">
                {{ csrf_field() }}
                <input type="hidden" name="section_id" value="{{$document_section_id}}" />
            </form>
        @endif
    </div>
    <div class="col-sm-12">
        @if(empty($step_status))
            <p>This step is disable until user will reach to step.</p>  
        @else 
        @if(@$active_stage == 2)
            <div class="row docs well">
                <div class="col-sm-12">
                    <p class="doc-sec-title"><strong>Documents required to start the placement process with a Host Company in the USA</strong></p>
                </div>
            @if(!empty($pre_placement_doc))
                @foreach($pre_placement_doc as $doc)
                    <div class="col-sm-4 col-md-3 col-xs-6 m-b-10 text-center">
                        <div class="upload-title tooltip_info" title="{{ $doc['document_label'] }}">
                            @php
                            $required_class = "text-warning";
                            $doc_desc = $doc['doc_desc'];
                            if($doc['requirement_type'] == 1)
                            {
                                $required_class = "text-danger";
                                if(!empty($doc_desc)){
                                    $doc_desc .= "<br> (required)";
                                }else{
                                    $doc_desc .= "(required)";
                                }
                            }
                            @endphp
                            @if(!empty($doc_desc))
                            <a data-html="true" data-toggle="tooltip" title="{{ $doc_desc }}" data-placement="left" data-container="body"><i class="fa fa-exclamation-circle {{ $required_class }}"></i></a> 
                            @endif
<!--                            {{ $doc['document_label'] }}-->
                            <span class="tooltip_info_label admin_tooltip_info_label">{{ $doc['document_label'] }}</span>
                            @php
                            if(!empty($doc['document_note_text']))
                            {
                            @endphp
                            <a data-html="true" data-toggle="tooltip" title="{{ $doc['document_note_text'] }}" data-placement="top" class="tooltip_info_a" data-container="body">
                                <img class="tooltip_info_img" src="{{ url('assets/images/information-ocre.png') }}" alt="file-Note Text" />
                            </a>
                            @php
                            }
                            @endphp
                        </div>
                               <div class="upload-wrapper" title="{{ $doc['document_label'] }}">
                            @if(!empty($doc['document_id']))
                                @if(!empty($doc['document_download_link']) && !in_array($doc['document_status'],array(3,5)))
                                <div class="doc-tag">
                                    @if(array_key_exists('document_download_code', $doc))
                                        @php
                                            $dcode = encrypt([
                                            'dcode' => $doc['document_download_code'], 
                                            'doc_filename' => $doc['document_filename'] 
                                            ]);
                                        @endphp
                                    <a href="{{ !empty($doc["document_download_code"]) ? route('download', array('dcode',$dcode)) : 'javascript:void(0);' }}">
                                        <img class="file-download" src="{{ url('assets/images/file-download.png') }}" alt="file-download" />
                                    </a>
                                    @else
                                    <a href="{{ $doc['document_download_link'] }}"><img class="file-download" src="{{ url('assets/images/file-download.png') }}" alt="file-download" /></a>
                                    @endif
                                </div>
                                @else
                                    <div class="doc-tag">
                                        @if(@$is_step_locked == 1)
                                            <img class="file-download" src="{{ url('assets/images/file-upload-lock.png') }}" alt="file-upload-lock" title="File Upload Locked" />
                                        @else
                                            <form id="frm_upload_{{ $doc['document_type_id'] }}" class="frm_file_upload" method="post" enctype="multipart/form-data">
                                                <input type="hidden" name="document_type" value="{{ $doc['document_type_id'] }}"/>
                                                @if($is_itn_user == 0)
                                                    <input type="file" name="document_file" onchange="return uploadDocument('{{ $doc['document_type_id'] }}', function(){ setTimeout(function(){ loadStepContent('{{ $active_step_key }}'); }, 3000); });" />
                                                @endif
                                                <img class="file-download" src="{{ url('assets/images/file-upload.png') }}" alt="file-upload" />
                                            </form>
                                        @endif
                                    </div>
                                @endif
                                <div class="doc-tag">
                                    <div class="doc-status">Uploaded On</div>
                                    @if(!empty($doc['document_uploaded']))
                                        <div>{{ dateformat($doc['document_uploaded'],DISPLAY_DATE) }}</div>
                                    @endif
                                </div>
                                <div class="doc-tag">
                                    <div class="doc-status doc-{{ $doc['document_status_name'] }}">{{ ucfirst($doc['document_status_name']) }}</div>
                                    @if(!empty($doc['document_status_date']))
                                        <div>{{ dateformat($doc['document_status_date'],DISPLAY_DATE) }}</div>
                                    @endif
                                </div>
                            @else
                                <div class="file-upload-block">
                                    @if(@$is_step_locked == 1)
                                    <img class="file-upload" src="{{ url('assets/images/file-upload-lock.png') }}" alt="file-upload-lock" title="File Upload Locked" />
                                    @else
                                    <form id="frm_upload_{{ $doc['document_type_id'] }}" class="frm_file_upload" method="post" enctype="multipart/form-data">
                                        <input type="hidden" name="document_type" value="{{ $doc['document_type_id'] }}"/>
                                        @if($is_itn_user == 0)
                                            <input type="file" name="document_file" onchange="return uploadDocument('{{ $doc['document_type_id'] }}', function(){ setTimeout(function(){ loadStepContent('{{ $active_step_key }}'); }, 3000); });" />
                                        @endif
                                        <img class="file-upload" src="{{ url('assets/images/file-upload.png') }}" alt="file-upload" />
                                    </form>
                                    @endif
                                </div>
                                    <div>
                                        @if($is_itn_user == 1)
                                            <a href="javascript:void(0);" >Pending to upload</a>
                                        @else
                                            <a href="javascript:void(0);" onclick="return showUploadInstruction('{{ $doc['document_requirement_id'] }}');">Upload Instructions</a>
                                        @endif    
                                    </div>
                            @endif
                        </div>
                        @if(!empty($doc['document_id']))
                        <a href="javascript:void(0);" onclick="return viewUploadHistory('{{ $doc['document_type_id'] }}','{{@$active_stage}}');">View upload history</a>
                        @else
                        &nbsp;
                        @endif
                    </div>
                @endforeach
            @endif
            </div>
        @endif
        <div class="row docs well">
            <div class="col-sm-12">
                @if(@$active_stage == 2)
                    <p class="doc-sec-title"><strong>Documents required to expedite the J-1 visa filing process after your placement is confirmed </strong>(obtaining some documents might take some time, that’s why we ask you to start collecting these documents as early as possible, in order not to delay your arrival in the USA)</p>
                @else
                    <p class="doc-sec-title"><strong>As part of the U.S. Department of State regulations, we need the following documents for completing your visa file... </strong></p>
                @endif
            </div>
            @if(!empty($documents))
                @foreach($documents as $doc)
                    <div class="col-sm-4 col-md-3 col-xs-6 m-b-10 text-center">
                        <div class="upload-title tooltip_info" title="{{ $doc['document_label'] }}">
                            @php
                            $required_class = "text-warning";
                            $doc_desc = $doc['doc_desc'];
                            if($doc['requirement_type'] == 1)
                            {
                                $required_class = "text-danger";
                                if(!empty($doc_desc)){
                                    $doc_desc .= "<br> (required)";
                                }else{
                                    $doc_desc .= "(required)";
                                }
                            }
                            @endphp
                            @if(!empty($doc_desc))
                            <a data-html="true" data-toggle="tooltip" title="{{ $doc_desc }}" data-placement="left" data-container="body"><i class="fa fa-exclamation-circle {{ $required_class }}"></i></a> 
                            @endif
                            <!--{{ $doc['document_label'] }}-->
                            <span class="tooltip_info_label admin_tooltip_info_label">{{ $doc['document_label'] }}</span>
                            @php
                            if(!empty($doc['document_note_text']))
                            {
                            @endphp
                            <a data-html="true" data-toggle="tooltip" title="{{ $doc['document_note_text'] }}" data-placement="top" class="tooltip_info_a" data-container="body">
                                <img class="tooltip_info_img" src="{{ url('assets/images/information-ocre.png') }}" alt="file-Note Text" />
                            </a>
                            @php
                            }
                            @endphp
                        </div>
                        <div class="upload-wrapper" title="{{ $doc['document_label'] }}">
                            @if(!empty($doc['document_id']))
                                @if(!empty($doc['document_download_link']) && !in_array($doc['document_status'],array(3,5)))
                                <div class="doc-tag">
                                    @if(array_key_exists('document_download_code', $doc))
                                        @php
                                            $dcode = encrypt([
                                            'dcode' => $doc['document_download_code'], 
                                            'doc_filename' => $doc['document_filename'] 
                                            ]);
                                        @endphp
                                    <a href="{{ !empty($doc["document_download_code"]) ? route('download', array('dcode',$dcode)) : 'javascript:void(0);' }}">
                                        <img class="file-download" src="{{ url('assets/images/file-download.png') }}" alt="file-download" />
                                    </a>
                                    @else
                                    <a href="{{ $doc['document_download_link'] }}"><img class="file-download" src="{{ url('assets/images/file-download.png') }}" alt="file-download" /></a>
                                    @endif
                                </div>
                                @else
                                    <div class="doc-tag">
                                        @if(@$is_step_locked == 1)
                                            <img class="file-download" src="{{ url('assets/images/file-upload-lock.png') }}" alt="file-upload-lock" title="File Upload Locked" />
                                        @else
                                            <form id="frm_upload_{{ $doc['document_type_id'] }}" class="frm_file_upload" method="post" enctype="multipart/form-data">
                                                <input type="hidden" name="document_type" value="{{ $doc['document_type_id'] }}"/>
                                                @if($is_itn_user == 0)
                                                    <input type="file" name="document_file" onchange="return uploadDocument('{{ $doc['document_type_id'] }}', function(){ setTimeout(function(){ loadStepContent('{{ $active_step_key }}'); }, 3000); });" />
                                                @endif
                                                <img class="file-download" src="{{ url('assets/images/file-upload.png') }}" alt="file-upload" />
                                            </form>
                                        @endif
                                    </div>
                                @endif
                                <div class="doc-tag">
                                    <div class="doc-status">Uploaded On</div>
                                    @if(!empty($doc['document_uploaded']))
                                        <div>{{ dateformat($doc['document_uploaded'],DISPLAY_DATE) }}</div>
                                    @endif
                                </div>
                                <div class="doc-tag">
                                    <div class="doc-status doc-{{ $doc['document_status_name'] }}">{{ ucfirst($doc['document_status_name']) }}</div>
                                    @if(!empty($doc['document_status_date']))
                                        <div>{{ dateformat($doc['document_status_date'],DISPLAY_DATE) }}</div>
                                    @endif
                                </div>
                            @else
                                <div class="file-upload-block">
                                    @if(@$is_step_locked == 1)
                                    <img class="file-upload" src="{{ url('assets/images/file-upload-lock.png') }}" alt="file-upload-lock" title="File Upload Locked" />
                                    @else
                                    <form id="frm_upload_{{ $doc['document_type_id'] }}" class="frm_file_upload" method="post" enctype="multipart/form-data">
                                        <input type="hidden" name="document_type" value="{{ $doc['document_type_id'] }}"/>
                                        @if($is_itn_user == 0)
                                            <input type="file" name="document_file" onchange="return uploadDocument('{{ $doc['document_type_id'] }}', function(){ setTimeout(function(){ loadStepContent('{{ $active_step_key }}'); }, 3000); });" />
                                        @endif
                                        <img class="file-upload" src="{{ url('assets/images/file-upload.png') }}" alt="file-upload" />
                                    </form>
                                    @endif
                                </div>
                                    <div>
                                        @if($is_itn_user == 1)
                                            <a href="javascript:void(0);" >Pending to upload</a>
                                        @else
                                            <a href="javascript:void(0);" onclick="return showUploadInstruction('{{ $doc['document_requirement_id'] }}');">Upload Instructions</a>
                                        @endif    
                                    </div>
                            @endif
                        </div>
                        @if(!empty($doc['document_id']))
                        <a href="javascript:void(0);" onclick="return viewUploadHistory('{{ $doc['document_type_id'] }}','{{@$active_stage}}');">View upload history</a>
                        @else
                        &nbsp;
                        @endif
                    </div>
                @endforeach
            @endif
            </div>
        @if((@$current_step_key == @$step_key) && $is_itn_user == 0)
            <div class="col-sm-12">
                <button type="button" class="btn btn-info" onclick="return completeRequiredDocument('{{@$step_key}}','{{@$active_stage}}')">Complete Step</button>
            </div>
        @endif
        @endif
    </div>
</div>
<script> 
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});

function completeRequiredDocument(active_step_key,active_stage){
    var user_id = $('meta[name="user_token"]').attr('content');
    showLoader("#full-overlay");
    $.ajax({
        url: "{{ route('doc.uploaded') }}",
        type: 'post',
        data: { "active_step_key" : active_step_key, "user_id": user_id },
        dataType: 'json',
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
        success: function(response){
            if(response.type == "success"){
                stageComplete(active_stage,"You have successfully completed this stage. Now it's the time to find you a {{ __('application_term.employer') }}...");
            }
            else
            {
                navigateStages(active_stage,active_step_key);
            }
            hideLoader("#full-overlay");
        },
    });
}

function deleteDocCallBack(){
    $('.close').click();
    loadStepContent('{{@$active_step_key}}');
}
</script>