@php
    $short_introduction = (!empty($step_verified_data['short_introduction']))?@$step_verified_data['short_introduction']:"";
    $short_introduction_status = isset($step_verified_data['short_introduction_status']) ? $step_verified_data['short_introduction_status'] : 0;
    $short_introduction_reject_reason = !empty($step_verified_data['short_introduction_reject_reason']) ? $step_verified_data['short_introduction_reject_reason'] : "";
    $as_order_key = $step_verified_data['as_order_key'];
    $link_edit_class = (!empty($short_introduction))?"":"hidden";
    $step_status = @$step_verified_data['step_status'];
    $youtube_guide_download_link = asset('youtube_video_guide/Camp Video Application Guide.pdf');
    $countdown_date = $step_verified_data['short_introduction_added_at'];
@endphp
<div class="app-status-panel-content">
    <div class="row m-b-12 pd-20">
        <div id="{{ $notify_id }}" class="col-xs-12"></div>
        
        <h3 class="d-inline-b">Short Video Introduction!</h3>
        <button type="button" title="Contact Support" class="btn btn-success pull-right support_width" onclick="return viewPopup('Short Video Introduction','{{@$active_step_key}}');">Support<i class="mdi mdi-help-circle-outline step-help"></i></button> 
        <div class="col-xs-12">
            <p>Please share a short video to introduce yourself. This video will be shared with the US Summer Camps, actively recruiting Camp Counsellors for the Bridge USA program (J-1)</p>
            <p>Instruction/Guide for YouTube : <a href="{{$youtube_guide_download_link}}" target="_blank">Download Here</a></p>

            @if($short_introduction_status == 0 && !empty($short_introduction))
                <div class="alert alert-success p-15 approval_success">Your video is currently being reviewed by our team. Thank you for your patience! </div>
            @elseif($short_introduction_status == 1)
                <div class="alert alert-success p-15 approval_success">Your video was approved.<br><strong> YouTube video link : </strong>  <a target="_blank" href="{{$short_introduction}}">{{$short_introduction}}</a> </div>
            @elseif($short_introduction_status == 2)
                <div class="alert alert-success p-15 approval_success">Your video was rejected for the following reason. <br><strong> Reason : </strong>  {{$short_introduction_reject_reason}} </div>
            @endif
        </div>

        @if(in_array($short_introduction_status, [0,1,2]) || empty($short_introduction))
            <form name="frm_update_short_introduction" id="frm_update_short_introduction">
                <div class="col-xs-12">
                    <div class="form-group">
                        <label class="control-label"></label>
                        <input type="text" name="short_introduction" id="short_introduction" value="{{$short_introduction_status == 2 ?'' : $short_introduction}}" class="form-control" placeholder="Place YouTube video link here" data-equals="nowhitespace" required="">
                        <div class="help-block with-errors font-11"></div>
                        <div class="form-control-feedback"></div>
                    </div>
                </div>
                <div class="col-xs-12">

                    <div class="form-actions">
                        <button type="submit" name="short_introduction_submit" id="short_introduction_submit" class="btn btn-md @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif btn-xs-block hide">Save & Next Stage</button>
                        @if ($step_status == 2 && !empty($short_introduction))
                            <button type="button" name="next_video_link" id="next_video_link" class="btn @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif btn-xs-block" onclick="navigateStages('2','{{ $next_step_key }}')">Next Step</button>
                        @endif
                        
                    </div>
                </div>
                @if($short_introduction_status == 0)
                    <div class="col-xs-12">
                        <div id="short_video_timer" style="display:none">
                            <strong>One of our representative will get back to you in...</strong>
                            <h2 class="timer text-muted m-t-0"></h2>
                        </div>
                    </div>
                @endif
            </form>
        @else 
            <div class="col-xs-12">
                <div class="form-actions">
                    <button type="button" name="next_video_link" id="next_video_link" class="btn @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif btn-xs-block" onclick="navigateStages('2','{{ $next_step_key }}')">Next Step</button> 
                </div>
            </div>
        @endif

