@extends('admin::curd.index')
@section('heading')
@stop

@section('title')
    <img src="{!! URL::to('img/report/analytics.png') !!}"> &nbsp;{!! ucwords('Capacity Utilization Report') !!}
@stop

@section('breadcrumb')
@stop

@section('entry')

@stop

@section('tools')
@stop


@section('content')

    <div class="box-body">
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs primary">

                <li class="active"><a href="{!! trans_url('admin/assets/capacity_utilization/report') !!}" class="active">Report</a></li>

            </ul>

            <div class="tab-content">

                <div class="tab-pane active clearfix" id="details">

                    {!! Form::horizondal_open()->id('asset_utilizationReportForm')->secure()->method('POST')->files('true')->enctype('multipart/form-data') !!}
                    <div class="col-md-5 col-lg-5">

                        {!! Form::select('search[asset_utilizations.company_id]')->id('company_id')->label('Company')->addGroupClass('form-group-sm')->options(Company::companies(),user('admin.web')->current_comp)->disabled()->placeholder('Select Company') !!}

                        {!! Form::select('search[assets.division_id]')->id('division_id')->label('Division')->addGroupClass('form-group-sm')->options(Company::divisions())->placeholder('Select Division') !!}

                        {!! Form::select('search[assets.department_id]')->id('department_id')->options(Department::allDepartments())->placeholder('Select Department')->label('Department')->addGroupClass('form-group-sm') !!}

                        {!! Form::select('search[assets.work_department_id]')->id('work_department_id')->options(WorkDepartment::allWorkDepartments())->placeholder('Select Work Department')->label('Work Department')->addGroupClass('form-group-sm') !!}


                    </div>
                    <div class="col-md-5 col-lg-5">

                        {!! Form::select('search[assets.category_id]')->id('category_id')->options(Category::allCategories())->placeholder('Select Category')->label(trans('assets::asset_utilization.label.category_id'))->addGroupClass('form-group-sm') !!}

                        {!! Form::select('search[assets.subcategory_id]')->id('subcategory_id')->options(Category::allSubcategories())->placeholder('Select Sub Category')->label(trans('assets::asset_utilization.label.subcategory_id'))->addGroupClass('form-group-sm') !!}

                        {!! Form::select('search[assets.subclass_id]')-> options(Category::allSubclasses())->id('subclass_id')-> addGroupClass('form-group-sm')-> label('Subclass')-> placeholder('select Subclass')!!}

                        {!! Form::select('search[asset_id]')->options([])->id('asset_id')->addGroupClass('form-group-sm')->label('Assets')->placeholder('select asset ') !!}
                        <div class="form-group form-group-sm">
                            <label for="primary_view" class="control-label col-lg-3 col-md-6 col-sm-6">
                                Transaction Date
                            </label>
                            <div class="col-lg-5 col-md-3 col-sm-3">

                                {!! Form::date('search[asset_utilizations.trans_date][0]')->id('trans_date_from')->addClass('ser_trans_date')->addGroupClass('form-group-sm')->placeholder('From')->raw() !!}
                            </div>

                            <div class="col-lg-4 col-md-3 col-sm-3 m-l-0">
                                {!! Form::date('search[asset_utilizations.trans_date][1]')->id('trans_date_to')->addClass('ser_trans_date_to')->addGroupClass('form-group-sm')->placeholder('To')->raw() !!}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 col-lg-2">
                        {{-- <div class="m-b-20">
                            <img src="{!! URL::to('img/report/order.png') !!}">&nbsp;
                            <a id="download_report" class="headpicture" href="#">Download Report</a>
                        </div> --}}
                        <div class="m-b-20">
                            <i class="fa fa-question-circle" style="color:#000;"></i>&nbsp;
                            <a id="help" class="headpicture" href="#">Note</a>
                        </div>
                        <div class="m-b-20">
                            <i class="fa fa-file-excel-o" style="color:#000;"></i>&nbsp;
                            <a id="download_csv" class="headpicture" href="#">Download Csv</a>
                        </div>

                        <div class="m-b-20">
                            <i class="fa fa-file-excel-o" style="color:#000;"></i>&nbsp;
                            <a id="subcat_summary" class="headpicture" href="#">Sub Category Wise Summary</a>
                        </div>

                        <div class="m-b-20">
                            <i class="fa fa-file-excel-o" style="color:#000;"></i>&nbsp;
                            <a id="asset_wise" class="headpicture" href="#">Asset Wise Summary</a>
                        </div>
                        <div class="m-b-20">
                            <i class="fa fa-file-excel-o" style="color:#000;"></i>&nbsp;
                            <a id="month_wise" class="headpicture" href="#">Month Wise Summary</a>
                        </div>

                        {{-- <div class="m-b-20">
                  <img src="{!!URL::to('img/report/print.png')!!}">&nbsp;
                  <a class="headpicture popup_a" width="350" id='popup-save-report' style="cursor:pointer">Save Report</a>
                </div>
                <div class="m-b-20">
                  <img src="{!!URL::to('img/report/finish-work.png')!!}">&nbsp;
                  <a class="headpicture popup_a" width="350" id='view_report' href="#">My Saved Reports</a>
                </div> --}}

                        <div class="m-b-20">
                            <i class="fa fa-refresh" style="color:#000;"></i>&nbsp;
                            <a id="resetnow" class="headpicture" style="cursor:pointer;">Reset Filter</a>
                        </div>
                    </div>
                    <div class="col-md-10 col-lg-10">
                        <button type="button" id="gobutton" class="btn btn-success btn-sm" style="width:100%;">Go</button>

                    </div>

                    {!! Form::close() !!}
                </div>
            </div>


        </div>
    </div>

    <div class="nav-tabs-custom">
        <ul class="nav nav-tabs primary">
            {{-- <li><a href="#tab-graph" data-toggle="tab">Graph</a></li> --}}
            <li class="active"><a href="#tab-summary-subcategories" data-toggle="tab">Data summary - Sub category wise</a>
            </li>
            <li><a href="#tab-summary-assets" data-toggle="tab">Data summary - Asset wise</a></li>
            <li><a href="#tab-summary-months" data-toggle="tab">Data summary - Month wise</a></li>
            <li><a href="#tab-full-data" data-toggle="tab">Full Data Set</a></li>
        </ul>

        <div class="tab-content table-responsive">
            <div class="tab-pane active" id="tab-summary-subcategories">
                <div class="table-wrapper" style="margin-left: auto; margin-right: auto;overflow-x: auto;">
                    <table width="100%" id="data_summary_subcategories" border="0" align="center"
                        class="table table-striped display datatable data-table" cellpadding="0" cellspacing="0">
                    </table>
                </div>
            </div>
            <div class="tab-pane" id="tab-summary-assets">
                <div class="table-wrapper" style="margin-left: auto; margin-right: auto;overflow-x: auto;">
                    <table width="100%" id="data_summary_assets" border="0" align="center"
                        class="table table-striped display datatable data-table" cellpadding="0" cellspacing="0">
                    </table>
                </div>
            </div>
             <div class="tab-pane" id="tab-summary-months">
                <div class="table-wrapper" style="margin-left: auto; margin-right: auto;overflow-x: auto;">
                    <table width="100%" id="data_summary_months" border="0" align="center"
                        class="table table-striped display datatable data-table" cellpadding="0" cellspacing="0">
                    </table>
                </div>
            </div>
            <div class="tab-pane" id="tab-full-data">
                <table id="full_listings" class="table table-striped data-table" width="100%">
                    <thead class="list_head">
                        <th>Trans No</th>
                        <th>Trans Date</th>
                        <th>Asset ID</th>
                        <th>Asset Name</th>
                        <th>Department</th>
                        <th>Work Department</th>
                        <th>Category</th>
                        <th>Sub Category</th>
                        <th>Sub Class</th>
                        <th>Utilization</th>
                        <th>Unit</th>
                        <th>Company</th>
                        <th>Division</th>                    
                        <th>Remarks</th>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="save-report">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h3 class="modal-title">Save Report</h3>
                    <div class="popup_description">Type the name and save report for future use.</div>
                </div>
                <div class="modal-body" style="height:110px;">
                    <div class="form-horizontal">

                        <div class="col-md-12 col-lg-12 m-t-20">
                            {!! Form::horizontal_open()->id('report_save')->method('POST')->files('true')->action(trans_url('admin/save_report')) !!}

                            {!! Form::hidden('screen')->forceValue('asset_utilization') !!}

                            {!! Form::text('name')->placeholder('Enter Name')->label('Report Name')->required() !!}

                            {!! Form::close() !!}
                        </div>
                    </div>
                    <div id="resultofsave" class="searchoptiontext"> </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="save-repot" name="Saverep" value="Send"
                        data-dismiss="modal">Save</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="show_report">
        <div class="modal-dialog">
            <div class="modal-content" style="max-width:400px;">
                <div class="modal-header header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Recent Saved Searches</h4>
                </div>
                <div class="modal-body" style="height:210px; overflow-y: auto;">

                    <div id="saved-reports"></div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" name="Closerep" data-dismiss="modal">Close</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h3 class="modal-title" style="text-align: center" id="helpModalLabel">Help</h3>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="max-height: 500px; overflow-y: auto;">
                    <!-- The content will be injected here by JavaScript -->
                    <p>Loading content...</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@stop


