{{-- Extends layout --}}
@extends(getThemeBasePath())
@section('page_title')
{{$page_title}}
@endsection
<link href="{{asset('backend/css/pages/wizard/wizard-3.css')}}" rel="stylesheet" type="text/css" />
<style>
    .header-menu {
        display: none !important;
    }
</style>
{{-- Content --}}
@section('content')
<div class="card card-custom shadow-sm">
    <div class="card-header collapsible cursor-pointer rotate" data-bs-toggle="collapse" data-bs-target="#kt_docs_card_collapsible">
        <h3 class="card-title">{{$title}}</h3>
        <div class="card-toolbar rotate-180">
            <span class="svg-icon svg-icon-1">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <rect opacity="0.5" x="11" y="18" width="13" height="2" rx="1" transform="rotate(-90 11 18)" fill="currentColor"></rect>
                    <path d="M11.4343 15.4343L7.25 11.25C6.83579 10.8358 6.16421 10.8358 5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75L11.2929 18.2929C11.6834 18.6834 12.3166 18.6834 12.7071 18.2929L18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25C17.8358 10.8358 17.1642 10.8358 16.75 11.25L12.5657 15.4343C12.2533 15.7467 11.7467 15.7467 11.4343 15.4343Z" fill="currentColor"></path>
                </svg>
            </span>
        </div>
    </div>
    <div id="kt_docs_card_collapsible" class="collapse show">
        <div class="card-body p-0">
            <div class="py-3">
                <div class="p-3">
                    <!--begin: Wizard-->
                    <!--begin::Stepper-->
                    <div class="stepper stepper-pills stepper-column d-flex flex-column flex-xl-row flex-row-fluid" id="kt_wizard_v3">
                        <!--begin::Aside-->
                        <div class="card">
                            <!--begin::Wrapper-->
                            <div class="card-body pt-0 pb-0 mt-0">
                                <!--begin::Nav-->
                                <div class="stepper-nav"> 
                                    @foreach($wizardSteps as $stepNo => $stepName)
                                    <!--begin::Step 1-->
                                    <div class="stepper-item my-0 {{$stepNo==1?'current':''}} {{ isset($isMobile) && $isMobile != 0 ? 'd-none':'' }}" data-kt-stepper-element="nav" data-kt-stepper-action="step">
                                        <!--begin::Line-->
                                        <div class="stepper-line w-40px"></div>
                                        <!--end::Line-->

                                        <!--begin::Icon-->
                                        <div class="stepper-icon h-40px">
                                            <i class="stepper-check fas fa-check"></i>
                                            <span class="stepper-number">{{$stepNo}}</span>
                                        </div>
                                        <!--end::Icon-->

                                        <!--begin::Label-->
                                        <div class="stepper-label">
                                            <h3 class="stepper-title fs-5">
                                                {{$stepName}} @if(in_array($stepNo,$assignedTasksSteps))<i class="fa fa-exclamation-circle text-danger"></i>@endif
                                            </h3>

                                            <div class="stepper-desc">

                                            </div>
                                        </div>
                                        <!--end::Label-->
                                    </div>
                                    <!--end::Step 1-->
                                    @endforeach
                                </div>
                                <!--end::Nav-->
                            </div>
                            <!--end::Wrapper-->
                        </div>

                        <div class="card">
                            <div class="card-body pt-0 mt-0">
                                <!--begin::Form-->
                                <form class="form " novalidate="novalidate" id="kt_stepper_example_basic_form">
                                    <!--begin::Group-->

                                    @foreach($wizardViews as $stepNo => $stepView)
                                    <!--begin::Step 1-->
                                    <div class="{{$stepNo==1?'current':""}}" data-kt-stepper-element="content">
                                        <div class="w-100">
                                            <!--begin::Heading-->
                                            <div class="pb-10 pb-lg-15">
                                                <!--begin::Title-->
                                                <h2 class="fw-bolder d-flex align-items-center text-dark">{{$wizardSteps[$stepNo]}} &nbsp; @if((isset($isMobile) && $isMobile != 0) && in_array($stepNo,$assignedTasksSteps))<i class="fa fa-exclamation-circle text-danger"></i>@endif</h2>
                                                <!--end::Title-->
                                            </div>
                                            <!--end::Heading-->
                                            <!--begin::Input group-->
                                            <div class="fv-row">
                                                <!--begin::Row-->
                                                <div class="row">
                                                    @if(!empty($stepView))
                                                    @include($stepView)
                                                    @endif
                                                </div>
                                                <!--end::Row-->
                                            </div>
                                            <!--end::Input group-->
                                        </div>
                                    </div>
                                    <!--begin::Step 1-->
                                    @endforeach

                                    <!--end::Group-->

                                    <!--begin::Actions-->
                                    <div class="d-flex flex-stack pt-10">
                                        <!--begin::Wrapper-->
                                        <div class="me-2">
                                            <button type="button" class="btn btn-light btn-active-light-primary btn-hover-rise" data-kt-stepper-action="previous">
                                                Back
                                            </button>
                                        </div>
                                        <!--end::Wrapper-->

                                        <!--begin::Wrapper-->
                                        <div>
                                            <button type="button" class="btn btn-primary btn-hover-rise" data-kt-stepper-action="submit">
                                                <span class="indicator-label">
                                                    Submit
                                                </span>
                                                <span class="indicator-progress">
                                                    Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                                </span>
                                            </button>

                                            <button type="button" class="btn btn-primary btn-hover-rise" data-kt-stepper-action="next">
                                                Continue
                                            </button>
                                        </div>
                                        <!--end::Wrapper-->
                                    </div>
                                    <!--end::Actions-->
                                </form>
                                <!--end::Form-->
                            </div>
                        </div>
                    </div>
                    <!--end::Stepper-->
                    <!--end: Wizard-->
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

