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

@section('title')
    <img src="{!! URL::to('img/report/analytics.png') !!}"> &nbsp;{!! ucwords('Reports') !!}
@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/breakdown/report">Breakdown Analysis</a></li>
            </ul>

            <div class="tab-content">

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

                    {!! Form::horizondal_open()->id('workOrderReportForm')->secure()->method('POST')->files('true')->enctype('multipart/form-data') !!}
                    <div class="col-md-5 col-lg-5">
                        {!! Form::select('search[asset_id]')->options(Assets::assets())->id('asset_id')->addGroupClass('form-group-sm')->label('Asset')->placeholder('select') !!}


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


                        {!! Form::select('search[subcategory_id]')->id('subcategory_id')->options([])->addGroupClass('form-group-sm')->label('Subcategory')->placeholder('select') !!}

                        {!! Form::select('search[asset_group_id]')->options(Category::allAssetGroups())->id('asset_group_id')->addGroupClass('form-group-sm')->label('Asset Group')->placeholder('select') !!}

                        {!! Form::select('search[criticality_type]')
                        -> options(trans('assets::asset.options.criticality_type'))
                        -> label('Criticality Type')
                        -> placeholder('Select')
                        -> addGroupClass('form-group-sm')
                        !!} 

                        <div class="form-group form-group-sm">
                            <label for="primary_view" class="control-label col-lg-3 col-md-6 col-sm-6">
                                Breakdown hours
                            </label>
                            <div class="col-lg-4 col-md-2 col-sm-6 p-b-10">

                                {!! Form::number('search[duration][0]')->id('report_duration_from')->addGroupClass('form-group-sm')->placeholder('From')->min(0)->label('From')->raw() !!}
                            </div>
                            <label for="primary_view" class="control-label col-lg-1 col-md-2 col-sm-6">
                                To
                            </label>
                            <div class="col-lg-4 col-md-2 col-sm-6 m-l-0">
                                {!! Form::number('search[duration][1]')->id('report_duration_to')->addGroupClass('form-group-sm')->placeholder('To')->min(0)->label('To')->raw()->addClass('date_to') !!}
                            </div>
                        </div>


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



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

                        {!! Form::select('search[manufacturer_id]')->options(Assets::allManufacturer())->addGroupClass('form-group-sm')->label('Manufacturer')->placeholder('select')->id('manufacturer_id') !!}

                        {!! Form::select('search[used_by]')->options([])->addGroupClass('form-group-sm')->label('Used By')->placeholder('select')->id('used_by') !!}

                        {{-- {!! Form::date('search[date_from]')->id('report_date_from')->addGroupClass('form-group-sm')->placeholder('From Date')->label('From Date') !!}
                        
                      {!! Form::date('search[date_to]')->id('report_date_to')->addGroupClass('form-group-sm')->placeholder('To Date')->label('To') !!} --}}

                        <div class="form-group form-group-sm">
                            <label for="primary_view" class="control-label col-lg-3 col-md-6 col-sm-6">
                                From Date
                            </label>
                            <div class="col-lg-4 col-md-2 col-sm-6 p-b-10">

                                {!! Form::date('search[date_from]')->id('report_date_from')->addClass('datepickfirst')->addGroupClass('form-group-sm')->placeholder('From Date')->label('From Date')->raw() !!}
                            </div>
                            <label for="primary_view" class="control-label col-lg-1 col-md-2 col-sm-6">
                                To
                            </label>
                            <div class="col-lg-4 col-md-2 col-sm-6 m-l-0">
                                {!! Form::date('search[date_to]')->id('report_date_to')->addClass('datepick')->addGroupClass('form-group-sm')->placeholder('To Date')->label('To Date')->raw()->addClass('date_to') !!}
                            </div>
                        </div>
                        {!! Form::select('search[include_prior_breakdown]')->options(trans('assets::breakdown.options.include_prior_breakdown'))->addGroupClass('form-group-sm')->label('Include Breakdown happened prior to this period?')->id('include_prior_breakdown') !!}





                    </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-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="breakdown_based_running_time" class="headpicture" href="#">Based on running time</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 class="active"><a href="#tab-graph" data-toggle="tab">Graph</a></li>
            <li><a href="#tab-summary" data-toggle="tab">Data Summary</a></li>
            <li><a href="#tab-full-data" data-toggle="tab">Full Data Set</a></li>

        </ul>

        <div class="tab-content">
            <div class="tab-pane active" id="tab-graph">
                <div id="chart_container">
                    <canvas id="chart_span"></canvas>
                </div>
            </div>
            <div class="tab-pane" id="tab-summary">
                <div class="table-wrapper" style="margin-left: auto; margin-right: auto;overflow-x: auto;">
                    <table width="100%" id="data_summary" 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>Asset Id</th>
                        <th>Asset</th>
                        <th>Manufacturer</th>
                        <th>Start Date & Time</th>
                        <th>End Date & Time</th>
                        <th>Duration</th>
                        <th>Duration in Minutes</th>
                        <th>Duration on Op.Hrs</th>
                        <th>Duration Op.Hrs in Minuts</th>
                        <th>Revenue Loss</th>
                        <th>{!! trans('assets::asset.label.category_id') !!}</th>
                        <th>{!! trans('assets::asset.label.asset_type') !!}</th>
                        <th>{!! trans('assets::asset.label.asset_group_id') !!}</th>
                        <th>{!! trans('assets::asset.label.company_id') !!}</th>
                        <th>{!! trans('assets::asset.label.division_id') !!}</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('breakdown') !!}

                            {!! 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 -->

@stop

<script src="{!! trans_url('packages/charts/chart.js') !!}"></script>

<script type="text/javascript">
    let chart;
    $(document).ready(function() {
            
        var company = $("#company_id option:selected").val();
        $("#division_id").load('{{URL::to("/admin/company/accessible_divisions/employee")}}'+'/'+company);
        // $('input[type="date"]').pickadate({
        //       format: 'dd mmm, yyyy',
        //       formatSubmit: 'yyyy-mm-dd',
        //       hiddenSuffix: '',
        //       selectMonths: true,
        //       selectYears: true
        //   }).prop('type', 'text');  
        var date = new Date();
        $(".datepickfirst").pickadate({
            format: 'dd mmm, yyyy',
            formatSubmit: 'yyyy-mm-dd 00:00:00',
            hiddenSuffix: '',
            selectMonths: true,
            selectYears: true,
            onStart: function() {
                this.set({
                    select: new Date(date.getFullYear(), date.getMonth(), 1)
                });
            }
        }).prop('type', 'text');

        $(".datepick").pickadate({
            format: 'dd mmm, yyyy',
            formatSubmit: 'yyyy-mm-dd 23:59:59',
            // formatSubmit: 'yyyy-mm-dd',
            hiddenSuffix: '',
            selectMonths: true,
            selectYears: true,
            onStart: function() {
                this.set({
                    select: new Date()
                });
            }
        }).prop('type', 'text');

        @if (@$save_report['search']['category_id'] != '')
            $("select[name='search[subcategory_id]").load(
                '{{ URL::to('admin/category/subcategory') }}/{{ @$save_report['search']['category_id'] }}');
        @endif

        // @if (@$save_report['search']['subcategory_id'] != '')
        //     $("#subcategory_id").load(
        //         '{{ URL::to('admin/category/subcategory') }}/{{ @$save_report['search']['category_id'] }}/{{ @$save_report['search']['subcategory_id'] }}'
        //     );
        //     $("select[name='search[asset_group_id]").load(
        //         '{{ URL::to('admin/category/asset_group/subcategory') }}/{{ @$save_report['search']['subcategory_id'] }}'
        //     );
        // @endif

        @if (@$save_report['search']['asset_group_id'] != '')
            $("select[name='search[asset_group_id]").load(
                '{{ URL::to('admin/category/asset_group/subcategory') }}/{{ @$save_report['search']['subcategory_id'] }}/{{ @$save_report['search']['asset_group_id'] }}'
            );
        @endif

        @if (@$save_report['search']['company_id'] != '')
            $("select[name='search[division_id]").load(
                '{{ URL::to('admin/company/accessible_divisions/employee') }}/{{ @$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']['used_by'] != '')
            $("select[name='search[used_by]").load(
                '{{ URL::to('admin/company/employee/division') }}/{{ @$save_report['search']['division_id'] }}/{{ @$save_report['search']['used_by'] }}'
            );
        @endif

        @if (@$save_report['search']['location_id'] != '')
            $("select[name='search[sublocation_id]").load(
                '{{ URL::to('admin/location/sub_location/location') }}/{{ @$save_report['search']['location_id'] }}'
            );
        @endif

        @if (@$save_report['search']['sublocation_id'] != '')
            $("#sublocation_id").load(
                '{{ URL::to('admin/location/sub_location/location') }}/{{ @$save_report['search']['location_id'] }}/{{ @$save_report['search']['sublocation_id'] }}'
            );
        @endif


        var filter = $("#workOrderReportForm").serialize();
        plotGraph("{{ URL::to('admin/assets/breakdown/report/getgraph') }}" + '/' + filter + '');

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

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

        $('#resetnow').click(function() {
            $('#workOrderReportForm')[0].reset();
            // $("input[name='search[date_from]']").val('');
            // $("input[name='search[date_to]']").val('');
            $('.select2-selection__rendered').html('');
            var filter = $("#workOrderReportForm").serialize();
            plotGraph("{{ URL::to('admin/assets/breakdown/report/getgraph') }}" + '/' + filter +
                '');

            $('#workOrderReportForm')[0].reset();

            var date = new Date(),
            y = date.getFullYear(),
            m = date.getMonth();

            var firstDay = new Date(y, m, 1);
            
            var pickerFrom = $('#report_date_from').pickadate('picker');
            pickerFrom.set('select', firstDay);

            var pickerTo = $('#report_date_to').pickadate('picker');
            pickerTo.set('select', new Date());

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

            oTable.api().draw();
        });

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

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

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

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



        $('#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 = $("#workOrderReportForm").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();
        });
        // var ctx = document.getElementById('chart_span').getContext('2d');

        oTable = $('#full_listings').dataTable({
            "bProcessing": true,
            "sDom": 'R<>rt<ilp><"clear">',
            "bServerSide": true,
            "sAjaxSource": '{!! trans_url('admin') !!}/assets/breakdown/reports',
            "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()
                        });
                    }
                );
                $('#workOrderReportForm select, #workOrderReportForm 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,
                    "dataSrc": function(json) {
                        var filteredData = json.data.filter(function(row) {
                            return row !== null;
                        });
                        return filteredData;
                    }
                });
            },

            "columns": [{
                    data: 'rfc'
                },
                {
                    data: 'asset_name'
                },
                {
                    data: 'manufacturer_name'
                },
                {
                    data: 'start_date'
                },
                {
                    data: 'end_date'
                },
                {
                    data: 'formatted_duration'
                },
                {
                    data: 'duration_minutes'
                },
                {
                    data: 'runtime_duration'
                },
                {
                    data: 'runtime_duration_minuts'
                },
                {
                    data: 'revenue_loss'
                },
                {
                    data: 'category_name'
                },
                {
                    data: 'asset_type'
                },
                {
                    data: 'asset_group_name'
                },
                {
                    data: 'company_name'
                },
                {
                    data: 'division_name'
                },

            ],

            "pageLength": 25
        });


        $(document.body).on('click', "#gobutton", function(e) {

            if ($('#report_date_to').val() != '') {
                var from = $("#report_date_from").val();
                var to = $("#report_date_to").val();
                var fromdate = new Date(from);
                var todate = new Date(to);
                if (todate < fromdate) {
                    $("#report_date_to").addClass("error");
                    toastr.error('Check the date range', 'Error');
                    return false;
                }
            }

            e.preventDefault();
            var filter = $("#workOrderReportForm").serialize();

            // alert(filter);
            var filter_label = '';
            var comma = '';
            $("#workOrderReportForm select, #workOrderReportForm input").each(function() {
                if ($(this).val() != '' || $(this).val() != null) {
                    filter_label += comma + ' ' + $('#' + $(this).attr('id') + ' :selected')
                        .text();
                    comma = ',';
                }
            });


            plotGraph("{{ URL::to('admin/assets/breakdown/report/getgraph') }}" + '/' + filter +
                '');


            $('#full_listings .search_bar').find("." + $(this).attr('id')).prop('disabled', true);
            oTable.api().draw();
        });

        $("#asset_id").select2({
            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,
                        break_down_flag: 1
                    };
                },
                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.name + "&nbsp;" + repo.rfc + "&nbsp;" + repo
                .bar_code + "</span></div>";

            return markup;
        }

        function formatRepoSelection(repo) {
            if (repo.text) {
                return repo.text; 
            } else if (repo.name) {
                return repo.name; 
            }
            return ''; 
        }

    });

    function plotGraph(url) {
        var label = new Array();
        var dataA = new Array();
        var dataB = new Array();
        var dataC = new Array();
        var dataD = new Array();

        var html = '';
        var color = '';
        var count = 0;
        var Owned = 0;
        var Rented = 0;
        var Third_party = 0;
        var Donated = 0;

        html += '<thead class="list_head"><tr height="30" class="listing_headings" >';
        html += '<th width="320" style="padding-left:10px;" >Group By</th>';
        html += '<th width="320" style="padding-left:10px;" >Owned </th>';
        html += '<th width="320" style="padding-left:10px;" >Rented </th>';
        html += '<th width="320" style="padding-left:10px;" >Third party </th>';
        html += '<th width="320" style="padding-left:10px;" >Donated </th>';

        html += '</tr></thead>';


        $.getJSON(url, function(seriesData) {
            $.each(seriesData, function(id, key) {
                if (count % 2 == 0) {
                    color = '#ffffff';
                } else {
                    color = '#e9e9e9'
                }

                label.push(key.labels);
                dataA.push(convertSeconds(key.chart_owned));
                dataB.push(convertSeconds(key.chart_rented));
                dataC.push(convertSeconds(key.chart_third_party));
                dataD.push(convertSeconds(key.chart_donated));
                // Owned += parseFloat(key.Owned);
                // Rented += parseFloat(key.Rented);
                // Third_party += parseFloat(key.Third_party);
                html += '<tr height="25">';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.labels +
                    '</td>';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.Owned + '</td>';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.Rented +
                    '</td>';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.Third_party +
                    '</td>';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.Donated +
                    '</td>';
                html += '</tr>';
                count++;
            });

            if (count % 2 == 0) {
                color = '#ffffff';
            } else {
                color = '#e9e9e9'
            }

            // html += '<tr height="25">';
            // html += '<td style="padding-left:10px;" bgcolor="' + color + '">Total (hours)</td>';
            // html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + Owned +
            //     '</td>';
            // html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + Rented +
            //     '</td>';
            // html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + Third_party + '</td>';
            // html += '</tr>';

            $('#data_summary').html(html)
            $('#chart_container').html(
                "<canvas id='chart_span' > < /canvas>"
            );
            createBarChart(label, dataA, dataB, dataC ,dataD);
            // chart.xAxis[0].setCategories(label);
            // chart.series[0].setData(dataA);
            // chart.series[1].setData(dataB);
            // chart.series[2].setData(dataC);
            // chart.redraw();
            // chart.hideLoading();
        });






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

        // $("#subcategory_id").change(function() {
        //     var subcategory = $("#subcategory_id option:selected").val();
        //     $("#asset_group_id").load('{{ URL::to('admin/category/asset_group/subcategory') }}' + '/' +
        //         subcategory);
        // });
    

    

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

        $("#location_id").change(function() {
            var location = $("#location_id option:selected").val();
            $("#sublocation_id").load('{{ URL::to('admin/location/sub_location/location') }}' + '/' +
                location);
        });
    }

    function convertSeconds(seconds) {
        if (!seconds) return {
            days: 0,
            hours: 0,
            minutes: 0,
            totalHours: 0,
            totalMinutes: 0
        };
        var days = Math.floor(seconds / (24 * 3600));
        seconds -= days * 24 * 3600;
        var hours = Math.floor(seconds / 3600);
        seconds -= hours * 3600;
        var minutes = Math.floor(seconds / 60);
        return {
            days: days,
            hours: hours,
            minutes: minutes,
            totalHours: days * 24 + hours,
            totalMinutes: days * 1440 + hours * 60 + minutes
        };
    }

    function createBarChart(labels, dataA, dataB, dataC ,dataD) {
        var ctx = document.getElementById('chart_span').getContext('2d');
        if (chart) {
            //not working
            chart.destroy();
            chart = null; // Set chart to null to ensure proper cleanup
        }
        var chart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                        label: 'Owned',
                        data: dataA.map(item => item.totalMinutes),
                        // backgroundColor: '#f15c80',
                        // borderWidth: 1
                    },
                    {
                        label: 'Rented',
                        data: dataB.map(item => item.totalMinutes),
                        // backgroundColor: '#ffc107',
                        // borderWidth: 1
                    },
                    {
                        label: 'Third Party',
                        data: dataC.map(item => item.totalMinutes),
                        // backgroundColor: '#38d39f',
                        // borderWidth: 1
                    },
                    {
                        label: 'Donated',
                        data: dataD.map(item => item.totalMinutes),
                        // backgroundColor: '#38d39f',
                        // borderWidth: 1
                    }
                ]
            },
            options: {
                scales: {
                    x: {
                        grid: {
                            display: true
                        },
                        ticks: {
                            color: 'black',
                            maxRotation: 45,
                            minRotation: 45,
                            autoSkip: false,
                            font: {
                                size: 10
                            }
                        }
                    },
                    y: {
                        beginAtZero: true,
                        stacked: true,
                        title: {
                            display: true,
                            text: 'Duration',
                            color: 'black'
                        },
                        grid: {
                            display: true
                        },
                        ticks: {
                            color: 'black',
                            callback: function(value, index, values) {
                                return formatDuration(value);
                            }
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: true,
                        labels: {
                            color: 'black',
                            font: {
                                size: 11
                            }
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                var dataIndex = context.dataIndex;
                                var datasetIndex = context.datasetIndex;
                                var dataset = context.chart.data.datasets[datasetIndex];
                                var item = dataset.data[dataIndex];

                                return formatDuration(item);
                            }
                        }
                    },
                    title: {
                        display: true,
                        text: '',
                        color: 'rgb(51, 51, 51)',
                    }
                }
            }
        });
    }

    function formatDuration(value) {
        var minutes = Math.abs(value); // Get the absolute value of minutes
        var days = Math.floor(minutes / 1440); // 1440 minutes in a day
        minutes %= 1440; // Remaining minutes after extracting days
        var hours = Math.floor(minutes / 60); // 60 minutes in an hour
        minutes %= 60; // Remaining minutes after extracting hours

        // Formatting the output based on the presence of days, hours, and minutes
        if (days > 0) {
            return `${days}d ${hours}h ${minutes}m`; // Show days, hours, and minutes
        } else if (hours > 0) {
            return `${hours}h ${minutes}m`; // Show hours and minutes
        } else {
            return `${minutes}m`; // Show only minutes
        }
    }
</script>

<style type="text/css">
    .header {
        background: #3c8dbc;
        color: white;
    }
    #chart_container {
        position: relative;
        width: 100%;
        height: 55vh;
    }
</style>