@extends('admin::curd.index')
@section('heading')
    <i class="fa fa-file-text-o"></i> {!! trans('service_request::service_request.name') !!} <small> {!! trans('cms.manage') !!}
        {!! trans('service_request::service_request.names') !!}</small>
@stop

@section('title')
    {!! trans('service_request::service_request.names') !!}
@stop

@section('breadcrumb')
    <ol class="breadcrumb">
        <li><a href="{!! trans_url('admin') !!}"><i class="fa fa-dashboard"></i> {!! trans('cms.home') !!} </a></li>
        <li class="active">{!! trans('service_request::service_request.names') !!}</li>
    </ol>
@stop

@section('entry')
    <div class="box box-warning" id='service_request-service_request-entry'>
    </div>
@stop

@section('tools')
@stop

@section('content')
    <div class="refresh-controls">
        <button id="toggleAutoRefresh" class="btn-success">
            Start Auto Refresh
        </button>

        <button id="manualRefresh" class="btn-primary">
            🔄 Refresh Now
        </button>

        {{-- <button id="testSound" class="btn-secondary">
            🔊 Test Sound
        </button> --}}

        <label class="sound-toggle">
            <input type="checkbox" id="enableSound" checked>
            <span>🔔 Sound Alerts</span>
        </label>

        <span class="refresh-status inactive" id="refreshStatus">
            Auto-refresh inactive
        </span>

        <select id="refreshInterval" class="form-control" style="width: auto; display: inline-block;">
            <option value="15">Every 15 seconds</option>
            <option value="30" selected>Every 30 seconds</option>
            <option value="60">Every 1 minute</option>
            <option value="120">Every 2 minutes</option>
            <option value="300">Every 5 minutes</option>
        </select>
    </div>
    <div class="table-responsive">
        <table id="service_request-service_request-list" class="table table-striped data-table" style="width:3050px">
            @if (config('app.client_id') != 1500)
                <thead class="list_head">
                    <th>
                        <div class="reset" style="display:none;"></div>
                    </th>
                    <th>{!! trans('service_request::service_request.label.status') !!}</th>
                    <th>{!! trans('service_request::service_request.label.request_no') !!}</th>
                    <th style="padding-left: 23px;
                    padding-right: 23px;">{!! trans('service_request::service_request.label.request_date') !!}</th>
                    <th>{!! trans('service_request::service_request.label.asset_id') !!}</th>
                    <th>Priority</th>
                    <th>Asset Status</th>
                    <th>Request Type</th>
                    <th>Source</th>
                    <th>{!! trans('service_request::service_request.label.requested_by') !!}</th>
                    <th>Sub Location</th>
                    <th>Turn Around Time</th>
                    <th>Preferred Date & Time</th>
                    <th>Job Description</th>
                    <th>Department</th>
                    <th>Work Department</th>
                    <th>Technician</th>
                    <th>{!! trans('service_request::service_request.label.workorder_no') !!}</th>
                    <th>{!! trans('service_request::service_request.label.workorder_status') !!}</th>
                    <th>Estimated Time in Mins.</th>
                    <th>Consumed Time</th>
                    <th>Hold Time</th>
                    <th>Reopen Ref No.</th>
                    <th>Criticality Type</th>
                    <th>Dept Approval</th>
                    <th>Work Dept Approval</th>
                    <th>Division</th>
                    <th>Created By</th>
                    <th>Supplier</th>
                    @if (user('admin.web')->currentCompany->enable_destination_location_in_facility_request == 'Yes')
                        <th>To Sublocation</th>
                    @endif
                </thead>
                <thead class="search_bar">
                    <th>
                        <div class="reset" style="display:none;"><a id="resetnow" class="headpicture"
                                style="cursor:pointer;"><i class="fa fa-refresh" style="color:#000;"></i></a></div>
                    </th>
                    <th>{!! Form::select('search[service_requests.status][]')->options(['' => 'All'] + trans('service_request::service_request.options.status'))->raw() !!}</th>
                    <th>{!! Form::number('search[service_requests.id]')->min(0)->raw() !!}</th>
                    {{-- <th>{!! Form::text('search[request_no]')->raw()!!}</th> --}}
                    <th style="padding-left: 11px;
                    padding-right: 11px;">{!! Form::text('search[service_requests.created_at][from]')->addClass('datepick')->placeholder('From')->style('width: 45%;')->id('from_date')->raw() !!}
                        {!! Form::text('search[service_requests.created_at][to]')->addClass('datepick_enddate')->placeholder('To')->style('width: 45%;')->id('to_date')->raw() !!}</th>
                    <th>{!! Form::select('search[service_requests.asset_id]')->addClass('js-selectt2')->options([])->id('ser_assetid')->raw() !!}</th>
                    <th>{!! Form::select('search[service_requests.job_priority]')->options(['' => 'All'] + trans('service_request::service_request.options.job_priority'))->id('ser_job_priority')->raw() !!}</th>
                    <th>{!! Form::select('search[service_requests.asset_status]')->options(['' => 'All'] + trans('service_request::service_request.options.asset_status'))->id('ser_assetid')->raw() !!}</th>
                    <th>{!! Form::select('search[service_requests.request_type]')->options(['' => 'All'] + trans('service_request::service_request.options.request_type'))->id('ser_request_type')->raw() !!}</th>
                    <th>{!! Form::select('search[service_requests.source]')->options(['' => 'All'] + trans('service_request::service_request.options.source'))->id('ser_source')->raw() !!}</th>
                    <th>{!! Form::select('search[service_requests.requested_by]')->options(['' => 'All'] + Company::employees())->id('ser_asset_id')->raw() !!}</th>
                    <th>{!! Form::select('search[service_requests.sublocationid]')->id('sublocationid')->raw() !!}</th>
                    <th></th>
                    <th></th>
                    <th id="descripton">{!! Form::text('search[service_requests.job_description]')->id('ser_job_description')->raw() !!}</th>
                    <th>{!! Form::select('search[service_requests.departmentid]')->options(['' => 'All'] + Department::departments())->id('departmentid')->raw() !!}</th>
                    <th>{!! Form::select('search[service_requests.workdepartmentid]')->options(['' => 'All'] + WorkDepartment::work_departments())->id('workdepartmentid')->raw() !!}</th>
                    <th>{!! Form::select('search[technician_id]')->id('assigned_user')->raw() !!}</th>
                    <th>{!! Form::text('search[service_requests.workorder_no]')->id('ser_workorderno')->raw() !!}</th>
                    <th>{!! Form::text('search[service_requests.workorder_status]')->raw() !!}</th>
                    <th>{!! Form::text('search[estimated_time]')->id('ser_estimated_time')->raw() !!}</th>
                    <th>{!! Form::text('search[consumed_time_seconds]')->raw() !!}</th>
                    <th>{!! Form::text('search[hold_time]')->raw() !!}</th>
                    <th>{!! Form::text('search[service_requests.reopen_id]')->raw() !!}</th>
                    <th>{!! Form::select('search[service_requests.criticality_type]')->options(['' => 'All'] + trans('assets::asset.options.criticality_type'))->raw() !!}</th>
                    <th>{!! Form::select('search[service_requests.dept_approve]')->options(['' => 'All'] + trans('service_request::service_request.options.dept_approve_search'))->id('ser_dept_approve')->raw() !!}</th>
                    <th>{!! Form::select('search[service_requests.workdept_approve]')->options(['' => 'All'] + trans('service_request::service_request.options.workdept_approve_search'))->id('ser_workdept_approve')->raw() !!}</th>
                    <th>{!! Form::select('search[service_requests.divisionid]')->options(['' => 'All'] + Company::divisions())->id('ser_divisionid')->raw() !!}</th>
                    <th>{!! Form::select('search[service_requests.created_by_user]')->options(['' => 'All'] + Company::users())->id('created_by_user')->raw() !!}</th>
                    <th><label id="ser_supplier_id"></label></th>
                    @if (user('admin.web')->currentCompany->enable_destination_location_in_facility_request == 'Yes')
                        <th>{!! Form::text('search[to_sublocation]')->raw() !!}</th>
                    @endif
                </thead>
            @else
                <thead class="list_head">
                    <th>
                        <div class="reset" style="display:none;"></div>
                    </th>
                    <th>{!! trans('service_request::service_request.label.status') !!}</th>
                    <th>{!! trans('service_request::service_request.label.request_no') !!}</th>
                    <th style="padding-left: 23px;
                    padding-right: 23px;">{!! trans('service_request::service_request.label.request_date') !!}</th>
                    <th>Priority</th>

                    <th>Sub Location</th>
                    @if (user('admin.web')->currentCompany->enable_destination_location_in_facility_request == 'Yes')
                        <th>To Sublocation</th>
                    @endif
                    <th>Sub Work</th>
                    <th>Job Description</th>
                    <th>Department</th>
                    <th>Work Department</th>
                    <th>Technician</th>
                    <th>{!! trans('service_request::service_request.label.requested_by') !!}</th>
                    <th>Turn Around Time</th>
                    <th>Preferred Date & Time</th>
                    <th>{!! trans('service_request::service_request.label.workorder_no') !!}</th>
                    <th>{!! trans('service_request::service_request.label.workorder_status') !!}</th>
                    <th>Estimated Time in Mins.</th>
                    <th>Consumed Time</th>
                    <th>Hold Time</th>
                    <th>Reopen Ref No.</th>
                    <th>Criticality Type</th>
                    <th>Dept Approval</th>
                    <th>Work Dept Approval</th>
                    <th>Division</th>
                    <th>Created By</th>
                    <th>Supplier</th>
                    <th>{!! trans('service_request::service_request.label.asset_id') !!}</th>
                    <th>Asset Status</th>
                    <th>Request Type</th>
                    <th>Source</th>
                </thead>
                <thead class="search_bar">
                    <th>
                        <div class="reset" style="display:none;"><a id="resetnow" class="headpicture"
                                style="cursor:pointer;"><i class="fa fa-refresh" style="color:#000;"></i></a></div>
                    </th>
                    <th>{!! Form::select('search[service_requests.status][]')->options(['' => 'All'] + trans('service_request::service_request.options.status'))->raw() !!}</th>
                    <th>{!! Form::number('search[service_requests.id]')->min(0)->raw() !!}</th>
                    {{-- <th>{!! Form::text('search[request_no]')->raw()!!}</th> --}}
                    <th style="padding-left: 11px;
                    padding-right: 11px;">{!! Form::text('search[service_requests.created_at][from]')->addClass('datepick')->placeholder('From')->style('width: 45%;')->id('from_date')->raw() !!}
                        {!! Form::text('search[service_requests.created_at][to]')->addClass('datepick_enddate')->placeholder('To')->style('width: 45%;')->id('to_date')->raw() !!}</th>
                    <th>{!! Form::select('search[service_requests.job_priority]')->options(['' => 'All'] + trans('service_request::service_request.options.job_priority'))->id('ser_job_priority')->raw() !!}</th>
                    <th>{!! Form::select('search[service_requests.sublocationid]')->id('sublocationid')->raw() !!}</th>
                    @if (user('admin.web')->currentCompany->enable_destination_location_in_facility_request == 'Yes')
                        <th>{!! Form::text('search[to_sublocation]')->raw() !!}</th>
                    @endif
                    <th>{!! Form::select('search[service_requests.sub_work]')->options(['' => 'All'] + PmCali::ShowSubWork())->id('sub_work')->raw() !!}</th>
                    <th id="descripton">{!! Form::text('search[service_requests.job_description]')->id('ser_job_description')->raw() !!}</th>
                    <th>{!! Form::select('search[service_requests.departmentid]')->options(['' => 'All'] + Department::departments())->id('departmentid')->raw() !!}</th>
                    <th>{!! Form::select('search[service_requests.workdepartmentid]')->options(['' => 'All'] + WorkDepartment::work_departments())->id('workdepartmentid')->raw() !!}</th>
                    <th>{!! Form::select('search[technician_id]')->id('assigned_user')->raw() !!}</th>
                    <th>{!! Form::select('search[service_requests.requested_by]')->options(['' => 'All'] + Company::employees())->id('ser_asset_id')->raw() !!}</th>
                    <th></th>
                    <th></th>
                    <th>{!! Form::text('search[service_requests.workorder_no]')->id('ser_workorderno')->raw() !!}</th>
                    <th>{!! Form::text('search[service_requests.workorder_status]')->raw() !!}</th>
                    <th>{!! Form::text('search[estimated_time]')->id('ser_estimated_time')->raw() !!}</th>
                    <th>{!! Form::text('search[consumed_time_seconds]')->raw() !!}</th>
                    <th>{!! Form::text('search[hold_time]')->raw() !!}</th>
                    <th>{!! Form::text('search[service_requests.reopen_id]')->raw() !!}</th>
                    <th>{!! Form::select('search[service_requests.criticality_type]')->options(['' => 'All'] + trans('assets::asset.options.criticality_type'))->raw() !!}</th>
                    <th>{!! Form::select('search[service_requests.dept_approve]')->options(['' => 'All'] + trans('service_request::service_request.options.dept_approve_search'))->id('ser_dept_approve')->raw() !!}</th>
                    <th>{!! Form::select('search[service_requests.workdept_approve]')->options(['' => 'All'] + trans('service_request::service_request.options.workdept_approve_search'))->id('ser_workdept_approve')->raw() !!}</th>
                    <th>{!! Form::select('search[service_requests.divisionid]')->options(['' => 'All'] + Company::divisions())->id('ser_divisionid')->raw() !!}</th>
                    <th>{!! Form::select('search[service_requests.created_by_user]')->options(['' => 'All'] + Company::users())->id('created_by_user')->raw() !!}</th>
                    <th><label id="ser_supplier_id"></label></th>

                    <th>{!! Form::select('search[service_requests.asset_id]')->addClass('js-selectt2')->options([])->id('ser_assetid')->raw() !!}</th>
                    <th>{!! Form::select('search[service_requests.asset_status]')->options(['' => 'All'] + trans('service_request::service_request.options.asset_status'))->id('ser_assetid')->raw() !!}</th>
                    <th>{!! Form::select('search[service_requests.request_type]')->options(['' => 'All'] + trans('service_request::service_request.options.request_type'))->id('ser_request_type')->raw() !!}</th>
                    <th>{!! Form::select('search[service_requests.source]')->options(['' => 'All'] + trans('service_request::service_request.options.source'))->id('ser_source')->raw() !!}</th>
                </thead>
            @endif
        </table>
    </div>
