@extends(BaseHelper::getAdminMasterLayoutTemplate())

@section('content')
    <div class="container-fluid">
        @php use Carbon\Carbon; @endphp

        <!-- Page Header -->
        <div class="row align-items-center mb-4">

            <!-- LEFT COLUMN (Title) -->
            <div class="col-md-6">
                <h4 class="mb-0">User Activities</h4>
            </div>

            <!-- RIGHT COLUMN (Filters auto layout) -->
            <div class="col-md-6">
                <form id="filter-form" class="row g-2">

                    <!-- Date range -->
                    <div class="col-sm-6 col-lg-auto flex-fill">
                        <x-core::button type="button" color="primary" :outlined="true" id="date-range-picker"
                            data-format-value="{{ trans('plugins/ecommerce::reports.date_range_format_value', ['from' => '__from__', 'to' => '__to__']) }}"
                            data-format="{{ Str::upper(config('core.base.general.date_format.js.date')) }}"
                            data-href="{{ route('report.users.activity.index') }}"
                            data-start-date="{{ request('start_date') ?? BaseHelper::formatDate(Carbon::now()->startOfMonth()) }}"
                            data-end-date="{{ request('end_date') ?? BaseHelper::formatDate(Carbon::now()->endOfMonth()) }}"
                            data-current-view="default" data-active-view="default" icon="ti ti-calendar" class="w-100">

                            {{ request('start_date') && request('end_date')
        ? trans('plugins/ecommerce::reports.date_range_format_value', [
            'from' => BaseHelper::formatDate(request('start_date')),
            'to' => BaseHelper::formatDate(request('end_date')),
        ])
        : trans('plugins/ecommerce::reports.date_range_format_value', [
            'from' => BaseHelper::formatDate(Carbon::now()->startOfMonth()),
            'to' => BaseHelper::formatDate(Carbon::now()->endOfMonth()),
        ])
                            }}
                        </x-core::button>

                        <input type="hidden" id="start_date" name="start_date" value="{{ request('start_date') }}">
                        <input type="hidden" id="end_date" name="end_date" value="{{ request('end_date') }}">
                    </div>

                    <!-- Action Filter -->
                    <div class="col-sm-6 col-lg-auto flex-fill">
                        <select id="action_filter" class="form-select w-100" name="action_filter">
                            <option value="">All Actions</option>
                            <option value="created" {{ request('action_filter') == 'created' ? 'selected' : '' }}>Created
                            </option>
                            <option value="updated" {{ request('action_filter') == 'updated' ? 'selected' : '' }}>Updated
                            </option>
                            <option value="deleted" {{ request('action_filter') == 'deleted' ? 'selected' : '' }}>Deleted
                            </option>
                            <option value="login" {{ request('action_filter') == 'login' ? 'selected' : '' }}>Login</option>
                            <option value="logout" {{ request('action_filter') == 'logout' ? 'selected' : '' }}>Logout
                            </option>
                        </select>
                    </div>

                    <!-- User Filter -->
                    <div class="col-sm-6 col-lg-auto flex-fill">
                        <select class="form-select w-auto w-100" id="user_id" name="user_id"></select>
                    </div>

                    <!-- Reset Button -->
                    <div class="col-sm-6 col-lg-auto flex-fill d-flex justify-content-end">
                        <button type="button" id="reset_filters" class="btn btn-outline-secondary btn-sm w-100">
                            <i class="fas fa-redo me-2"></i>Reset Filters
                        </button>
                    </div>

                </form>
            </div>
        </div>




        <!-- Loading indicator -->
        <div id="loading" class="text-center py-5" style="display: none;">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-2">Loading data...</p>
        </div>

        <!-- Histories Table Card -->
        <div class="card shadow-sm" id="histories_card">
            <div class="card-header bg-white py-3">
                <div class="d-flex justify-content-between align-items-end w-100">

                    <!-- LEFT: Show entries -->
                    <div>
                        <select id="entries" class="form-select" name="paginate" style="min-width: 80px;">
                            <option value="10" {{ request('paginate', 10) == 10 ? 'selected' : '' }}>10</option>
                            <option value="20" {{ request('paginate') == 20 ? 'selected' : '' }}>20</option>
                            <option value="30" {{ request('paginate') == 30 ? 'selected' : '' }}>30</option>
                            <option value="50" {{ request('paginate') == 50 ? 'selected' : '' }}>50</option>
                            <option value="75" {{ request('paginate') == 75 ? 'selected' : '' }}>75</option>
                            <option value="all" {{ request('paginate') == 'all' ? 'selected' : '' }}>All</option>
                        </select>
                    </div>

                    <!-- RIGHT: Search filter -->
                    <div style="max-width: 400px;">
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-search"></i></span>
                            <input type="text" class="form-control" id="search" name="search"
                                value="{{ request('search') }}" placeholder="Search by user, action, or module">
                        </div>
                    </div>
                </div>
            </div>

            <div class="card-body p-0" id="histories_listing">
                @include('backend.report.users.table', ['histories' => $histories])
            </div>
            <div class="card-footer bg-white" id="pagination_footer">
                @include('backend.report.users.pagination', ['histories' => $histories])
            </div>
        </div>
    </div>