<!--        @if(!empty($skype_id) && ($step_status == 1 || $step_status == 2))
        <div class="col-xs-12 m-b-20">
            @if(!empty($next_step_key))
                <button type="button" class="btn btn-info" onclick="navigateStages('1','{{ $next_step_key }}')">Next Step</button>
            @endif
            <small class="text-muted">(Next Step: Schedule an interview with IMIX)</small>
            <p>With Skype you can make video and audio calls, exchange chat messages and do much more using Skype's software on your computer, mobile phone, tablet and other devices.</p>
        </div>
        @endif-->
    </div>
</div>  
<script>
    var notify_id = "{{ $notify_id }}";
    $(document).ready(function(){
        
        if($("#short_video_timer").length > 0)
        {
            @if(!empty($countdown_date))
                var finalDate = "{{ $countdown_date }}";
                finalDate = localDateTime(finalDate);
                $("#short_video_timer").show();
                startCountdown('#short_video_timer .timer',finalDate,function(ele){
                    $(ele).after("<div class='alert alert-warning'>{{ $countdown_message }}</div>");
                });
            @endif
        }
        var form_selector = "#frm_update_short_introduction";
        
        @if($is_step_locked == 1)
            $(form_selector)
                .find('input, select, textarea, button[type=submit]')
                .attr("disabled",true);
        @else
            ajaxFormValidator(form_selector,function(ele,event){

                event.preventDefault();

                show_inner_loader(".timeline_stp_desc","#all_tab_data");

                var form_data = new FormData(ele);
                var url = "{{ route('updateShortIntroduction') }}";

                $.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_id,messages,response.type);
                            $("#short_introduction_submit").addClass('hidden');
                            $("#next_video_link").addClass('hidden');
                            $("#skip_video_link").addClass('hidden');

                            $("#short_introduction").prop('disabled',true);

                            setTimeout(function(){
                                //navigateStages('2');
                                //navigateStages('1','{{ $as_order_key }}'); 
                                document.location.reload();
                            },3000);
                        }
                        else if(response.type == "validation_error"){
                            var Html = '<div class="alert swl-alert-danger"><ul>'; 
                            $.each( messages, function( key, value ) {
                                Html += '<li>' + value+ '</li>';  
                            });
                            Html += '</ul></div>';  
                            notifyResponseTimerAlert(Html,"error","Error");
                        }
                        else{
                            notifyResponse("#"+notify_id,messages,response.type);
                        }
                        hide_inner_loader('.timeline_stp_desc',"#all_tab_data");
                    },
                });
            });
            $(document).off("click", "#skip_video_link").on("click", "#skip_video_link", function(){
                var url = "{{ route('skipUpdateShortIntroduction') }}";
                show_inner_loader(".timeline_stp_desc","#all_tab_data");
                var _this = $(this);
                $.ajax({
                    url: url,
                    type: 'post',
                    data: {},
                    beforeSend: function() {
                        _this.hide();
                    },
                    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"){
                            notifyResponse("#"+notify_id,messages,response.type);
                            document.location.reload();
                        }else{
                            notifyResponse("#"+notify_id,messages,response.type);
                        }
                        hide_inner_loader('.timeline_stp_desc',"#all_tab_data");
                    },
                });   
            });
            
                
        @endif
        
        var short_introduction = $("#short_introduction").val();
        if(short_introduction == ''){
            $("#short_introduction_submit").addClass("hide");
            $("#skip_video_link").removeClass("hide");
        }
        $(document).on('input','#short_introduction',function(){
            var val = $(this).val();
            if(val == ''){
                $("#short_introduction_submit").addClass("hide");
                $("#skip_video_link").removeClass("hide");
            }else{
                $("#short_introduction_submit").removeClass("hide");
                $("#skip_video_link").addClass("hide");
            }
    });
        
        
    });
    function setNextStep(){
        $("#short_introduction").removeAttr('disabled');
        $("#frm_update_short_introduction").submit();
    }
</script>