@extends('layouts.master')
@section('contain')
    <div class="container-fluid">
        <div class="row page-titles">
            <div class="col-md-6 col-sm-12 align-self-center">
                <h3 class="text-themecolor">Poll Compare</h3>
            </div>
            <div class="col-md-6 col-sm-12 align-self-center text-md-end text-sm-start">
                <div class="d-flex justify-content-end align-items-center flex-wrap">
                    <ol class="breadcrumb justify-content-end mb-0">
                        <li><a class="breadcrumb-item active" href="{{ url('/') }}">Home</a></li>
                        <li><a class="breadcrumb-item active" href="javascript:history.go(-1);">Back</a></li>
                    </ol>
                </div>
            </div>
        </div>

        <style>
            .custom-select {
                height: 6vh;
                width: 100%;
                padding: 6px 12px;
                font-size: 14px;
                line-height: 1.5;
                border-radius: 7px;
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                background-color: #f8f6f6;
                background-image: url('data:image/svg+xml,<svg fill="%23000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><path d="M4 5l3-3H1z"/></svg>');
                background-repeat: no-repeat;
                background-position: right 8px center;
                background-size: 8px 8px;
            }

            .fixed-container {
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: nowrap;
            }

            .selector-group {
                width: 20%;
                /* Reduced width of selector groups */
            }

            .chart-container {
                width: 60%;
                /* Increased width of the chart */
                padding-left: 5%;
                padding-right: 2%;
            }

            @media (max-width: 767px) {
                .fixed-container {
                    flex-direction: column;
                    align-items: stretch;
                }

                .selector-group,
                .chart-container {
                    width: 100%;
                    margin-bottom: 20px;
                }
            }

            .select2-container--bootstrap {
                display: block;
                width: auto !important;
            }
        </style>

        <div class="card">
            <div class="card-body">
                <div class="fixed-container">
                    <!-- Left Selectors -->
                    <div class="selector-group">
                        <div class="mb-3">
                            <select class="custom-select js-example-basic-multiple" id="get-company-by-industry-1" multiple>
                                <option value="">Select Industry</option>
                                @foreach ($Industries as $Industry)
                                    <option value="{{ $Industry->id }}">{{ $Industry->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <select class="custom-select" id="get-compare-data-1">
                                <option value="">Select Company</option>
                                @foreach ($Companies as $company)
                                    <option value="{{ $company->id }}">{{ $company->title }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <select class="custom-select" id="get-department-data-1">
                                <option value="">Select Department</option>
                            </select>
                        </div>
                    </div>

                    <!-- Chart -->
                    <div class="chart-container">
                        <canvas id="barChart"></canvas>
                    </div>

                    <!-- Right Selectors -->
                    <div class="selector-group">
                        <div class="mb-3">
                            <select class="custom-select" id="get-company-by-industry" multiple>
                                <option value="">Select Industry</option>
                                @foreach ($Industries as $Industry)
                                    <option value="{{ $Industry->id }}">{{ $Industry->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <select class="custom-select" id="get-compare-data">
                                <option value="">Select Company</option>
                                @foreach ($Companies as $company)
                                    <option value="{{ $company->id }}">{{ $company->title }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <select class="custom-select" id="get-department-data">
                                <option value="">Select Department</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script>
        $(document).ready(function() {
            // select 2 start
            $('#get-company-by-industry').select2({
                placeholder: "Select Industry",
                theme: 'bootstrap',
                closeOnSelect: true,
            });
            $('.js-example-basic-multiple').select2({
                placeholder: "Select Industry",
                theme: 'bootstrap',
                closeOnSelect: true,
            });
            // select 2 start end
            // get companies by industry
            $('#get-company-by-industry-1').on('change', function() {
                var industry_ids = $(this).val();
                console.log(industry_ids);
                // alert(industry_ids);
                if (industry_ids.length != 0) {
                    $.ajax({
                        url: '{{ route('getcompaiesby.industry') }}',
                        method: 'get',
                        data: {
                            industry_ids: industry_ids,
                            poll_id: {{ $polls->id }} // Outputting PHP variable directly
                        },
                        success: function(response) {
                            // alert(JSON.stringify(response));
                            // Clear existing options
                            $('#get-compare-data-1').empty();
                            // Append new options based on response data
                            campanyData = '<option value="">Select Company</option>';
                            $.each(response, function(index, company) {
                                campanyData += '<option value="' + company.id + '">' +
                                    company.title + '</option>';
                            });
                            $('#get-compare-data-1').append(campanyData);
                        },
                        error: function(xhr, status, error) {
                            console.error(xhr.responseText);
                        }
                    });
                } else {
                    // alert('ddd');
                    reloadCompanySelector1();
                }
            });
            $('#get-company-by-industry').on('change', function() {
                var industry_ids = $(this).val();
                console.log(industry_ids);
                // alert(industry_ids);
                if (industry_ids.length != 0) {
                    $.ajax({
                        url: '{{ route('getcompaiesby.industry') }}',
                        method: 'get',
                        data: {
                            industry_ids: industry_ids,
                            poll_id: {{ $polls->id }} // Outputting PHP variable directly
                        },
                        success: function(response) {
                            // alert(JSON.stringify(response));
                            // Clear existing options
                            $('#get-compare-data').empty();
                            // Append new options based on response data
                            campanyData = '<option value="">Select Company</option>';
                            $.each(response, function(index, company) {
                                campanyData += '<option value="' + company.id + '">' +
                                    company.title + '</option>';
                            });
                            $('#get-compare-data').append(campanyData);
                        },
                        error: function(xhr, status, error) {
                            console.error(xhr.responseText);
                        }
                    });
                } else {
                    // alert('ddd');
                    reloadCompanySelector();
                }
            });


            function reloadCompanySelector1() {
                var originalOptions = '';
                var companies = @json($Companies);
                originalOptions = '<option value="">Select Company</option>';
                $.each(companies, function(index, value) {
                    originalOptions += '<option value="' + value.id + '">' + value.title + '</option>';
                });
                $('#get-compare-data-1').html(originalOptions);
            }

            function reloadCompanySelector() {
                var originalOptions = '';
                var companies = @json($Companies);
                originalOptions = '<option value="">Select Company</option>';
                $.each(companies, function(index, value) {
                    originalOptions += '<option value="' + value.id + '">' + value.title + '</option>';
                });
                $('#get-compare-data').html(originalOptions);
            }


            // get companies by industry end
            // Event listener for dropdown change (Company 2)
            $('#get-compare-data').on('change', function() {
                var companyId = $(this).val();
                $.ajax({
                    url: '{{ route('getcompare.dataleft') }}',
                    method: 'get',
                    data: {
                        company_id: companyId,
                        poll_id: {{ $polls->id }}
                    },
                    success: function(response) {
                        // alert(JSON.stringify(response.departments));
                        $('#get-department-data').empty();
                        // Append new options based on response data
                        departmentData = '<option value="">Select Department</option>';
                        $.each(response.departments, function(index, departments) {
                            departmentData += '<option value="' + departments.id +
                                '">' + departments.name + '</option>';
                        });
                        $('#get-department-data').append(departmentData);
                        var newData = response.answers.map(answer => answer.react_counts_count);
                        var companyTitle = response.CompanyTitle;

                        // Update the data of the second dataset (Company 2) in the chart
                        myChart.data.datasets[1].data = newData;

                        // Update the label of the second dataset with the company title
                        myChart.data.datasets[1].label = companyTitle;

                        // Update the chart
                        myChart.update();

                        console.log(response);
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                    }
                });
            });

            // Event listener for dropdown change (Company 1)
            $('#get-compare-data-1').on('change', function() {
                var companyId = $(this).val();
                $.ajax({
                    url: '{{ route('getcompare.dataleft') }}',
                    method: 'GET',
                    data: {
                        company_id: companyId,
                        poll_id: '{{ $polls->id }}'
                    },
                    success: function(response) {
                        // alert(JSON.stringify(response.departments));
                        $('#get-department-data-1').empty();
                        // Append new options based on response data
                        departmentData = '<option value="">Select Department</option>';
                        $.each(response.departments, function(index, departments) {
                            departmentData += '<option value="' + departments.id +
                                '">' + departments.name + '</option>';
                        });
                        $('#get-department-data-1').append(departmentData);
                        var newData = response.answers.map(answer => answer.react_counts_count);
                        var companyTitle = response.CompanyTitle;

                        // Update the data of the first dataset (Company 1) in the chart
                        myChart.data.datasets[0].data = newData;

                        // Update the label of the first dataset with the company title
                        myChart.data.datasets[0].label = companyTitle;

                        // Update the chart
                        myChart.update();

                        console.log(response);
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                    }
                });
            });
            $('#get-department-data-1').on('change', function() {
                var departmentId = $(this).val();
                var companyId = $('#get-compare-data-1').val();
                $.ajax({
                    url: '{{ route('getcompare.dataleft.bydepartment') }}',
                    method: 'GET',
                    data: {
                        department_id: departmentId,
                        poll_id: '{{ $polls->id }}',
                        company_id: companyId
                    },
                    success: function(response) {
                        // alert(JSON.stringify(response));
                        var newData = response.answers.map(answer => answer.react_counts_count);
                        var companyTitle = response.CompanyTitle;
                        // Update the data of the first dataset (Company 1) in the chart
                        myChart.data.datasets[0].data = newData;
                        // Update the label of the first dataset with the company title
                        myChart.data.datasets[0].label = companyTitle;
                        // Update the chart
                        myChart.update();
                        console.log(response);
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                    }
                });
            });

            $('#get-department-data').on('change', function() {
                var departmentId = $(this).val();
                var companyId = $('#get-compare-data').val();
                $.ajax({
                    url: '{{ route('getcompare.dataleft.bydepartment') }}',
                    method: 'GET',
                    data: {
                        department_id: departmentId,
                        poll_id: '{{ $polls->id }}',
                        company_id: companyId
                    },
                    success: function(response) {
                        // alert(JSON.stringify(response));
                        var newData = response.answers.map(answer => answer.react_counts_count);
                        var companyTitle = response.CompanyTitle;
                        // Update the data of the first dataset (Company 1) in the chart
                        myChart.data.datasets[1].data = newData;
                        // Update the label of the first dataset with the company title
                        myChart.data.datasets[1].label = companyTitle;
                        // Update the chart
                        myChart.update();
                        console.log(response);
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                    }
                });
            });


            // Survey data (question and answers are the same for both companies)
            var surveyData = {
                question: "{{ $polls->question }}",
                answers: []
            };
            var company1Reactions = [];

            $.each(@json($polls->answers), function(index, answer) {
                surveyData.answers.push({
                    imageUrl: '{{ env('MEDIA_URL') }}' + answer.emoji, // Store the image URL
                    color: answer.color
                });
                company1Reactions.push(answer.react_counts_count);
            });

            // Create chart
            var ctx = document.getElementById('barChart').getContext('2d');

            // Calculate the maximum value from all datasets
            var maxDataValue = Math.max(
                ...company1Reactions,
                ...[] // Add more datasets if needed
            );

            var suggestedMax = maxDataValue + 1; // Add 2 to the maximum value

            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: surveyData.answers.map((answer, index) =>
                        `Answer ${index + 1}`), // Temporary label
                    datasets: [{
                            label: 'All Company 1', // Updated label
                            data: company1Reactions,
                            backgroundColor: surveyData.answers.map(answer => answer.color),
                            borderColor: surveyData.answers.map(answer => 'rgba(0, 0, 0, 0.3)'),
                            borderWidth: 2, // Thicker border
                            borderRadius: 8, // More rounded corners
                            shadowColor: 'rgba(0, 0, 0, 0.2)',
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        },
                        {
                            label: 'All Company 2', // Updated label
                            data: [], // Initially empty, will be filled by AJAX
                            backgroundColor: surveyData.answers.map(answer => answer.color),
                            borderColor: surveyData.answers.map(answer => 'rgba(0, 0, 0, 0.3)'),
                            borderWidth: 2, // Thicker border
                            borderRadius: 8, // More rounded corners
                            shadowColor: 'rgba(0, 0, 0, 0.2)',
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        }
                    ]
                },
                options: {
                    layout: {
                        padding: {
                            right: 20 // Add padding to the right to ensure border visibility
                        }
                    },
                    scales: {
                        x: {
                            ticks: {
                                callback: function(value, index) {
                                    return ''; // Return an empty string for labels
                                },
                                font: {
                                    size: 14, // Increase font size for readability
                                    family: 'Arial'
                                }
                            },
                            grid: {
                                display: false // Hide x-axis grid lines
                            }
                        },
                        y: {
                            beginAtZero: true,
                            suggestedMax: suggestedMax, // Set suggested max value
                            ticks: {
                                stepSize: Math.ceil(suggestedMax /
                                10), // Adjust step size based on suggestedMax
                                font: {
                                    size: 14, // Increase font size for readability
                                    family: 'Arial'
                                }
                            },
                            grid: {
                                color: 'rgba(0, 0, 0, 0.1)' // Light grid lines
                            }
                        }
                    },
                    plugins: {
                        title: {
                            display: true,
                            text: surveyData.question,
                            font: {
                                size: 20, // Increased font size
                                weight: 'bold',
                                color: 'black'
                            },
                            padding: {
                                top: 20,
                                bottom: 20
                            }
                        },
                        legend: {
                            display: false, // Display the legend
                            position: 'top',
                            labels: {
                                font: {
                                    size: 14, // Increase font size for readability
                                    family: 'Arial'
                                }
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(tooltipItem) {
                                    return `${tooltipItem.dataset.label}: ${tooltipItem.raw}`;
                                }
                            },
                            backgroundColor: 'rgba(0, 0, 0, 0.7)', // Dark background for tooltips
                            titleColor: '#fff',
                            bodyColor: '#fff',
                            borderColor: 'rgba(255, 255, 255, 0.3)',
                            borderWidth: 1
                        }
                    },

                },
                plugins: [{
                    afterDatasetsDraw: function(chart) {
                        var ctx = chart.ctx;
                        var yPosition = chart.chartArea.bottom; // Fixed position below the chart

                        chart.data.labels.forEach(function(label, index) {
                            var meta = chart.getDatasetMeta(0);
                            var x = meta.data[index].x;

                            // Create and load the image
                            var img = new Image();
                            img.src = surveyData.answers[index].imageUrl;

                            img.onload = function() {
                                var imgWidth = 30; // Set the width of the image
                                var imgHeight = 30; // Set the height of the image
                                ctx.drawImage(img, x - imgWidth / 2, yPosition,
                                    imgWidth, imgHeight);
                            };
                        });
                    }
                }]
            });
        });
    </script>
@endsection