@php
$documents = @$step_verified_data['documents'];
$pre_placement_doc = @$step_verified_data['pre_placement_doc'];
$step_status = @$step_verified_data['step_status'];
$brand_agency = @$step_verified_data['brand_agency'];
$agency_logo_url = @$step_verified_data['agency_logo_url'];
$agency_bg_color = @$step_verified_data['agency_bg_color'];
$agency_logo_class = @$step_verified_data['agency_logo_class']; 
@endphp  
<div class="app-status-panel-content">
    <div class="row">
        <div class="col-sm-12 mb-4">
            <div class="d-flex flex-column flex-sm-row align-items-center"> 
                <h3 class="mb-2 mb-sm-0 text-center flex-grow-1 d-inline-b">
                    Submit Your Documents
                </h3>  
            </div> 
        </div>
        <div class="col-sm-12">
            <p>Congratulations! Your placement is confirmed at <strong>{host_company_1}!</strong></p> 
            <p>To move forward with processing your application and receiving your Form DS-2019, please upload all the required documents below before <strong>{placement_date_after_14_days}</strong>.</p> 
            <p>The document submission deadline will be strictly observed, and failure to complete may result in placement cancellation, and the refund policy in the ITN Agreement will be applied.</p>
            <p>
                <strong>IMPORTANT TO CHECK:</strong> <br/><br/>
                <strong>Document Checklist - <a href="" class="btn btn-info">Download</a></strong></br>
                <strong>Odyssey Terms and Conditions form (T&C) - <a href="" class="btn btn-info">Download</a></a></strong></br>
                <strong>Odyssey SAF - Agreement and Orientation Supplement (SAF) - INDIAN NATIONALS ONLY - <a href="" class="btn btn-info">Download</a></a></strong></br>
                <strong>Exchange Visitor Information - <a href="" class="btn btn-info">Download</a></a></strong>
            </p> 
            <p>These templates are also available in your personal document management link stated above. Please note that all documents must be uploaded to the portal. If you have any questions or concerns, please contact your ITN Representative from the Compliance Department: {compliance_name} at {compliance_email_address}.</p>
            <p>We require all participants to submit their documents and payments within two weeks. If you encounter any issues with submitting the required documents, please reach out to us immediately. Failure to meet the deadline without communication will be taken as a withdrawal from the program, and your placement will be cancelled.</p>
            <p>If you have any questions and/or inquiries, please send your email to the correct point of contact to avoid delays:</p>
            <p>For questions regarding your training offer letter, Host Organization, stipend, program duration, ITN Agreement, please email your US Experience Expert at name & email.</p>
            <p>For information about the required documents and processing timeline, please send your email to {compliance_name} at {compliance_email_address}.</p>
            <p>For questions regarding payments and invoices, please send your email to the accounting department {generic_email1} and {generic_email2}</p>
            <p>Thank you, and we look forward to assisting you during the next steps! </p>
<!--            <ul>
                <li><p>Job Offer, Host Company questions, Stipend, Program duration, ITN Service Agreement - please send the email to the Registration Department (the person who you had your introductory call).</p></li>
                <li><p>Required documents and processing timeline - please send your email to {compliance_name} at {compliance_email_address}.</p></li>
                <li><p>Payment questions/ payment plan - please send your email to the accounting department {generic_email1} and {generic_email2}</p></li> 
            </ul> 
            <p>Thank you and we look forward to welcoming you to ITN's Visitor Exchange Program!</p>-->
        </div>
        <div class="col-sm-12"> 
            <p class="fw-semibold">
                As part of the U.S. Department of State regulations, we need the following documents for your J-1 Visa Sponsorship.
            </p> 
            <div class="row g-4"> 
                @foreach($documents as $doc)
                <div class="col-md-6 col-lg-4">

                    <div class="card shadow-sm border-0"> 
                        <div class="card-body text-center d-flex flex-column py-0 px-3"> 
                            <h6 class="fw-semibold mb-2">
                                <span class="{{ $doc['requirement_type'] == 1 ? 'text-danger' : 'text-warning' }}">*</span>

                                {{ $doc['document_label'] }}

                                @if(!empty($doc['doc_desc']))
                                <i class="bi bi-info-circle ms-1 text-muted"
                                   data-bs-toggle="tooltip"
                                   data-bs-html="true"
                                   title="{{ $doc['doc_desc'] }}"></i>
                                @endif
                            </h6>
 
                            <div class="my-1"> 
                                @if(!empty($doc['document_id'])) 
                                    <a href="{{ $doc['document_download_link'] ?? '#' }}"
                                       class="btn btn-outline-primary btn-sm">
                                        <i class="bi bi-download"></i> Download
                                    </a> 
                                @else 
                                    @if($user->is_timeline_locked == 1)
                                        <span class="text-muted small">Upload Locked</span>
                                    @else
                                        <form method="post" enctype="multipart/form-data">
                                            <input type="file"
                                                   class="form-control form-control-sm mb-2"
                                                   onchange="uploadDocument('{{ $doc['document_type_id'] }}','1','{{ $active_step_key }}')">

                                            <button class="btn btn-info btn-sm w-100">
                                                Upload
                                            </button>
                                        </form>
                                    @endif 
                                @endif 
                            </div> 
                            @if(!empty($doc['document_uploaded_converted_data']->dest_datetime))
                            <div class="small text-muted mt-auto">
                                <strong>Uploaded:</strong><br>
                                {{ dateformat($doc['document_uploaded_converted_data']->dest_datetime,DISPLAY_DATETIME) }}
                            </div>
                            @endif
                        </div>
 
                        <div class="card-footer bg-transparent text-center border-0"> 
                            @if(!empty($doc['document_id'])) 
                                <a href="javascript:void(0);"
                                   onclick="viewUploadHistory('{{ $doc['document_type_id'] }}','{{@$active_stage}}');"
                                   class="small text-decoration-none d-block mb-2">
                                   View history
                                </a> 
                                @if(!in_array(pathinfo($doc['document_filename'], PATHINFO_EXTENSION), ['doc','docx']) && !in_array($doc['document_status'], [4]))
                                <form method="post" action="{{ $action }}">
                                    @csrf
                                    <input type="hidden" name="document_type" value="{{ $doc['document_type_id'] }}">
                                    <button type="button"
                                            onclick="upload_document_types({{ $doc['document_type_id'] }});"
                                            class="btn btn-outline-secondary btn-sm">
                                        Append PDF
                                    </button>
                                </form>
                                @else
                                <span class="text-muted small">Append not allowed</span>
                                @endif 
                            @else 
                                <a href="javascript:void(0);"
                                   onclick="showUploadInstruction('{{ $doc['document_requirement_id']}}','{{@$active_stage}}');"
                                   class="small text-decoration-none">
                                   Upload Instructions
                                </a> 
                            @endif 
                        </div> 
                    </div> 
                </div>
                @endforeach 
            </div>
            
            <div class="d-flex justify-content-end align-items-center gap-2 mt-3">

                <button type="button"
                    class="btn btn-success"
                    onclick="return viewPopup('Determine your eligibility','{@$active_step_key}');">
                    Support <i class="mdi mdi-help-circle-outline step-help"></i>
                </button>

                <button type="button" class="btn btn-info">
                    Next Step
                </button>

            </div> 
        </div> 
    </div> 
</div>