@php
    $labels = [];
    $counts = [];
    $formIds =[];
    $studioIds = []; 
    foreach ($chartDatas as $key => $value) {
        $labels[] = $value['form_name'];
        $formIds[] = $value['form_id'];
        $studioIds[] = $value['studio_id']??'';
        $counts[] = count($value['items']);
    }
    $outputArray = array_map(function ($item) {
        return explode(' ', $item);
    }, $labels);
@endphp

@php

    if(session()->get('selected_studio_uuid')){
        $action =  route('studio.dashboard',);
        } else {
            if(auth()->user()->role_id == 1){
                $action = route('user.superAdminDashboard',);
            }
                else{
                    $action =  route('studio.dashboard',);
                }
            }
@endphp
<form action="{{$action}}" id="dateFilterForm" class="range-calendar-filter mx-auto ms-md-0 me-md-2 position-relative">
    @csrf
    @php
        $date = '';
        if(!empty($startDate)){
        $sdate = date('d M Y', strtotime($startDate));
        $edate = date('d M Y', strtotime($endDate));
        $date = $sdate.' - '.$edate;
        }
  
        if(Session::get('selected_studio_uuid')){
            $studioVal = Session::get('selected_studio_uuid');
        } else {
            if(Auth::user()->role_id ==1){
                $studioVal = 'all';
            }else{
                $studioVal = Auth::user()->studios()->first()->uuid;
            }
           
        } 
        
       
     @endphp
    

<div class="box-modal-new-cont box-modal-new-cont-graph pt-80">
    <div class="box-modal-new-cont-graph-top">
        <h2>Forms</h2>
        <div class="date-field-parent">
            <input type="hidden" name="studio" id="studio" class="scheck" value="{{$studioVal}}">
            <input type="text" name="date" id="reportrange" readonly="readonly" class="form-control datepicker2" id="" value="{{ request()->get('date')}}">
            <input type="hidden" id ="range" name ="range" value="{{request()->get('range')}}">
            <input type="hidden" id="reportdate"  value="{{ request()->get('date')}}">
            <label class="date-label" for="reportrange">Date: </label>
        </div>
    </div>
    <div class="box-modal-new-cont-graph-inner bar-chart-parent">
        <canvas id="barChart" class="forms-chart" width="2000px" height="400px"></canvas>
    </div>

    <div class="horizontal-bar-parent">    
        <canvas id="horizontalBarChartCanvas" height="500px"></canvas>
    </div>
    
</div>
</form>
{{-- <style>
    #barChart {
        cursor: default; /* Set the default cursor */
    }

    #barChart:hover {
        cursor: pointer; /* Change to pointer when hovering over the chart */
    }
</style> --}}
<script type="text/javascript">
    $(document).on('click', '.shortcut button', function() {
        $(this).closest('.shortcut').hide();
    })
    var startDate2;
    var endDate2;
    var selectCurrentWeek = function() {
        window.setTimeout(function() {
            $('.datepicker2').find('.ui-datepicker-current-day a').addClass('ui-state-active')
        }, 1);
    }
    //$("#barChart").css("cursor", "pointer");
var studioSet = $('#studio').val();
var graphCount = {!! json_encode($counts) !!};
var maxCount = Math.max(...graphCount);
//var minCount = Math.min(...graphCount);
var roundTo = 10; // Round to the nearest 5, change this value to round to a different number
//var maxAxisValue = Math.ceil(maxCount / roundTo) * roundTo;
var maxAxisValue = maxCount+1;
var labels = {!! json_encode($labels) !!};
var counts = labels.length;
if(counts==0){
    var maxAxisValue = 10;
}
if (counts > 14) {
    var barThickness = 30;
} else {
    var barThickness = 70;
}
var ctx = document.getElementById("barChart").getContext('2d');
var barChartOptions = {
    plugins: {
        legend: false,
        tooltip: {
            yAlign: 'bottom',
            backgroundColor: '#ffffff',
            borderColor: '#EA545F', // Border color
            borderWidth: 1, // Border width
            displayColors: false,
            callbacks: {
                label: function(context) {
                    var labelIndex = context.dataIndex;
                    var label = {!! json_encode($labels) !!}[labelIndex];
                    var value = context.parsed.y + ' Completed';
                    var multistringText = [value];
                    multistringText.push(label);

                    return multistringText;
                },
                labelTextColor: (context) => {
                    return '#000000';
                },
                title: function() {
                    return '';
                },
            }

        }
    },
    scales: {
        x: {
            border: {
                display: false,
            },
            grid: {
                display: false,
            },
            ticks: {
                color: '#222222',
                font: {
                    size: 14,
                    weight: 400,
                },
                maxRotation: 0,
                autoSkip: false,
                padding: 5,
                callback: function(value, index, values) {
                    var labels = {!! json_encode($labels) !!};
                    var labelsLength = labels.length;
                    if (labels[index].length > 8) {
                        return labels[index].substring(0, 10) + '..';
                    } else {
                        return labels[index];
                    }
                }
            }
        },     
        "y": {
            beginAtZero: true,
            min: 0,
            max: maxAxisValue,
            position: 'left',
            display: true,
            ticks: {               
                stepSize: 10,
                color: '#BBBBBB',
                font: {
                    size: 14,
                    weight: 400,
                }
            },
            border: {
                display: false,
            },
        },
        "y1": {
            beginAtZero: true,
            min: 0,
            max:maxAxisValue,
            position: 'right',
            display: true,
            ticks: {
                stepSize: 10,
                color: '#BBBBBB',
                font: {
                    size: 14,
                    weight: 400,
                }
            },
            border: {
                display: false,
            },
        },
           
    } 
   
};

