{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
{{$page_title}}
@endsection

{{-- Content --}}
@section('content')
<!--begin::Card-->
<div class="card shadow-sm">
    <!--begin::Header-->
    <div class="card-header flex-wrap border-0 pt-6 pb-0">
        <div class="card-toolbar">
            <!--begin::Export dropdown-->
            <button type="button" class="btn btn-light-primary me-5" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-start">
                <span class="svg-icon svg-icon-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <rect opacity="0.3" x="12.75" y="4.25" width="12" height="2" rx="1" transform="rotate(90 12.75 4.25)" fill="currentColor"></rect>
                        <path d="M12.0573 6.11875L13.5203 7.87435C13.9121 8.34457 14.6232 8.37683 15.056 7.94401C15.4457 7.5543 15.4641 6.92836 15.0979 6.51643L12.4974 3.59084C12.0996 3.14332 11.4004 3.14332 11.0026 3.59084L8.40206 6.51643C8.0359 6.92836 8.0543 7.5543 8.44401 7.94401C8.87683 8.37683 9.58785 8.34458 9.9797 7.87435L11.4427 6.11875C11.6026 5.92684 11.8974 5.92684 12.0573 6.11875Z" fill="currentColor"></path>
                        <path d="M18.75 8.25H17.75C17.1977 8.25 16.75 8.69772 16.75 9.25C16.75 9.80228 17.1977 10.25 17.75 10.25C18.3023 10.25 18.75 10.6977 18.75 11.25V18.25C18.75 18.8023 18.3023 19.25 17.75 19.25H5.75C5.19772 19.25 4.75 18.8023 4.75 18.25V11.25C4.75 10.6977 5.19771 10.25 5.75 10.25C6.30229 10.25 6.75 9.80228 6.75 9.25C6.75 8.69772 6.30229 8.25 5.75 8.25H4.75C3.64543 8.25 2.75 9.14543 2.75 10.25V19.25C2.75 20.3546 3.64543 21.25 4.75 21.25H18.75C19.8546 21.25 20.75 20.3546 20.75 19.25V10.25C20.75 9.14543 19.8546 8.25 18.75 8.25Z" fill="#C4C4C4"></path>
                    </svg>
                </span>
                Download
            </button>
            <!--begin::Menu-->
            <div id="kt_datatable_example_1_export_menu" class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-200px py-4" data-kt-menu="true">
                <!--begin::Menu item-->
                <div class="menu-item px-3">
                    <a href="#" class="menu-link px-3" data-kt-export="excel" onclick="exportData('excel')">
                        Export as Excel
                    </a>
                </div>
                <!--end::Menu item-->
                <!--begin::Menu item-->
                <div class="menu-item px-3">
                    <a href="#" class="menu-link px-3" data-kt-export="pdf" onclick="exportData('pdf')">
                        Export as PDF
                    </a>
                </div>
                <!--end::Menu item-->
            </div>
            <!--end::Menu-->
            <!--end::Export dropdown-->
        </div>
    </div>
    <!--end::Header-->
    <!--begin::Body-->
    <div class="card-body">
        <form class="form" id="kt_form">
            <!--begin::Row-->
            <div class="row">
                <div class="col-xl-6">
                    <!--begin::Group-->
                    <div class="form-group fv-row mb-7">
                        <label class="col-form-label text-lg-right text-left">Participant</label>
                        <div class="col-12">
                            <select class="form-control form-select report-filter" name="client" data-control="select2">
                                <option value="">Select</option>
                                @foreach($clients as $clientId => $client)
                                <option value="{{$clientId}}" {{$masterClientId==$clientId?"selected":""}}>{{$client}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <!--end::Group-->
                </div>
                <div class="col-xl-6">
                    <!--begin::Group-->
                    <div class="form-group fv-row mb-7">
                        <label class="col-form-label text-lg-right text-left">Frequency</label>
                        <div class="col-12">
                            <select class="form-control form-select report-filter" name="frequency" data-control="select2">
                                <option value="week" selected>Weekly</option>
                                <option value="month">Monthly</option>
                            </select>
                        </div>
                    </div>
                    <!--end::Group-->
                </div>
            </div>
            <!--end::Row-->
            <!--begin::Row-->
            <div class="row">
                <div class="col-xl-6">
                    <!--begin::Group-->
                    <div class="form-group fv-row mb-7">
                        <label class="col-form-label text-lg-right text-left">Date Range</label>
                        <div class="col-12">
                            <input class="form-control from-datepicker report-filter" type="text" name="from_date" value="" id="kt_daterangepicker_4" autocomplete="off">
                        </div>
                    </div>
                    <!--end::Group-->
                </div>
            </div>
            <!--end::Row-->
        </form>
        <div class="report-html"></div>
    </div>
    <!--end::Body-->
</div>
<!--end::Card-->
<div class="modal fade" id="exampleModalSizeLg" tabindex="-1" aria-labelledby="exampleModalSizeLg" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel"></h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <i aria-hidden="true" class="ki ki-close"></i>
                </button>
            </div>
            <div class="modal-body" id="exampleModalBody">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light-primary font-weight-bold" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

{{-- Scripts Section --}}
@section('scripts')
<script>
    // Shared Colors Definition
    const primary = '#6993FF';
    const success = '#1BC5BD';
    const info = '#8950FC';
    const warning = '#FFA800';
    const danger = '#F64E60';
    var chart1Img = "";
    var myVar;
    var bFullWeekData = {};
    var headers = {};
    var bglChart, bglConcernsChart, bglStrategiesChart = false;
    var isImgSet = false;
</script>
<script src="{{asset('backend/js/pages/features/charts/apexcharts.js')}}"></script>
<script type="text/javascript">
    function exportData(type) {
        var url = "{{route('report.downloadPdf')}}";
        var client = $("[name='client']:first").val();
        var feq = $("[name='frequency']:first").val();
        var fulldate = $("[name='from_date']:first").val();
        const getdate = fulldate.split(" - ");
        let start = getdate[0];
        var end = getdate[1];
        if (client && feq && start) {
            url += "?client=" + client + "&feq=" + feq + "&start=" + start + "&end=" + end + "&type=" + type;
            // window.location.href = encodeURI(url);
            window.open(encodeURI(url));
        } else {
            alert('Please select the filters');
        }
    }
    $(document).ready(function() {
        $("#expBotton").hide();
        var start = moment().subtract(29, "days");
        var end = moment();

        function cb(start, end) {
            $("#kt_daterangepicker_4").html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
        }

        $("#kt_daterangepicker_4").daterangepicker({
            startDate: start,
            endDate: end,
            ranges: {
                "Today": [moment(), moment()],
                "Yesterday": [moment().subtract(1, "days"), moment().subtract(1, "days")],
                "Last 7 Days": [moment().subtract(6, "days"), moment()],
                "Last 30 Days": [moment().subtract(29, "days"), moment()],
                "This Month": [moment().startOf("month"), moment().endOf("month")],
                "Last Month": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
            },
            locale: {
                format: "DD-MM-YYYY"
            }
        }, cb);

        cb(start, end);
        // $(".from-datepicker").datepicker({
        //     rtl: KTUtil.isRTL(),
        //     todayHighlight: true,
        //     format: 'dd-mm-yyyy',
        //     // endDate: '+0d',
        //     autoclose: true,
        //     zIndexOffset: 10000
        // }).on('changeDate', function(e) {
        //     // `e` here contains the extra attributes
        //     var year = parseInt(e.format('yyyy'));
        //     var startDate = new Date(e.date.valueOf());
        //     $(".to-datepicker").datepicker('setStartDate', startDate);
        // });
        // $(".to-datepicker").datepicker({
        //     rtl: KTUtil.isRTL(),
        //     todayHighlight: true,
        //     format: 'dd-mm-yyyy',
        //     // endDate: '+0d',
        //     autoclose: true,
        //     zIndexOffset: 10000
        // });

        $(document).on('change', '.report-filter', function() {
            var client = $("[name='client']:first").val();
            var feq = $("[name='frequency']:first").val();
            var fulldate = $("[name='from_date']:first").val();
            const getdate = fulldate.split(" - ");
            let start = getdate[0];
            var end = getdate[1];
            if (client && feq && start) {
                $('.report-html').html('').addClass('text-center');
                $('.report-html').html('<div class="row"><div class="col-md-12"><i class="fa fa-spinner spinner"></i></div></div>');
                loadReport(client, feq, start, end, 'triggers');
                $("#expBotton").show();
            } else {
                $('.report-html').html('');
                $("#expBotton").hide();
            }
        });
    });

    function loadReport(client, feq, start, end, reportType) {
        $.ajax({
            type: 'POST',
            dataType: 'json',
            data: {
                "client": client,
                "_token": "{{ csrf_token() }}",
                "feq": feq,
                "start": start,
                "end": end,
                "type": reportType
            },
            url: "{!! route('report.html') !!}",
            success: function(resp) {
                if (reportType == "triggers") {
                    isImgSet = false;
                    $('.report-html').html('').removeClass('text-center');
                }
                $('.report-html').append(resp.html);
                if (reportType == "triggers") {
                    loadReport(client, feq, start, end, 'concerns');
                }
                if (reportType == "concerns") {
                    loadReport(client, feq, start, end, 'strategies');
                }
                if (reportType == "strategies") {
                    setImages();
                }
            }
        });
    }

    function myStopFunction() {
        clearInterval(myVar);
    }

    function setImages() {
        setTimeout(function() {
            myVar = setInterval(function() {
                if (!isImgSet) {
                    $.ajax({
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            "_token": "{{ csrf_token() }}",
                            "bglChart": bglChart,
                            "bglConcernsChart": bglConcernsChart,
                            "bglStrategiesChart": bglStrategiesChart
                        },
                        url: "{!! route('report.images') !!}",
                        success: function(resp) {
                            isImgSet = true;
                        }
                    });
                    myStopFunction();
                }
            }, 500);
        }, 500)
    }
</script>
@endsection