@php 
    $placement_data = @$step_verified_data['placement_data'];
    $is_multi_placement = @$step_verified_data['is_multi_placement'];
    $is_step_success = @$step_verified_data['is_step_success'];
    $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
<input type="hidden" name="active_key" id="active_key" value="{{$active_step_key}}" /> 
<div class="app-status-panel-content">
    <div class="row m-b-10">
        <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">
                    Monthly Check-In
                </h3>  
            </div>
        </div>  
        @if (!empty($placement_data[0]['monthly_check_in_data']))
        @if(isset($placement_data[0]['monthly_check_in_data']))
                    @php
                        $activity_id                  = $placement_data[0]['monthly_check_in_data'][0]['id'];
                        $cand_monthly_check_in_status = $placement_data[0]['monthly_check_in_data'][0]['cand_monthly_check_in_status'];
                        $cand_monthly_checkin_number  = $placement_data[0]['monthly_check_in_data'][0]['cand_monthly_checkin_number'];
                        if(!empty($placement_data[0]['monthly_check_in_data'][0]['ev_converted_data']->dest_datetime)){
                            $activity_completed_date      = $placement_data[0]['monthly_check_in_data'][0]['ev_converted_data']->dest_datetime; 
                        }
                        $pla_id                       = $placement_data[0]['pla_id'];
                    @endphp 
                    <div class="col-sm-12">
                        @if($cand_monthly_check_in_status==1)
                        <div class="col-sm-12">
                            <p>Thank you for completing your Monthly Check In ({{$cand_monthly_checkin_number}})!</p>
                            <div class="alert alert-success d-flex align-items-center justify-content-between mb-3"> 
                                <span class="me-3">
                                    Your Monthly Check In ({{$cand_monthly_checkin_number}}) was completed on @if(!empty($activity_completed_date)) on {{ dateformat($activity_completed_date, "M d, Y h:i a") }} @endif
                                </span>

                                <button type="button"
                                        class="btn btn-info text-white flex-shrink-0"
                                        onclick="popup_viewMontlyCheckInInfo('viewMonthlyCheckInInfo-newui',{{$activity_id}},{{$cand_monthly_checkin_number}},{{$pla_id}})" alt="View Monthly Check In ({{$cand_monthly_checkin_number}}) Detail" title="View Monthly Check In ({{$cand_monthly_checkin_number}}) Detail">
                                    View
                                </button>
                            </div>
                        </div>
                            <hr/>
                        @elseif($cand_monthly_check_in_status==0)
                            <div class="col-sm-12">
                                <p>Complete Your Monthly Check-In ({{$cand_monthly_checkin_number}})</p>
                                <p>We hope you are enjoying your J-1 Exchange Visitor Program experience in the United States! It’s now time for your Monthly Check-In.</p>
                                <p>Completing the Monthly Check-In is a mandatory requirement for all J-1 Participants sponsored by Odyssey International Exchange. Submitting your Check-In ensures you remain in good standing as a J-1 Participant.</p>
                                <p>You can complete it here:</p>
                                <p>We hope you are enjoying your J-1 Exchange Visitor Program experience in the United States! It’s now time for your Monthly Check-In.</p>
                                <div class="text-left mb-2">
                                    <a class="btn btn-info" href="{{$placement_data[0]['monthly_check_in_data'][0]['monthly_check_in_link']}}" target='_blank'>Complete Monthly Check-In</a>
                                </div> 
                                <p>Please remember that a member of our team will review your responses, so we encourage you to answer honestly and openly.</p> 
                                <p>The Check-In is quick to complete and is a great opportunity to share feedback with the Odyssey team. We appreciate you taking a few minutes to submit it today!</p> 
                                <p>Thank you for helping us support you throughout your program.</p>  
                            </div>
                        @endif 
                    </div>
        @endif 
                @php unset($placement_data[0]['monthly_check_in_data'][0]) @endphp 
                @if(!empty($placement_data[0]['monthly_check_in_data']))
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel-group monthly_check_in p-15" id="past_monthly_check_in" aria-multiselectable="true" role="tablist">
                                <div class="panel panel-info">
                                    <div class="panel-heading" id="monthlycheckin_heading" role="tab"> 
                                        <a class="panel-title text-info collapsed" style="text-decoration: underline;text-decoration-color: #fff;"data-bs-toggle="collapse" href="#past_monthlycheckin" data-bs-parent="#past_monthly_check_in" aria-expanded="false" aria-controls="past_monthlycheckin">
                                            <p class="text-white" style="padding: 10px;background: #0f5290;">View Past Monthly Check In</p>
                                        </a>
                                    </div>
                                    <div class="panel-collapse collapse" id="past_monthlycheckin" aria-labelledby="monthlycheckin_heading" role="tabpanel">
                                        <div class="panel-body m-b-10 p-10"> 
                                            @foreach($placement_data[0]['monthly_check_in_data'] as $act_key => $activity_data)
                                                @php
                                                    $activity_id                  = $activity_data['id'];
                                                    $cand_monthly_check_in_status = $activity_data['cand_monthly_check_in_status'];
                                                    $cand_monthly_checkin_number  = $activity_data['cand_monthly_checkin_number'];
                                                    if(!empty($activity_data['ev_converted_data']->dest_datetime)){
                                                        $activity_completed_date      = $activity_data['ev_converted_data']->dest_datetime;
                                                    }
                                                    $pla_id                       = $placement_data[0]['pla_id'];
                                                @endphp 
                                                <div class="col-sm-12">
                                                    @if($cand_monthly_check_in_status==1)
                                                        <div class="col-sm-12">
                                                            <div class="alert alert-success d-flex align-items-center justify-content-between mb-3"> 
                                                                <span class="me-3">
                                                                    Your Monthly Check In ({{$cand_monthly_checkin_number}}) was completed on @if(!empty($activity_completed_date)) on {{ dateformat($activity_completed_date, "M d, Y h:i a") }} @endif
                                                                </span>

                                                                <button type="button"
                                                                        class="btn btn-info text-white flex-shrink-0"
                                                                        onclick="popup_viewMontlyCheckInInfo('viewMonthlyCheckInInfo-newui',{{$activity_id}},{{$cand_monthly_checkin_number}},{{$pla_id}})" alt="View Monthly Check In ({{$cand_monthly_checkin_number}}) Detail" title="View Monthly Check In ({{$cand_monthly_checkin_number}}) Detail">
                                                                    View
                                                                </button>
                                                            </div>
                                                        </div>
                                                    @elseif($cand_monthly_check_in_status==0) 
                                                        <div class="col-sm-12">
                                                            <div class="alert alert-warning d-flex align-items-center justify-content-between mb-3"> 
                                                                <span class="me-3">
                                                                    Complete Your Monthly Check In ({{$cand_monthly_checkin_number}})
                                                                </span>

                                                                <button type="button"
                                                                        class="btn btn-info text-white flex-shrink-0"
                                                                        onclick="viewPendingMonthlyCheckInInfo('viewPendingMonthlyCheckInInfo-newui',{{$placement_data[0]['pla_id']}},{{$cand_monthly_checkin_number}})" alt="Complete Your Monthly Check In ({{$cand_monthly_checkin_number}})" title="Complete Your Monthly Check In ({{$cand_monthly_checkin_number}})">
                                                                    View
                                                                </button>
                                                            </div>
                                                        </div>
                                                    @endif 
                                                    <hr/>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> 
                @endif
        @endif
        
        <div class="col-sm-12"> 
            <div class="d-flex justify-content-end align-items-center gap-2 mt-3"> 
                <button type="button"
                    class="btn btn-success"
                    onclick="return viewPopup('Monthly Check In','{{@$active_step_key}}');">
                    Support <i class="mdi mdi-help-circle-outline step-help"></i>
                </button>
            </div>
        </div> 
    </div> 
</div>