if (studioSet !== 'all') {
    barChartOptions.onHover = function(event, elements) {
        if (elements.length > 0) {
            ctx.canvas.style.cursor = 'pointer';
        } else {
            ctx.canvas.style.cursor = 'default';
        }
    };
    barChartOptions.onClick = function(evt, elements) {
        if (elements.length > 0) {
            ctx.canvas.style.cursor = 'pointer';
            var index = elements[0].index;
            var label = {!! json_encode($labels) !!}[index];
            var formId = {!! json_encode($formIds) !!}[index];
            var studioId = {!! json_encode($studioIds) !!}[index];
           
            var redirectPath = `{{ route('form.formdata', ['studioId' => 'base64_studioId', 'formId' => 'base64_formId']) }}`
                .replace('base64_studioId', encodeURIComponent(btoa(studioId)))
                .replace('base64_formId', encodeURIComponent(btoa(formId)));
            window.location.href = redirectPath;
        }
    };
     
}

var barChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: {!! json_encode($outputArray) !!},
        datasets: [{    
            label: 'completed',
            data: {!! json_encode($counts) !!},
            backgroundColor: function(context) {
               // return context.raw === 0 ? '#444444' : '#EA545F';
                return context.raw === 0 ? '#ed0000' : '#EA545F';
            },
            hoverBackgroundColor: function(context) {
                var value = context.dataset.data[context.dataIndex];
                return value === 0 || value === '' ? 'blue' : '#B21C27'
            },
            barThickness: barThickness
        }],
        borderWidth: 0
    },
    options: barChartOptions
});

