@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-3">
                                                    <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="#03b3e2">
                                                                                <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 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 dashtopicon5" 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 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">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 col-xs-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 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">Estimated Max Concurrency</div>
                                                                            <h1 class="dashcount mb-1">{{ $totalConcurrency }}</h1>
                                                                        </div>
                                                                        <div class="col col-auto">
                                                                            <div class="mx-auto chart-circle chart-circle-md chart-circle-success mt-sm-0 mb-0 dashtopicon6" data-value="0.50" data-thickness="12" data-color="#e7ba1f">
                                                                                <div class="mx-auto chart-circle-value text-center">
                                                                                    <span class="material-symbols-outlined">settings_phone</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="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="203"></canvas>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="carddashcenter col-lg-12 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 Assistants </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="assistantFilter" class="form-label">Filter by Assistant:</label>
                                                            <select id="assistantFilter" class="form-control select2 select2b" multiple>
                                                                @foreach($achartData as $name => $durations)
                                                                    @php
                                                                        $cleanName = explode('`', $name)[0];
                                                                    @endphp
                                                                    <option value="{{ $name }}">{{ $cleanName }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <canvas id="assistantcallChart" height="203"></canvas>
                                                </div>
                                            </div>
                                        </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: "#62deff"
        });
    });
    $('.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"
        });
    });
    $('.dashtopicon5').each(function() {
        $(this).circleProgress({
            value: $(this).data('value'),
            size: 80,
            thickness: $(this).data('thickness'),
            fill: {
                color: $(this).data('color')
            },
            emptyFill: "#fec66e"
        });
    });
    $('.dashtopicon6').each(function() {
        $(this).circleProgress({
            value: $(this).data('value'),
            size: 80,
            thickness: $(this).data('thickness'),
            fill: {
                color: $(this).data('color')
            },
            emptyFill: "#ffe384"
        });
    });
</script>
<script>
    // Chart 1 colors
    function updateChartColors1(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();
    }
    // Chart 2 colors function
    function updateChartColors2(theme) {
        const textColor = theme === 'dark' ? '#ffffff' : '#24242D';
        const gridColor = theme === 'dark' ? '#5b5e78' : '#f5f5f5';
        const borderColor = theme === 'dark' ? '#5b5e78' : '#cccccc';

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

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

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

        achart.update();
    }
    $(document).ready(function () {
        const savedChartTheme = localStorage.getItem('theme') || 'light';
        updateChartColors1(savedChartTheme);
        updateChartColors2(savedChartTheme);
        
        $('#light_mode,#moblight_mode').on('click', function () {
            updateChartColors1('light');
            updateChartColors2('light');
        });

        $('#dark_mode,#mobdark_mode').on('click', function () {
            updateChartColors1('dark');
            updateChartColors2('dark');
        });
    });
    // Chart 1 script
    const months = @json($months);
    const rawChartData = @json($chartData);
    const generateRandomColor = () => {
        const r = Math.floor(Math.random() * 256);
        const g = Math.floor(Math.random() * 256);
        const b = Math.floor(Math.random() * 256);
        return `rgba(${r}, ${g}, ${b}, 0.6)`;
    };
    const generateDatasets = (filterNumbers = []) => {
        const datasets = [];
        Object.entries(rawChartData).forEach(([number, durations]) => {
            if (filterNumbers.length === 0 || filterNumbers.includes(number)) {
                const randomColor = generateRandomColor();
                datasets.push({
                    label: number,
                    data: Object.values(durations),
                    backgroundColor: randomColor,
                    borderColor: randomColor.replace('0.6', '1'),
                    borderWidth: 1,
                    stack: 'call_stack',
                });
            }
        });
        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: '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: 'Duration (seconds)',
                        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() || [];
        chart.data.datasets = generateDatasets(selectedNumbers);
        chart.update();
    });

    // Chart 2 Script
    const amonths = @json($amonths);
    const arawChartData = @json($achartData);
    const agenerateDatasets = (filterAssistants = []) => {
        const datasets = [];

        Object.entries(arawChartData).forEach(([assistant, monthsData]) => {
            // Skip if filtering and this assistant isn't selected
            if (filterAssistants.length > 0 && !filterAssistants.includes(assistant)) {
                return;
            }

            const cleanName = assistant.split('`')[0];

            // Duration data across months
            const durations = Object.values(monthsData).map(m => m.duration || 0);
            const counts = Object.values(monthsData).map(m => m.count || 0);

            const randomColor = generateRandomColor();
            datasets.push({
                label: cleanName,
                data: durations,
                counts: counts,
                backgroundColor: randomColor,
                borderColor: randomColor.replace('0.6', '1'),
                borderWidth: 1,
                stack: 'call_stack',
            });
        });

        return datasets;
    };

    const ctxx = document.getElementById('assistantcallChart').getContext('2d');
    const achart = new Chart(ctxx, {
        type: 'bar',
        data: {
            labels: amonths,
            datasets: agenerateDatasets()
        },
        options: {
            responsive: true,
            interaction: { mode: 'index', intersect: false },
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const minutesRaw = context.raw; // actually minutes from backend
                            const seconds = minutesRaw * 60;
                            const hours = Math.floor(seconds / 3600);
                            const minutes = Math.floor((seconds % 3600) / 60);
                            const sec = Math.floor(seconds % 60);
                            const callCount = context.dataset.counts[context.dataIndex] || 0;

                            return `${context.dataset.label}: ${hours}h ${minutes}m ${sec}s (${callCount} calls)`;

                        }
                    }
                },
                title: {
                    display: true,
                    text: 'Monthly Call Durations',
                    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'
                        },
                    }
                },
                y: {
                    stacked: true,
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Duration (seconds)',
                        font: {
                            family: 'BalooThambi2-Regular',
                            size: 16,
                            weight: 'normal'
                        },
                    }
                }
            }
        }
    });

    $('#assistantFilter').on('change', function () {
        const selectedAssistants = $(this).val() || [];
        achart.data.datasets = agenerateDatasets(selectedAssistants);
        achart.update();
    });
