@extends('user.layouts.app-newui')

@section('content') 
<div class="main-card">
    <h1 class="text-center mb-5 page_title">My Program</h1>
@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 
        <!-- PROGRESS -->
        <div class="d-flex progress-scroll"> 
            @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  
                    <div class="col-6 col-md progress-step" id="main_stage_{{ $stage_no }}"  data-stage="registration">

                        <div class="circle {{ $is_active }}" onclick="navigateStages('{{ $key }}');">{{ $stage_count }}/{{ $total_stages }}</div>
                        <p class="stage_title">{{ $stage['stage_title'] }}</p>
                    </div>
                @php
                    $stage_count++;
                    $stage_no++;
                }
            }
            @endphp 
        </div>
    </div>
<div class="row g-4 equal-height app_status_left" id="all_tab_data">
    @include('user.app-status.application-status-stages-newui')
</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, ui_mode: "newui" },
            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+" .content-card").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, 
                    request_step_key: step_key, 
                    ui_mode: "newui", 
                };
        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);

                    $(".progress-step .circle").removeClass("active");
                    $("#main_stage_"+active_stage+" .circle").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