@stop

@section('script')
    <script type="text/javascript">
        var oTable;
        var previousServiceRequests = [];
        var refreshInterval;
        var isAutoRefreshEnabled = false;


        // Auto-refresh functionality using older DataTables API
        function startAutoRefresh(intervalSeconds) {
            intervalSeconds = intervalSeconds || 30;

            if (refreshInterval) {
                clearInterval(refreshInterval);
            }

            refreshInterval = setInterval(function() {
                console.log('Auto-refreshing service requests...');
                showRefreshingIndicator();

                // Use fnReloadAjax if available, otherwise use fnDraw
                if (typeof oTable.fnReloadAjax === 'function') {
                    oTable.fnReloadAjax();
                } else {
                    oTable.fnDraw(false); // false preserves paging
                }
            }, intervalSeconds * 1000);

            isAutoRefreshEnabled = true;
            updateRefreshButton();
            console.log('Auto-refresh started - every ' + intervalSeconds + ' seconds');
        }

        function stopAutoRefresh() {
            if (refreshInterval) {
                clearInterval(refreshInterval);
                refreshInterval = null;
            }
            isAutoRefreshEnabled = false;
            updateRefreshButton();
            console.log('Auto-refresh stopped');
        }

        function toggleAutoRefresh() {
            if (isAutoRefreshEnabled) {
                stopAutoRefresh();
            } else {
                var interval = parseInt($('#refreshInterval').val()) || 30;
                startAutoRefresh(interval);
            }
        }

        function manualRefresh() {
            showRefreshingIndicator();
            console.log('Manual refresh triggered');

            if (typeof oTable.fnReloadAjax === 'function') {
                oTable.fnReloadAjax();
            } else {
                oTable.fnDraw(false);
            }
        }

        // Notification functions
        function showNewRequestNotification(count) {
            var message = count === 1 ?
                'New service request received!' :
                count + ' new service requests received!';

            var notification = $('<div class="service-request-notification">' +
                '<div class="notification-icon">🔔</div>' +
                '<div class="notification-content">' +
                '<strong>Service Request Alert</strong>' +
                '<p>' + message + '</p>' +
                '</div>' +
                '<button class="notification-close">&times;</button>' +
                '</div>');

            $('body').append(notification);

            // Auto-remove after 6 seconds
            setTimeout(function() {
                notification.fadeOut(400, function() {
                    notification.remove();
                });
            }, 6000);

            // Manual close
            notification.find('.notification-close').click(function() {
                notification.fadeOut(400, function() {
                    notification.remove();
                });
            });
        }

        function showErrorNotification(message) {
            var notification = $('<div class="error-notification">' +
                '<div class="notification-icon">⚠️</div>' +
                '<div class="notification-content">' +
                '<strong>Error</strong>' +
                '<p>' + message + '</p>' +
                '</div>' +
                '<button class="notification-close">&times;</button>' +
                '</div>');

            $('body').append(notification);

            setTimeout(function() {
                notification.fadeOut(400, function() {
                    notification.remove();
                });
            }, 5000);

            notification.find('.notification-close').click(function() {
                notification.fadeOut(400, function() {
                    notification.remove();
                });
            });
        }

        function showRefreshingIndicator() {
            if ($('.refreshing-indicator').length === 0) {
                var indicator = $('<div class="refreshing-indicator">🔄 Refreshing service requests...</div>');
                $('#service_request-service_request-list').closest('.dataTables_wrapper').prepend(indicator);

                setTimeout(function() {
                    indicator.fadeOut(400, function() {
                        indicator.remove();
                    });
                }, 2000);
            }
        }

        function playNotificationSound() {
            // Check if sound is enabled
            if ($('#enableSound').length && !$('#enableSound').is(':checked')) {
                return;
            }

            // Use the custom notification audio
            try {
                var audioContext = new(window.AudioContext || window.webkitAudioContext)();
                var oscillator = audioContext.createOscillator();
                var gainNode = audioContext.createGain();

                oscillator.connect(gainNode);
                gainNode.connect(audioContext.destination);

                oscillator.frequency.value = 800;
                gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
                gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);

                oscillator.start(audioContext.currentTime);
                oscillator.stop(audioContext.currentTime + 0.5);
            } catch (e) {
                console.log('Audio not supported, using fallback');
                fallbackBeepSound();
            }
        }

        function fallbackBeepSound() {
            try {
                var audioContext = new(window.AudioContext || window.webkitAudioContext)();
                var oscillator = audioContext.createOscillator();
                var gainNode = audioContext.createGain();

                oscillator.connect(gainNode);
                gainNode.connect(audioContext.destination);

                oscillator.frequency.value = 800;
                gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
                gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);

                oscillator.start(audioContext.currentTime);
                oscillator.stop(audioContext.currentTime + 0.5);
            } catch (e) {
                console.log('No audio support available');
            }
        }

        function updateRefreshButton() {
            var button = $('#toggleAutoRefresh');
            if (button.length) {
                if (isAutoRefreshEnabled) {
                    button.text('Stop Auto Refresh').removeClass('btn-success').addClass('btn-danger');
                } else {
                    button.text('Start Auto Refresh').removeClass('btn-danger').addClass('btn-success');
                }
            }
            updateRefreshStatus();
        }

        function updateRefreshStatus() {
            var status = $('#refreshStatus');
            if (status.length) {
                if (isAutoRefreshEnabled) {
                    status.removeClass('inactive').addClass('active').text('Auto-refresh active');
                } else {
                    status.removeClass('active').addClass('inactive').text('Auto-refresh inactive');
                }
            }
        }
        $(document).ready(function() {

            // Wait for DataTable to be fully initialized
            setTimeout(function() {
                if (typeof oTable !== 'undefined' && oTable) {
                    console.log('DataTable found, starting auto-refresh in 5 seconds...');
                    setTimeout(function() {
                        startAutoRefresh(30); // Start with 30 seconds interval
                    }, 5000);
                } else {
                    console.error('DataTable not found!');
                }
            }, 1000);

            // Add event listeners for buttons
            $(document).on('click', '#toggleAutoRefresh', function(e) {
                e.preventDefault();
                toggleAutoRefresh();
            });

            $(document).on('click', '#manualRefresh', function(e) {
                e.preventDefault();
                manualRefresh();
            });

            $(document).on('click', '#testSound', function(e) {
                e.preventDefault();
                playNotificationSound();
                $(this).text('🔊 Playing...').prop('disabled', true);
                setTimeout(function() {
                    $('#testSound').text('🔊 Test Sound').prop('disabled', false);
                }, 1000);
            });

            // Handle interval change
            $(document).on('change', '#refreshInterval', function() {
                var newInterval = parseInt($(this).val());
                if (isAutoRefreshEnabled) {
                    stopAutoRefresh();
                    startAutoRefresh(newInterval);
                }
            });

            $(document).on('change', '#enableSound', function() {
                var isEnabled = $(this).is(':checked');
                try {
                    localStorage.setItem('serviceRequestSoundEnabled', isEnabled);
                } catch (e) {
                    console.log('localStorage not available');
                }

                if (isEnabled) {
                    $(this).next('span').text('🔔 Sound Alerts');
                } else {
                    $(this).next('span').text('🔕 Sound Muted');
                }
            });

            // Load sound preference
            try {
                var soundEnabled = localStorage.getItem('serviceRequestSoundEnabled');
                if (soundEnabled !== null) {
                    $('#enableSound').prop('checked', soundEnabled === 'true');
                    $('#enableSound').trigger('change');
                }
            } catch (e) {
                console.log('localStorage not available');
            }
            // Pause auto-refresh during user interaction
            $('#service_request-service_request-list').on('page.dt length.dt search.dt order.dt', function() {
                console.log('User interaction detected, pausing auto-refresh...');
                if (isAutoRefreshEnabled) {
                    stopAutoRefresh();
                    setTimeout(function() {
                        console.log('Resuming auto-refresh after user interaction...');
                        startAutoRefresh(parseInt($('#refreshInterval').val()) || 30);
                    }, 10000);
                }
            });

            // Clean up interval when page unloads
            $(window).on('beforeunload', function() {
                stopAutoRefresh();
            });

            $(".datepick").pickadate({
                format: 'dd mmm, yyyy',
                formatSubmit: 'yyyy-mm-dd 00:00:00',
                hiddenSuffix: '',
                selectMonths: true,
                selectYears: true
            }).prop('type', 'text');

            $(".datepick_enddate").pickadate({
                format: 'dd mmm, yyyy',
                formatSubmit: 'yyyy-mm-dd 23:59:59',
                hiddenSuffix: '',
                selectMonths: true,
                selectYears: true
            }).prop('type', 'text');

            let searchParams = new URLSearchParams(window.location.search)
            if (searchParams.get('id') && !searchParams.get('status')) {
                app.load('#service_request-service_request-entry', '{!! trans_url('admin/service_request/service_request') !!}' + '/' + searchParams
                    .get('id'));
            } else if (searchParams.get('status')) {
                app.load('#service_request-service_request-entry', '{!! trans_url('admin/service_request/service_request') !!}' + '/' + searchParams
                    .get('id') + '/edit');
            } else {
                app.load('#service_request-service_request-entry', '{!! trans_url('admin/service_request/service_request/0') !!}');
            }

            $('input[id=from_date]').change(function() {

                $("#to_date").pickadate('picker').set({
                    select: $('input[id=from_date]').val(),
                    from: new Date($('input[id=from_date]').val())
                });
            });

            if (searchParams.get('asset_id')) {
                app.load('#service_request-service_request-entry', '{!! trans_url('admin/service_request/service_request/create') !!}');


            }
            var currentAjaxRequest;
            var searchDebounceTimer;
            oTable = $('#service_request-service_request-list').dataTable({
                "bProcessing": true,
                "sDom": 'R<>rt<ilp><"clear">',
                "bServerSide": true,
                "sAjaxSource": '{!! trans_url('/admin/service_request/service_request') !!}',
                "columnDefs": [{
                    "orderable": false,
                    "targets": [10, 18, 19, 20]
                }],
                rowCallback: function(row, data, index) {
                    // Existing status class
                    $('td:eq(1)', row).addClass('status_' + data.status);

                    // Check if this is a new row
                    if (data._isNew) {
                        console.log('New service request detected:', data.request_no);
                        $(row).addClass('new-service-request');
                        // Remove highlight after 5 seconds
                        setTimeout(function() {
                            $(row).removeClass('new-service-request');
                        }, 5000);
                    }

                    // Highlight specific cells for QR code requests
                    if (data.source === 'Qrcode') {
                        $('td:eq(2)', row).addClass('qr-source-highlight');
                    }
                },
                "fnServerData": function(sSource, aoData, fnCallback) {
                    $('#service_request-service_request-list .search_bar input, #service_request-service_request-list .search_bar select')
                        .each(function() {
                            if ($(this).val() != "") {
                                aoData.push({
                                    'name': $(this).attr('name'),
                                    'value': $(this).val()
                                });
                            }
                        });

                    app.dataTable(aoData);
                    clearTimeout(searchDebounceTimer);
                    
                    searchDebounceTimer = setTimeout(function() {

                    if (currentAjaxRequest) {
                        currentAjaxRequest.abort();
                    }
                   currentAjaxRequest = $.ajax({
                        'dataType': 'json',
                        'data': aoData,
                        'type': 'GET',
                        'url': sSource,
                        'success': function(response) {
                            // Check for new service requests
                            if (previousServiceRequests.length > 0 && response.data) {
                                var newRequests = [];
                                var currentIds = previousServiceRequests.map(function(req) {
                                    return req.request_no;
                                });

                                response.data.forEach(function(request) {
                                    if (currentIds.indexOf(request.request_no) === -
                                        1) {
                                        request._isNew = true;
                                        newRequests.push(request);
                                    }
                                });

                                // Show notification for new requests
                                if (newRequests.length > 0) {
                                    showNewRequestNotification(newRequests.length);

                                    // Play notification sound (optional)
                                    playNotificationSound();
                                }
                            }

                            // Store current data for next comparison
                            if (response.data) {
                                previousServiceRequests = response.data.slice();
                            }

                            // Call original callback
                            fnCallback(response);
                        },
                        'error': function(jqXHR, textStatus, errorThrown) {
                            if (textStatus === "abort" || textStatus === "parsererror") {
                                return;
                            }

                            // 🚨 Skip 403 Forbidden (invalid request params)
                            if (jqXHR.status === 403) {
                                return;
                            }

                            console.error("Error fetching service request data:", textStatus, errorThrown);
                            showErrorNotification("Failed to fetch latest data");
                            fnCallback({
                                "data": [],
                                "recordsTotal": 0,
                                "recordsFiltered": 0
                            });
                        }
                    });
                }, 400); 
                },

                "columns": [
                    @if (config('app.client_id') != 1500)
                        {
                            data: 'dresets',
                            render: $.fn.dataTable.render.text()
                        }, {
                            data: 'status',
                        }, {
                            data: 'request_no',
                            render: function(data, type, row) {
                                if (row.source === 'Qrcode') {
                                    return '<span style="color: #4169e1;">' + data + '</span>';
                                }
                                return data;
                            }
                        }, {
                            data: 'created_at',
                        }, {
                            data: 'asset_id',
                        }, {
                            data: 'job_priority',
                        }, {
                            data: 'asset_status',
                            render: $.fn.dataTable.render.text()
                        }, {
                            data: 'request_type',
                            render: $.fn.dataTable.render.text()
                        }, {
                            data: 'source',
                            render: $.fn.dataTable.render.text()
                        }, {
                            data: 'requested_by',
                            render: $.fn.dataTable.render.text()
                        }, {
                            data: 'sublocationid',
                            render: $.fn.dataTable.render.text()
                        }, {
                            data: 'turn_around_time'
                        }, {
                            data: 'request_date',
                            render: function(data, type, row) {
                                return row.request_date + ' ' + row.time;
                            }
                        }, {
                            data: 'job_description',
                            render: $.fn.dataTable.render.text()
                        }, {
                            data: 'departmentid',
                            render: $.fn.dataTable.render.text()
                        }, {
                            data: 'workdepartmentid',
                            render: $.fn.dataTable.render.text()
                        }, {
                            data: 'assigned_user',
                            render: $.fn.dataTable.render.text()
                        }, {
                            data: 'workorder_no'
                        }, {
                            data: 'workorder_status',
                            render: $.fn.dataTable.render.text()
                        }, {
                            data: 'estimated_time',
                            render: $.fn.dataTable.render.text()
                        }, {
                            data: 'consumed_time_seconds'
                        }, {
                            data: 'hold_time'
                        }, {
                            data: 'reopen_id'
                        }, {
                            data: 'criticality_type',
                            render: $.fn.dataTable.render.text()
                        }, {
                            data: 'dept_approve'
                        }, {
                            data: 'workdept_approve'
                        }, {
                            data: 'divisionid',
                            render: $.fn.dataTable.render.text()
                        }, {
                            data: 'created_by_user',
                            render: $.fn.dataTable.render.text()
                        }, {
                            data: 'supplier_id',
                            render: $.fn.dataTable.render.text()
                        },
                        @if (user('admin.web')->currentCompany->enable_destination_location_in_facility_request == 'Yes')
                            {
                                data: 'to_sublocationid',
                                render: $.fn.dataTable.render.text()
                            },
                        @endif
                    @else
                        {
                            data: 'dresets',
                            render: $.fn.dataTable.render.text()
                        }, {
                            data: 'status',
                        }, {
                            data: 'request_no',
                            render: function(data, type, row) {
                                if (row.source === 'Qrcode') {
                                    return '<span style="color: #4169e1;">' + data + '</span>';
                                }
                                return data;
                            }
                        }, {
                            data: 'created_at',
                        },

                        {
                            data: 'job_priority',
                        }, {
                            data: 'sublocationid',
                            render: $.fn.dataTable.render.text()
                        },
                        @if (user('admin.web')->currentCompany->enable_destination_location_in_facility_request == 'Yes')
                            {
                                data: 'to_sublocationid',
                                render: $.fn.dataTable.render.text()
                            },
                        @endif {
                            data: 'sub_work',
                            render: $.fn.dataTable.render.text()
                        }, {
                            data: 'job_description',
                            render: $.fn.dataTable.render.text()
                        }, {
                            data: 'departmentid',
                            render: $.fn.dataTable.render.text()
                        }, {
                            data: 'workdepartmentid',
                            render: $.fn.dataTable.render.text()
                        }, {
                            data: 'assigned_user',
                            render: $.fn.dataTable.render.text()
                        }, {
                            data: 'requested_by',
                            render: $.fn.dataTable.render.text()
                        }, {
                            data: 'turn_around_time'
                        }, {
                            data: 'request_date',
                            render: function(data, type, row) {
                                return row.request_date + ' ' + row.time;
                            }
                        },

                        {
                            data: 'workorder_no'
                        }, {
                            data: 'workorder_status',
                            render: $.fn.dataTable.render.text()
                        }, {
                            data: 'estimated_time',
                            render: $.fn.dataTable.render.text()
                        }, {
                            data: 'consumed_time_seconds'
                        }, {
                            data: 'hold_time'
                        }, {
                            data: 'reopen_id'
                        }, {
                            data: 'criticality_type',
                            render: $.fn.dataTable.render.text()
                        }, {
                            data: 'dept_approve'
                        }, {
                            data: 'workdept_approve'
                        }, {
                            data: 'divisionid',
                            render: $.fn.dataTable.render.text()
                        }, {
                            data: 'created_by_user',
                            render: $.fn.dataTable.render.text()
                        }, {
                            data: 'supplier_id',
                            render: $.fn.dataTable.render.text()
                        },

                        {
                            data: 'asset_id',
                        }, {
                            data: 'asset_status',
                            render: $.fn.dataTable.render.text()
                        }, {
                            data: 'request_type',
                            render: $.fn.dataTable.render.text()
                        }, {
                            data: 'source',
                            render: $.fn.dataTable.render.text()
                        },
                    @endif
                ],
                "pageLength": 10
            });

            const table = $('#service_request-service_request-list');
            const statusSelect = $('select[name="search[service_requests.status][]"]');

            function reloadServiceRequestTable() {
                if ($.fn.DataTable.isDataTable(table)) {
                    table.DataTable().ajax.reload();
                }
            }

            // Use delegated event for box clicks (this fixes your problem)
            $(document).on('click', '.box.filter-box, .box[data-type="Total"]', function(e) {
                e.preventDefault();
                e.stopPropagation();

                const status = $(this).data('type');

                if (status === 'Total') {
                    $("#resetnow").trigger('click');
                    // statusSelect.val(null).trigger('change');
                } else {
                    statusSelect.val([status]).trigger('change');
                }
            });

            // Dropdown status change
            statusSelect.on('change', function() {
                reloadServiceRequestTable();
            });

            // Any other search filters (in thead)
            $('.search_bar').on('change keyup', 'input, select', function() {
                reloadServiceRequestTable();
            });

            $("#resetnow").click(function() {
                $('.search_bar input, .search_bar select').each(function() {
                    $(this).val('');
                })
                $("#assigned_user").empty().trigger('change');
                document.getElementById("select2-ser_assetid-container").innerHTML = " ";
                document.getElementById("select2-sublocationid-container").innerHTML = " ";
                oTable
                    .api().draw();
                $(".reset").css({
                    'display': 'none'
                });
            });
            $('.search_bar').change(function() {
                $(".reset").css({
                    'display': 'inline'
                });
                return;
            });
            $('#service_request-service_request-list tbody').on('click', 'tr', function() {

                oTable.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');

                var d = $('#service_request-service_request-list').DataTable().row(this).data();

                $('#service_request-service_request-entry').load('{!! trans_url('admin/service_request/service_request') !!}' + '/' + d
                    .id);
            });

            $(
                    "#service_request-service_request-list .search_bar input, #service_request-service_request-list .search_bar select"
                )
                .on('keyup select', function(e) {
                    e.preventDefault();
                    if (e.keyCode == 13 || e.keyCode == 9) {
                        oTable.api().draw();
                    }
                });

            $("#service_request-service_request-list .search_bar select").on('change', function(e) {
                e.preventDefault();
                oTable.api().draw();
            });

            $("#service_request-service_request-entry .search_bar select,.datepick").on('change', function(e) {
                e.preventDefault();
                oTable.api().draw();
            });

            $("#service_request-service_request-entry .search_bar select,.datepick_enddate").on('change', function(
                e) {
                e.preventDefault();
                oTable.api().draw();
            });

            $("#assigned_user").select2({
                ajax: {
                    url: "{{ trans_url('admin/company/technicians/select2') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            q: params.term, // search term                            
                            page: params.page
                        };
                    },
                    processResults: function(data, params) {

                        params.page = params.page || 1;
                        return {
                            results: data.items.map(function(obj) {
                                return {
                                    id: obj.id,
                                    text: obj.name
                                };
                            }),
                            // results: data.items,
                            pagination: {
                                more: (params.page * 30) < data.total_count
                            }
                        };
                    },
                    cache: false
                },

            });

            $("#sublocationid").select2({
                allowClear: false,
                ajax: {
                    url: "{{ trans_url('admin/location/sub_location/select2/location') }}",
                    dataType: 'json',
                    delay: 650,
                    data: function(params) {
                        return {
                            q: params.term, // search term
                            // companyId: $('#companyid').val(),
                            // divisionId: $('#divisionid').val(),
                            // blockId: $('#block_id').val(),
                            // sectionId: $('#section_id').val(),
                            // locationId: $('#location_id').val(),
                            page: params.page
                        };
                    },
                    processResults: function(data, params) {

                        params.page = params.page || 1;
                        return {
                            results: data.items.map(function(obj) {
                                return {
                                    id: obj.id,
                                    text: obj.name
                                };
                            }),
                            // results: data.items,
                            pagination: {
                                more: (params.page * 30) < data.total_count
                            }
                        };
                    },
                    cache: false,
                },
            });

            $(".js-selectt2").select2({
                allowClear: true,
                ajax: {
                    url: "{{ trans_url('admin/assets/select2/asset') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            q: params.term, // search term
                            page: params.page
                        };
                    },
                    processResults: function(data, params) {

                        params.page = params.page || 1;
                        return {
                            results: data.items,
                            pagination: {
                                more: (params.page * 30) < data.total_count
                            }
                        };
                    },
                    cache: true
                },
                escapeMarkup: function(markup) {
                    return markup;
                }, // let our custom formatter work

                minimumInputLength: 1,
                templateResult: formatRepo, // omitted for brevity, see the source of this page
                templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
            });


            function formatRepo(repo) {
                if (repo.loading) return repo.name;
                var markup = "<div class='select2-result-repository clearfix'>" +
                    "<div class='select2-result'><span>" + repo.name + "&nbsp;" + repo.status + "&nbsp;" +
                    repo
                    .ref + "&nbsp" + repo.bar_code + "</span></div>";

                return markup;
            }

            function formatRepoSelection(repo) {
                if (repo.id != "") {
                    $("#workorder_no").load('{{ URL::to('admin/work_order/asset') }}' + '/' + repo.id);
                }
                return repo.name;


            }

        });
    </script>
