@extends('layouts.default')

@section('title')

@endsection

@section('header-style')
    <!--Load custom style link or css-->

@endsection
@section('content')

    <div class="card">
        <div class="card-body">
            <section id="horizontal-vertical">
                <div class="row">
                    <div class="col-12">
                        @if(Session::has('message'))
                            <div
                                class="alert {{Session::get('m-class') ? Session::get('m-class') : 'alert-danger'}} show"
                                role="alert">
                                {{ Session::get('message') }}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endif
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Gauge Roster Schedule List</h4>
                            </div>
                            <div class="card-content">
                                <div class="card-body card-dashboard">
                                    <div class="table-responsive">
                                        <table id="gadge-schedule-list" class="table table-sm datatable mdl-data-table dataTable">
                                            <thead>
                                            <tr>
                                            <tr>
                                                <th>#</th>
                                                <th>Schedule Month</th>
                                                <th>Schedule Year</th>
                                                {{--                                                <th>Gauge Station</th>--}}
                                                <th>Entry Date</th>
                                                {{--                                                <th>Approved On</th>--}}
                                                {{--                                                <th style="display:none;">--}}
                                                <th>Action</th>
                                            </tr>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>

    @include('approval.workflowmodal_2')

    <div id="roster-modal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title text-uppercase text-left">
                        Roster Detail Information
                    </h4>
                    <button class="close" type="button" data-dismiss="modal" area-hidden="true">
                        &times;
                    </button>
                </div>
                <div class="modal-body">

                    <div class="form-group mt-1">
                        <div class="col-md-12 pr-0 d-flex justify-content-end">
                            <div class="form-group">

                                <button class="btn btn-primary mr-1 mb-1"
                                        type="button" data-dismiss="modal">
                                    Close
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="schedule" class="modal fade" role="dialog">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title text-uppercase text-left">
                        Schedule
                    </h4>
                    <button class="close" type="button" data-dismiss="modal" area-hidden="true">
                        X
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table table-striped table-bordered" id="roster_schedule">
                        <thead>
                        <tr>
                            <th scope="col">Gauge Station</th>
                            <th scope="col">Entry Date</th>
                            <th scope="col">Approved On</th>
                            <th scope="col">
                                <input type="checkbox" id="checkAll" class="check-all-users">
                                <label for="checkAll" class="form-check-inline">Approve</label>
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('footer-script')
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script type="text/javascript">
        $('#gadge-schedule-list tbody').on('click', '.removeData', function () {
            let row_id = $(this).data("pilotageid");
            dltData(row_id);
        });

        $("#checkAll").click(function(){
            $('input:checkbox').not(this).prop('checked', this.checked);
        });

        function dltData(row_id) {
            let url = '{{route('schedule.reader-roaster-remove')}}';
            Swal.fire({
                title: 'Are you sure?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.value) {
                    $.ajax({
                        type: 'GET',
                        url: url,
                        data: {row_id: row_id},
                        success: function (msg) {
                            if (msg == 0) {
                                Swal.fire({
                                    title: 'Can not remove data. Something went wrong.',
                                    icon: 'error',
                                    confirmButtonText: 'OK'
                                });
                            } else {
                                Swal.fire({
                                    title: 'Entry Successfully Deleted!',
                                    icon: 'success',
                                    confirmButtonText: 'OK'
                                }).then(function () {
                                    $('#gadge-schedule-list').DataTable().ajax.reload();
                                    //gadgeStationScheduleList()
                                });
                            }
                        }
                    });
                }
            });
        }

        var dataArray = new Array();

        var userRoles = '@php echo json_encode(Auth::user()->roles->pluck('role_key')); @endphp';
        //alert(userRoles);

        $("#show_dtl_btn").click(function(){
            let schedule_mst_id = $(this).val();
            getData(schedule_mst_id);
        });

        function convertDate(inputFormat) {
            function pad(s) {
                return (s < 10) ? '0' + s : s;
            }

            var d = new Date(inputFormat)
            return [d.getFullYear(), pad(d.getMonth() + 1), pad(d.getDate())].join('-')
        }

        function getData(schedule_mst_id) {
            let myModal = $('#roster-modal');
            let scheduleMstID = schedule_mst_id.split(",");
            let sch = $.each(scheduleMstID, function(index, value) {
                return index + ": " + '"' + value + '"';
            });

            $.ajax({
                url: '/schedule/get-dtl-data',
                data: {objectid: sch},
                success: function (msg) {
                    let markup = '';
                    let mst_data = msg.mst_data;
                    let dtl_data = msg.dtl_data;
                    let stationData = {};

                    $("#table-data > tbody").html("");
                    $("#station_name").html("");

                    if (mst_data) {
                        $("#station_name").html("<h4><b>"+mst_data.station_name+"</b></h4>");
                    }

                    if (dtl_data) {
                        $.each(dtl_data, function (i) {
                            let stationName = dtl_data[i].station_name;

                            if (!stationData[stationName]) {
                                stationData[stationName] = [];
                            }

                            let mobile = dtl_data[i].mobile_no;
                            let remarks = dtl_data[i].remarks;
                            if (!remarks) {
                                remarks = '';
                            }
                            if (!mobile) {
                                mobile = '';
                            }

                            stationData[stationName].push({
                                roster_from_date: convertDate(dtl_data[i].roster_from_date),
                                roster_to_date: convertDate(dtl_data[i].roster_to_date),
                                shift: dtl_data[i].shift,
                                emp_name: dtl_data[i].emp_name,
                                mobile: mobile,
                                offday_name: dtl_data[i].offday_name,
                                remarks: remarks
                            });
                        });

                        $.each(stationData, function(stationName, data) {
                            markup += '<div class="row">\n' +
                                '    <div class="col-sm-12">\n' +
                                '        <label><h4><b>STATION: </b></h4></label>\n' +
                                '        <label id="station_name"><h4>'+ stationName +'</h4></label>\n' +
                                '    </div>\n' +
                                '</div>\n' +
                                '<hr>\n' +
                                '<div class="card">\n' +
                                '    <div class="card-body">\n' +
                                '        <div class="table-responsive">\n' +
                                '            <table id="table-data" class="table table-sm datatable mdl-data-table dataTable">\n' +
                                '                <thead>\n' +
                                '                    <tr>\n' +
                                '                        <th role="columnheader" scope="col" aria-colindex="4" class="" width="10%">From</th>\n' +
                                '                        <th role="columnheader" scope="col" aria-colindex="4" class="" width="10%">To</th>\n' +
                                '                        <th role="columnheader" scope="col" aria-colindex="9" class="" width="13%">Shift</th>\n' +
                                '                        <th role="columnheader" scope="col" aria-colindex="6" class="" width="17%">Employee</th>\n' +
                                '                        <th role="columnheader" scope="col" aria-colindex="6" class="" width="10%">Mobile</th>\n' +
                                '                        <th role="columnheader" scope="col" aria-colindex="3" class="" width="10%">Off Day</th>\n' +
                                '                        <th role="columnheader" scope="col" aria-colindex="7" class="" width="15%">Remarks</th>\n' +
                                '                    </tr>\n' +
                                '                </thead>\n' +
                                '                <tbody id="table-data-body">\n';

                            $.each(data, function(index, row) {
                                markup += '<tr role=\'row\'>\n' +
                                    '    <td>'+ row.roster_from_date +'</td>\n' +
                                    '    <td>'+ row.roster_to_date +'</td>\n' +
                                    '    <td>'+ row.shift +'</td>\n' +
                                    '    <td>'+ row.emp_name +'</td>\n' +
                                    '    <td>'+ row.mobile +'</td>\n' +
                                    '    <td>'+ row.offday_name +'</td>\n' +
                                    '    <td>'+ row.remarks +'</td>\n' +
                                    '</tr>\n';
                            });

                            markup += '</tbody>\n' +
                                '        </table>\n' +
                                '    </div>\n' +
                                '    <br> <br>\n' +
                                '    </div>\n' +
                                '</div>';
                        });

                        $("#roster-modal .modal-body").html(markup);
                    }
                }
            });

            myModal.modal({show: true});
            return false;
        }


        $('#gadge-schedule-list tbody').on('click', '.editButton', function () {
            var data_row = $('#gadge-schedule-list').DataTable().row( $(this).parents('tr') ).data();
            var schedule_mst_id = data_row.schedule_mst_id;
            approval(schedule_mst_id);
        });

        $(document).on('change', '#checkAll', function () {
            // $('#schedule').modal('show')
            let selectedObjectIds = [];
            $('.check-user:checked').each(function() {
                selectedObjectIds.push($(this).val());
            });
            console.log(selectedObjectIds);
            {{--$.ajax({--}}
            {{--    url: '/schedule/reader-approval/' ,--}}
            {{--    'type': 'get',--}}
            {{--    'headers': {--}}
            {{--        'X-CSRF-TOKEN': '{{ csrf_token() }}'--}}
            {{--    },--}}
            {{--    success: function (res) {--}}
            {{--        console.log(res)--}}
            {{--        --}}
            {{--    }--}}
            {{--});--}}
        })

        function approval(schedule_mst_id) {
            var myModal = $('#status-show');
            $("#get_url").val(window.location.pathname.slice(1)+'?id='+schedule_mst_id);
            $("#workflow_id").val(4);
            $("#object_id").val(schedule_mst_id);
            $("#show_dtl_btn").val(schedule_mst_id);


            $.ajax({
                type: 'GET',
                url: '/schedule/approval',
                data: {workflowId: 4,objectid: schedule_mst_id},
                success: function (msg) {
                    let wrkprc = msg.workflowProcess;
                    if (typeof wrkprc === 'undefined' || wrkprc === null|| wrkprc.length === 0) {
                        $('#current_status').hide();
                    }else{
                        $('#current_status').show();
                        $("#step_name").text(msg.workflowProcess[0].workflow_step.workflow);
                        $("#step_approve_by").text('By ' + msg.workflowProcess[0].user.emp_name);
                        $("#step_time").text(msg.workflowProcess[0].insert_date);
                        $("#step_approve_desig").text(msg.workflowProcess[0].user.designation);
                        $("#step_note").text(msg.workflowProcess[0].note);
                    }

                    let steps = "";
                    $('.step-progressbar').html(steps);
                    $.each(msg.progressBarData, function(j){
                        steps += "<li data-step="+msg.progressBarData[j].process_step+" class='step-progressbar__item'>"+ msg.progressBarData[j].workflow +"</li>"
                    });
                    $('.step-progressbar').html(steps);

                    let content = "";
                    $.each(msg.workflowProcess, function(i){
                        let note = msg.workflowProcess[i].note;
                        if(note==null){
                            note = '';
                        }
                        content += "<div class='row d-flex justify-content-between px-1'>" +
                            "<div class='hel'>" +
                            "<span class='ml-1 font-medium'>" +
                            "<h5 class='text-uppercase'>"+ msg.workflowProcess[i].workflow_step.workflow +"</h5>" +
                            "</span>" +
                            "<span>By "+ msg.workflowProcess[i].user.emp_name +"</span>" +
                            "</div>" +
                            "<div class='hel'>" +
                            "<span class='btn btn-secondary btn-sm mt-1' style='border-radius: 50px'>"+ msg.workflowProcess[i].insert_date +"</span>" +
                            "<br>" +
                            "<span style='margin-left: .3rem'>"+ msg.workflowProcess[i].user.designation +"</span>" +
                            "</div>" +
                            "</div>" +
                            "<hr>" +
                            "<span class='m-b-15 d-block border p-1' style='border-radius: 5px'>"+ note +"" +
                            "</span><hr>";//msg.workflowProcess[i].insert_date;
                    });

                    $('#content_bdy').html(content);

                    if(msg.current_step && msg.current_step.process_step){
                        $('.step-progressbar li').each(function(i){

                            if ($(this).data('step') > msg.current_step.process_step) {
                                $(this).addClass('step-progressbar__item step-progressbar__item--active');
                            }
                            else {
                                $(this).addClass('step-progressbar__item step-progressbar__item--complete');
                            }
                        })
                    }
                    else {
                        $('.step-progressbar li').addClass('step-progressbar__item step-progressbar__item--active');
                    }

                    $("#status_id").html(msg.options);

                    if ($.isEmptyObject(msg.next_step)) {
                        $(".no-permission").css("display","block");
                        $(document).find('#status_note').hide();
                        $(document).find('#button_portion').hide();
                    }else{
                        if(msg.next_step[0].user_role && JSON.stringify(userRoles).indexOf(msg.next_step[0].user_role) > -1){
                            $(document).find('.no-permission').hide();
                            if(msg.next_step[0].approve_yn == "Y"){
                                $("#save_btn").css("display","none");
                                $("#bonus_id_prm").val(39);
                                $(document).find('#hide_div').hide();
                                $("#close_btn").css("display","none");
                                $("#approve_btn").css("display","block");
                                $("#radio_btn_por").css("display","block");
                            }else{
                                $("#radio_btn_por").css("display","none");
                            }
                            $(document).find('.no-permission').hide();
                            $(document).find('#status_note').show();
                            $(document).find('#button_portion').show();
                        }else {
                            $(".no-permission").css("display","block");
                            $("#radio_btn_por").css("display","none");
                            $(document).find('#status_note').hide();
                            $(document).find('#button_portion').hide();
                        }
                    }

                }
            });

            myModal.modal({show: true});
            return false;
        }

        $('input[type=radio][name=final_approve_yn]').change(function() {
            if (this.value == 'Y') {
                $("#save_btn").css("display","none");
                $("#bonus_id_prm").val(39);
                $(document).find('#hide_div').hide();
                $("#close_btn").css("display","none");
                $("#approve_btn").css("display","block");
            }
            else if (this.value == 'N') {
                $(document).find('#hide_div').show();
                $("#save_btn").css("display","block");
                $("#close_btn").css("display","block");
                $("#approve_btn").css("display","none");
                $("#bonus_id_prm").val('');
            }
        });

        function gadgeStationScheduleList() {
            var url = '{{route('schedule.reader-approval-datatable-list')}}';
            var oTable =$('#gadge-schedule-list').DataTable({
                processing: true,
                serverSide: true,
                order: [],
                ajax: {
                    url: url,
                    'type': 'POST',
                    'headers': {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                },
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                    {data: 'schedule_month', name: 'schedule_month', searchable: true, orderable: false},
                    {data: 'schedule_year', name: 'schedule_year', searchable: true, orderable: false},
                    {data: 'insert_date', name: 'insert_date', searchable: true, orderable: false},
                    // {data: 'schedule_mst_id', name: 'schedule_mst_id'},
                    {data: 'action', name: 'action', searchable: false},
                ]
            });
            // oTable.columns( [4] ).visible( false );
        };

        $(document).ready(function () {

            $(document).on('click', '.schedule', function () {
                // $('#schedule').modal('show')
                $('#status-show').modal('show')
                $('#checkAll').prop('checked', $(this).is(':checked'));
                let schedule_year = $(this).data('year')
                let schedule_month = $(this).data('month')
                let schedule_mst_id = $(this).data('schedule_mst_id')
                $("#workflow_id").val(4);
                $("#object_id").val(schedule_mst_id);
                $("#year").val(schedule_year);
                $("#month").val(schedule_month);
                console.log(schedule_mst_id)
                // let scheduleMst = schedule_mst_id.split(',').map(item => item.trim());
                let scheduleMst;
                if (Array.isArray(schedule_mst_id)) {
                    scheduleMst = schedule_mst_id.split(',').map(item => item.trim());
                } else if (typeof schedule_mst_id === 'string') {
                    scheduleMst = schedule_mst_id.split(',').map(item => item.trim());
                } else {
                    scheduleMst = [];
                }
                let scheduleMstId;

                if (scheduleMst.length > 1) {
                    scheduleMstId = schedule_mst_id.split(',').map(item => item.trim());
                } else {
                    scheduleMstId = [String(schedule_mst_id).trim()];
                }

                $("#show_dtl_btn").val(scheduleMstId);
                // console.log(schedule_month, schedule_year,schedule_mst_id)
                $.ajax({
                    url: '/schedule/reader-approval/' + schedule_month + '/'+ schedule_year ,
                    'type': 'get',
                    'headers': {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: {
                        workflowId: 4
                    },
                    success: function (res) {
                        let schedule_list = "";
                        $.each(res.approval_data, function (key, val) {
                            console.log(val)
                            let rawDate = new Date(val.insert_date);
                            let updateDate = new Date(val.insert_date);
                            let day = String(rawDate.getDate()).padStart(2, '0'); // Get the day and pad with leading zeros if necessary
                            let month = String(rawDate.getMonth() + 1).padStart(2, '0'); // Get the month (months are zero-based) and pad with leading zeros if necessary
                            let year = rawDate.getFullYear(); // Get the full year
                            let upDay = String(updateDate.getDate()).padStart(2, '0'); // Get the day and pad with leading zeros if necessary
                            let upMonth = String(updateDate.getMonth() + 1).padStart(2, '0'); // Get the month (months are zero-based) and pad with leading zeros if necessary
                            let upYear = updateDate.getFullYear(); // Get the full year

                            let formattedDate = day + '-' + month + '-' + year;
                            let formattedUpdatedDate = upDay + '-' + upMonth + '-' + upYear;

                            if(val.workflow_step_id!=39){
                                let approved_on = '<span class="badge badge-light">APPROVAL PENDING</span>'
                                let schedule_mst_id = val.schedule_mst_id
                                schedule_list += "<input type=\"hidden\" id=\"get_url\" value=\"" + window.location.pathname.slice(1) +'?id='+ schedule_mst_id + "\"  name=\"get_url[]\"><tr>\n" +
                                    "                            <td style='text-align: center'>"+ val.station_name +"</td>\n" +
                                    // "                            <td>" + val.roster_date + "</td>\n" +
                                    "                            <td style='text-align: center'>" + approved_on + "</td>\n" +
                                    "                            <th style='display: none' scope=\"row\"><input type=\"hidden\" class=\"object_id\" name=\"object_id[]\" value=" + val.schedule_mst_id + "></th>\n" +
                                    "                        </tr>"
                                // approval(schedule_mst_id);
                                if ($.isEmptyObject(val.next_step)) {
                                    $(".no-permission").css("display","block");
                                    $(document).find('#status_note').hide();
                                    $(document).find('#button_portion').hide();
                                }else{
                                    if(val.next_step.user_role && JSON.stringify(userRoles).indexOf(val.next_step.user_role) > -1){
                                        $(document).find('.no-permission').hide();
                                        if(val.next_step[0].approve_yn == "Y"){
                                            $("#save_btn").css("display","none");
                                            $("#bonus_id_prm").val(39);
                                            $(document).find('#hide_div').hide();
                                            $("#close_btn").css("display","none");
                                            $("#approve_btn").css("display","block");
                                            $("#radio_btn_por").css("display","block");
                                        }else{
                                            $("#radio_btn_por").css("display","none");
                                        }
                                        $(document).find('.no-permission').hide();
                                        $(document).find('#status_note').show();
                                        $(document).find('#button_portion').show();
                                    }else {
                                        $(".no-permission").css("display","block");
                                        $("#radio_btn_por").css("display","none");
                                        $(document).find('#status_note').hide();
                                        $(document).find('#button_portion').hide();
                                    }
                                }
                            }else {
                                let approved_on = formattedUpdatedDate
                                let approved = '<span class="badge badge-success">ROSTER APPROVED</span>'
                                schedule_list += "<tr>\n" +
                                    "                            <td>"+ val.station_name +"</td>\n" +
                                    "                            <td>" + formattedDate + "</td>\n" +
                                    "                            <td>" + approved + "</td>\n" +
                                    // "                            <th scope=\"row\">" + approved + "</th>\n" +
                                    "                        </tr>"
                            }
                        })

                        $('#roster_schedule tbody').html(schedule_list)

                        let steps = "";
                        $('.step-progressbar').html(steps);
                        $.each(res.progressBarData, function(j){
                            steps += "<li data-step="+res.progressBarData[j].process_step+" class='step-progressbar__item'>"+ res.progressBarData[j].workflow +"</li>"
                        });
                        $('.step-progressbar').html(steps);

                        let content = "";
                        $.each(res.workflowProcess, function(i){
                            let note = res.workflowProcess[i].note;
                            if(note==null){
                                note = '';
                            }
                            content += "<div class='row d-flex justify-content-between px-1'>" +
                                "<div class='hel'>" +
                                "<span class='ml-1 font-medium'>" +
                                "<h5 class='text-uppercase'>"+ res.workflowProcess[i].workflow_step.workflow +"</h5>" +
                                "</span>" +
                                "<span>By "+ res.workflowProcess[i].user.emp_name +"</span>" +
                                "</div>" +
                                "<div class='hel'>" +
                                "<span class='btn btn-secondary btn-sm mt-1' style='border-radius: 50px'>"+ res.workflowProcess[i].insert_date +"</span>" +
                                "<br>" +
                                "<span style='margin-left: .3rem'>"+ res.workflowProcess[i].user.designation +"</span>" +
                                "</div>" +
                                "</div>" +
                                "<hr>" +
                                "<span class='m-b-15 d-block border p-1' style='border-radius: 5px'>"+ note +"" +
                                "</span><hr>";//res.workflowProcess[i].insert_date;
                        });

                        $('#content_bdy').html(content);

                        // console.log(res)
                        if(res.current_step && res.current_step.process_step){
                            $('.step-progressbar li').each(function(i){
                                if ($(this).data('step') > res.current_step.process_step) {
                                    $(this).addClass('step-progressbar__item step-progressbar__item--active');
                                }
                                else {
                                    $(this).addClass('step-progressbar__item step-progressbar__item--complete');
                                }
                            })
                        }
                        else {
                            $('.step-progressbar li').addClass('step-progressbar__item step-progressbar__item--active');
                        }

                    }
                });
                // console.log(scheduleMstId[0])
                $.ajax({
                    type: 'GET',
                    url: '/schedule/reader-approval-data',
                    data: {workflowId: 4,objectid: scheduleMstId},
                    success: function (msg) {
                        // console.log(msg.next_step[0].workflow_step_id == 18)
                        console.log(msg)
                        let wrkprc = msg.workflowProcess;
                        if (typeof wrkprc === 'undefined' || wrkprc === null|| wrkprc.length === 0) {
                            $('#current_status').hide();
                        }else{
                            $('#current_status').show();
                            $("#step_name").text(msg.workflowProcess[0].workflow_step.workflow);
                            $("#step_approve_by").text('By ' + msg.workflowProcess[0].user.emp_name);
                            $("#step_time").text(msg.workflowProcess[0].insert_date);
                            $("#step_approve_desig").text(msg.workflowProcess[0].user.designation);
                            $("#step_note").text(msg.workflowProcess[0].note);
                        }

                        let steps = "";
                        $('.step-progressbar').html(steps);
                        $.each(msg.progressBarData, function(j){
                            steps += "<li data-step="+msg.progressBarData[j].process_step+" class='step-progressbar__item'>"+ msg.progressBarData[j].workflow +"</li>"
                        });
                        $('.step-progressbar').html(steps);

                        let content = "";
                        $.each(msg.note, function(i){
                            let note = msg.note[i].note;
                            console.log(note)
                            if(note==null){
                                note = '';
                            }
                            content += "<div class='row d-flex justify-content-between px-1'>" +
                                "<div class='hel'>" +
                                "<span class='ml-1 font-medium'>" +
                                "<h5 class='text-uppercase'>"+ msg.workflowProcess[i].workflow_step.workflow +"</h5>" +
                                "</span>" +
                                "<span>By "+ msg.workflowProcess[i].user.emp_name +"</span>" +
                                "</div>" +
                                "<div class='hel'>" +
                                "<span class='btn btn-secondary btn-sm mt-1' style='border-radius: 50px'>"+ msg.workflowProcess[i].insert_date +"</span>" +
                                "<br>" +
                                "<span style='margin-left: .3rem'>"+ msg.workflowProcess[i].user.designation +"</span>" +
                                "</div>" +
                                "</div>" +
                                "<hr>" +
                                "<span class='m-b-15 d-block border p-1' style='border-radius: 5px'>"+ note +"" +
                                "</span><hr>";//msg.workflowProcess[i].insert_date;
                            // return false; // Stop the loop after retrieving the first note from each object
                        });

                        $('#content_bdy').html(content);

                        if(msg.current_step && msg.current_step.process_step){
                            $('.step-progressbar li').each(function(i){

                                if ($(this).data('step') > msg.current_step.process_step) {
                                    $(this).addClass('step-progressbar__item step-progressbar__item--active');
                                }
                                else {
                                    $(this).addClass('step-progressbar__item step-progressbar__item--complete');
                                }
                            })
                        }
                        else {
                            $('.step-progressbar li').addClass('step-progressbar__item step-progressbar__item--active');
                        }
                        if (msg.current_step.length === 0 || msg.current_step.workflow_step_id === 54)
                        {
                            $("#status_id").html(msg.options_s);
                        }else {
                            if ($('#active_yes').is(':checked')) {
                                $("#status_id").html(msg.options);
                            }
                        }


                        $('#active_no').change(function() {
                            if ($(this).is(':checked')) {
                                $("#status_id").html(msg.options_s);
                            }
                        });

                        $('#active_yes').change(function() {
                            if ($(this).is(':checked')) {
                                $("#status_id").html(msg.options);
                            }
                        });

                        // $("#status_id").html(msg.options);

                        if ($.isEmptyObject(msg.next_step)) {
                            $(".no-permission").css("display","block");
                            $(document).find('#status_note').hide();
                            $(document).find('#button_portion').hide();
                        }else{
                            // console.log(msg.next_step[0])
                            if(msg.next_step[0].user_role && JSON.stringify(userRoles).indexOf(msg.next_step[0].user_role) > -1){
                                $(document).find('.no-permission').hide();
                                if(msg.next_step[0].approve_yn == "Y"){
                                    $("#save_btn").css("display","none");
                                    $("#bonus_id_prm").val(39);
                                    $(document).find('#hide_div').hide();
                                    $("#close_btn").css("display","none");
                                    $("#approve_btn").css("display","block");
                                    $("#radio_btn_por").css("display","block");
                                }else{
                                    $("#radio_btn_por").css("display","none");
                                }
                                $(document).find('.no-permission').hide();
                                $(document).find('#status_note').show();
                                $(document).find('#button_portion').show();
                            }else {
                                $(".no-permission").css("display","block");
                                $("#radio_btn_por").css("display","none");
                                $(document).find('#status_note').hide();
                                $(document).find('#button_portion').hide();
                            }
                        }

                    }
                });
            })

            $("#show_dtl_btn").show();
            var schedule_mst_id = '{{request()->get('id')}}';

            if (schedule_mst_id) {
                approval(schedule_mst_id);
            }

            $("#workflow_form").attr('action', '{{ route('schedule.approval-post') }}');
            gadgeStationScheduleList();
        });

        // -------------------------------------------------------------------

        var currentTab = 0; // Current tab is set to be the first tab (0)
        showTab(currentTab); // Display the current tab

        function showTab(n) {
            // This function will display the specified tab of the form...
            var x = document.getElementsByClassName("step");
            x[n].style.display = "block";
            //... and fix the Previous/Next buttons:
            if (n == 0) {
                document.getElementById("prevBtn").style.display = "none";
                document.getElementById("nextBtn").style.display = "inline";
            } else {
                document.getElementById("prevBtn").style.display = "inline";
                document.getElementById("nextBtn").style.display = "none";
            }
            if (n == (x.length - 1)) {
                document.getElementById("nextBtn").innerHTML = "Submit";
            } else {
                document.getElementById("nextBtn").innerHTML = "Next";
            }
            //... and run a function that will display the correct step indicator:
            fixStepIndicator(n)
        }

        function nextPrev(n) {
            // This function will figure out which tab to display
            var x = document.getElementsByClassName("step");
            // Exit the function if any field in the current tab is invalid:
            if (n == 1 && !validateForm()) return false;
            // Hide the current tab:
            x[currentTab].style.display = "none";
            // Increase or decrease the current tab by 1:
            currentTab = currentTab + n;
            // if you have reached the end of the form...
            if (currentTab >= x.length) {
                // ... the form gets submitted:
                document.getElementById("workflow_form").submit();
                return false;
            }
            // Otherwise, display the correct tab:
            showTab(currentTab);
        }

        function validateForm() {
            // This function deals with validation of the form fields
            var x, y, i, valid = true;
            x = document.getElementsByClassName("step");
            y = x[currentTab].getElementsByTagName("input");
            var messageElement = document.getElementById("validationMessage");

            // Reset the message element
            messageElement.innerHTML = "";

            // A loop that checks every input field in the current tab:
            for (i = 0; i < y.length; i++) {
                // If a field is hidden and has a value...
                if (y[i].type === "hidden" && y[i].value !== "") {
                    // Proceed to the next step
                    // You can add your logic to handle the next step here
                    // For example, increment currentTab and update the UI accordingly
                    // currentTab++;
                    // updateStepIndicator();

                    // Since we're automatically proceeding to the next step, no need for further validation
                    return true;
                } else if (y[i].type === "checkbox") {
                    // If a field is a checkbox and is not checked...
                    if (!y[i].checked) {
                        // add an "invalid" class to the field:
                        y[i].classList.add("invalid");
                        // and set the current valid status to false
                        valid = false;
                        // Show validation message for checkboxes
                        messageElement.innerHTML = "Please check the required checkboxes.";
                    }
                } else if (y[i].value === "") {
                    // For other input fields, if a field is empty...
                    // add an "invalid" class to the field:
                    y[i].classList.add("invalid");
                    // and set the current valid status to false
                    valid = false;
                }
            }

            // If the valid status is true, mark the step as finished and valid:
            if (valid) {
                document.getElementsByClassName("stepIndicator")[currentTab].classList.add("finish");
                // Show success message and proceed to the next step
                Swal.fire({
                    title: "Success!",
                    text: "Validation passed.",
                    icon: "success",
                    confirmButtonText: "OK",
                    onClose: function () {
                        // Proceed to the next step here
                        // You can add your logic to handle the next step
                    }
                });
            } else {
                // Show error message
                Swal.fire({
                    title: "Error!",
                    text: "Validation failed. Please fill in all required fields.",
                    icon: "error",
                    confirmButtonText: "OK"
                });
            }

            return valid; // return the valid status
        }


        function fixStepIndicator(n) {
            // This function removes the "active" class of all steps...
            var i, x = document.getElementsByClassName("stepIndicator");
            for (i = 0; i < x.length; i++) {
                x[i].className = x[i].className.replace(" active", "");
            }
            //... and adds the "active" class on the current step:
            x[n].className += " active";
        }
    </script>

@endsection