@php
$is_itn_user = @$step_verified_data['is_itn_user'];
$download_link = @$step_verified_data['download_template_link'];
$agreement_content = str_replace("{APP_NAME}", config('app.name'), config('common.agreement_content'));
$dos_program_category_id = @$user->portfolio->dos_program_category_id;
$itn_reg_admin_category = @$user->portfolio->itn_reg_admin_category;
$countdown_date =@$step_verified_data['countdown_date'];
$doc_dw_link = @$step_verified_data['document_download_link'];
$itn_agreement_template = @$step_verified_data['itn_agreement_template'];
$CURRENCY = config('common.currency_code');
$CURRENCY_EURO = config('common.currency_code_euro');
$CURRENCY_SYMBOL = config('common.currency_symbol');
$CURRENCY_SYMBOL_EURO = config('common.currency_symbol_euro');
$j1Interview = $user->interview;
$userGeneral = $user->userGeneral(); 
$registration_fee = @$step_verified_data['itndata']['registration_fee']['fee_amount'];  
$currency_type = $currency_type_symbol = $cancellation_fee = ""; 
$fee_structure = @$step_verified_data['itndata']['fee_structure_detail'];  
if(!empty($step_verified_data['itndata']['registration_fee']['fee_amount'])){
    $registration_fee = @$step_verified_data['itndata']['registration_fee']['fee_amount']." ".$CURRENCY;
}else{
    $registration_fee = 'POSTPONE';
} 
$disable_checkbox_image_url = config("app.url")."assets/images/disable_checkbox.png"; 
$reg_fee_program = "<img src='{$disable_checkbox_image_url}' />"; 

$table_structure = "<figure class='table'><table><tbody><tr><td><br></td><td colspan='2'><p style='text-align:center;'><span class='text-small'><strong>Description</strong></span></p></td><td><p style='text-align:center;'><span class='text-small'><strong>Amount</strong></span></p></td><td><p style='text-align:center;'><span class='text-small'><strong>Select Program</strong></span></p></td></tr><tr><td><p style='text-align:center;'><span class='text-small'><strong>Registration Fee</strong></span></p></td><td colspan='2'><span class='text-small'>It is non-refundable and non-applicable to the Program Fee. It covers the Service Provider's administrative costs to start the research for a Host Company on behalf of the Candidate.</span></td><td><p style='text-align:center;'><span class='text-small'>".$registration_fee."</span></p></td><td><p style='text-align:center;'>".$reg_fee_program."</p></td></tr>";
 
