@extends('layouts.app')
@section('content')
<style>
#calendar {
    max-width: 100%;
    margin: 0 auto;
}
.modal-footer .btn {
    min-width: 100px;
}
/* Calendar Container */
#calendar {
  max-width: 900px;
  margin: 0 auto;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #fff;
  border-radius: 12px;
  padding: 15px;
}

/* Modal tweaks */
.modal-content {
  background-color: #fefefe;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
/* 
.modal-header h5 {
  font-weight: 600;
  font-size: 1.5rem;
  color: #222;
} */

.form-label {
  font-weight: 600;
  color: #444;
}

.form-control-lg {
  font-size: 1.1rem;
  padding: 0.7rem 1.2rem;
  border: 1.8px solid #ddd;
  transition: border-color 0.3s ease;
}

.form-control-lg:focus {
  border-color: #4e73df;
  box-shadow: 0 0 5px rgba(78, 115, 223, 0.5);
  outline: none;
}

/* Buttons */
.btn-primary {
  background: linear-gradient(45deg, #4e73df, #224abe);
  border: none;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(78, 115, 223, 0.4);
  transition: background 0.3s ease;
}

.btn-primary:hover {
  background: linear-gradient(45deg, #224abe, #4e73df);
}

.btn-outline-secondary {
  border-color: #bbb;
  color: #555;
  font-weight: 600;
}

.btn-outline-secondary:hover {
  background-color: #f0f0f0;
  color: #444;
  border-color: #999;
}
</style>
<div class="app sidebar-mini">
    <!-- Page -->
    <div class="page">
        <div class="page-main">
            <!-- App-Content -->
            <div class="app-content main-content">
                <div class="side-app">
                    <!--app header-->
                    @include('layouts.appheader')
                    <!--/app header-->
                    <div class="containersection">
                        <!--Page header-->
                        <div class="page-header">
                            <div class="page-leftheader">
                            </div>
                            <div class="flashmsgec">
                                @include('layouts.flashmsg')
                            </div>
                        </div>
                        <!--End Page header-->
                        <div class="card carddivision">
                            <div class="row">
                                <!-- Side Menu Bar Start -->
                                <div class="ringimaimenubar col-lg-1 col-md-1 col-sm-1 col-xs-1">
                                    @include('layouts.sidemenubar')
                                </div>
                                <!-- Side Menu Bar End -->
                                <!-- Main View Start -->
                                <div class="ringimaimain col-lg-11 col-md-11 col-sm-11 col-xs-11">
                                    <div class="row">
                                        <div class="carddashleft col-lg-3 col-md-12 col-sm-12 col-xs-12">
                                            <div class="card carddivision">
                                                <div class="card-header mb-4">
                                                    <div class="card-title">Overview</div>
                                                </div>
                                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                    <div class="row">
                                                        <div class="custdashsec col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                            <div class="card overflow-hidden">
                                                                <div class="card-body">
                                                                    <div class="row">
                                                                        <div class="col">
                                                                            <div class="dashtitle mb-2">Phone Numbers</div>
                                                                            <h1 class="dashcount mb-1">{{ $linked_phone_numbers }}</h1>
                                                                        </div>
                                                                        <div class="col col-auto">
                                                                            <div class="mx-auto chart-circle chart-circle-md chart-circle-primary mt-sm-0 mb-0 dashtopicon1" data-value="0.50" data-thickness="12" data-color="#9d4edd">
                                                                                <div class="mx-auto chart-circle-value text-center">
                                                                                    <span class="material-symbols-outlined">deskphone</span>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="custdashsec col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                            <div class="card overflow-hidden">
                                                                <div class="card-body">
                                                                    <div class="row">
                                                                        <div class="col">
                                                                            <div class="dashtitle mb-2">Call Logs</div>
                                                                            <h1 class="dashcount mb-1">{{ $totalCallLogs }}</h1>
                                                                        </div>
                                                                        <div class="col col-auto">
                                                                            <div class="mx-auto chart-circle chart-circle-md chart-circle-success mt-sm-0 mb-0 dashtopicon2" data-value="0.50" data-thickness="12" data-color="#3b99db">
                                                                                <div class="mx-auto chart-circle-value text-center">
                                                                                    <span class="material-symbols-outlined">call_log</span>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="custdashsec col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                            <div class="card overflow-hidden">
                                                                <div class="card-body">
                                                                    <div class="row">
                                                                        <div class="col">
                                                                            <div class="dashtitle mb-2">Call Queues</div>
                                                                            <h1 class="dashcount mb-1">{{ $totalCallQueue }}</h1>
                                                                        </div>
                                                                        <div class="col col-auto">
                                                                            <div class="mx-auto chart-circle chart-circle-md chart-circle-success mt-sm-0 mb-0 dashtopicon3" data-value="0.50" data-thickness="12" data-color="#f57808">
                                                                                <div class="mx-auto chart-circle-value text-center">
                                                                                    <span class="material-symbols-outlined">low_priority</span>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="carddashright col-lg-9 col-md-12 col-sm-12 col-xs-12">
                                            <div class="card carddivision">
                                                <div class="card-header mb-4">
                                                    <div class="card-title">Call Count by Number @if($firstDate != null && $lastDate != null) [ {{$firstDate}} To {{$lastDate}} ] @endif</div>
                                                </div>
                                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                    <div class="filterformdiv fformdiv col-lg-8 offset-lg-4 col-md-12 col-sm-12 col-xs-12 mb-0">
                                                        <div class="form-group">
                                                            <label for="numberFilter" class="form-label">Filter by Number:</label>
                                                            <select id="numberFilter" class="form-control select2 select2a" multiple>
                                                                @foreach($chartData as $number => $durations)
                                                                    <option value="{{ $number }}">{{ $number }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>

                                                    <canvas id="callChart" height="120"></canvas>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Main View End -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End app-content-->
        </div>
        <!--Footer-->
        @include('layouts.appfooter')
        <!-- End Footer-->
    </div>
    <!-- End Page -->
    <!-- Back to top -->
    <a href="#top" id="back-to-top"><i class="fe fe-chevrons-up"></i></a>

</div>
@include('includes.jslinks_common')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    $('.dashtopicon1').each(function() {
        $(this).circleProgress({
            value: $(this).data('value'),
            size: 80,
            thickness: $(this).data('thickness'),
            fill: {
                color: $(this).data('color')
            },
            emptyFill: "#dcb0ff"
        });
    });
    $('.dashtopicon2').each(function() {
        $(this).circleProgress({
            value: $(this).data('value'),
            size: 80,
            thickness: $(this).data('thickness'),
            fill: {
                color: $(this).data('color')
            },
            emptyFill: "#a1d8ff"
        });
    });
        $('.dashtopicon3').each(function() {
        $(this).circleProgress({
            value: $(this).data('value'),
            size: 80,
            thickness: $(this).data('thickness'),
            fill: {
                color: $(this).data('color')
            },
            emptyFill: "#ffba4d"
        });
    });
</script>
<script>
    // Select 2 script
    $(document).ready(function () {
        function toggleFocusClass($select) {
            const selectedVal = $select.val();
            const $selection = $select.next('.select2-container').find('.select2-selection');
            
            if (selectedVal && selectedVal.length > 0) {
                $selection.addClass('selectfocus');
            } else {
                $selection.removeClass('selectfocus');
            }
        }
        $(document).on('change','.select2a',function(){
            toggleFocusClass($(this));
        });
        // Initialize each select2 individually
        $('.select2a').each(function() {
            toggleFocusClass($(this));
        });
    });
</script>
<script>
    $(document).ready(function () {
        $('.select2a').select2({
            closeOnSelect: false,
            allowClear: true,
            placeholder: "Select numbers...",
            templateResult: function(option) {
                if (!option.id) return option.text;
                var selected = $('#numberFilter').val() || [];
                var isChecked = selected.indexOf(option.id) > -1 ? 'checked' : '';
                return $('<span><input type="checkbox" ' + isChecked + ' style="margin-right:5px;" /> ' + option.text + '</span>');
            }
        });

        // Add Search Box and Select All when dropdown opens
        $('#numberFilter').on('select2:open', function() {
            setTimeout(function() {
                if (!$('.select-all-option').length) {
                    var totalOptions = $('#numberFilter option').length;
                    var selectedOptions = ($('#numberFilter').val() || []).length;
                    var isChecked = totalOptions === selectedOptions ? 'checked' : '';
                    
                    $('.select2-results__options').prepend(
                        '<li class="select2-results__option search-box-option" style="padding:8px;border-bottom:1px solid #ddd;">' +
                        '<input type="text" id="search-box" placeholder="Search numbers..." /></li>' +
                        '<li class="select2-results__option select-all-option" style="border-bottom:1px solid #ddd;font-weight:bold;">' +
                        '<span><input type="checkbox" id="select-all-checkbox" ' + isChecked + ' style="margin-right:5px;" /> Select All</span></li>'
                    );
                }
            }, 10);
        });

        // Handle search functionality
        $(document).on('input', '#search-box', function(e) {
            e.stopPropagation();
            var searchTerm = $(this).val().toLowerCase();
            $('.select2-results__option:not(.search-box-option):not(.select-all-option)').each(function() {
                var text = $(this).text().toLowerCase();
                if (text.includes(searchTerm)) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        });

        // Prevent search box from closing dropdown
        $(document).on('click', '.search-box-option', function(e) {
            e.stopPropagation();
        });

        // Add Select All when dropdown opens
        // $('#numberFilter').on('select2:open', function() {
        //     setTimeout(function() {
        //         if (!$('.select-all-option').length) {
        //             var totalOptions = $('#numberFilter option').length;
        //             var selectedOptions = ($('#numberFilter').val() || []).length;
        //             var isChecked = totalOptions === selectedOptions ? 'checked' : '';
                    
        //             $('.select2-results__options').prepend(
        //                 '<li class="select2-results__option select-all-option" style="border-bottom:1px solid #ddd;font-weight:bold;">' +
        //                 '<span><input type="checkbox" id="select-all-checkbox" ' + isChecked + ' style="margin-right:5px;" /> Select All</span></li>'
        //             );
        //         }
        //     }, 10);
        // });

        // Handle option clicks
        $(document).on('click', '.select2-results__option:not(.select-all-option)', function(e) {
            var $checkbox = $(this).find('input[type="checkbox"]');
            var isChecked = !$checkbox.prop('checked');
            $checkbox.prop('checked', isChecked);
            
            var optionData = $(this).data('data');
            if (optionData) {
                var value = optionData.id;
                var $select = $('#numberFilter');
                var selected = $select.val() || [];
                
                if (isChecked) {
                    if (selected.indexOf(value) === -1) selected.push(value);
                } else {
                    selected = selected.filter(function(item) { return item !== value; });
                }
                
                $select.val(selected).trigger('change');
            }
            e.stopPropagation();
        });

        // Handle Select All
        $(document).on('click', '.select-all-option', function(e) {
            var $checkbox = $(this).find('#select-all-checkbox');
            var isChecked = !$checkbox.prop('checked');
            $checkbox.prop('checked', isChecked);
            
            var $select = $('#numberFilter');
            if (isChecked) {
                var allValues = [];
                $select.find('option').each(function() {
                    allValues.push($(this).val());
                });
                $select.val(allValues).trigger('change');
            } else {
                $select.val([]).trigger('change');
            }
            
            $('.select2-results__option:not(.select-all-option) input[type="checkbox"]').prop('checked', isChecked);
            e.stopPropagation();
        });

        // Handle direct checkbox clicks
        $(document).on('click', '.select2-results__option input[type="checkbox"]', function(e) {
            e.stopPropagation();
            
            var $checkbox = $(this);
            var isChecked = $checkbox.prop('checked');
            var $option = $checkbox.closest('.select2-results__option');
            var optionData = $option.data('data');
            
            if (optionData) {
                var value = optionData.id;
                var $select = $('#numberFilter');
                var selected = $select.val() || [];
                
                if (isChecked) {
                    if (selected.indexOf(value) === -1) selected.push(value);
                } else {
                    selected = selected.filter(function(item) { return item !== value; });
                }
                
                $select.val(selected).trigger('change');
            }
        });

        // Handle direct Select All checkbox clicks
        $(document).on('click', '#select-all-checkbox', function(e) {
            e.stopPropagation();
            
            var $checkbox = $(this);
            var isChecked = $checkbox.prop('checked');
            var $select = $('#numberFilter');
            
            if (isChecked) {
                var allValues = [];
                $select.find('option').each(function() {
                    allValues.push($(this).val());
                });
                $select.val(allValues).trigger('change');
            } else {
                $select.val([]).trigger('change');
            }
            
            $('.select2-results__option:not(.select-all-option) input[type="checkbox"]').prop('checked', isChecked);
        });

        // Update checkboxes when selection changes
        $('#numberFilter').on('change', function() {
            var selected = $(this).val() || [];
            setTimeout(function() {
                $('.select2-results__option input[type="checkbox"]').each(function() {
                    var $option = $(this).closest('.select2-results__option');
                    var optionData = $option.data('data');
                    if (optionData) {
                        $(this).prop('checked', selected.indexOf(optionData.id) > -1);
                    }
                });
                
                var totalOptions = $('#numberFilter option').length;
                $('#select-all-checkbox').prop('checked', selected.length === totalOptions);
            }, 10);
        });

        function toggleFocusClass($select) {
            const selectedVal = $select.val();
            const $selection = $select.next('.select2-container').find('.select2-selection');
            
            if (selectedVal && selectedVal.length > 0) {
                $selection.addClass('selectfocus');
            } else {
                $selection.removeClass('selectfocus');
            }
        }

        $(document).on('change','.select2a',function(){
            toggleFocusClass($(this));
        });

        $('.select2a').each(function() {
            toggleFocusClass($(this));
        });

        $('.select2-search--inline .select2-search__field').prop('readonly', true);
    });
</script>
<script>
    // Chart colors
    function updateChartColors(theme) {
        const textColor = theme === 'dark' ? '#ffffff' : '#24242D';
        const gridColor = theme === 'dark' ? '#5b5e78' : '#f5f5f5';
        const borderColor = theme === 'dark' ? '#5b5e78' : '#cccccc';

        chart.options.plugins.title.color = textColor;
        chart.options.plugins.legend.labels.color = textColor;

        chart.options.scales.x.title.color = textColor;
        chart.options.scales.x.ticks.color = textColor;
        chart.options.scales.x.grid.color = gridColor;
        chart.options.scales.x.grid.borderColor = borderColor;

        chart.options.scales.y.title.color = textColor;
        chart.options.scales.y.ticks.color = textColor;
        chart.options.scales.y.grid.color = gridColor;
        chart.options.scales.y.grid.borderColor = borderColor;

        chart.update();
    }
    $(document).ready(function () {
        const savedChartTheme = localStorage.getItem('theme') || 'light';
        updateChartColors(savedChartTheme); // 👈 ADD THIS
        
        $('#light_mode,#moblight_mode').on('click', function () {
            updateChartColors('light');
        });

        $('#dark_mode,#mobdark_mode').on('click', function () {
            updateChartColors('dark');
        });
      
    });
    // Chart Script
    const months = @json($months);
    const rawChartData = @json($chartData);

    const colors = [
        'rgba(75, 192, 192, 0.6)',
        'rgba(255, 99, 132, 0.6)',
        'rgba(255, 206, 86, 0.6)',
        'rgba(54, 162, 235, 0.6)',
        'rgba(153, 102, 255, 0.6)',
        'rgba(255, 159, 64, 0.6)',
    ];

    const generateDatasets = (filterNumbers = []) => {
        let colorIndex = 0;
        const datasets = [];

        Object.entries(rawChartData).forEach(([number, counts]) => {
            if (filterNumbers.length === 0 || filterNumbers.includes(number)) {
                datasets.push({
                    label: number,
                    data: Object.values(counts),
                    backgroundColor: colors[colorIndex % colors.length],
                    borderColor: colors[colorIndex % colors.length].replace('0.6', '1'),
                    borderWidth: 1,
                    stack: 'call_stack',
                });
                colorIndex++;
            }
        });

        return datasets;
    };

    const ctx = document.getElementById('callChart').getContext('2d');
    const chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: months,
            datasets: generateDatasets() // Show all by default
        },
        options: {
            responsive: true,
            interaction: {
                mode: 'index',
                intersect: false
            },
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return `${context.dataset.label}: ${context.raw} calls`;
                        }
                    }
                },
                title: {
                    display: true,
                    text: 'Monthly Call Count',
                    font: {
                        family: 'BalooThambi2-Medium',
                        size: 16,
                        weight: 'normal'
                    },
                },
                legend: {
                    position: 'bottom',
                    labels: {
                        font: {
                            family: 'BalooThambi2-Regular',
                            size: 14,
                            weight: 'normal'
                        },
                    }
                }
            },
            scales: {
                x: {
                    stacked: true,
                    title: {
                        display: true,
                        text: 'Month',
                        font: {
                            family: 'BalooThambi2-Regular',
                            size: 16,
                            weight: 'normal'
                        },
                    },
                    ticks: {
                        font: {
                            family: 'BalooThambi2-Regular',
                            size: 12,
                            weight: 'normal'
                        },
                    }
                },
                y: {
                    stacked: true,
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Number of Calls',
                        font: {
                            family: 'BalooThambi2-Regular',
                            size: 16,
                            weight: 'normal'
                        },
                    },
                    ticks: {
                        font: {
                            family: 'BalooThambi2-Regular',
                            size: 12,
                            weight: 'normal'
                        },
                    }
                }
            }
        }
    });

    // Chart Filter Logic
    $('#numberFilter').on('change', function () {
        const selectedNumbers = $(this).val(); // array or null
        chart.data.datasets = generateDatasets(selectedNumbers ?? []);
        chart.update();
    });