@endsection


@push('footer')
    <!-- Make sure jQuery and daterangepicker are included -->
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker@3.1.0/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker@3.1.0/daterangepicker.css" />

    <script>
        var UserList = '{{ route('report.users.list.get') }}'

        // Global function to fetch data via AJAX
        function fetchData() {
            console.log('fetchData called');
            const form = document.getElementById('filter-form');
            const formData = new FormData(form);

            // Add entries and search values from outside the form
            formData.set('paginate', document.getElementById('entries').value);
            formData.set('search', document.getElementById('search').value);

            // Add page parameter if it exists
            const pageInput = document.getElementById('page');
            if (pageInput) {
                formData.set('page', pageInput.value);
            } else {
                formData.delete('page');
            }

            // Log form data for debugging
            console.log('Form data:');
            for (const [key, value] of formData.entries()) {
                console.log(`${key}: ${value}`);
            }

            // Show loading indicator
            document.getElementById('loading').style.display = 'block';
            document.getElementById('histories_card').style.opacity = '0.5';

            // Build URL with parameters - only include non-empty values
            const url = new URL(window.location.origin + window.location.pathname);
            for (const [key, value] of formData.entries()) {
                if (value !== null && value !== '') {
                    url.searchParams.set(key, value);
                } else {
                    url.searchParams.delete(key);
                }
            }

            console.log('Request URL:', url.toString());

            // Make AJAX request
            fetch(url.toString(), {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                }
            })
                .then(response => {
                    console.log('Response status:', response.status);
                    return response.json();
                })
                .then(data => {
                    console.log('Response data:', data);

                    // Update table content
                    document.getElementById('histories_listing').innerHTML = data.html;

                    // Update pagination
                    document.getElementById('pagination_footer').innerHTML = data.pagination;

                    // URL update removed - this is the main change
                    // history.pushState(null, null, url.toString());

                    // Re-attach event listeners to pagination links
                    attachPaginationListeners();
                })
                .catch(error => {
                    console.error('Error:', error);
                    // Show error message
                    document.getElementById('histories_listing').innerHTML =
                        '<div class="text-center py-5"><p class="text-danger">Error loading data. Please try again.</p></div>';
                })
                .finally(() => {
                    // Hide loading indicator
                    document.getElementById('loading').style.display = 'none';
                    document.getElementById('histories_card').style.opacity = '1';
                    console.log('fetchData completed');
                });
        }

        // Debounce function to limit API calls
        function debounce(func, wait) {
            let timeout;
            return function () {
                const context = this;
                const args = arguments;
                clearTimeout(timeout);
                timeout = setTimeout(() => {
                    console.log('Debounced function executed');
                    func.apply(context, args);
                }, wait);
            };
        }

        // Debounced version of fetchData for search input
        const debouncedFetchData = debounce(fetchData, 500);

        // Function to attach event listeners to pagination links
        function attachPaginationListeners() {
            console.log('Attaching pagination listeners');
            document.querySelectorAll('.pagination a').forEach(link => {
                link.addEventListener('click', function (e) {
                    e.preventDefault();
                    const url = new URL(this.href);
                    console.log('Pagination link clicked:', url.toString());

                    // Extract page param from the clicked link
                    const linkPage = url.searchParams.get('page') || 1;

                    // Add/Update hidden page input
                    let pageInput = document.getElementById('page');
                    if (!pageInput) {
                        pageInput = document.createElement('input');
                        pageInput.type = 'hidden';
                        pageInput.id = 'page';
                        pageInput.name = 'page';
                        document.getElementById('filter-form').appendChild(pageInput);
                    }
                    pageInput.value = linkPage;

                    // Update entries/search/action/user only if they exist in the clicked URL.
                    const paginateParam = url.searchParams.get('paginate');
                    if (paginateParam !== null) {
                        document.getElementById('entries').value = paginateParam;
                    }

                    const searchParam = url.searchParams.get('search');
                    if (searchParam !== null) {
                        document.getElementById('search').value = searchParam;
                    }

                    const actionParam = url.searchParams.get('action_filter');
                    if (actionParam !== null) {
                        document.getElementById('action_filter').value = actionParam;
                    }

                    const userParam = url.searchParams.get('user_id');
                    if (userParam !== null) {
                        // if link includes user_id, set/select it; otherwise keep existing select2 value
                        const select = $('#user_id');
                        select.val(userParam).trigger('change');
                    }

                    // IMPORTANT: Only overwrite start/end date if they are present in the clicked URL.
                    // If the clicked link doesn't have dates (common), preserve the current date inputs.
                    const startParam = url.searchParams.get('start_date');
                    const endParam = url.searchParams.get('end_date');
                    if (startParam !== null && endParam !== null) {
                        document.getElementById('start_date').value = startParam;
                        document.getElementById('end_date').value = endParam;

                        // Update the date range UI to reflect these dates
                        const dateRangePicker = $("#date-range-picker");
                        const format = dateRangePicker.data("format") || "YYYY-MM-DD";
                        const formatValue = dateRangePicker.data("format-value") || "__from__ - __to__";
                        const formattedValue = formatValue
                            .replace("__from__", moment(startParam).format(format))
                            .replace("__to__", moment(endParam).format(format));
                        dateRangePicker.find("span").text(formattedValue);

                        // Update picker's internal state if initialized
                        if (dateRangePicker.data('daterangepicker')) {
                            dateRangePicker.data('daterangepicker').setStartDate(moment(startParam));
                            dateRangePicker.data('daterangepicker').setEndDate(moment(endParam));
                            updateActiveRange(moment(startParam), moment(endParam));
                            const container = dateRangePicker.closest('.date-range-container');
                            const clearBtn = container.find('.clear-filter-btn[data-filter="date_range"]');
                            container.addClass('has-value');
                            dateRangePicker.addClass('has-value');
                            if (clearBtn.length) {
                                clearBtn.css('opacity', '1');
                                clearBtn.css('pointer-events', 'auto');
                            }
                        }
                    } else {
                        // link had no date params: preserve current date inputs — do nothing
                        console.log('Pagination link has no date params — keeping current date range.');
                    }

                    // Fetch data for the selected page using current form values
                    fetchData();
                });
            });
        }

        // Function to update date range picker text
        function updateDateRangePickerText(start, end, format) {
            console.log('Updating date range picker text:', start.format(format), 'to', end.format(format));
            var element = $("#date-range-picker");
            var formatValue = element.data("format-value");
            if (!formatValue) formatValue = "__from__ - __to__";

            var formattedValue = formatValue
                .replace("__from__", start.format(format))
                .replace("__to__", end.format(format));
            element.find("span").text(formattedValue);
        }

        // Function to update active range
        function updateActiveRange(startDate, endDate) {
            console.log('Updating active range:', startDate.format('YYYY-MM-DD'), 'to', endDate.format('YYYY-MM-DD'));
            $('.daterangepicker .ranges li').removeClass('active');
            const now = moment();
            const today = now.clone().startOf('day');
            const yesterday = now.clone().subtract(1, 'days').startOf('day');

            if (startDate.isSame(today, 'day') && endDate.isSame(now, 'day')) {
                $('.daterangepicker .ranges li').each(function () { if ($(this).text() === 'Today') $(this).addClass('active'); });
                return;
            }
            if (startDate.isSame(yesterday, 'day') && endDate.isSame(yesterday, 'day')) {
                $('.daterangepicker .ranges li').each(function () { if ($(this).text() === 'Yesterday') $(this).addClass('active'); });
                return;
            }
            const thisWeekStart = now.clone().startOf('week');
            if (startDate.isSame(thisWeekStart, 'day') && endDate.isSame(now, 'day')) {
                $('.daterangepicker .ranges li').each(function () { if ($(this).text() === 'This Week') $(this).addClass('active'); });
                return;
            }
            const last7DaysStart = now.clone().subtract(6, 'days').startOf('day');
            if (startDate.isSame(last7DaysStart, 'day') && endDate.isSame(now, 'day')) {
                $('.daterangepicker .ranges li').each(function () { if ($(this).text() === 'Last 7 Days') $(this).addClass('active'); });
                return;
            }
            const last30DaysStart = now.clone().subtract(29, 'days').startOf('day');
            if (startDate.isSame(last30DaysStart, 'day') && endDate.isSame(now, 'day')) {
                $('.daterangepicker .ranges li').each(function () { if ($(this).text() === 'Last 30 Days') $(this).addClass('active'); });
                return;
            }
            const thisMonthStart = now.clone().startOf('month');
            if (startDate.isSame(thisMonthStart, 'day') && endDate.isSame(now.clone().endOf('month'), 'day')) {
                $('.daterangepicker .ranges li').each(function () { if ($(this).text() === 'This Month') $(this).addClass('active'); });
                return;
            }
            const lastMonthStart = now.clone().subtract(1, 'month').startOf('month');
            const lastMonthEnd = now.clone().subtract(1, 'month').endOf('month');
            if (startDate.isSame(lastMonthStart, 'day') && endDate.isSame(lastMonthEnd, 'day')) {
                $('.daterangepicker .ranges li').each(function () { if ($(this).text() === 'Last Month') $(this).addClass('active'); });
                return;
            }
            const thisQuarterStart = now.clone().startOf('quarter');
            const thisQuarterEnd = now.clone().endOf('quarter');
            if (startDate.isSame(thisQuarterStart, 'day') && endDate.isSame(thisQuarterEnd, 'day')) {
                $('.daterangepicker .ranges li').each(function () { if ($(this).text() === 'This Quarter') $(this).addClass('active'); });
                return;
            }
            const lastQuarterStart = now.clone().subtract(1, 'quarter').startOf('quarter');
            const lastQuarterEnd = now.clone().subtract(1, 'quarter').endOf('quarter');
            if (startDate.isSame(lastQuarterStart, 'day') && endDate.isSame(lastQuarterEnd, 'day')) {
                $('.daterangepicker .ranges li').each(function () { if ($(this).text() === 'Last Quarter') $(this).addClass('active'); });
                return;
            }
            const thisYearStart = now.clone().startOf('year');
            const thisYearEnd = now.clone().endOf('year');
            if (startDate.isSame(thisYearStart, 'day') && endDate.isSame(thisYearEnd, 'day')) {
                $('.daterangepicker .ranges li').each(function () { if ($(this).text() === 'This Year') $(this).addClass('active'); });
                return;
            }
            const lastYearStart = now.clone().subtract(1, 'year').startOf('year');
            const lastYearEnd = now.clone().subtract(1, 'year').endOf('year');
            if (startDate.isSame(lastYearStart, 'day') && endDate.isSame(lastYearEnd, 'day')) {
                $('.daterangepicker .ranges li').each(function () { if ($(this).text() === 'Last Year') $(this).addClass('active'); });
                return;
            }
            const twoYearsAgoStart = now.clone().subtract(2, 'year').startOf('year');
            const twoYearsAgoEnd = now.clone().subtract(2, 'year').endOf('year');
            if (startDate.isSame(twoYearsAgoStart, 'day') && endDate.isSame(twoYearsAgoEnd, 'day')) {
                $('.daterangepicker .ranges li').each(function () { if ($(this).text() === '2 Years Ago') $(this).addClass('active'); });
                return;
            }
            // Custom Range
            $('.daterangepicker .ranges li').each(function () { if ($(this).text() === 'Custom Range') $(this).addClass('active'); });
        }

        document.addEventListener('DOMContentLoaded', function () {
            console.log('DOM content loaded');

            // Event Listeners - All filters now apply on change
            document.getElementById('entries').addEventListener('change', function () {
                console.log('Entries filter changed to:', this.value);
                fetchData();
            });

            document.getElementById('search').addEventListener('input', function () {
                console.log('Search input changed to:', this.value);
                debouncedFetchData();
            });

            document.getElementById('action_filter').addEventListener('change', function () {
                console.log('Action filter changed to:', this.value);
                fetchData();
            });

            // Special handling for Select2 user_id field
            $('#user_id').on('change', function () {
                console.log('User filter changed to:', this.value);
                fetchData();
            });

            document.getElementById('reset_filters').addEventListener('click', function () {
                console.log('Reset filters clicked');
                document.getElementById('filter-form').reset();
                $('#user_id').val(null).trigger('change');

                // Reset date range picker
                const dateRangePicker = $("#date-range-picker");
                const defaultStartDate = moment().startOfMonth();
                const defaultEndDate = moment().endOf("month");
                const format = dateRangePicker.data("format") || "YYYY-MM-DD";
                const formatValue = dateRangePicker.data("format-value") || "__from__ - __to__";
                const formattedValue = formatValue
                    .replace("__from__", defaultStartDate.format(format))
                    .replace("__to__", defaultEndDate.format(format));

                dateRangePicker.find("span").text(formattedValue);
                dateRangePicker.data('daterangepicker').setStartDate(defaultStartDate);
                dateRangePicker.data('daterangepicker').setEndDate(defaultEndDate);

                // Hide clear button
                const container = dateRangePicker.closest('.date-range-container');
                const clearBtn = container.find('.clear-filter-btn[data-filter="date_range"]');
                container.removeClass('has-value');
                dateRangePicker.removeClass('has-value');
                if (clearBtn.length) {
                    clearBtn.css('opacity', '0');
                    clearBtn.css('pointer-events', 'none');
                }

                fetchData();
            });

            // Initial attachment of pagination listeners
            attachPaginationListeners();
        });

        // Initialize Select2 for user filter
        $(document).ready(function () {
            console.log('Initializing Select2');
            $('#user_id').select2({
                placeholder: 'Select User...',
                allowClear: true,
                width: '100%',
                ajax: {
                    url: UserList,
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        console.log('Select2 search term:', params.term);
                        return { q: params.term };
                    },
                    processResults: function (data) {
                        console.log('Select2 results:', data);
                        return {
                            results: data.data.map(function (user) {
                                return {
                                    id: user.id,
                                    text: user.full_name // full name comes from controller
                                };
                            })
                        };
                    },
                    cache: true
                }
            });

            // Set initial value for user_id if it exists in the URL
            const userId = '{{ request('user_id') }}';
            if (userId) {
                console.log('Pre-selecting user with ID:', userId);
                // Pre-select the option if user_id is in the URL
                $.ajax({
                    url: UserList,
                    dataType: 'json',
                    data: { q: userId },
                    success: function (data) {
                        console.log('User data for pre-selection:', data);
                        const user = data.data.find(u => u.id == userId);
                        if (user) {
                            const option = new Option(user.full_name, user.id, true, true);
                            $('#user_id').append(option).trigger('change');
                        }
                    }
                });
            }

            // Initialize date range picker
            if (window.moment && jQuery().daterangepicker) {
                console.log('Initializing date range picker');
                moment.locale($("html").attr("lang"));
                var dateRangePicker = $("#date-range-picker");
                var format = dateRangePicker.data("format") || "YYYY-MM-DD";
                var startDate = dateRangePicker.data("start-date") ? moment(dateRangePicker.data("start-date"), format) : moment().subtract(29, "days");
                var now = moment();
                var endDate = dateRangePicker.data("end-date") ? moment(dateRangePicker.data("end-date"), format) : moment().endOf("month");

                if (endDate > now) {
                    endDate = now;
                }

                console.log('Initial date range:', startDate.format('YYYY-MM-DD'), 'to', endDate.format('YYYY-MM-DD'));

                // Custom ranges with Year, Month, and Week options
                var ranges = {
                    'Today': [moment().startOf("day"), moment().endOf("day")],
                    'Yesterday': [moment().subtract(1, "days").startOf("day"), moment().subtract(1, "days").endOf("day")],
                    'This Week': [moment().startOf("week"), moment().endOf("week")],
                    'Last 7 Days': [moment().subtract(6, "days").startOf("day"), moment().endOf("day")],
                    'Last 30 Days': [moment().subtract(29, "days").startOf("day"), moment().endOf("day")],
                    'This Month': [moment().startOf("month"), moment().endOf("month")],
                    'Last Month': [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")],
                    'This Quarter': [moment().startOf("quarter"), moment().endOf("quarter")],
                    'Last Quarter': [moment().subtract(1, "quarter").startOf("quarter"), moment().subtract(1, "quarter").endOf("quarter")],
                    'This Year': [moment().startOf("year"), moment().endOf("year")],
                    'Last Year': [moment().subtract(1, "year").startOf("year"), moment().subtract(1, "year").endOf("year")],
                    '2 Years Ago': [moment().subtract(2, "year").startOf("year"), moment().subtract(2, "year").endOf("year")],
                };

                dateRangePicker.daterangepicker({
                    ranges: ranges,
                    alwaysShowCalendars: true,
                    startDate: startDate,
                    endDate: endDate,
                    maxDate: moment().endOf("day"),
                    opens: $(window).width() < 768 ? "center" : "left",
                    drops: "auto",
                    locale: {
                        format: format,
                        customRangeLabel: 'Custom Range'
                    },
                    autoUpdateInput: false
                }, function (start, end, label) {
                    console.log('Date range picker callback:', start.format('YYYY-MM-DD'), 'to', end.format('YYYY-MM-DD'), 'Label:', label);

                    // Update the button text
                    updateDateRangePickerText(start, end, format);

                    // Update the hidden inputs
                    $('#start_date').val(start.format('YYYY-MM-DD'));
                    $('#end_date').val(end.format('YYYY-MM-DD'));

                    // Update the active state
                    updateActiveRange(start, end);

                    // Show clear button
                    const container = dateRangePicker.closest('.date-range-container');
                    const clearBtn = container.find('.clear-filter-btn[data-filter="date_range"]');
                    container.addClass('has-value');
                    dateRangePicker.addClass('has-value');
                    if (clearBtn.length) {
                        clearBtn.css('opacity', '1');
                        clearBtn.css('pointer-events', 'auto');
                    }

                    // Fetch data
                    fetchData();
                });

                dateRangePicker.on("apply.daterangepicker", function (ev, picker) {
                    console.log('Date range apply event triggered');
                    var element = $(this);
                    var label = picker.chosenLabel;

                    var formatValue = element.data("format-value");
                    if (!formatValue) formatValue = "__from__ - __to__";

                    var formattedValue = formatValue
                        .replace("__from__", picker.startDate.format(format))
                        .replace("__to__", picker.endDate.format(format));
                    element.find("span").text(formattedValue);

                    // Update the hidden inputs
                    $('#start_date').val(picker.startDate.format('YYYY-MM-DD'));
                    $('#end_date').val(picker.endDate.format('YYYY-MM-DD'));

                    var container = element.closest('.date-range-container');
                    var clearBtn = container.find('.clear-filter-btn[data-filter="date_range"]');
                    container.addClass('has-value');
                    element.addClass('has-value');
                    if (clearBtn.length) {
                        clearBtn.css('opacity', '1');
                        clearBtn.css('pointer-events', 'auto');
                    }

                    // Update active state
                    updateActiveRange(picker.startDate, picker.endDate);

                    // Fetch data
                    fetchData();
                });

                $('.clear-filter-btn[data-filter="date_range"]').on('click', function () {
                    console.log('Clear date range filter clicked');
                    var container = $(this).closest('.date-range-container');
                    var dateRangeInput = container.find('#date-range-picker');
                    container.removeClass('has-value');
                    dateRangeInput.removeClass('has-value');
                    $(this).css('opacity', '0');
                    $(this).css('pointer-events', 'none');
                    var defaultStartDate = moment().startOfMonth();
                    var defaultEndDate = moment().endOf("month");
                    var formatValue = dateRangeInput.data("format-value");
                    if (!formatValue) formatValue = "__from__ - __to__";
                    var formattedValue = formatValue
                        .replace("__from__", defaultStartDate.format(format))
                        .replace("__to__", defaultEndDate.format(format));
                    dateRangeInput.find("span").text(formattedValue);

                    // Update the hidden inputs
                    $('#start_date').val('');
                    $('#end_date').val('');

                    // Reset the date range picker
                    dateRangeInput.data('daterangepicker').setStartDate(defaultStartDate);
                    dateRangeInput.data('daterangepicker').setEndDate(defaultEndDate);

                    updateActiveRange(defaultStartDate, defaultEndDate);
                    fetchData();
                });

                // Initialize the active range based on current values
                if ($('#start_date').val() && $('#end_date').val()) {
                    console.log('Setting initial active range from form values');
                    updateActiveRange(moment($('#start_date').val()), moment($('#end_date').val()));
                }
            }
        });
    </script>
@endpush