<script type="text/javascript">
    var chart;


    $(document).ready(function() {

        $('input[type="date"]').pickadate({
            format: 'dd mmm, yyyy',
            formatSubmit: 'yyyy-mm-dd',
            hiddenSuffix: '',
            selectMonths: true,
            selectYears: true,
            max:new Date(),
            min: new Date(2000, 0, 1)    
        }).prop('type', 'text');

        var today = new Date();
        var fromPicker = $('#trans_date_from').pickadate('picker');
        var toPicker = $('#trans_date_to').pickadate('picker');

        // Default values
        var firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
        fromPicker.set('select', firstDayOfMonth);
        toPicker.set('select', today);

        $("#asset_id").select2({
            // minimumInputLength: 3,
            ajax: {
                url: "{{ trans_url('admin/assets/select2/asset') }}",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        q: params.term, // search term
                        // sublocation_id: $("#sublocationid").val(),
                        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

            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.rfc + "&nbsp;" + repo.name + "</span></div>";

            return markup;
        }

        function formatRepoSelection(repo) {
            return repo.rfc;
        }

        $("#category_id").change(function() {
            $("#subclass_id").empty().append('<option value="">Select Subclass</option>');
            var category = $("#category_id option:selected").val();
            $("#subcategory_id").load('{{ URL::to('admin/category/all/subcategory') }}' + '/' +
                category);             
       
        });    

        $("#subcategory_id").change(function(){
            $("#subclass_id").empty().append('<option value="">Select Subclass</option>');

            var subcategory = $("#subcategory_id option:selected").val();   
            if (subcategory)
            {        
                $("#subclass_id").load('{{URL::to('admin/category/all/subclass')}}'+'/'+subcategory);
            }
        }); 
        
        

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

            return markup;
        }


        function formatRepo3Selection(repo) {
            return repo.name ? repo.name : repo.text;

        }
        var filter = $("#asset_utilizationReportForm").serialize();
        plotGraph("{{ URL::to('admin/assets/capacity_utilization/report/graph') }}" + '/' + filter +
            '');

        @if (@$save_report['search']['company_id'] != '')
            $("#division_id").load(
                '{{ URL::to('admin/company/division/employee') }}/{{ @$save_report['search']['company_id'] }}'
            );
            //  $("#employee_id").load('{{ URL::to('admin/company/employee/company') }}/{{ @$save_report['search']['company_id'] }}');
        @endif

        @if (@$save_report['search']['division_id'] != '')
            $("select[name='search[division_id]").load(
                '{{ URL::to('admin/company/division/employee') }}/{{ @$save_report['search']['company_id'] }}/{{ @$save_report['search']['division_id'] }}'
            );
        @endif

        @if (@$save_report['search']['employee_id'] != '')
            $("select[name='search[employee_id]").load(
                '{{ URL::to('admin/company/employee/company') }}/{{ @$save_report['search']['company_id'] }}/{{ @$save_report['search']['employee_id'] }}'
            );
        @endif

        $("#company_id").change(function() {
            var company = $("#company_id option:selected").val();
            $("#division_id").load('{{ URL::to('admin/company/division/employee') }}' + '/' +
                company);
            // $("#employee_id").load('{{ URL::to('admin/company/employee/company') }}'+'/'+company);
        });

        $('#help').click(function () {
            $.ajax({
                url: "{{ url('admin/assets/capacity_utilization/help_note') }}",
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    if (response.code === 200) {
                        $('#helpModal .modal-body').html(response.content);
                        $('#helpModal').modal('show');
                    } else {
                        swal("Error", response.message || "Something went wrong.", "error");
                    }
                },
                error: function (xhr, status, error) {
                    console.error(error);
                    swal("Error", "Failed to load help content. Please try again.", "error");
                }
            });
        });
        // $("#division_id").change(function(){
        // var division = $("#division_id option:selected").val();
        // $("#employee_id").load('{{ URL::to('admin/company/employee/division') }}'+'/'+division);
        // }); 
        $('input[id=trans_date_from]').change(function() {

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

        $('#view_report').click(function() {
            $('#saved-reports').load("{{ trans_url('admin/asset_utilization/save/save_report') }}");
            $('#show_report').modal("show");
        });

        $("#popup-save-report").click(function() {
            $("#name").val('');
            $("#save-report").modal('show');
        });

        $('#resetnow').click(function() {
            var today = new Date();
            $("input[name='search[asset_utilizations.trans_date][0]']").val('');
            $("input[name='search[asset_utilizations.trans_date][1]']").val('');
            $("#trans_date_from").pickadate('picker').set({
                select: new Date(today.getFullYear(), today.getMonth(), 1),
            });
            $("#trans_date_to").pickadate('picker').set({
                select: new Date(),
            });
            $('#asset_utilizationReportForm')[0].reset();
            $('.select2-selection__rendered').html('');
            var filter = $("#asset_utilizationReportForm").serialize();
            plotGraph("{{ URL::to('admin/assets/capacity_utilization/report/graph') }}" + '/' + filter +
            '');
            var today = new Date();

            $('#group_by_label').html('');
            $('.ser_trans_date').pickadate('picker').set({ select: new Date(today.getFullYear(), today.getMonth(), 1)})
            $('.ser_trans_date_to').pickadate('picker').set({ select: new Date()})
            oTable.api().draw();
        });

        $('#download_report').click(function() {
            var filter = $("#asset_utilizationReportForm").serialize();
            $('#download_report').attr('href',
                "{{ URL::to('admin/assets/capacity_utilization/report/graph/pdf') }}" + "/" + filter);
            $('#download_report').attr("target", "_blank");
        });

        $('#download_csv').click(function() {
            var filter = $("#asset_utilizationReportForm").serialize();
            $('#download_csv').attr('href',
                "{{ URL::to('admin/assets/capacity_utilization/report/graph/csv') }}" + "/" + filter);
            $('#download_csv').attr("target", "_blank");
        });

        $('#subcat_summary').click(function() {
            var filter = $("#asset_utilizationReportForm").serialize();
            $('#subcat_summary').attr('href',
                "{{ URL::to('admin/assets/capacity_utilization/subcat_summary/report/graph/csv') }}" + "/" + filter);
            $('#subcat_summary').attr("target", "_blank");
        });

        $('#asset_wise').click(function() {
            var filter = $("#asset_utilizationReportForm").serialize();
            $('#asset_wise').attr('href',
                "{{ URL::to('admin/assets/capacity_utilization/asset_wise/report/graph/csv') }}" + "/" + filter);
            $('#asset_wise').attr("target", "_blank");
        });
        $('#month_wise').click(function() {
            var filter = $("#asset_utilizationReportForm").serialize();
            $('#month_wise').attr('href',
                "{{ URL::to('admin/assets/capacity_utilization/month_wise/report/graph/csv') }}" + "/" + filter);
            $('#month_wise').attr("target", "_blank");
        });
        $('#save-repot').click(function(e) {
            if ($("#report_save").valid() == false) {
                toastr.error('Please enter valid information.', 'Error');
                return false;
            }
            var postData = $("#report_save").serialize();
            var chartData = $("#asset_utilizationReportForm").serialize();
            var formURL = "{{ trans_url('admin/save_report') }}";
            $.ajax({
                url: formURL,
                type: "POST",
                data: {
                    data: postData,
                    data1: chartData
                },
                success: function(data, textStatus, jqXHR) {},
                error: function(jqXHR, textStatus, errorThrown) {
                    toastr.error('An error occurred while saving.', 'Error');
                    console.log(jqXHR);
                    console.log(textStatus);
                    console.log(errorThrown);
                }
            });

            e.preventDefault();
        });       

        oTable = $('#full_listings').dataTable({
            "bProcessing": true,
            "sDom": 'R<>rt<ilp><"clear">',
            "bServerSide": true,
            "sAjaxSource": '{!! trans_url('admin') !!}/assets/capacity_utilization/report',
            "fnServerData": function(sSource, aoData, fnCallback) {

                $('#full_listings .search_bar input, #full_listings .search_bar select').each(
                    function() {
                        aoData.push({
                            'name': $(this).attr('name'),
                            'value': $(this).val()
                        });
                    }
                );
                $('#asset_utilizationReportForm select, #asset_utilizationReportForm input').each(
                    function() {
                        if ($(this).val() == null || $(this).val() == '') {
                            return;
                        }

                        aoData.push({
                            'name': $(this).attr('name'),
                            'value': $(this).val()
                        });
                    }
                );

                app.dataTable(aoData);
                $.ajax({
                    'dataType': 'json',
                    'data': aoData,
                    'type': 'GET',
                    'url': sSource,
                    'success': fnCallback
                });
            },

            "columns": [

                {
                    data: 'trans_no'
                },                
                {
                    data: 'trans_date'
                },               
                {
                    data: 'asset_id'
                },
                {
                    data: 'asset_name'
                },
                {
                    data: 'department_id'
                },
                {
                    data: 'work_department_id'
                },
                {
                    data: 'category_id'
                },
                {
                    data: 'subcategory_id'
                },
                {
                    data: 'subclass_id'
                },
                {
                    data: 'transactions'
                },
                {
                    data: 'unit'
                },
                {
                    data: 'company_id'
                },
                {
                    data: 'division_id'
                },
                {
                    data: 'remarks'
                }
            ],

            "order": [
                [1, "desc"]
            ],   

            "pageLength": 25
        });

        oTable.api().draw();

            $(document.body).on('click', "#gobutton", function(e) {
                e.preventDefault();
                // chart.showLoading();
                var fromDateObj = fromPicker.get('select');
                var toDateObj = toPicker.get('select');

                if (!fromDateObj || !toDateObj) {
                    alert("Please select both From and To dates.");
                    return;
                }

                var fromDate = new Date(fromDateObj.year, fromDateObj.month, fromDateObj.date);
                var toDate = new Date(toDateObj.year, toDateObj.month, toDateObj.date);

                var dayDiff = Math.floor((toDate - fromDate) / (1000 * 60 * 60 * 24));

                if (dayDiff < 0) {
                    toastr.error("To Date cannot be earlier than From Date.");
                    return;
                }

                if (dayDiff > 364) {
                    toastr.error("The selected date range cannot be greater than 365 days.");
                    return;
                }

                var filter = $("#asset_utilizationReportForm").serialize();
                var filter_label = '';
                var comma = '';
                $("#asset_utilizationReportForm select, #asset_utilizationReportForm input").each(
                    function() {
                        if ($(this).val() != '' || $(this).val() != null) {
                            filter_label += comma + ' ' + $('#' + $(this).attr('id') + ' :selected')
                                .text();
                            comma = ',';
                        }
                    });
                plotGraph("{{ URL::to('admin/assets/capacity_utilization/report/graph') }}" + '/' + filter +
                    '');
                $('#full_listings .search_bar').find("." + $(this).attr('id')).prop('disabled', true);
                oTable.api().draw();
            });
        });

    function plotGraph(url) {
        var label = [], dataA = [], html = '', color = '', count = 0;
        var totalUnit = 0, totalTransactions = 0, totalAmount = 0;
        let percentSum = 0, percentCount = 0;
        var totalAssetCount = 0, totalActualCapacity = 0, totalBreakdownMinutes = 0, totalAdjustedCapacity = 0, totalUtilization = 0;

        // Subcategory wise summary
        html += '<thead class="list_head"><tr height="30" class="listing_headings" >';
        html += '<th style="padding-left:10px;">Category</th>';
        html += '<th style="padding-left:10px;">Subcategory</th>';
        html += '<th style="padding-left:10px;">Asset Count</th>';
        html += '<th style="padding-left:10px;">Unit</th>';
        html += '<th style="padding-left:10px;">Actual Capacity</th>';
        html += '<th style="padding-left:10px;">Breakdown Hours</th>';
        html += '<th style="padding-left:10px;">Adjusted Capacity</th>';
        html += '<th style="padding-left:10px;">Utilization</th>';
        html += '<th style="padding-left:10px;">Capacity Utilization %</th>';
        html += '</tr></thead>';

        $.getJSON(url, function(seriesData) {
            var { subcategory_wise, asset_wise, month_wise } = seriesData;

            $.each(subcategory_wise, function(_, key) {
                color = (count % 2 === 0) ? '#ffffff' : '#e9e9e9';

                let assetCount = parseFloat(key.asset_count || 0);
                let actualCapacity = parseFloat(key.total_actual_capacity || 0);
                let breakdown = parseFloat(key.breakdown_hours || 0);
                let adjusted = parseFloat(key.total_adjusted_capacity || 0);
                let utilization = parseFloat(key.capacity_utilization || 0);
                let percent = parseFloat(key.capacity_utilisation_percentage || 0);

                totalAssetCount += assetCount;
                totalActualCapacity += actualCapacity;
                totalBreakdownMinutes += breakdown;
                totalAdjustedCapacity += adjusted;
                totalUtilization += utilization;

                if (!isNaN(percent)) {
                    percentSum += percent;
                    percentCount++;
                }

                html += `<tr height="25" bgcolor="${color}">
                    <td style="padding-left:10px;">${key.category_name}</td>
                    <td style="padding-left:10px;">${key.sub_category_name}</td>
                    <td style="padding-left:10px;">${key.asset_count}</td>
                    <td style="padding-left:10px;">${key.sub_category_unit}</td>
                    <td style="padding-left:10px;">${key.total_actual_capacity}</td>
                    <td style="padding-left:10px;">${key.breakdown_hours ? Number(key.breakdown_hours).toFixed(2) : '0.00'}</td>
                    <td style="padding-left:10px;">${key.total_adjusted_capacity}</td>
                    <td style="padding-left:10px;">${utilization}</td>
                    <td style="padding-left:10px;">${percent.toFixed(2)}</td>
                </tr>`;

                count++;
            });
            totalUtilPercent = totalAdjustedCapacity > 0
                    ? ((totalUtilization / totalAdjustedCapacity) * 100).toFixed(2)
                    : '0.00';   

            html += `<tr height="30" style="font-weight:bold; background-color:#d0d0d0">
                <td colspan="2" style="padding-left:10px;">TOTAL</td>
                <td style="padding-left:10px;">${totalAssetCount}</td>
                <td></td>
                <td style="padding-left:10px;">${totalActualCapacity}</td>
                <td style="padding-left:10px;">${Number(totalBreakdownMinutes).toFixed(2)}</td>
                <td style="padding-left:10px;">${totalAdjustedCapacity}</td>
                <td style="padding-left:10px;">${totalUtilization.toFixed(2)}</td>
                <td style="padding-left:10px;">${totalUtilPercent}</td>
            </tr>`;

            $('#data_summary_subcategories').html(html);

            // Reset and render asset-wise
            html = '';
            count = 0;
            totalActualCapacity = totalBreakdownMinutes = totalAdjustedCapacity = totalUtilization = percentSum = percentCount = 0;

            html += '<thead class="list_head"><tr height="30" class="listing_headings">';
            html += '<th style="padding-left:10px;">Asset ID</th>';
            html += '<th style="padding-left:10px;">Asset Name</th>';
            html += '<th style="padding-left:10px;">Category</th>';
            html += '<th style="padding-left:10px;">Subcategory</th>';
            html += '<th style="padding-left:10px;">Unit</th>';
            html += '<th style="padding-left:10px;">Actual Capacity</th>';
            html += '<th style="padding-left:10px;">Breakdown Hours</th>';
            html += '<th style="padding-left:10px;">Adjusted Capacity</th>';
            html += '<th style="padding-left:10px;">Utilization</th>';
            html += '<th style="padding-left:10px;">Capacity Utilization %</th>';
            html += '</tr></thead>';

            $.each(asset_wise, function(_, key) {
                color = (count % 2 === 0) ? '#ffffff' : '#e9e9e9';

                let actual = parseFloat(key.total_actual_capacity || 0);
                let breakdown = parseFloat(key.breakdown_hours || 0);
                let adjusted = parseFloat(key.total_adjusted_capacity || 0);
                let utilization = parseFloat(key.capacity_utilization || 0);
                let percent = parseFloat(key.capacity_utilisation_percentage || 0);

                totalActualCapacity += actual;
                totalBreakdownMinutes += breakdown;
                totalAdjustedCapacity += adjusted;
                totalUtilization += utilization;

                if (!isNaN(percent)) {
                    percentSum += percent;
                    percentCount++;
                }

                html += `<tr height="25" bgcolor="${color}">
                    <td style="padding-left:10px;">${key.rfc}</td>
                    <td style="padding-left:10px;">${key.asset_name}</td>
                    <td style="padding-left:10px;">${key.cat}</td>
                    <td style="padding-left:10px;">${key.sub_cat}</td>
                    <td style="padding-left:10px;">${key.sub_category_unit}</td>
                    <td style="padding-left:10px;">${key.total_actual_capacity}</td>
                    <td style="padding-left:10px;">${key.breakdown_hours ? Number(key.breakdown_hours).toFixed(2) : '0.00'}</td>
                    <td style="padding-left:10px;">${key.total_adjusted_capacity}</td>
                    <td style="padding-left:10px;">${utilization}</td>
                    <td style="padding-left:10px;">${percent.toFixed(2)}</td>
                </tr>`;

                count++;
            });

         totalUtilPercent = totalAdjustedCapacity > 0
            ? ((totalUtilization / totalAdjustedCapacity) * 100).toFixed(2)
            : '0.00';

            html += `<tr height="30" style="font-weight:bold; background-color:#d0d0d0">
                <td style="padding-left:10px;">TOTAL</td><td></td><td></td>
                <td></td>
                <td></td>
                <td style="padding-left:10px;">${totalActualCapacity}</td>
                <td style="padding-left:10px;">${Number(totalBreakdownMinutes).toFixed(2)}</td>
                <td style="padding-left:10px;">${totalAdjustedCapacity}</td>
                <td style="padding-left:10px;">${totalUtilization.toFixed(2)}</td>
                <td style="padding-left:10px;">${totalUtilPercent}</td>
            </tr>`;

            $('#data_summary_assets').html(html);

            // ✅ Month + Subcategory-wise summary
            html = '';
            count = 0;
            totalActualCapacity = totalBreakdownMinutes = totalAdjustedCapacity = totalUtilization = percentSum = percentCount = 0;

            html += '<thead class="list_head"><tr height="30" class="listing_headings">';
            html += '<th style="padding-left:10px;">Year & Month</th>';
            html += '<th style="padding-left:10px;">Asset ID</th>';
            html += '<th style="padding-left:10px;">Category</th>';
            html += '<th style="padding-left:10px;">Subcategory</th>';
            html += '<th style="padding-left:10px;">Unit</th>';
            html += '<th style="padding-left:10px;">Actual Capacity</th>';
            html += '<th style="padding-left:10px;">Breakdown Hours</th>';
            html += '<th style="padding-left:10px;">Adjusted Capacity</th>';
            html += '<th style="padding-left:10px;">Utilization</th>';
            html += '<th style="padding-left:10px;">Capacity Utilization %</th>';
            html += '</tr></thead>';


            $.each(month_wise, function(_, key) {
                color = (count % 2 === 0) ? '#ffffff' : '#e9e9e9';
                let monthLabel = key.month_label || '';
                let assetName = key.asset_rfc || '';
                let categoryName = key.cat || key.category_name || '';
                let subcat = key.sub_cat || key.sub_category_name || '';
                let unit = key.sub_category_unit; 
                let actual = parseFloat(key.total_actual_capacity || 0);
                let breakdown = parseFloat(key.breakdown_hours || 0);
                let adjusted = parseFloat(key.total_adjusted_capacity || 0);
                let utilization = parseFloat(key.capacity_utilization || 0);
                let percent = parseFloat(key.capacity_utilisation_percentage || 0);

                totalActualCapacity += actual;
                totalBreakdownMinutes += breakdown;
                totalAdjustedCapacity += adjusted;
                totalUtilization += utilization;

                if (!isNaN(percent)) {
                    percentSum += percent;
                    percentCount++;
                }
                let uniqueAssets = new Set();
                // inside the .each loop:
                if (key.asset_ids) {
                    key.asset_ids.split(',').forEach(id => uniqueAssets.add(id.trim()));
                }

                html += `<tr height="25" bgcolor="${color}">
                    <td style="padding-left:10px;">${monthLabel}</td>
                    <td style="padding-left:10px;">${assetName}</td>
                    <td style="padding-left:10px;">${categoryName}</td>
                    <td style="padding-left:10px;">${subcat}</td>
                    <td style="padding-left:10px;">${unit}</td>
                    <td style="padding-left:10px;">${actual}</td>
                    <td style="padding-left:10px;">${breakdown.toFixed(2)}</td>
                    <td style="padding-left:10px;">${adjusted}</td>
                    <td style="padding-left:10px;">${utilization}</td>
                    <td style="padding-left:10px;">${percent.toFixed(2)}</td>
                </tr>`;

                count++;
            });
            totalAssetCount = count;
            totalUtilPercent = totalAdjustedCapacity > 0
                ? ((totalUtilization / totalAdjustedCapacity) * 100).toFixed(2)
                : '0.00';

            html += `<tr height="30" style="font-weight:bold; background-color:#d0d0d0">
                <td style="padding-left:10px;">TOTAL</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td style="padding-left:10px;">${totalActualCapacity}</td>
                <td style="padding-left:10px;">${totalBreakdownMinutes.toFixed(2)}</td>
                <td style="padding-left:10px;">${totalAdjustedCapacity}</td>
                <td style="padding-left:10px;">${totalUtilization.toFixed(2)}</td>
                <td style="padding-left:10px;">${totalUtilPercent}</td>
            </tr>`;

            $('#data_summary_months').html(html);
    });



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

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

    }
</script>



<style type="text/css">
    .header {
        background: #3c8dbc;
        color: white;
    }
</style>