@extends('user.layouts.app')

@section('content')
@php 
$stages = @$stages;  
@endphp 
    @if(!empty($user->portfolio->as_order_key)) 
        @if($user->j1_status_id == 6009)
            <div class="row">
                <div class="col-md-12">
                    <div class="white-box m-t-20">
                        <h2>Welcome! <strong>{{ @$user_name }}</strong>, </h2>
                        <div class="alert alert-warning">
                            <p>Your application status become program completed.</p>
                        </div>
                    </div>
                </div>
            </div>
        @else
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <ol class="breadcrumb p-l-0 app_stats_breadcrumb">
                        <li><a href="{{ route('home') }}" class="text-info">Home</a></li>
                        <li class="active capitalize">Application Status</li>
                    </ol>
                    <div class="row application_status_progress">
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                            <h2 class="page-title m-b-0">{{ @$page_title }}</h2>
                            <p class="page-sub-title">{{ @$page_sub_title }}</p>
                        </div>
                        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 text-center"> 
                            <ul class="wizard-steps application_tab p-l-0" role="tablist">
                                @php
                                if(!empty($stages)){
                                    $total_stages = count($stages); 
                                    $stage_count = 1;
                                    $stage_no = array_key_first($stages);
                                    $as_order_key = $user->portfolio->as_order_key; 
                                    $stage_key = $as_order_key[0];
                                    foreach($stages as $key => $stage)
                                    {
                                        $is_active = '';
                                        $is_current = '';

                                        if($key==$stage_key || $key < $stage_key)
                                        {
                                            $is_active = "active";
                                        }
                                        if($key==$stage_key)
                                        {
                                            $is_current = "is_current";

                                        }
                                    @endphp
                                        <li class="{{ $is_active }}" >
                                            <a id="main_stage_{{ $stage_no }}" class="cpointer {{$is_current}}" onclick="navigateStages('{{ $key }}');">
                                                <div class="pie_progress" role="progressbar" data-goal="0%" data-barcolor='@if(config("common.portal") == "ODC") #757575 @else #41b3f9 @endif' data-barsize="5" aria-valuemin="-100" aria-valuemax="100" rel="tooltip" title="{{ $stage['stage_title'] }}">
                                                    <div class="pie_progress__content text-muted">{{ $stage_count }}/{{ $total_stages }}</div>
                                                </div>
                                                <div><small class="m-b-0 text-muted">{{ $stage['stage_title'] }}<br><i class="step-count"></i></small></div>
                                                <i class="mdi mdi-alert-outline stage-alert" style="display: none;"></i>
                                            </a>
                                        </li>
                                    @php
                                        $stage_count++;
                                        $stage_no++;
                                    }
                                }
                                @endphp
                            </ul>
                        </div> 
                    </div>
                </div> 
            </div>
            <div id="all_tab_data">
                @include('user.app-status.application-status-stages')
            </div>
            <script type="text/javascript">
                var active_stage = "{{ @$active_stage }}";
                var active_step_key = "{{ @$active_step_key }}";
                var active_step = "{{ @$active_step }}";
                var current_stage = "{{ @$current_stage }}";
                var portal = '{{ config("common.portal") }}';

                $(document).ready(function () {
                    @if(!empty($redirect_ds7002_status) && $redirect_ds7002_status == 1)
                        loadStepContent('3_ds7002_created');
                    @elseif(!empty($redirect_ds7002_status) && $redirect_ds7002_status == 2)
                        loadStepContent('3_ds7002_signed');
                    @endif
                    @if(!empty(session('is_pending_agreement') && session('is_pending_agreement') == 1 && $active_stage == 1))
                        navigateStages(1,'1_j1_agreement');
                    @endif
                    $('.timeline_stp_desc .panel.panel-default').not('.active').hide();
                    $(".disable-content .disable-control").attr("disabled",true);

                    /* Start: Load Application Status Popover */
                    if ($(document).width() > 1024) {
                        $('#menu_application_status').popover('show');
                        setTimeout(function(){
                            $('#menu_application_status').popover('hide');
                        },4000);
                    } 
                    /* End: Load Application Status Popover */

                    /** Show hide information on Additional Information tab 8 on Registration Stage  **/
                    $("ul.addition_info_list li a").on('click', function() {
                        var page = $(this).data('page');
                        $("#desc_stp_8 .infotab:not('.hide')").stop().fadeOut('fast', function() {
                            $(this).addClass('hide');
                            $('#desc_stp_8 .infotab[data-page="'+page+'"]').fadeIn('slow').removeClass('hide');
                        });
                    });

                    /** Support document process on 9th tab on registration Stage  **/
                    var cnt = 0;
                    $('.support_docs').on('change', function(ele){
                        var id = $(this).attr("id");
                        if($('#'+id).val()){ cnt++; }
                        if(cnt==5){
                            $('#submit_document').prop('disabled', false);
                        }
                    });
                    /** Support document process on 4th tab on Hiring Stage  **/
                    var placement_cnt = 0;
                    $('.support_placement_docs').on('change', function(ele){
                        var id = $(this).attr("id");
                        if($('#'+id).val()){ placement_cnt++; }
                        if(placement_cnt==4){
                           $('#submit_document_2').prop('disabled', false);
                        } 
                    });

                    /** Load Processbar of left side tab  **/
                    initPieProgress();

                    /** Start: Load dropify on load page '9 tab of Registration Stage' &  4 tab of Placement Stage **/
                    ///initDropify('.support_docs, .support_placement_docs');

                    scrollSteps(active_step_key);
                    totalProgress();
                    if(portal == "ODC"){
                        $('.is_current .pie_progress .pie_progress__svg svg ellipse').attr("stroke", "#333");
                        $('.is_current .pie_progress .pie_progress__svg svg ellipse').attr("fill", "#333");
                        $('.is_current .pie_progress .pie_progress__svg svg ellipse').css('opacity', ".65");
                    }else{
                        $('.is_current .pie_progress .pie_progress__svg svg ellipse').attr("stroke", "#41b3f9");
                        $('.is_current .pie_progress .pie_progress__svg svg ellipse').attr("fill", "#41b3f9");
                    }
                    //makeTabsToAccordion();
                });

                function loadStepContent(active_step_key,callback_success){
                    var stage_id = "stage_content"; 

                    var url = "{{ route('navigatestage') }}";
                    show_inner_loader(".timeline_stp_desc","#all_tab_data");

                    $.ajax({
                        url: url,
                        type: 'post',
                        data: { action:"navigate_step", active_step_key: active_step_key },
                        dataType: 'json',
                        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                        /*statusCode: {
                            404: function(jqXHR,textStatus,errorThrown) {
                                alert("Page not found");
                            },
                            500: function(jqXHR,textStatus,errorThrown) {
                                alert("Internal server error");
                            },
                        },*/
                        success: function(response){
                            hide_inner_loader('.timeline_stp_desc',"#all_tab_data");

                            if(response.type == "success"){
                                var data = response.data;

                                $("#"+stage_id+" .timeline_stp_desc .panel-body").html(data.step_content);

                                scrollSteps(active_step_key);
                                initDropify('.support_docs, .support_placement_docs');
                                load_datepicker();
                                load_datetimepicker();
                                load_datetimepicker_with_setMinute();
                                load_datetimepicker_with_setMinute_hc();
                                makeTabsToAccordion();
                                if ($(".open-timeline-panel").hasClass("open-pnl")) {
                                    $(".timeline-xs-r-width").removeClass("open-pnl");
                                    $(".open-timeline-panel").removeClass("open-pnl");
                                    $(".open-timeline-panel i").removeClass("ti-angle-left");
                                }

                                if(typeof callback_success === "function")
                                {
                                    callback_success();
                                }
                            }
                        },
                    });
                }

                function scrollSteps(step_key){

                    var step_id = "stp_"+step_key;
                    var stage_id = "stage_content";
                    var selector = '#'+stage_id+' #'+step_id;

                    $(selector).animatescroll({ element:'#'+stage_id+' .timeline_stp',padding:40 });  
                    var movescroll = $(selector).outerHeight()+'px'; 
                    $('#'+stage_id+' .slimScrollDiv .slimScrollBar').css('top',movescroll);
                }

                function navigateStages(stage_number,step_key,update_current_stage){

                    var url = "{{ route('navigatestage') }}";
                    var data = {
                                action:"navigate_stage",
                                active_stage: stage_number, 
                                request_step_key: step_key, 
                            };
                    show_inner_loader(".timeline_stp_desc","#all_tab_data");

                    if(update_current_stage != "" && update_current_stage != "undefined" && update_current_stage != null)
                    {
                        current_stage = update_current_stage;
                    }

                    if(current_stage >= 3)
                    {
                        if((active_stage == 1 || active_stage == 2) && (stage_number == 3 || stage_number == 4))
                        {
                            brandingPopup('modal-lg-itn-odc','sponsor_branding');
                        }
                        else if((stage_number == 1 || stage_number == 2) && (active_stage == 3 || active_stage == 4))
                        {
                             brandingPopup('modal-lg-itn-odc','placement_branding');
                        }
                    }

                    $.ajax({
                        url: url,
                        type: 'post',
                        data: data,
                        dataType: 'json',
                        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                        success: function(response){

                            if(response.type == "success" && typeof response.data === 'object')
                            {
                                var data = response.data;

                                active_stage = data.active_stage;
                                active_step = data.active_step;
                                active_step_key = data.active_step_key;
                                application_status_content = data.application_status_content;
                                page_title = data.page_title;
                                page_sub_title = data.page_sub_title;
                                redirect_ds7002_status = data.redirect_ds7002_status;


                                hide_inner_loader('.timeline_stp_desc',"#all_tab_data");

                                $("#all_tab_data").html(application_status_content);

                                $('.timeline_stp_desc .panel.panel-default').not('.active').hide();
                                $(".disable-content .disable-control").attr("disabled",true);

                                $("ul.wizard-steps li").removeClass("active");
                                $("#main_stage_"+active_stage).parent("li").addClass("active"); 

                                $(".application_status_progress .page-title, .app_stats_breadcrumb li.active").html(page_title);
                                $(".application_status_progress .page-sub-title").html(page_sub_title);

                                var scroll_options = { height: "450px", position: "right", size: "10px", touchScrollStep : 50, color: "rgba(0,0,0,0.3)" };
                                initSlimScroll(".timeline_stp, .timeline_stp_desc .panel .panel-wrapper", scroll_options);
                                initDropify('.support_docs, .support_placement_docs');
                                initCollapsiblePanel();
                                initTooltip();
                                scrollSteps(active_step_key);
                                initPieProgress();
                                totalProgress();
                                load_datepicker();
                                load_datetimepicker();
                                load_datetimepicker_with_setMinute();
                                load_datetimepicker_with_setMinute_hc();

                                if(active_stage == '3'){
                                    if(redirect_ds7002_status == 1){
                                        loadStepContent('3_ds7002_created');
                                    }else if(redirect_ds7002_status == 2){
                                        loadStepContent('3_ds7002_signed');
                                    }
                                }

                            }

                        },
                    });
                }

                function uploadDocument(doc_type,stage_num,step_key){
                    show_inner_loader(".timeline_stp_desc","#all_tab_data");

                    var form_id = "frm_upload_"+doc_type;
                    var form_ele = document.getElementById(form_id);
                    var form_data = new FormData(form_ele);

                    $.ajax({
                        url: "{{ route('uploaddocument') }}",
                        type: 'post',
                        data: form_data,
                        dataType: 'json',
                        processData: false,
                        contentType: false,
                        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                        success: function(response){
                            notifyResponseTimerAlert(response.message,response.type,response.type.charAt(0).toUpperCase()+ response.type.slice(1),3000);
                            if(response.type == "success"){
                                if(stage_num != "" && stage_num != "undefined" && stage_num != null 
                                    && step_key != "" && step_key != "undefined" && step_key != null)
                                {
                                    setTimeout(function(){
                                        loadStepContent(step_key);
                                    },3000);
                                }
                            }
                            else
                            {
                                hide_inner_loader(".timeline_stp_desc","#all_tab_data");
                            }
                        },
                    });
                }

                function updateSkype(ele){
                    show_inner_loader(".timeline_stp_desc","#all_tab_data");

                    var url = "{-- route('updateskype') --}";
                    var formdata = $("#update_skype").serialize();
                    var data = { 
                                    _token: "{-- csrf_token() --}",
                                    formdata: formdata,
                                }

                    $.ajax({
                        type: 'post',
                        url: url,
                        data: data,
                        dataType: 'json',
                        /*statusCode: {
                            404: function(jqXHR,textStatus,errorThrown) {
                                alert("Page not found");
                            },
                            500: function(jqXHR,textStatus,errorThrown) {
                                alert("Internal server error");
                            },
                        }, */
                        success: function(response) {
                            if(response.type == "success")
                            {
                                if(response.data != "" && response.data != "undefined" && response.data != null)
                                {

                                }
                                else {

                                }
                            }
                            hide_inner_loader('.timeline_stp_desc',"#all_tab_data");
                        },

                    });
                    return false;
                }

                function loadAddInfoContent(addinfo_step){

                    if(active_stage == 1 && active_step == 8)
                    {
                        $('.addinfo_tab').addClass('hide');
                        $('#addinfo_tab'+addinfo_step).removeClass('hide');
                    }
                    else if(active_stage == 1 && active_step != 8)
                    {
                        loadStepContent('1_additional_info',function(){
                            loadAddInfoContent(addinfo_step);
                        });
                    }
                }

                function nextAddInfoStep(mainTab,currentID,LastId){

                    var NextID = Number(currentID) + Number(1);

                    var next_id = "addinfo_tab"+NextID;

                    $(".addinfo_tab").addClass('hide');
                    $(".addinfo_notify").html("").removeClass();
                    $("#"+next_id).removeClass('hide');

                    $('#addinfo_list_'+currentID).addClass('done').prepend('<i class="fa fa-check text-success m-r-5"></i>');
                }

                function backAddInfoStep(mainTab,currentID,LastId){

                    var NextID = Number(currentID) - Number(1);

                    var next_id = "addinfo_tab"+NextID;

                    $(".addinfo_tab").addClass('hide');
                    $(".addinfo_notify").html("").removeClass();
                    $("#"+next_id).removeClass('hide');
                }

                /* Start Function Left Sidebar(toggle) */
                function toggle_sidebar(type) {
                    var width = this.screen.width;
                    var toggleclass = "showhidetimelineicon";
                    if (width >= 768) {
                        $("#"+type+" .timeline_stps").toggleClass(toggleclass); 
                    }
                }

               /** Display toast in J1 Resume Approval Tab**/
                function resume_approval_toast(){
                    $.toast().reset('all');
                    $.toast({
                       text: 'New update to your application. Unfortunately your resume needs a tweak.',
                       position: 'bottom-left',
                       icon: 'info',
                       hideAfter: 3000,
                       stack: 6
                   }); 
                }

                /** Display toast in J1 INTERVIEW Tab **/
                function itn_interview_toast(){ 
                    $.toast().reset('all');
                    $.toast({
                       text: 'New update to your application. J1 agreement is ready for your signature.',
                       position: 'bottom-left',
                       icon: 'info',
                       hideAfter: 3000,
                       stack: 6
                   },
                    function(){
                        setTimeout(function(){
                       //     NextStep(1,5);
                        }, 2000); 
                    });
                }

                function showUploadInstruction(doc_req_id,active_stage){
                    var extra_data = { doc_req_id: doc_req_id, active_stage:active_stage};

                    show_popup('modal-lg');
                    get_common_ajax("{{ route('upload.document.instruction') }}",extra_data,'modal-lg');
                }

                function viewUploadHistory(doc_type,active_stage){
                    var extra_data = { doc_type: doc_type ,active_stage:active_stage};

                    show_popup('modal-lg');
                    get_common_ajax("{{ route('document.history') }}",extra_data,'modal-lg');
                }
                function viewPopup(subject,active_step_key){
                    var extra_data = { subject: subject,active_step_key: active_step_key };
                    show_popup('modal-lg');
                    get_common_ajax("{{ route('show.ticket.popup') }}",extra_data,'modal-lg');
                }
                /* accordion.js */
                function makeTabsToAccordion() 
                {
                    /*$(window).resize(function () { location.reload(); });*/
                    var screen = 768;
                    if ($(window).width() < screen) 
                    {
                        var element_id = ".placement_tabs";
                        var concat = '';
                        obj_tabs = $( element_id + " li" ).toArray();  
                        obj_cont = $( ".tab-content .tab-pane" ).toArray();
                        jQuery.each( obj_tabs, function( n, val ) 
                        { 
                            var liClassName = $(this).attr('class');
                            concat += '<div id="' + n + '" class="panel panel-default">';
                            concat += '<div class="panel-heading ' + liClassName + '" role="tab" id="heading' + n + '">';
                            concat += '<h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#application_status_accordion" href="#collapse' + n + '" aria-expanded="false" aria-controls="collapse' + n + '">' + val.innerText + '</a></h4>';
                            concat += '</div>';
                            concat += '<div id="collapse' + n + '" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading' + n + '">';
                            concat += '<div class="panel-body">' + obj_cont[n].innerHTML + '</div>';
                            concat += '</div>';
                            concat += '</div>';
                        });
                        $("#application_status_accordion").html(concat);
                        $("#application_status_accordion").find('.panel-collapse:first').addClass("in");
                        $("#application_status_accordion").find('.panel-title a:first').attr("aria-expanded","true");
                        $(element_id).remove();
                        $(".tab-content").remove();
                    }	
                }

                /* Start function for Count Process - Applicaton Staus(Step) Page */
                function totalProgress(Tab_No,Sub_Step_No){

                    if(Tab_No != "" && Tab_No != "undefined" && Tab_No != null 
                            && Sub_Step_No != "" && Sub_Step_No != "undefined" && Sub_Step_No != null)
                    {
                        if(Tab_No == 1){ var Tot_Step = 9;} 
                        if(Tab_No == 2){ var Tot_Step = 4;} 
                        if(Tab_No == 3){ var Tot_Step = 7;} 
                        var ProPer = parseInt((Sub_Step_No*100)/Tot_Step); 
                        if(ProPer){
                            var ProPer = ProPer+"%";
                        }   
                        $('#main_stage_'+Tab_No+' .pie_progress').asPieProgress('go', ProPer);
                        if(ProPer == "100%"){
                            $('#main_stage_'+Tab_No+' .pie_progress__content').append("<i class='fa fa-check font-13 db done-step'></i>");
                        }
                    }
                    else{
                        var url = "{{ route('asprogress') }}";

                        $.ajax({
                            url: url,
                            type: "post",
                            dataType: "json",
                            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                            data: { action : "get_total_progress" },
                            success:function(response){
                                if(response.type == "success"){
                                    var stage_data = response.data;
                                    var stage = "";
                                    for(stage in stage_data)
                                    {
                                        var stage_alert = stage_data[stage].stage_alert;
                                        var stage_num = stage_data[stage].stage_num;
                                        var step_progress_percent = stage_data[stage].step_progress_percent;
                                        var total_steps = stage_data[stage].total_steps;
                                        var total_steps_str = "("+total_steps+" steps)";

                                        $('#main_stage_'+stage_num+' .pie_progress').asPieProgress('go', step_progress_percent);
                                        $('#main_stage_'+stage_num+' .step-count').html(total_steps_str);

                                        if(step_progress_percent == "100%")
                                        {
                                            $('#main_stage_'+stage_num+' .pie_progress__content').append("<i class='fa fa-check font-13 db done-step'></i>");
                                        }
                                        if(stage_alert == 1)
                                        {
                                            $('#main_stage_'+stage_num+' .stage-alert').show();
                                        }
                                    }
                                }
                            }
                        });
                    }
                }
                /* End function for Count Process - Applicaton Staus(Step) Page */

                function brandingPopup(popup_id,brand,callback_func)
                {
                    if(callback_func == "" || callback_func == "undefined" || callback_func == null)
                    callback_func = "";

                    show_popup(popup_id);
                    $.ajax({
                        url: "{{ route('brand.popup') }}",
                        type: "post",
                        dataType: "json",
                        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                        data: {
                                'action': brand
                            },
                        success:function(response){
                            if(response.type == 'success'){
                                $("#"+popup_id).removeClass("loading");
                                $('#'+popup_id+' .modal-dialog').html(response.data);
                                var text = ["Requesting for transfer data...", "Transferring data...", "All good, hold tight..."];
                                var counter = 0;
                                var elem = document.getElementById("blinkText");
                                var inst = setInterval(function(){
                                    elem.innerHTML = text[counter];
                                    counter++;
                                    if (counter >= text.length) {
                                        counter = 0;
                                        clearInterval(inst);
                                    }
                                }, 1000);

                                var countdown_seconds = 5;
                                var countdown_mseconds = ((countdown_seconds + 1) * 1000);
                                countDown(countdown_seconds); 
                                /*Temp. set timeout*/
                                setTimeout(function() {
                                    if(typeof callback_func === "function"){
                                        callback_func();
                                    }
                                    hide_popup("modal-lg-itn-odc");
                                }, countdown_mseconds);
                            }
                            else{
                                $("#"+popup_id).removeClass("loading");
                                $('#'+popup_id+' .modal-dialog').html(response.message);
                            }
                        }  
                    });
                } 
            </script>
        @endif  
    @else
        <div class="row">
            <div class="col-md-12">
                <div class="white-box m-t-20">
                    <h2>Welcome! <strong>{{ @$user_name }}</strong>, </h2>
                    <div class="alert alert-warning">
                        <p>Your application status progress will be started shortly.</p>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection