@extends('admin.layouts.app')

@php
    $stages = @$stages;
    $dos_programs = @$dos_programs;
    $dos_programs_newui = @$dos_programs_newui; 
    $old_dos_programs = clone $dos_programs;
@endphp

@section('content')
<div class="container-fluid">
    <div class="row bg-title">
        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
            <h4 class="page-title">Application Status Settings</h4> </div>
        <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
            <ol class="breadcrumb">
                <li><a href="{{ route('dashboard') }}">Dashboard</a></li>
                <li class="active">Application Status Settings</li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="white-box">
                <div class="row">
                    <div class="col-md-6 col-xs-12">
                        <h3 class="box-title m-b-0">Application Status Settings</h3>
                    </div>
                </div>
                @include('admin.includes.status')
                    <div class="table-responsive">
                        <table class="table table-bordered m-t-10"> 
                            <thead>
                                <tr>
                                    <th colspan="6">OLD UI Application Status Steps</th> 
                                </tr>
                                <tr>
                                    <th>DOS Program Category</th>
                                    @if(!empty($stages))
                                        @foreach($stages as $key => $stage)
                                            <th>{{ $stage['stage_title'] }}</th>
                                        @endforeach
                                    @endif
                                </tr>
                            </thead>
                            <tbody>
<!--                                <tr>
                                    <td>Default</td>
                                    @if(!empty($stages))
                                        @foreach($stages as $key => $stage)
                                            @php
                                                $is_checked = "";
                                                if(in_array($stage['stage_id'],$enabled_stages['default'])){
                                                    $is_checked = "checked";
                                                }
                                            @endphp
                                            <td><input 
                                                    type="checkbox" 
                                                    id="switch_{{ $stage['stage_id'] }}"
                                                    class="js-switch" 
                                                    data-size="small" 
                                                    data-color="#99d683" 
                                                    data-secondary-color="#f96262" 
                                                    value="1"
                                                    {{ $is_checked }}
                                                    onchange="return toggleStageEnable(this,'{{ $stage['stage_id'] }}',null);" />
                                                <button 
                                                    type="button"
                                                    id="setstep_{{ $stage['stage_id'] }}" 
                                                    class="btn btn-primary btn-xs" 
                                                    style="{{ ($is_checked !== "checked") ? "display:none" : "" }}"
                                                    onclick="return setAppStatusSteps(this,'1','{{ $stage['stage_id'] }}',null);">Set Steps</button>
                                                <button 
                                                    type="button"
                                                    id="orderstep_{{ $stage['stage_id'] }}" 
                                                    class="btn btn-info btn-xs" 
                                                    style="{{ ($is_checked !== "checked") ? "display:none" : "" }}"
                                                    onclick="return setAppStatusSteps(this,'2','{{ $stage['stage_id'] }}',null);">Order Steps</button>
                                            </td>
                                        @endforeach
                                    @endif
                                </tr>--> 
                                @if(in_array(strtolower(config('common.env_environment_mode')), ['local', 'qa']))
                                    
                                    @php 
                                    unset($old_dos_programs[0]); 
                                    unset($old_dos_programs[1]);
                                    /* This code added for hide DOS Category Intern and Trainee need to be hide for New Application Status UI design */
                                    @endphp
                                @endif
                                @if(!empty($old_dos_programs))
                                    @foreach($old_dos_programs as $key => $value)   
                                    <tr>
                                        <td>{{ $value->program_category_name }} -   
                                            <button id="ui_status_old_{{ $value->id }}" 
                                                    class="btn btn-xs {{ $value->ui_design == '0' ? 'btn-success' : 'btn-danger' }}">
                                                {{ $value->ui_design == '0' ? 'Active' : 'Inactive' }}
                                            </button> 
<!--                                            <div id="dynamic_switch_old_{{ $value->id }}" style="margin-top:10px;"> 
                                                <label style="font-weight:600;">
                                                    <input 
                                                        type="checkbox"
                                                        class="dynamic-ui-switch"
                                                        id="switch_{{ $stage['stage_id'] }}_{{ $value->id }}"
                                                        data-category-id="{{ $value->id }}"
                                                        data-ui_design-id="0" 
                                                        style="margin-right:8px;"
                                                    >  
                                                    Switch to Old UI
                                                </label> 
                                            </div> -->
                                        </td>
                                        @if(!empty($stages))
                                            @foreach($stages as $key => $stage)
                                                @php
                                                    $is_checked = "";
                                                    if(!empty($enabled_stages[$value->id]) && in_array($stage['stage_id'],$enabled_stages[$value->id])){
                                                        $is_checked = "checked";
                                                    }
                                                @endphp
                                                <td><input 
                                                        type="checkbox" 
                                                        id="switch_{{ $stage['stage_id'] }}_{{ $value->id }}"
                                                        class="js-switch" 
                                                        data-size="small" 
                                                        data-color="#99d683" 
                                                        data-secondary-color="#f96262" 
                                                        value="1" 
                                                        {{ $is_checked }}
                                                        onchange="return toggleUIEnable(this,'{{ $stage['stage_id'] }}','{{ $value->id }}');" />

                                                    <button 
                                                        type="button"
                                                        id="setstep_{{ $stage['stage_id'] }}_{{ $value->id }}" 
                                                        class="btn btn-primary btn-xs" 
                                                        style="{{ ($is_checked !== "checked") ? "display:none" : "" }}"
                                                        onclick="return setAppStatusSteps(this,'1','{{ $stage['stage_id'] }}','{{ $value->id }}');">Set Steps</button>
                                                    <button 
                                                        type="button"
                                                        id="orderstep_{{ $stage['stage_id'] }}_{{ $value->id }}" 
                                                        class="btn btn-info btn-xs" 
                                                        style="{{ ($is_checked !== "checked") ? "display:none" : "" }}"
                                                        onclick="return setAppStatusSteps(this,'2','{{ $stage['stage_id'] }}','{{ $value->id }}');">Order Steps</button>
                                                </td>
                                            @endforeach
                                        @endif
                                    </tr> 
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                    @if(in_array(strtolower(config('common.env_environment_mode')), ['local', 'qa']))
                        <div class="table-responsive">
                        <table class="table table-bordered m-t-10">
                            <thead>
                                <tr>
                                    <th colspan="6">NEW UI Application Status Steps</th> 
                                </tr>
                                <tr>
                                    <th>DOS Program Category</th>
                                    @if(!empty($stages_newui))
                                        @foreach($stages_newui as $key => $stage)
                                            <th>{{ $stage['stage_title'] }}</th>
                                        @endforeach
                                    @endif
                                </tr>
                            </thead>
                            <tbody> 
                                @php
                                    unset($dos_programs[2]); /* This code added for hide DOS Category ODC Camp need to be hide for New Application Status UI design */ 
                                @endphp
                                @if(!empty($dos_programs))
                                    @foreach($dos_programs as $key => $value) 
                                    <tr>
                                        <td>{{ $value->program_category_name }} -   
                                            <button id="ui_status_new_{{ $value->id }}" 
                                                    class="btn btn-xs {{ $value->ui_design == '1' ? 'btn-success' : 'btn-danger' }}">
                                                {{ $value->ui_design == '1' ? 'Active' : 'Inactive' }}
                                            </button>
                                            @if($value->ui_design == 0)
                                                <div id="dynamic_switch_new_{{ $value->id }}" style="margin-top:10px;"> 
                                                    <label style="font-weight:600;">
                                                        <input 
                                                            type="checkbox"
                                                            class="dynamic-ui-switch"
                                                            id="switch_{{ $stage['stage_id'] }}_{{ $value->id }}"
                                                            data-category-id="{{ $value->id }}"
                                                            data-ui_design-id="1" 
                                                            style="margin-right:8px;"
                                                        >  
                                                        Switch to New UI
                                                    </label> 
                                                </div> 
                                            @endif
                                        </td>
                                        @if(!empty($stages_newui)) 
                                            @foreach($stages_newui as $key => $stage)
                                                @php
                                                    $is_checked = "";
                                                    if(!empty($enabled_stages_newui[$value->id]) && in_array($stage['stage_id'],$enabled_stages_newui[$value->id])){
                                                        $is_checked = "checked";
                                                    }
                                                @endphp
                                                <td><input 
                                                        type="checkbox" 
                                                        id="switch_{{ $stage['stage_id'] }}_{{ $value->id }}"
                                                        class="js-switch" 
                                                        data-size="small" 
                                                        data-color="#99d683" 
                                                        data-secondary-color="#f96262" 
                                                        value="1" 
                                                        {{ $is_checked }}
                                                        onchange="return toggleStageEnable(this,'{{ $stage['stage_id'] }}','{{ $value->id }}');" /> 
                                                    <button 
                                                        type="button"
                                                        id="setstep_{{ $stage['stage_id'] }}_{{ $value['id'] }}" 
                                                        class="btn btn-primary btn-xs" 
                                                        style="{{ ($is_checked !== "checked") ? "display:none" : "" }}"
                                                        onclick="return setAppStatusSteps(this,'1','{{ $stage['stage_id'] }}','{{ $value->id }}',1);">Set Steps</button>
                                                    <button 
                                                        type="button"
                                                        id="orderstep_{{ $stage['stage_id'] }}_{{ $value['id'] }}" 
                                                        class="btn btn-info btn-xs" 
                                                        style="{{ ($is_checked !== "checked") ? "display:none" : "" }}"
                                                        onclick="return setAppStatusSteps(this,'2','{{ $stage['stage_id'] }}','{{ $value->id }}',1);">Order Steps</button>
                                                </td>
                                            @endforeach
                                        @endif
                                    </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div> 
                    @endif
            </div>
        </div>
    </div>
</div> 
@endsection
@section('scripts')
<script type="text/javascript">
    $(document).ready(function (url) { 
        $('.settings_section').hide();
        id = $("#settings_section").val();
        $("#"+id).show();

        $(document).on('change', '#settings_section', function () {
            $('.settings_section').hide();
            id = $(this).val();
            $("#"+id).show();
        }); 
    });

    function toggleStageEnable(ele, s_id, dos_id){ 
        var is_checked = ele.checked;
        var btn = $(ele).siblings('button');
        
        if(is_checked == true){
            $(btn).show();
        }
        else{
            $(btn).hide();
        }
    }
     
    function setAppStatusSteps(ele, action, s_id, dos_id, ui_design){
        
        var chkbox = $(ele).siblings('input').attr('id');
        var is_checked = $("#"+chkbox).is(':checked');
        
        if(s_id == "" || s_id == "undefined" || s_id == null)
            return false;
        
        if(action != "1" && action != "2")
            return false;
        
        if(dos_id == "" || dos_id == "undefined" || dos_id == null)
            dos_id = "";
        
        if(is_checked == true){
            var url = "{{ route('appstatus.setstep.form') }}";
            var data = { action:action, s_id:s_id, dos_id:dos_id, ui_design:ui_design };
            
            show_popup('popup-modal-sm');
            get_common_ajax(url,data,'popup-modal-sm');
        }
    }
    
    document.addEventListener("DOMContentLoaded", function () { 
        const switches = document.querySelectorAll('.dynamic-ui-switch');

        switches.forEach(function (el) { 
            let switchery = new Switchery(el, {
                size: el.dataset.size || 'small',
                color: el.dataset.color || '#99d683',
                secondaryColor: el.dataset.secondaryColor || '#f96262'
            });

            el.addEventListener('change', function () { 
                let element = this;
                let categoryId = this.dataset.categoryId;
                let status = this.dataset.ui_designId;
                if(status == 1){
                    var ui_name = "New";
                }
                else{
                    var ui_name = "Old";
                }
                let msg = "Are you sure you want to switch "+ui_name+" UI status?";

                confirmAlert(msg, "warning", "Confirm", "Confirm", function (r, i) {

                    if (i) {
                        toggleUIEnable(element, categoryId, status);
                    } else { 
                        element.checked = !status;
                        switchery.setPosition();
                    }
                }); 
            });
        }); 
    }); 

    function toggleUIEnable(element, categoryId, status)
    {
        var url = "{{ route('update.ui.status') }}";
        showLoader("#full-overlay");
        $.ajax({
            url: url,
            type: 'POST',
            data: {
                id: categoryId,
                ui_design: status
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }, 
            success: function(response) {
                hideLoader("#full-overlay");
                if (response.type == 'success')
                { 
                    $(element).prop('checked', status);
                    notifyResponseTimerAlert(response.message, "success", "Success");
                    let oldBtn = $("#ui_status_old_" + categoryId); 
                    let newBtn = $("#ui_status_new_" + categoryId);
 
                    if (status == 1)
                    {
                        updateBtn(newBtn);
                        $("#dynamic_switch_new_" + categoryId).hide();
                    }
                    else{
                        updateBtn(oldBtn);
                        $("#dynamic_switch_old_" + categoryId).hide();
                    }
                    setTimeout(function(){
                        document.location.href = document.location.href;
                    }, 1000);  
                }
                else
                {
                    element.checked = !status;
                    switchery.setPosition();
                }
            }, 
            error: function () {
                element.checked = !status;
                switchery.setPosition();
            }
        });
    }
    
    function updateBtn(btn)
    {
        if (!btn.length) return;

        btn.removeClass('btn-danger')
           .addClass('btn-success')
           .text('Active'); 
    }
</script>
@endsection