@stop

@section('style')
    <style>
        #ser_job_description {
            width: 200PX !important;
        }

        #ser_divisionid {
            width: 200PX !important;
        }

        #created_by_user {
            width: 200PX !important;
        }

        th>.select2-container {
            width: 179px !important;
        }

        #ser_supplier_id {
            width: 312px;

        }

        .swal-wide {
            min-width: 700px !important;
            margin-left: -300px;
        }

        .sweet-alert p {
            padding: 0 2em;
            line-height: 2em;
        }

        .status_Pending {
            color: red !important;
        }

        .status_WIP {
            color: #ff6600 !important;
        }

        .status_Completed {
            color: green !important;


        }

        .status_Assigned {
            color: blue !important;

        }

        .status_Accepted {
            color: blue !important;

        }

        /* New Service Request Highlighting */
        .new-service-request {
            background: linear-gradient(90deg, #e8f5e8, #f0fff0) !important;
            border-left: 4px solid #28a745 !important;
            animation: newRowPulse 3s ease-in-out;
            box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2);
        }

        @keyframes newRowPulse {
            0% {
                background-color: #90EE90;
                transform: scale(1.02);
            }

            50% {
                background-color: #98FB98;
            }

            100% {
                background-color: #f0fff0;
                transform: scale(1);
            }
        }

        /* New Badge for Request Numbers */
        .new-badge {
            background: #dc3545;
            color: white;
            font-size: 9px;
            padding: 2px 6px;
            border-radius: 10px;
            margin-left: 5px;
            font-weight: bold;
            animation: badgeBlink 1s ease-in-out infinite alternate;
        }

        @keyframes badgeBlink {
            0% {
                opacity: 1;
            }

            100% {
                opacity: 0.7;
            }
        }

        /* QR Code Source Highlighting */
        .qr-source-highlight {
            background-color: #e3f2fd !important;
            border: 1px solid #2196f3 !important;
        }

        /* Notification Styles */
        .service-request-notification {
            position: fixed;
            top: 20px;
            right: 20px;
            background: linear-gradient(135deg, #28a745, #20c997);
            color: white;
            padding: 15px 20px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            z-index: 10000;
            min-width: 300px;
            animation: slideInRight 0.4s ease-out;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .error-notification {
            position: fixed;
            top: 20px;
            right: 20px;
            background: linear-gradient(135deg, #dc3545, #c82333);
            color: white;
            padding: 15px 20px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            z-index: 10000;
            min-width: 300px;
            animation: slideInRight 0.4s ease-out;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .notification-icon {
            font-size: 24px;
            flex-shrink: 0;
        }

        .notification-content {
            flex-grow: 1;
        }

        .notification-content strong {
            display: block;
            margin-bottom: 4px;
            font-size: 14px;
        }

        .notification-content p {
            margin: 0;
            font-size: 13px;
            opacity: 0.9;
        }

        .notification-close {
            background: none;
            border: none;
            color: white;
            font-size: 20px;
            cursor: pointer;
            padding: 0;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.8;
            transition: opacity 0.2s;
        }

        .notification-close:hover {
            opacity: 1;
        }

        @keyframes slideInRight {
            from {
                transform: translateX(100%);
                opacity: 0;
            }

            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        /* Refreshing Indicator */
        .refreshing-indicator {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            background: linear-gradient(90deg, #007bff, #0056b3);
            color: white;
            text-align: center;
            padding: 8px;
            font-size: 12px;
            font-weight: bold;
            z-index: 1000;
            animation: refreshPulse 1s ease-in-out infinite;
        }

        @keyframes refreshPulse {

            0%,
            100% {
                opacity: 0.8;
            }

            50% {
                opacity: 1;
            }
        }

        /* Refresh Control Buttons */
        .refresh-controls {
            margin: 10px 0;
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }

        .refresh-controls button {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-success {
            background-color: #28a745;
            color: white;
        }

        .btn-success:hover {
            background-color: #218838;
            transform: translateY(-1px);
        }

        .btn-danger {
            background-color: #dc3545;
            color: white;
        }

        .btn-danger:hover {
            background-color: #c82333;
            transform: translateY(-1px);
        }

        .btn-primary {
            background-color: #007bff;
            color: white;
        }

        .btn-primary:hover {
            background-color: #0056b3;
            transform: translateY(-1px);
        }

        .btn-warning {
            background-color: #ffc107;
            color: #212529;
        }

        .btn-warning:hover {
            background-color: #e0a800;
            transform: translateY(-1px);
        }

        .btn-secondary {
            background-color: #6c757d;
            color: white;
        }

        .btn-secondary:hover {
            background-color: #545b62;
            transform: translateY(-1px);
        }

        /* Sound Toggle */
        .sound-toggle {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            user-select: none;
            padding: 8px 12px;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            background: #f8f9fa;
            transition: all 0.3s ease;
        }

        .sound-toggle:hover {
            background: #e9ecef;
        }

        .sound-toggle input[type="checkbox"] {
            margin: 0;
        }

        .sound-toggle span {
            font-size: 14px;
            font-weight: 500;
        }

        /* Auto-refresh status indicator */
        .refresh-status {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: #6c757d;
        }

        .refresh-status.active {
            color: #28a745;
        }

        .refresh-status.active::before {
            content: "●";
            color: #28a745;
            animation: pulse 2s ease-in-out infinite;
        }

        .refresh-status.inactive::before {
            content: "●";
            color: #dc3545;
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.5;
            }
        }

        /* Enhanced table row hover effects */
        #service_request-service_request-list tbody tr:hover {
            background-color: #f8f9fa !important;
            transition: background-color 0.2s ease;
        }

        /* Priority-based row styling (optional enhancement) */
        .priority-high {
            border-left: 3px solid #dc3545;
        }

        .priority-medium {
            border-left: 3px solid #ffc107;
        }

        .priority-low {
            border-left: 3px solid #28a745;
        }

        /* Status-based styling enhancements */
        .status_open {
            background-color: #fff3cd !important;
        }

        .status_in_progress {
            background-color: #d1ecf1 !important;
        }

        .status_completed {
            background-color: #d4edda !important;
        }

        .status_cancelled {
            background-color: #f8d7da !important;
        }

        /* Loading overlay for table */
        .table-loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 999;
        }

        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #007bff;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
@stop