{{-- Scripts Section --}}
@section('scripts')
@php
$tabName = request()->get('tabName');
$tabName2 = request()->get('tabName2');
@endphp

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript">
    function insertUrlParam(key, value) {
        if (history.pushState) {
            let searchParams = new URLSearchParams(window.location.search);
            searchParams.set(key, value);
            let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + searchParams.toString();
            window.history.pushState({
                path: newurl
            }, '', newurl);
        }
    }

    function actionAbcDelete(ele) {
        var row = $(ele).parents('tr:first');
        if (row) {
            var id = row.attr('id');
            if (id) {
                Swal.fire(deleteAlert).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                id: id,
                                "_token": "{{ csrf_token() }}",
                                _method: 'DELETE'
                            },
                            url: "{!! route('abclogsheet.destroy',1) !!}",
                            success: function(data) {
                                if (data.status) {
                                    Swal.fire(deleteSuccessAlert);
                                    tbl_abclog.row(row).remove().draw(false);
                                    // window.LaravelDataTables["dataTableBuilder"].ajax.reload();
                                }
                            }
                        });
                    }
                });
            }
        }
    }

    function actionBehaviourDelete(ele) {
        var row = $(ele).parents('tr:first');
        if (row) {
            var id = row.attr('id');
            if (id) {
                Swal.fire(deleteAlert).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                id: id,
                                "_token": "{{ csrf_token() }}",
                                _method: 'DELETE'
                            },
                            url: "{!! route('behaviourlogaddoption.destroy',1) !!}",
                            success: function(data) {
                                if (data.status) {
                                    Swal.fire(deleteSuccessAlert);
                                    tbl_behaviourlog.row(row).remove().draw(false);
                                    // window.LaravelDataTables["dataTableBuilder"].ajax.reload();
                                }
                            }
                        });
                    }
                });
            }
        }
    }

    function actionBglDelete(ele) {
        var row = $(ele).parents('tr:first');
        if (row) {
            var id = row.attr('id');
            if (id) {
                Swal.fire(deleteAlert).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                id: id,
                                "_token": "{{ csrf_token() }}",
                                _method: 'DELETE'
                            },
                            url: "{!! route('bglchart.destroy',1) !!}",
                            success: function(data) {
                                if (data.status) {
                                    Swal.fire(deleteSuccessAlert);
                                    tbl_bgl.row(row).remove().draw(false);
                                    // window.LaravelDataTables["dataTableBuilder"].ajax.reload();
                                }
                            }
                        });
                    }
                });
            }
        }
    }

    function actionFoodDelete(ele) {
        var row = $(ele).parents('tr:first');
        if (row) {
            var id = row.attr('id');
            if (id) {
                Swal.fire(deleteAlert).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                id: id,
                                "_token": "{{ csrf_token() }}",
                                _method: 'DELETE'
                            },
                            url: "{!! route('foodanddrinkchart.destroy',1) !!}",
                            success: function(data) {
                                if (data.status) {
                                    Swal.fire(deleteSuccessAlert);
                                    tbl_food.row(row).remove().draw(false);
                                    // window.LaravelDataTables["dataTableBuilder"].ajax.reload();
                                }
                            }
                        });
                    }
                });
            }
        }
    }

    function actionGoalDelete(ele) {
        var row = $(ele).parents('tr:first');
        if (row) {
            var id = row.attr('id');
            if (id) {
                Swal.fire(deleteAlert).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                id: id,
                                "_token": "{{ csrf_token() }}",
                                _method: 'DELETE'
                            },
                            url: "{!! route('shiftcasegoal.destroy',1) !!}",
                            success: function(data) {
                                if (data.status) {
                                    Swal.fire(deleteSuccessAlert);
                                    tbl_goals.row(row).remove().draw(false);
                                    // window.LaravelDataTables["dataTableBuilder"].ajax.reload();
                                }
                            }
                        });
                    }
                });
            }
        }
    }

    function actionPrnDelete(ele) {
        var row = $(ele).parents('tr:first');
        if (row) {
            var id = row.attr('id');
            if (id) {
                Swal.fire(deleteAlert).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                id: id,
                                "_token": "{{ csrf_token() }}",
                                _method: 'DELETE'
                            },
                            url: "{!! route('medicationadminrecordprn.destroy',1) !!}",
                            success: function(data) {
                                if (data.status) {
                                    Swal.fire(deleteSuccessAlert);
                                    tbl_medicationprn.row(row).remove().draw(false);
                                    // window.LaravelDataTables["dataTableBuilder"].ajax.reload();
                                }
                            }
                        });
                    }
                });
            }
        }
    }

    function actionRecordDelete(ele) {
        var row = $(ele).parents('tr:first');
        if (row) {
            var id = row.attr('id');
            if (id) {
                Swal.fire(deleteAlert).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                id: id,
                                "_token": "{{ csrf_token() }}",
                                _method: 'DELETE'
                            },
                            url: "{!! route('medicationadminrecordsheetoption.destroy',1) !!}",
                            success: function(data) {
                                if (data.status) {
                                    Swal.fire(deleteSuccessAlert);
                                    tbl_medicationadmin.row(row).remove().draw(false);
                                    // window.LaravelDataTables["dataTableBuilder"].ajax.reload();
                                }
                            }
                        });
                    }
                });
            }
        }
    }

    function actionStDelete(ele) {
        var row = $(ele).parents('tr:first');
        if (row) {
            var id = row.attr('id');
            if (id) {
                Swal.fire(deleteAlert).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                id: id,
                                "_token": "{{ csrf_token() }}",
                                _method: 'DELETE'
                            },
                            url: "{!! route('medicationadminrecordshortterm.destroy',1) !!}",
                            success: function(data) {
                                if (data.status) {
                                    Swal.fire(deleteSuccessAlert);
                                    tbl_medicationst.row(row).remove().draw(false);
                                    // window.LaravelDataTables["dataTableBuilder"].ajax.reload();
                                }
                            }
                        });
                    }
                });
            }
        }
    }

    function actionSleepDelete(ele) {
        var row = $(ele).parents('tr:first');
        if (row) {
            var id = row.attr('id');
            if (id) {
                Swal.fire(deleteAlert).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                id: id,
                                "_token": "{{ csrf_token() }}",
                                _method: 'DELETE'
                            },
                            url: "{!! route('sleeprecordchart.destroy',1) !!}",
                            success: function(data) {
                                if (data.status) {
                                    Swal.fire(deleteSuccessAlert);
                                    tbl_sleep.row(row).remove().draw(false);
                                    // window.LaravelDataTables["dataTableBuilder"].ajax.reload();
                                }
                            }
                        });
                    }
                });
            }
        }
    }

    function actionWeightDelete(ele) {
        var row = $(ele).parents('tr:first');
        if (row) {
            var id = row.attr('id');
            if (id) {
                Swal.fire(deleteAlert).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                id: id,
                                "_token": "{{ csrf_token() }}",
                                _method: 'DELETE'
                            },
                            url: "{!! route('weightrecordingchart.destroy',1) !!}",
                            success: function(data) {
                                if (data.status) {
                                    Swal.fire(deleteSuccessAlert);
                                    tbl_weight.row(row).remove().draw(false);
                                    // window.LaravelDataTables["dataTableBuilder"].ajax.reload();
                                }
                            }
                        });
                    }
                });
            }
        }
    }
    function actionBowelDelete(ele) {
        var row = $(ele).parents('tr:first');
        if (row) {
            var id = row.attr('id');
            if (id) {
                Swal.fire(deleteAlert).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                id: id,
                                "_token": "{{ csrf_token() }}",
                                _method: 'DELETE'
                            },
                            url: "{!! route('bowelchart.destroy',1) !!}",
                            success: function(data) {
                                if (data.status) {
                                    Swal.fire(deleteSuccessAlert);
                                    tbl_bowel.row(row).remove().draw(false);
                                }
                            }
                        });
                    }
                });
            }
        }
    }
    function actionBloodDelete(ele) {
        var row = $(ele).parents('tr:first');
        if (row) {
            var id = row.attr('id');
            if (id) {
                Swal.fire(deleteAlert).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                id: id,
                                "_token": "{{ csrf_token() }}",
                                _method: 'DELETE'
                            },
                            url: "{!! route('bloodpressure.destroy',1) !!}",
                            success: function(data) {
                                if (data.status) {
                                    Swal.fire(deleteSuccessAlert);
                                    tbl_bloodpressure.row(row).remove().draw(false);
                                }
                            }
                        });
                    }
                });
            }
        }
    }

     function actionOxygenDelete(ele) {
        var row = $(ele).parents('tr:first');
        if (row) {
            var id = row.attr('id');
            if (id) {
                Swal.fire(deleteAlert).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                id: id,
                                "_token": "{{ csrf_token() }}",
                                _method: 'DELETE'
                            },
                            url: "{!! route('oxygen_saturation.destroy',1) !!}",
                            success: function(data) {
                                if(data.status){
                                    Swal.fire(deleteSuccessAlert);
                                    tbl_oxygensaturation.row(row).remove().draw(false);
                                }
                            }
                        });
                    }
                });
            }
        }
    }
    var tbl_shiftcasenote;
    var tbl_goals;
    var tbl_medicationadmin;
    var tbl_bgl;
    var tbl_weight;
    var tbl_bowel;
    var tbl_bloodpressure;
    var tbl_oxygensaturation;
    var tbl_medicationprn;
    var tbl_medicationst;
    var tbl_abclog;
    var tbl_sleep;
    var tbl_behaviourlog;
    var tbl_food;
    $(document).ready(function() {
        var isMobile = '{{ $isMobile }}';
        $(document).find('body .container.mobile-container-height').removeClass('container').addClass('container-fluid');
        $(document).on('change', '.filter-date', function() {
            var _self = $(this);
            setTimeout(function() {
                var name = _self.attr('name');
                var currentUrl = window.location.href;
                var splitUrl = currentUrl.split('&');
                var baseUrl = splitUrl[0];
                var value = _self.val();
                const urlParams = new URLSearchParams(window.location.search);
                urlParams.set(name, value);
                window.location.search = urlParams;
            }, 500);
        });
        tbl_shiftcasenote = $('#tbl_shiftcasenote').DataTable({});
        tbl_goals = $('#tbl_goals').DataTable({});
        tbl_medicationadmin = $('#tbl_medicationadmin').DataTable({});
        tbl_bgl = $('#tbl_bgl').DataTable({});
        tbl_weight = $('#tbl_weight').DataTable({});
        tbl_bowel = $('#tbl_bowel').DataTable({});
        tbl_bloodpressure = $('#tbl_bloodpressure').DataTable({});
        tbl_oxygensaturation = $('#tbl_oxygensaturation').DataTable({});
        tbl_medicationprn = $('#tbl_medicationprn').DataTable({});
        tbl_medicationst = $('#tbl_medicationst').DataTable({});
        tbl_abclog = $('#tbl_abclog').DataTable({});
        tbl_sleep = $('#tbl_sleep').DataTable({});
        tbl_behaviourlog = $('.tbl_behaviourlog').DataTable({});
        tbl_food = $('#tbl_food').DataTable({});
        // $('#tbl_shiftcasenote,#tbl_goals,#tbl_medicationadmin,#tbl_bgl,#tbl_weight,#tbl_medicationprn,#tbl_medicationst,#tbl_abclog,#tbl_sleep,.tbl_behaviourlog,#tbl_food').DataTable({});
        // KTCookie.setCookie('kt_aside_toggle_state', 'off');
        var _wizardEl = $('#kt_wizard_v3');
        var _formEl = $('#kt_form');
        var element = document.querySelector("#kt_wizard_v3");
        // Initialize Stepper
        var stepper = new KTStepper(element);
        @if($activeStep)
        stepper.goTo("{{$activeStep}}");
        @endif
        insertUrlParam('step', stepper.getCurrentStepIndex());
        // Handle navigation click
        stepper.on("kt.stepper.click", function(stepper) {
            stepper.goTo(stepper.getClickedStepIndex()); // go to clicked step
            insertUrlParam('step', stepper.getCurrentStepIndex());
            KTUtil.scrollTop();
        });

        // Handle next step
        stepper.on("kt.stepper.next", function(stepper) {
            stepper.goNext(); // go next step
            insertUrlParam('step', stepper.getCurrentStepIndex());
            KTUtil.scrollTop();
        });

        // Handle previous step
        stepper.on("kt.stepper.previous", function(stepper) {
            stepper.goPrevious(); // go previous step
            insertUrlParam('step', stepper.getCurrentStepIndex());
            KTUtil.scrollTop();
        });

        // // Changed event
        // _wizardObj.on('changed', function(wizard) {
        //     KTUtil.scrollTop();
        //     insertUrlParam('step', wizard.currentStep);
        //     // console.log(wizard.currentStep);
        // });

        if (isMobile && isMobile != 1) {
            $('[data-kt-stepper-action="submit"]').on('click', function(event) {
                window.location.href = "{{route('case_notes.index')}}";
            });
        } else {
            $('[data-kt-stepper-action="submit"]').on('click', function(event) {
                cancelPostMessage();
            });
        }

        $('#myTab a[data-bs-toggle="tab"]').on('shown.bs.tab', function(event) {
            event.target // newly activated tab
            event.relatedTarget // previous active tab
            insertUrlParam('tabName', $(event.target).attr('aria-controls'));
        });
        @if(!empty($tabName))
        $("#{{$tabName}}").tab('show');
        @endif

        $('#myTab2 a[data-bs-toggle="tab"]').on('shown.bs.tab', function(event) {
            event.target // newly activated tab
            event.relatedTarget // previous active tab
            insertUrlParam('tabName2', $(event.target).attr('aria-controls'));
        });
        @if(!empty($tabName2))
        $("#{{$tabName2}}").tab('show');
        @endif

        // Submit event
        //_wizardObj.on('submit', function(wizard) {
        //window.location.href = "{{route('case_notes.index')}}";
        // Validate form before submit
        // var validator = _validations[wizard.getStep() - 1]; // get validator for currnt step
        // _formEl.submit(); // submit form
        // if (validator) {
        // 	validator.validate().then(function (status) {
        // 		if (status == 'Valid') {
        // 			_formEl.submit(); // submit form
        // 		} else {
        // 			Swal.fire({
        // 				text: "Sorry, looks like there are some errors detected, please try again.",
        // 				icon: "error",
        // 				buttonsStyling: false,
        // 				confirmButtonText: "Ok, got it!",
        // 				customClass: {
        // 					confirmButton: "btn font-weight-bold btn-light"
        // 				}
        // 			}).then(function () {
        // 				KTUtil.scrollTop();
        // 			});
        // 		}
        // 	});
        // }
        //});

        var chart = AmCharts.makeChart("kt_amcharts_1", {
            "rtl": KTUtil.isRTL(),
            "type": "serial",
            "theme": "light",
            "dataProvider": [{
                "country": "A",
                "visits": parseInt("{{$chartData['A']}}")
            }, {
                "country": "S",
                "visits": parseInt("{{$chartData['S']}}")
            }, {
                "country": "AS",
                "visits": parseInt("{{$chartData['AS']}}"),
                "color": "#D38583",
            }],
            "valueAxes": [{
                "gridColor": "#FFFFFF",
                "gridAlpha": 2,
                "dashLength": 0
            }],
            "gridAboveGraphs": true,
            "startDuration": 1,
            "graphs": [{
                "balloonText": "[[category]]: <b>[[value]]</b>",
                "fillAlphas": 8,
                "lineAlpha": 2,
                "type": "column",
                "valueField": "visits"
            }],
            "chartCursor": {
                "categoryBalloonEnabled": false,
                "cursorAlpha": 0,
                "zoomable": false
            },
            "categoryField": "country",
            "categoryAxis": {
                "gridPosition": "start",
                "gridAlpha": 0,
                "tickPosition": "start",
                "tickLength": 20
            },
            "export": {
                "enabled": false
            }

        });
    });

    var isMobileActionAllowed = '{{ $isMobileActionAllowed }}';
    if(!isMobileActionAllowed){
        errorAlert['text'] = '{{ $actionErrorAlertText }}';
        Swal.fire(errorAlert).then(function(result){
            cancelPostMessage();
        });
    }
    function cancelPostMessage(){
        if (typeof AppBridge !== 'undefined' && AppBridge.postMessage) { AppBridge.postMessage(JSON.stringify({status: true})); }
    }
</script>
@endsection