</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" class="numbers-cb" ' + isChecked + ' style="margin-right:5px;" /> ' + option.text + '</span>');
            }
        });

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

        $(document).on('input', '.numbers-search-input', function(e) {
            e.stopPropagation();
            var searchTerm = $(this).val().toLowerCase();
            var $dropdown = $(this).closest('.select2-dropdown');
            $dropdown.find('.select2-results__option:not(.numbers-search-box):not(.numbers-select-all)').each(function() {
                var text = $(this).text().toLowerCase();
                $(this).toggle(text.includes(searchTerm));
            });
        });

        $(document).on('click', '.numbers-search-box', function(e) {
            e.stopPropagation();
        });

        $(document).on('click', '.select2-results__option', function(e) {
            if (!$(this).find('.numbers-cb').length) return;
            if ($(this).hasClass('numbers-search-box') || $(this).hasClass('numbers-select-all')) return;
            
            var $checkbox = $(this).find('.numbers-cb');
            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();
        });

        $(document).on('click', '.numbers-cb', 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');
            }
        });

        $(document).on('click', '.numbers-select-all', function(e) {
            var $checkbox = $(this).find('.numbers-select-all-cb');
            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');
            }
            
            $('.numbers-cb').prop('checked', isChecked);
            e.stopPropagation();
        });

        $(document).on('click', '.numbers-select-all-cb', 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');
            }
            
            $('.numbers-cb').prop('checked', isChecked);
        });

        $('#numberFilter').on('change', function() {
            var selected = $(this).val() || [];
            setTimeout(function() {
                $('.numbers-cb').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;
                $('.numbers-select-all-cb').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>
    $(document).ready(function () {
        $('.select2b').select2({
            closeOnSelect: false,
            allowClear: true,
            placeholder: "Select assistants...",
            templateResult: function(option) {
                if (!option.id) return option.text;
                var selected = $('#assistantFilter').val() || [];
                var isChecked = selected.indexOf(option.id) > -1 ? 'checked' : '';
                return $('<span><input type="checkbox" class="assistants-cb" ' + isChecked + ' style="margin-right:5px;" /> ' + option.text + '</span>');
            }
        });

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

        $(document).on('input', '.assistants-search-input', function(e) {
            e.stopPropagation();
            var searchTerm = $(this).val().toLowerCase();
            var $dropdown = $(this).closest('.select2-dropdown');
            $dropdown.find('.select2-results__option:not(.assistants-search-box):not(.assistants-select-all)').each(function() {
                var text = $(this).text().toLowerCase();
                $(this).toggle(text.includes(searchTerm));
            });
        });

        $(document).on('click', '.assistants-search-box', function(e) {
            e.stopPropagation();
        });

        $(document).on('click', '.select2-results__option', function(e) {
            if (!$(this).find('.assistants-cb').length) return;
            if ($(this).hasClass('assistants-search-box') || $(this).hasClass('assistants-select-all')) return;
            
            var $checkbox = $(this).find('.assistants-cb');
            var isChecked = !$checkbox.prop('checked');
            $checkbox.prop('checked', isChecked);
            
            var optionData = $(this).data('data');
            if (optionData) {
                var value = optionData.id;
                var $select = $('#assistantFilter');
                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();
        });

        $(document).on('click', '.assistants-cb', 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 = $('#assistantFilter');
                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');
            }
        });

        $(document).on('click', '.assistants-select-all', function(e) {
            var $checkbox = $(this).find('.assistants-select-all-cb');
            var isChecked = !$checkbox.prop('checked');
            $checkbox.prop('checked', isChecked);
            
            var $select = $('#assistantFilter');
            if (isChecked) {
                var allValues = [];
                $select.find('option').each(function() {
                    allValues.push($(this).val());
                });
                $select.val(allValues).trigger('change');
            } else {
                $select.val([]).trigger('change');
            }
            
            $('.assistants-cb').prop('checked', isChecked);
            e.stopPropagation();
        });

        $(document).on('click', '.assistants-select-all-cb', function(e) {
            e.stopPropagation();
            
            var $checkbox = $(this);
            var isChecked = $checkbox.prop('checked');
            var $select = $('#assistantFilter');
            
            if (isChecked) {
                var allValues = [];
                $select.find('option').each(function() {
                    allValues.push($(this).val());
                });
                $select.val(allValues).trigger('change');
            } else {
                $select.val([]).trigger('change');
            }
            
            $('.assistants-cb').prop('checked', isChecked);
        });

        $('#assistantFilter').on('change', function() {
            var selected = $(this).val() || [];
            setTimeout(function() {
                $('.assistants-cb').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 = $('#assistantFilter option').length;
                $('.assistants-select-all-cb').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','.select2b',function(){
            toggleFocusClass($(this));
        });

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

        $('.select2-search--inline .select2-search__field').prop('readonly', true);
    });
</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