@extends('layouts.app')
@section('content')
<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.admin.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.admin.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="dashsec 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">{{ $totalPhoneNumbers }}</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="dashsec 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="dashsec col-lg-12 col-md-12 col-sm-12">
                                                            <div class="card overflow-hidden">
                                                                <div class="card-body">
                                                                    <div class="row">
                                                                        <div class="col">
                                                                            <div class="dashtitle mb-2">Active Customers</div>
                                                                            <h1 class="dashcount mb-1">{{ $totalActiveCustomers }}</h1>
                                                                        </div>
                                                                        <div class="col col-auto">
                                                                            <div class="mx-auto chart-circle chart-circle-md chart-circle-secondary mt-sm-0 mb-0 dashtopicon3" data-value="0.50" data-thickness="12" data-color="#2dce89">
                                                                                <div class="mx-auto chart-circle-value text-center">
                                                                                    <span class="material-symbols-outlined">group_add</span>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="dashsec col-lg-12 col-md-12 col-sm-12">
                                                            <div class="card overflow-hidden">
                                                                <div class="card-body">
                                                                    <div class="row">
                                                                        <div class="col">
                                                                            <div class="dashtitle mb-2">Inactive Customers</div>
                                                                            <h1 class="dashcount mb-1">{{ $totalInactiveCustomers }}</h1>
                                                                        </div>
                                                                        <div class="col col-auto">
                                                                            <div class="mx-auto chart-circle chart-circle-md chart-circle-secondary mt-sm-0 mb-0 dashtopicon4" data-value="0.50" data-thickness="12" data-color="#f7346b">
                                                                                <div class="mx-auto chart-circle-value text-center">
                                                                                    <span class="material-symbols-outlined">group_remove</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 Durations 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="mb-3">
                                                        <strong>Filter by Number:</strong><br>
                                                        @foreach($chartData as $number => $durations)
                                                            <label class="me-3">
                                                                <input type="checkbox" class="number-filter" value="{{ $number }}" checked>
                                                                {{ $number }}
                                                            </label>
                                                        @endforeach
                                                    </div> -->
                                                    <div class="filterformdiv fformdiv col-lg-6 offset-lg-6 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 class="container mt-4">
                                            <h4>Estimated Max Concurrency</h4>

                                            <div class="mb-3">
                                                <strong>Total Concurrency Limit:</strong> {{ $totalConcurrency }}
                                            </div>

                                            <canvas id="allCustomersChart" height="120"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </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 src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.0"></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: "#91e2bf"
        });
    });
    $('.dashtopicon4').each(function() {
        $(this).circleProgress({
            value: $(this).data('value'),
            size: 80,
            thickness: $(this).data('thickness'),
            fill: {
                color: $(this).data('color')
            },
            emptyFill: "#ffa9c1"
        });
    });
</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(45, 206, 137, 0.6)',
        'rgba(157, 78, 221, 0.6)',
        'rgba(59, 153, 219, 0.6)',
        'rgba(247, 52, 107, 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, durations]) => {
            if (filterNumbers.length === 0 || filterNumbers.includes(number)) {
                datasets.push({
                    label: number,
                    data: Object.values(durations),
                    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()
        },
        options: {
            responsive: true,
            interaction: {
                mode: 'index',
                intersect: false
            },
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const seconds = context.raw;
                            const hours = Math.floor(seconds / 3600);
                            const minutes = Math.floor((seconds % 3600) / 60);
                            const sec = seconds % 60;
                            return `${context.dataset.label}: ${hours}h ${minutes}m ${sec}s`;
                        }
                    }
                },
                title: {
                    display: true,
                    text: 'Monthly Call Durations',
                    font: {
                        family: 'R-Flex',
                        size: 16,
                        weight: 'normal'
                    },
                },
                legend: {
                    position: 'bottom',
                    labels: {
                        font: {
                            family: 'R-Flex Regular',
                            size: 14,
                            weight: 'normal'
                        },
                    }
                }
            },
            scales: {
                x: {
                    stacked: true,
                    title: {
                        display: true,
                        text: 'Month',
                        font: {
                            family: 'R-Flex Regular',
                            size: 16,
                            weight: 'normal'
                        },
                    },
                    ticks: {
                        font: {
                            family: 'R-Flex Regular',
                            size: 12,
                            weight: 'normal'
                        },
                    }
                },
                y: {
                    stacked: true,
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Duration (seconds)',
                        font: {
                            family: 'R-Flex Regular',
                            size: 16,
                            weight: 'normal'
                        },
                    },
                    ticks: {
                        font: {
                            family: 'R-Flex Regular',
                            size: 12,
                            weight: 'normal'
                        },
                    }
                }
            }
        }
    });
    // Chart Filter Logic
    $('#numberFilter').on('change', function () {
        const selectedNumbers = $(this).val() || [];
        chart.data.datasets = generateDatasets(selectedNumbers);
        chart.update();
    });
</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>
    const ctxx = document.getElementById('allCustomersChart').getContext('2d');

    const customerLabels = {!! json_encode($customers->map(fn($c) => "{$c->first_name} {$c->last_name} ({$c->concurrency_limit})")) !!};
    const concurrencyLimits = {!! json_encode($customers->pluck('concurrency_limit')) !!};

    const chartt = new Chart(ctxx, {
        type: 'line',
        data: {
            labels: customerLabels,
            datasets: [{
                label: 'Concurrency Limit',
                data: concurrencyLimits,
                borderColor: 'rgba(54, 162, 235, 1)',
                backgroundColor: 'rgba(54, 162, 235, 0.3)',
                tension: 0.2,
                pointRadius: 0,
                fill: true
            }]
        },
        options: {
            responsive: true,
            plugins: {
                zoom: {
                    pan: {
                        enabled: true,
                        mode: 'x',
                    },
                    zoom: {
                        wheel: {
                            enabled: true,
                        },
                        pinch: {
                            enabled: true
                        },
                        mode: 'x',
                    }
                },
                title: {
                    display: true,
                    text: 'Concurrency Limit for All Customers'
                },
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Concurrency Limit'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Customer'
                    }
                }
            }
        }
    });
</script>
@endsection