</script>
<script>
    // Add CSS to prevent highlighting of search-box-option
    // $('<style>.search-box-option.select2-results__option--highlighted { background-color: transparent !important; }</style>').appendTo('head');
    $(document).ready(function() {
        let observer;
        
        $(document).on('select2:open', function() {
            
            // Remove initial highlight
            setTimeout(() => {
                $('.select2-results__option').removeClass('select2-results__option--highlighted');
                $('.search-box-option').removeClass('select2-results__option--highlighted');
            }, 10);
            // Start observing for class changes
            const resultsContainer = document.querySelector('.select2-results');
            if (resultsContainer && !observer) {
                observer = new MutationObserver(function(mutations) {
                    mutations.forEach(function(mutation) {
                        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                            const target = mutation.target;
                            if (target.classList.contains('select2-results__option--highlighted') && 
                                target.classList.contains('search-box-option')) {
                                target.classList.remove('select2-results__option--highlighted');
                            }
                        }
                    });
                });
                
                observer.observe(resultsContainer, {
                    attributes: true,
                    attributeFilter: ['class'],
                    subtree: true
                });
            }
        });
        
        $(document).on('select2:close', function() {
            if (observer) {
                observer.disconnect();
                observer = null;
            }
        });
        
        $(document).on('mouseenter', '.select2-results__option', function() {
            $('.select2-results__option').removeClass('select2-results__option--highlighted');
                if (!$(this).hasClass('search-box-option')) {
                    $(this).addClass('select2-results__option--highlighted');
                }
        });
        
        $(document).on('mouseleave', '.select2-results__option', function() {
            $(this).removeClass('select2-results__option--highlighted');
        });
    });
</script>
@endsection