if(!empty($fee_structure)){ 
   /*$fee_type = $fee_structure['field_name'];*/
    $fee_type = $fee_structure['program_category_name'];
    if($fee_structure['currency_type'] == 2){
        $currency_type = $CURRENCY_EURO;
        $currency_type_symbol = $CURRENCY_SYMBOL_EURO;
    }
    elseif($fee_structure['currency_type'] == 1){
        $currency_type = $CURRENCY;
        $currency_type_symbol = $CURRENCY_SYMBOL;
    }
    $cancellation_fee = $fee_structure['cancellation_fee']." ".$currency_type; 
    if($fee_structure['program_duration'] == 1){ 
        $table_structure .= "<tr><td><p style='text-align:center;'><span style='color:hsl(210,75%,60%);font-size: 12px;'><strong>".$fee_type."</strong></span><br/><span class='text-small'><strong>Less than 5 months Program Fee</strong></span></p></td><td><p style='text-align:center;'><span class='text-small'><strong>Full Payment Option</strong></span></p></td><td><span class='text-small'>It covers the services described in Article 1.1 and the medical insurance and DS Forms for the duration of the program.</span></td><td><p style='text-align:center;'><span class='text-small'>".$fee_structure['full_payment_amount']+$fee_structure['markup_fee']." ".$currency_type."</span></p></td><td><p style='text-align:center;'><input type='checkbox' name='select_program' value='5' onclick='allowOnlyOneCheckbox(this)' checked='checked' /></p></td></tr>";
    }
    if($fee_structure['program_duration'] == 2){  
        if($fee_structure['payment_plan'] == 1){
            $full_select_box = "<input type='checkbox' name='select_program' value='8' onclick='allowOnlyOneCheckbox(this)' checked='checked'/>";
            $install_select_box = "<input type='checkbox' name='select_program' value='5.1' onclick='allowOnlyOneCheckbox(this)' />";
        }
        else{
            $full_select_box = "<input type='checkbox' name='select_program' value='8' onclick='allowOnlyOneCheckbox(this)' />";
            $install_select_box = "<input type='checkbox' name='select_program' value='5.1' onclick='allowOnlyOneCheckbox(this)' checked='checked'/>";
        }
        
        $table_structure .= "<tr><td rowspan='3'><p style='text-align:center;'><span style='color:hsl(210,75%,60%);font-size: 12px;'><strong>".$fee_type."</strong></span><br/><span class='text-small'><strong>5.1 - 8 months Program Fee</strong></span></p></td><td><p style='text-align:center;'><span class='text-small'><strong>Full Payment Option</strong></span></p></td><td><span class=''>It covers the services described in Article 1.1 and the medical insurance and DS Forms for the duration of the program.</span></td><td><p style='text-align:center;'><span class='text-small'>".$fee_structure['full_payment_amount']+$fee_structure['markup_fee']." ".$currency_type."</span></p></td><td><p style='text-align:center;'>".$full_select_box."</p></td></tr><tr><td rowspan='2'><p style='text-align:center;'><span class='text-small'><strong>Installment Payment Option</strong></span></p></td><td><span class='text-small'>The Candidate will pay the initial deposit for the program before arrival It covers the services described in Article 1.1</span></td><td><p style='text-align:center;'><span class='text-small'>".$fee_structure['initial_amount']+$fee_structure['markup_fee']." ".$currency_type."</span></p></td><td rowspan='2'><p style='text-align:center;'>".$install_select_box."</p></td></tr><tr><td><p><span class='text-small'>The Candidate will remit payment every two weeks upon arrival for the duration of the program stated on his/her DS 2019. The Candidate will have to set up an automated payment through his/her American debit/credit card upon arrival in the United States.</span></p><p><span class='text-small'>The Candidate must understand and agree that if he/she stops payment, he/she will be terminated from the J1 Program and will have to return to his/her home country immediately. You will need to clear off your reaming balance in any occasion including withdrawing from the internship program or leaving early.</span></p></td><td><p style='text-align:center;'><span class='text-small'>".$fee_structure['bi_weekly_amount']+$fee_structure['markup_fee']." ".$currency_type." every two weeks</span></p></td></tr>";
    }
    
    if($fee_structure['program_duration'] == 3){ 
        if($fee_structure['payment_plan'] == 1){
            $full_select_box = "<input type='checkbox' name='select_program' value='12' onclick='allowOnlyOneCheckbox(this)' checked='checked'/>";
            $install_select_box = "<input type='checkbox' name='select_program' value='8.1' onclick='allowOnlyOneCheckbox(this)' />";
        }
        else{
            $full_select_box = "<input type='checkbox' name='select_program' value='12' onclick='allowOnlyOneCheckbox(this)' />";
            $install_select_box = "<input type='checkbox' name='select_program' value='8.1' onclick='allowOnlyOneCheckbox(this)' checked='checked'/>";
        }  
        
        $table_structure .= "<tr><td rowspan='3'><p style='text-align:center;'><span style='color:hsl(210,75%,60%);font-size: 12px;'><strong>".$fee_type."</strong></span><br/><span class='text-small'><strong>8.1 - 12 months Program Fee</strong></span></p></td><td><p style='text-align:center;'><span class='text-small'><strong>Full Payment Option</strong></span></p></td><td><span class='text-small'>It covers the services described in Article 1.1 and the medical insurance and DS Forms for the duration of the program.</span></td><td><p style='text-align:center;'><span class='text-small'>".$fee_structure['full_payment_amount']+$fee_structure['markup_fee']." ".$currency_type."</span></p></td><td><p style='text-align:center;'><br>".$full_select_box."</p></td></tr><tr><td rowspan='2'><p style='text-align:center;'><span class='text-small'><strong>Installment Payment Option</strong></span></p></td><td><span class='text-small'>The Candidate will pay the initial deposit for the program before arrival It covers the services described in Article 1.1</span></td><td><p style='text-align:center;'><span class='text-small'>".$fee_structure['initial_amount']+$fee_structure['markup_fee']." ".$currency_type."</span></p></td><td rowspan='2'><p style='text-align:center;'><br>".$install_select_box."<p></td></tr><tr><td><p><span class='text-small'>The Candidate will remit payment every two weeks upon arrival for the duration of the program stated on his/her DS 2019. The Candidate will have to set up an automated payment through his/her American debit/credit card upon arrival in the United States.</span></p><p><span class='text-small'>The Candidate must understand and agree that if he/she stops payment, he/she will be terminated from the J1 Program and will have to return to his/her home country immediately. You will need to clear off your reaming balance in any occasion including withdrawing from the internship program or leaving early.</span></p></td><td><p style='text-align:center;'><span class='text-small'>".$fee_structure['bi_weekly_amount']+$fee_structure['markup_fee']." ".$currency_type."</span></p><p style='text-align:center;'><span class='text-small'>Due on three months</span></p><p style='text-align:center;'><span class='text-small'>after arrival to the US</span></p></td></tr>";
         
    }
    if($fee_structure['program_duration'] == 4){ 
        if($fee_structure['payment_plan'] == 1){
            $full_select_box = "<input type='checkbox' name='select_program' value='6' onclick='allowOnlyOneCheckbox(this)' checked='checked'/>";
            $install_select_box = "<input type='checkbox' name='select_program' value='6.1' onclick='allowOnlyOneCheckbox(this)' />";
        }
        else{
            $full_select_box = "<input type='checkbox' name='select_program' value='6' onclick='allowOnlyOneCheckbox(this)' />";
            $install_select_box = "<input type='checkbox' name='select_program' value='6.1' onclick='allowOnlyOneCheckbox(this)' checked='checked'/>";
        } 
        
        $table_structure .= "<tr><td rowspan='3'><p style='text-align:center;'><span style='color:hsl(210,75%,60%);font-size: 12px;'><strong>".$fee_type."</strong></span><br/><span class='text-small'><strong>12.1 - 18 months Program Fee</strong></span></p></td><td><p style='text-align:center;'><span class='text-small'><strong>Full Payment Option</strong></span></p></td><td><span class='text-small'>It covers the services described in Article 1.1 and the medical insurance and DS Forms for the duration of the program.</span></td><td><p style='text-align:center;'><span class='text-small'>".$fee_structure['full_payment_amount']+$fee_structure['markup_fee']." ".$currency_type."</span></p></td><td><p style='text-align:center;'><br>".$full_select_box."</p></td></tr><tr><td rowspan='2'><p style='text-align:center;'><span class='text-small'><strong>Installment Payment Option</strong></span></p></td><td><span class='text-small'>The Candidate will pay the first installment for the program before arrival It covers the services described in Article 1.1</span></td><td><p style='text-align:center;'><span class='text-small'>".$fee_structure['initial_amount']+$fee_structure['markup_fee']." ".$currency_type."</span></p></td><td rowspan='2'><p style='text-align:center;'><br>".$install_select_box."</p></td></tr><tr><td><p><span class='text-small'>The Second Installment of the Program Fee secures placement and covers the continuance of Form DS 2019 and medical insurance.</span></p><p><span class='text-small'><u>A payment plan will not be offered to the second installment payment.</u></span></p><p><span class='text-small'>The Candidate must understand and agree that if he/she does not remit payment, he/she may be terminated from the J-1 Program and will have to return to his/her home country immediately. You will need to clear off your balance in any occasion including early leaving due to withdrawing from the internship program or a termination from a Host Company.</span></p></td><td><p style='text-align:center;'><span class='text-small'>".$fee_structure['bi_weekly_amount']+$fee_structure['markup_fee']." ".$currency_type."</span></p><p style='text-align:center;'><span class='text-small'>Due on three months</span></p><p style='text-align:center;'><span class='text-small'>after arrival to the US</span></p></td></tr>"; 
    } 
}
$table_structure .= "</tbody></table></figure>"; 
if($itn_agreement_template == 1)
{
    $itndata = @$step_verified_data['itndata'];
    $itn_agreement_content = '';
    if($dos_program_category_id == 3)
    { 
        $itn_agreement_content = config('common.camp_itn_agreement_content');
        $itn_agreement_content = str_replace("{DAY}",  date('jS') , $itn_agreement_content);
        $itn_agreement_content = str_replace("{MONTH}",  date('F'), $itn_agreement_content);
        $itn_agreement_content = str_replace("{YEAR}",  date('Y'), $itn_agreement_content);
        $itn_agreement_content = str_replace("{CURRENCY}",  $CURRENCY, $itn_agreement_content);
        $itn_agreement_content = str_replace("{CURRENCY_SYMBOL}",  $CURRENCY_SYMBOL, $itn_agreement_content);
        $itn_agreement_content = str_replace("{CURRENCY_SYMBOL_NAME}",  config('common.currency_symbol_name'), $itn_agreement_content);
        $itn_agreement_content = str_replace("{REG_FEE}",   @$registration_fee, $itn_agreement_content);
        $itn_agreement_content = str_replace("{PROG_FEE}",  @$itndata['program_fee']['fee_amount'], $itn_agreement_content);
        $itn_agreement_content = str_replace("{SEVIS_FEE}", @$itndata['sevis_fee']['fee_amount'], $itn_agreement_content);
        $itn_agreement_content = str_replace("{EV_NAME}", $user->first_name." ".$user->last_name, $itn_agreement_content); 
        $itn_agreement_content = str_replace("{ANS}", '<div class="form-group"><textarea class="form-control" name="itn_agreement_ans" id="itn_agreement_ans" placeholder="Please disclose it here" maxlength="500"></textarea><span class="text-danger">Maximum 500 character allow</span></div>' , $itn_agreement_content); 
    } else if(in_array($dos_program_category_id,[1,2])) { 
    
        if($dos_program_category_id == 2) {
            $itn_agreement_content = config('common.trainee_itn_agreement_content');
            if(empty($cancellation_fee)){
                $cancellation_fee = "Six Hundred and Ninety-Five US Dollars (695.00 USD)";
            }
        }elseif($dos_program_category_id == 1) {
            $itn_agreement_content = config('common.intern_itn_agreement_content');
            if(empty($cancellation_fee)){
                $cancellation_fee = "Five Hundred and Ninety-Five US Dollars (595.00 USD)";
            }
        }
        if(!empty($fee_structure)){
            $sevis_fee = $fee_structure['sevis_fee']." ".$currency_type;
            $shipping_fee = $fee_structure['shipping_fee']." ".$currency_type;
        }
        $non_refundable_fee = "<input type='checkbox' name='agr_non_ref_fee' id='agr_non_ref_fee' value='' /> <label class='agr_non_ref_fee' for='agr_non_ref_fee'><span class='text-danger' style='margin-top: -7px;position: absolute;'>*</span> <span style='margin-left: 8px'>I'm aware that the following fees are non-refundable.</span></label>";
        $sev_fee = $can_fee = $shi_fee = "";
        if(!empty($fee_structure)){
            if(!empty(number_format($fee_structure['sevis_fee'], 0))){
                $sev_fee = "<tr><td>Sevis Fee</td><td>$sevis_fee</td></tr>"; 
            }
            if(!empty(number_format($fee_structure['cancellation_fee'], 0))){
                $can_fee = "<tr><td>Cancellation Fee</td><td>$cancellation_fee</td></tr>"; 
            } 
            if(!empty(number_format($fee_structure['shipping_fee'], 0))){
                $shi_fee = "<tr><td>Shipping Fee</td><td>$shipping_fee</td></tr>";
            } 
        }
        $non_refundable_fee .= "<div class='agreement_fee_table'><table class='non_ref_fee_table table table-bordered'><tr><th>Fee Type</th><th>Amount</th></tr><tr><td>Registration Fee</td><td>$registration_fee</td></tr>$sev_fee$can_fee$shi_fee</table></div>";

        $itn_agreement_content = str_replace("{DAY}",  date('jS') , $itn_agreement_content);
        $itn_agreement_content = str_replace("{MONTH}",  date('F'), $itn_agreement_content);
        $itn_agreement_content = str_replace("{YEAR}",  date('Y'), $itn_agreement_content);
        $itn_agreement_content = str_replace("{EV_NAME}",   $user->first_name." ".$user->last_name , $itn_agreement_content);
        $itn_agreement_content = str_replace("{CURRENCY}",  $CURRENCY, $itn_agreement_content);
        $itn_agreement_content = str_replace("{CURRENCY_SYMBOL}",  $CURRENCY_SYMBOL, $itn_agreement_content);
        $itn_agreement_content = str_replace("{CURRENCY_SYMBOL_NAME}",  config('common.currency_symbol_name'), $itn_agreement_content);
        $itn_agreement_content = str_replace("{REG_FEE}",   @$registration_fee, $itn_agreement_content);
        $itn_agreement_content = str_replace("{PROG_FEE}",  @$itndata['program_fee']['fee_amount'], $itn_agreement_content);
        $itn_agreement_content = str_replace("{SEVIS_FEE}", @$itndata['sevis_fee']['fee_amount'], $itn_agreement_content);  
        $itn_agreement_content = str_replace("{cancellation_fee}", $cancellation_fee, $itn_agreement_content);   
        $itn_agreement_content = str_replace("{table_structure}", $table_structure, $itn_agreement_content); 
        $itn_agreement_content = str_replace("{non_refundable_fee}", $non_refundable_fee, $itn_agreement_content);
         
    } else if ($dos_program_category_id == 100){
        $itn_agreement_content = config('common.other_category_agreement_content');
    }
     
    if(!empty($itn_reg_admin_category)){
        if($dos_program_category_id == 3 && in_array($itn_reg_admin_category,array(7,6))){
            $branding_name = config('common.camp_banding_name');
        }elseif(in_array($itn_reg_admin_category,array(4,5))){
            $branding_name = config('common.odc_banding_name');
        }else{
            $branding_name = config('common.itn_banding_name');
        }
    }else{
        $branding_name = config("common.itn_agreement_print_name");                 
    }
}  
@endphp
<div class="app-status-panel-content">
    @if($action == "j1_agreement_pdf_content")
        <span>{!! $data !!}</span>
    @elseif($action == "j1_pdf_template")
        <div>
            <span>{!! $html_content !!}</span>
        </div>
    
        <div class="row col-md-12" style="padding:10px;">
            <div class="col-md-6" style="float:left">
                <strong>Signature Date</strong>
                <div>{{ dateformat(now(),DISPLAY_DATE) }}</div>
            </div>
            <div class="col-md-6" style="float:right">
                <strong>Signature</strong>
                <div><img style="max-width:150px;" src="{{ $signature_url }}" /></div>
            </div>
        </div>
   
    @else
        <div class="row">
            <div class="col-sm-12">
                <h3 class="d-inline-b">Agreement</h3>
                <button type="button" title="Contact Support" class="btn btn-success pull-right support_width" onclick="return viewPopup('Agreement','{{@$active_step_key}}');">Support<i class="mdi mdi-help-circle-outline step-help"></i></button>
                @if(in_array($dos_program_category_id,[1,2]) && empty($interview_finished))
                    <p>You will need to sign the agreement in order to continue.</p>
                @elseif(in_array($dos_program_category_id,[3]))
                    <p>You will need to sign the agreement in order to continue.</p>
                @endif 
                <div id="notify_1_6"></div>
                @if($is_step_success == 1)
                    <div class="alert alert-success p-25">
                        Your agreement has been successfully completed.
                    </div>
                    @if(!empty($doc_dw_link))
                        <p>
                            You can download your agreement using click on 
                            <a href="{{ $doc_dw_link }}"><img class="file-download-small" src="{{ url('assets/images/file-download.png') }}" alt="file-download" /></a>
                        </p>
                    @endif
                    @if(!empty($next_step_key))
                        <button type="button" class="btn @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif btn-xs-block" onclick="loadStepContent('{{ $next_step_key }}')">Next Step</button>
                    @endif
                @else
                    @if($is_step_locked != 1)
                        @if($is_itn_user == 1)
                            @if($itn_agreement_template == 1)
                                @if(in_array($dos_program_category_id,[1,2]))
                                    @if(!empty($fee_structure) && !empty($fee_structure['combo_id']))
                                        <button type="button" class="btn btn-sm @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif m-b-10" onclick="show_popup('j1-agreement-modal');">Sign Agreement</button>
                                    @else
                                        </br>
                                        <div id="agreement_timer">
                                            <p>We have completed the review your application and you will receive a link to sign the ITN Program Agreement in the next 24 hours.</p>
                                            <h2 class="timer text-muted m-t-0"></h2>
                                        </div>
                                    @endif
                                @else
                                <button type="button" class="btn btn-sm @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif m-b-10" onclick="show_popup('j1-agreement-modal');">Sign Agreement</button>
                                @endif
                            @else
                                <div class="row">
                                    <div class="alert alert-warning p-25">
                                        <p>Once Pre-screening interview data found than you can sign the agreement. </p>
                                    </div> 
                                </div>
                            @endif
                        @else
                            <button type="button" class="btn btn-sm @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif m-b-10 btn-xs-block" onclick="show_popup('j1-agreement-modal');">Sign Agreement</button> 
                        @endif    
                    @endif
                    <div class="j1_agreement_success hide">
                        <div class="alert alert-warning p-25"> 
                            <p>You will be redirected now to the next step: Registration Fee.</p>
                            <p>Hold tight...</p> 
                        </div>
                    </div>
                @endif
            </div> 
        </div>
        <div id="j1-agreement-modal" class="modal modal-effect fade" style="display: none;" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header @if(config('common.portal') == 'ODC') bg-info-ODC @else bg-info @endif ">
                        <button type="button" class="close text-white" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title text-white">Sign Agreement</h4>
                    </div>
                    <div class="modal-body p-25" id="agreement_body" style="height: 500px !important;">
                        <div class="row">
                            <div class="col-md-12  col-sm-12 col-xs-12">
                                @if( $itn_agreement_template == 1 )
                                {!! $itn_agreement_content !!}
                                @else
                                {!! $agreement_content !!}
                                @endif
                                @if( $itn_agreement_template == 1 )
                                <br>
                                <div class="signature">
                                    <div class="row m-b-10">
                                        <div class="col-md-6  col-sm-6 col-xs-12">
                                            <strong>Candidate:</strong> {{ @$user->first_name }} {{ @$user->last_name }}
                                        </div>
                                        <div class="col-md-6  col-sm-6 col-xs-12">
                                            <div class="row mt-1">
                                                <div class="col-md-2"><strong>Signature:&nbsp;</strong> </div>
                                                <div class="col-md-5 width_custome">
                                                    <input type="radio" id="draw1" name="sign_draw" value="1" checked />
                                                    <label for="draw1">Draw Your Signature</label>
                                                </div>
                                                <div class="col-md-5">
                                                    <input type="radio" id="draw2" name="sign_draw" value="2" />
                                                    <label for="draw2">Type Your Signature</label>
                                                </div>
                                            </div>
                                            
                                            <div class="hide sign_text_div right_mobile p-5">
                                                <input type="text" name="signatureInput" id="signatureInput" placeholder="Type your signature here" class="form-control" style="display: inline;width:276px;margin-bottom: 5px;border-radius: 5px;"/>  
                                            </div>
                                            
                                            <div id="canvas"  class="right_mobile p-5">
                                                <canvas class="canvas-div" id="newSignature"></canvas>
                                                <br>
                                                <span class="clear-pad-btn clear-pad" role="button" tabindex="0" id="sig-clearBtn">
                                                    <i class="fa fa-trash" aria-hidden="true"></i>
                                                    <strong>Clear</strong>
                                                </span>
                                            </div>
                                            <script>signatureCapture();</script>
                                        </div>
                                    </div>
                                    <div class="row m-b-10">
                                        <div class="col-md-6  col-sm-6 col-xs-12">
                                            <strong>Print Name:</strong> {{ @$user->first_name }} {{ @$user->last_name }}
                                        </div>
                                        <div class="col-md-6  col-sm-6 col-xs-12">
                                            <strong>Date:</strong> {{ dateformat(now(),DISPLAY_DATE) }}
                                        </div>
                                    </div>
                                </div>
                                @else
                                <p class="text-right">
                                    <div class="row mt-1">       
                                        <div class="col-md-2"><strong>Signature:&nbsp;</strong> </div>
                                        <div class="col-md-5 width_custome">
                                            <input type="radio" id="draw1" name="sign_draw" value="1" checked />
                                            <label for="draw1">Draw Your Signature</label>
                                        </div>
                                        <div class="col-md-5">
                                            <input type="radio" id="draw2" name="sign_draw" value="2" />
                                            <label for="draw2">Type Your Signature</label>
                                        </div>
                                    </div>
                                    
                                    <div class="hide sign_text_div right_mobile p-5">
                                        <input type="text" name="signatureInput" id="signatureInput" placeholder="Type your signature here" class="form-control" style="display: inline;width:276px;margin-bottom: 5px;border-radius: 5px;"/>  
                                    </div>
                                
                                    <div id="canvas"  class="text-right">
                                        <canvas class="canvas-div" id="newSignature"></canvas>
                                        <br>
                                        <span class="clear-pad-btn clear-pad" role="button" tabindex="0" onclick="signatureClear()">
                                            <i class="fa fa-trash" aria-hidden="true"></i>
                                            <strong>Clear</strong>
                                        </span>
                                    </div>
                                    <script>signatureCapture();</script>
                                </p>
                                @endif

                                <div class="modal-footer text-left j1-agreement-footer"> 
                                    <input type="button" name="j1_agreement_agree" id="j1_agreement_agree" class="btn @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif btn-sm text-left btn-xs-block" value="I Agree" onclick="return j1Agree();" /> 
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
<script type="text/javascript">
    
    $(document).ready(function() {
        $(document).on("input",'#signatureInput',function() {
            var inputVal = $(this).val();
            
            var canvas = jQuery('#newSignature')[0];
            var context = canvas.getContext('2d');
            canvas.width = 276;
            canvas.height = 100;
            if (!inputVal.trim()) {
                context.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
                $(this).val(''); 
                return;
            }          
            
            context.font = "30px 'Dancing Script', cursive"; // Set font size and style
            context.fillText(inputVal, 10, 60); // Draw the text
        });
    });
    
    $(document).on("change",'input[name="sign_draw"]',function() {
        var canvas = jQuery('#newSignature')[0];
        var context = canvas.getContext('2d');
        var drawing = false;

        canvas.width = 276;
        canvas.height = 100;
        context.clearRect(0, 0, canvas.width, canvas.height);
            
        var selectedValue = $(this).val();
        if(selectedValue == 1){
            $('.sign_text_div').addClass('hide');
             document.getElementById("sig-clearBtn").click();
        }else{
            $('.sign_text_div').removeClass('hide');
        }
        $('#signatureInput').val('');
    });
            
    function inArray(needle, haystack) {
        var length = haystack.length;
        for(var i = 0; i < length; i++) {
            if(haystack[i] == needle) return true;
        }
        return false;
    } 
    
    function allowOnlyOneCheckbox(checkbox) {
        var checkboxes = document.getElementsByName(checkbox.name)
        checkboxes.forEach((item) => {
            if (item !== checkbox) item.checked = false
        })
    }

    function j1Agree(){ 
        @if($dos_program_category_id == 1 || $dos_program_category_id == 2)  
            @if(!empty($fee_structure['combo_id']))   
                var a = $("input[name='select_program']"); 
                if(a.filter(":checked").length == 0){
                    swal({   
                        title: "",   
                        text: "Please select program.",
                        showCancelButton: false,
                        type: "error",       
                        confirmButtonColor: "#1faae6",   
                        confirmButtonText: "Ok",
                        closeOnConfirm: true, 
                        html:true,
                        allowOutsideClick: false,
                        timer: 10000,
                        customClass: "j1AgreementPopup" 
                    },function(btn){
                        if(btn === true){
                            $("input[type='checkbox']:first").focus(); 
                        }
                    });
                    return false;
                } 
                
                var agr = $("input[name='agr_non_ref_fee']"); 
                if(agr.filter(":checked").length == 0){
                    swal({   
                        title: "",   
                        text: "Please select checkbox that I'm aware that the following fees are non-refundable.",       
                        type: "error",   
                        showCancelButton: false,    
                        confirmButtonColor: "#1faae6",
                        confirmButtonText: "Ok",
                        closeOnConfirm: true,   
                        html:true,
                        allowOutsideClick: false,
                        timer: 10000, 
                        customClass: "j1AgreementPopup" 
                    });
                    return false; 
                }
                agreeProcedure(); 
            @endif  
        @elseif($dos_program_category_id == 3)
            agreeProcedure();
        @endif
    }
    
    function agreeProcedure(){
        var url = "{{ route('j1agree') }}"; 
        show_inner_loader('.modal-content');
        $("#j1_agreement_agree").attr("disabled",true);
        var canvas = document.getElementById("newSignature"); 
        var dataURL = canvas.toDataURL("image/png");
        
        var blank = document.createElement('canvas');
        blank.width = canvas.width;
        blank.height = canvas.height;
        var ctx = blank.getContext("2d");
        ctx.fillStyle = "#FFFFFF";
        ctx.fillRect(0, 0, blank .width, blank .height);
        
        if(canvas.toDataURL() == blank.toDataURL())
        {
            dataURL = '';
        }
        
        var sign_draw = $('input[name="sign_draw"]:checked').val()
        var inputVal = $('#signatureInput').val();
        if (sign_draw == 2 && inputVal.trim() == ''){
            dataURL = '';
        }
        
        var itn_agr_ans = $("#itn_agreement_ans").val(); 
        var select_program = '';
        @if($dos_program_category_id == 1 || $dos_program_category_id == 2)
            $("input[name='select_program']:checked").each(function(i){
                select_program = $(this).val();
            });
        @endif 
        
        $.ajax({
            url: url,   
            type: 'post', 
            dataType: 'json', 
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            data: { terms_agreed: 1, signature:dataURL, itn_agreement_template:"{{$itn_agreement_template}}", itn_agreement_ans:itn_agr_ans, select_program:select_program },
            success: function(response){
                hide_popup('j1-agreement-modal');
                if(response.type == "success")
                {
                    $("#j1_agreement_agree").attr("disabled",false);
                    $('.j1_agreement_success').removeClass('hide');
                    setTimeout(function(){
                        navigateStages('1');
                    }, 3000);
                }
                else 
                {
                    notifyResponse("#notify_1_6",response.message,response.type);
                }
                hide_inner_loader('.modal-content');
            },
        }); 
    }
     
    $(document).ready(function()
    {   
        @if(!empty($countdown_date))
            var finalDate = "{{ $countdown_date }}";
            finalDate = localDateTime(finalDate);
            startCountdown('#agreement_timer .timer',finalDate,function(ele){
                $(ele).after("<div class='alert alert-warning'>{{ $agreement_countdown_message }}</div>");
            });
        @endif
         
        $('.table').addClass('table-responsive');
        $('table').addClass('table table-bordered');
        ajaxFormValidator('#itn_agr',function(ele,event){
            event.preventDefault();
            show_inner_loader(".timeline_stp_desc","#all_tab_data");
            
            var form_data = new FormData(ele);
            var url = "{{ route('upload.j1agree') }}";
            
            $.ajax({
                url: url,
                type: 'post',
                data: form_data,
                dataType: 'json',
                processData: false,
                contentType: false,
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success: function(response){
                    var messages = response.message;
                    if(response.type == "success"){
                        notifyResponseTimerAlert(messages,response.type,response.type.charAt(0).toUpperCase()+ response.type.slice(1));
                        notifyResponse("#notify_1_6",messages,response.type);
                        setTimeout(function(){
                            navigateStages('1');
                        }, 3000);
                    }
                    else{
                        notifyResponse("#notify_1_6",messages,response.type);
                    }
                    hide_inner_loader('.timeline_stp_desc',"#all_tab_data");
                },
            });
        });
    });
</script> 
    @endif
</div>