// Function to remove `in-range` class on hover - 86cwbf0jw
function removeInRangeOnHover() {
    setTimeout(function() {
        // Attach hover event to elements with class 'off'
        $('.drp-calendar').on('mouseenter', '.available', function() {
            $('.drp-calendar .in-range').each(function() {
                if ($(this).hasClass('off')) {
                   $(this).removeClass('in-range');
                   $(this).removeClass('active');
                }
            });
            $('.drp-calendar .off').each(function() {
                if ($(this).hasClass('off')) {
                   $(this).removeClass('in-range');
                   $(this).removeClass('active');
                   $(this).removeClass('available');
                }
            });
        });
    }, 100); // Adjust timeout if necessary
}

    $(function() {
        $('input[name="datefilter"]').daterangepicker({
            autoUpdateInput: false,
            locale: {
                cancelLabel: 'Clear'
            }
        });
        $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format(
                'MM/DD/YYYY'));
        });
        $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });
    });
    $(function() {
    var start = moment().startOf('week').add(1, 'day');
    var end = moment().endOf('week').add(1, 'day');
    var label = 'This Week';

    function cb(start, end, label) {
        var elem = $("<div>" + label + "</div>");
        var p = elem.find("p");
            p.remove();
    $('#range').val(elem[0].innerHTML);
        @if (request()->get('date')) 
            $('#reportrange').val('{{ request()->get('date')  }}');
        @else
            $('#reportrange').val(moment().startOf('week').add(1,'day').format('DD MMM YYYY') + ' - ' + moment().endOf('week').add(1,'day').format('DD MMM YYYY'));
        @endif
        
    }
var today = moment().startOf('day').format('DD MMM');//86cwbf0jw-dashboard-calendar-fixes
var quarter = moment().quarter();
var thisWeek = moment().startOf('week').add(1,'day').format('DD MMM'); 
var thisYear = moment().startOf('year').format('YYYY');
var lastWeek = moment().startOf('week').subtract(6,'days').format('DD MMM'); 
var thisMonth = moment().startOf('month').format('MMM YYYY'); 
var lastMonth = moment().subtract(1, 'month').startOf('month').format('MMM YYYY'); 
var lastYear = moment().subtract(1, 'year').startOf('year').format('YYYY'); 
var thisQuater = moment().quarter(quarter).startOf('quarter').format('DD MMM')+ '-' + moment().quarter(quarter).endOf('quarter').format('DD MMM YYYY'); 
var lastQuater = moment().subtract(1, 'quarter').startOf('quarter').format('DD MMM')+ '-' + moment().subtract(1, 'quarter').endOf('quarter').format('DD MMM YYYY'); 

$('#reportrange').daterangepicker({
    locale: {
        format: 'DD MMM YYYY',
        container: $(this).closest('form'),
    },
    startDate: start,
    endDate: end,
    ranges: {
        ["Today <p class ='dateLabel'> "+ today+"</p>"]: [moment().startOf('day'), moment().endOf('day')],//86cwbf0jw-dashboard-calendar-fixes
        ["This Week <p class ='dateLabel'> "+ thisWeek+"</p>"]: [moment().startOf('week').add(1,'day'), moment().endOf('week').add(1,'day')],
        ["This Month <p class ='dateLabel'> "+ thisMonth+"</p>"]: [moment().startOf('month'), moment().endOf('month')],
        ["This Year <p class ='dateLabel'> "+ thisYear+"</p>"]: [moment().startOf('year'), moment().endOf('year')],
        ["This Quarter <p class ='dateLabel'> "+ thisQuater+"</p>"]: [moment().quarter(quarter).startOf('quarter'),moment().quarter(quarter).endOf('quarter')],
        ["Last Week <p class ='dateLabel'> "+ lastWeek+"</p>"]: [moment().startOf('week').subtract(6,'days'), moment().endOf('week').subtract(6, 'days')],
        ["Last Month <p class ='dateLabel'> "+ lastMonth+"</p>"]: [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
        ["Last Quarter <p class ='dateLabel'> "+ lastQuater+"</p>"]: [moment().subtract(1, 'quarter').startOf('quarter'), moment().subtract(1, 'quarter').endOf('quarter')],
        ["Last Year <p class ='dateLabel'> "+ lastYear+"</p>"]: [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')]
    }
}, cb);
cb(start, end, label);
});

// Apply the hover logic after Date Range Picker is initialized - 86cwbf0jw
$('#reportrange').on('show.daterangepicker', function() {
    removeInRangeOnHover();
});
removeInRangeOnHover();
$('#reportrange').on('show.daterangepicker', function(ev, picker) {
    $('.list-filtering').append($('.daterangepicker'));
});

$('#reportrange').on('apply.daterangepicker', function(ev, picker) {
    $('#dateFilterForm').submit();
});

$('#reportrange').click(function() {
    $('.ranges ul li').removeClass('active');
    var  selectedRange = '{{request()->get('range') }}';
    if (selectedRange == "") {
        selectedRange = 'Today';
    }
    $('.ranges ul li').each(function(i, obj) {
        var ths = $(this);
        var range_key = $(this).attr('data-range-key');
        if(range_key.indexOf(selectedRange) != -1) {
            $(this).addClass('active');
        }
    });
});

$(document).on("click","li[data-range-key='Custom Range']", function() {
    $('.ranges ul li').removeClass('active');
    $(this).addClass('active');
});
    

$(document).ready(function() {
    var canvas = document.getElementById("barChart");
    //canvas.width = 1200;
    //canvas.height = 600;
   // canvas.style.width = "1200px";
    //canvas.style.height = "300px";
        $('.ranges ul li').removeClass('active');
        var  selectedRange = '{{request()->get('range') }}';
        if (selectedRange == "") {
            selectedRange = 'Today';
        }
        $('.ranges ul li').each(function(i, obj) {
            var range_key = $(this).attr('data-range-key');
            if(range_key.indexOf(selectedRange) != -1) {
                $(this).addClass('active');
                if (range_key == 'Custom range') {
                    $(this).trigger('click');
                }
            }
        });

        @if (request()->get('range'))
            if (selectedRange == "Custom Range") {
                var dateRange = $('#reportdate').val();
                var dateParts = dateRange.split(" - ");
                var startDate = dateParts[0];
                var endDate = dateParts[1];
                var startDate = moment(startDate, "DD MMM YYYY").format("DD MMM YYYY");
                var endDate = moment(endDate, "DD MMM YYYY").format("DD MMM YYYY");
                $("#reportrange").data("daterangepicker").setStartDate(startDate);
                $("#reportrange").data("daterangepicker").setEndDate(endDate);
            }
        @endif

        
});
$(document).on("click", ".dateLabel", function() {
    $(this).parent().trigger('click');
});

$(document).on("click", "body", function() {
    @if (request()->get('date')) 
        $('#reportrange').val($('#reportdate').val())
    @endif
});
</script>
<!-- <script src="{{ asset('js/chart/Chart.min.js')}}"></script> -->
<!-- <script src="http://www.chartjs.org/ajax/libs/Chart.js/4.4.1/chart.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>
<script>
    Chart.defaults.global.defaultFontFamily = "Lato";
    var backgroundColors = Array.from({length: {!! count($counts) !!}}, () => "#EA545F");
    var counts = {!! json_encode($counts) !!};
    var outputArray = {!! json_encode($labels) !!};
    var ctxh = document.getElementById("horizontalBarChartCanvas").getContext('2d');
    var  horizontalBarChartOptions = {
        plugins: {
                legend: false,
                tooltip: {
                    xAlign:'bottom',
                    backgroundColor: 'transparent',
                    borderColor: '#EA545F', // Border color
                    borderWidth: 1, // Border width
                    displayColors: false,
                    callbacks: {
                        label: function(context) {
                          
                            var labelIndex = context.dataIndex;
                            var label = {!! json_encode($labels) !!}[labelIndex];
                            var value = context.parsed.x + ' Completed';
                            var multistringText = [value];
                            multistringText.push(label);
                            
                            return multistringText;
                        },
                        labelTextColor: (context) => {
                            return '#000000';
                        },
                        title: function () {
                            return '';
                        },
                    }
                    
                }
        },
                scales: {   
                    xAxes: [{
                        position: 'top',
                        gridLines: {
                            display: true,
                            drawTicks: false,   
                            drawBorder: false,
                            display: true
                        },
                        ticks: {
                            beginAtZero: true,
                            fontColor: '#BBBBBB',
                            fontFamily: 'Lato',
                            fontStyle: 400,
                            fontSize: 12,
                            stepSize:10,
                            display: true, 
                        }   
                    }],
                    yAxes: [{
                        // position: 'top',
                         barPercentage: 1,
                         display: true,
                        // min: 0,
                        // max: 20,
                        gridLines: {
                            display: false,
                            drawTicks: true,
                            drawOnChartArea: false
                        },
                        ticks: {
                            // beginAtZero: true,
                            // stepSize: 10,
                            fontColor: '#222222',
                            fontFamily: 'Lato',
                            fontSize: 10,
                            fontStyle: 700,  
                            callback: function(value, index, values) {
                                var labels = {!! json_encode($labels) !!};
                                var labelsLength = labels.length;
                                if (labels[index].length > 18) {
                                    return labels[index].substring(0, 10) + '..';
                                } else {
                                    return labels[index];
                                }
                            }      
                        }
                    }],
                }
    };
    if (studioSet !== 'all') {
        horizontalBarChartOptions.onClick = function(evt, elements) {
            var activePoints = horizontalBarChart.getElementAtEvent(evt);
    if (activePoints.length > 0) {
            var clickedElementIndex = activePoints[0]._index;
            var formId = {!! json_encode($formIds) !!}[clickedElementIndex];
            var studioId = {!! json_encode($studioIds) !!}[clickedElementIndex];
            var redirectPath = `{{ route('form.formdata', ['studioId' => 'base64_studioId', 'formId' => 'base64_formId']) }}`
                .replace('base64_studioId', encodeURIComponent(btoa(studioId)))
                .replace('base64_formId', encodeURIComponent(btoa(formId)));
            window.location.href = redirectPath;
            }
        
        
    };
}

var horizontalBarChart = new Chart(ctxh, {      // mobile view graph
    type: 'horizontalBar',
    data: {
        labels: outputArray,
        datasets: [{
            label: 'completed',
            data: counts,
            backgroundColor: backgroundColors, 
            borderWidth: 2,          
           
        }]
    },
    options: horizontalBarChartOptions
});
</script>

<style>
    /* Custom CSS for positioning the datepicker */
    .datepicker-container {
        position: absolute;
        right: 0;
        top: 0;
    }

    /* Adjusting z-index to ensure datepicker is visible */
    .datepicker {
        z-index: 1151 !important;
        /* Adjust as needed */
    }

    /* 86cwbf0jw-dashboard-calendar-fixes */
    .daterangepicker td.off,
    .daterangepicker td.off.in-range,
    .daterangepicker td.off.start-date,
    .daterangepicker td.off.end-date {
        /* cursor: not-allowed;
        display: none !important; */
        /* background-color: #d9534f !important;
        color: #fff !important; */
        cursor: not-allowed !important;
    }

    /* 86cwbf0jw-dashboard-calendar-fixes */
    body .daterangepicker td.in-range {
        background-color: #ffdbdd !important;
    }
</style>