@extends('layouts.rptviewer')
@section('title','GIMS')
@section('styles')

<style>
    .nav-tabs-wrapper {
        display: block;
        overflow: hidden;
        height: calc(1.5rem + 1rem + 2px);
        /** 1.5 is font-size, 1 is padding top and bottom, 2 is border width top and bottom */
        position: relative;
        z-index: 1;
        margin-bottom: -1px;

        .nav-tabs {
            overflow-x: auto;
            flex-wrap: nowrap;
            border-bottom: 0;
        }

        .nav-item {
            margin-bottom: 0;

            &:first-child {
                padding-left: 15px;
            }

            &:last-child {
                padding-right: 15px;
            }
        }

        .nav-link {
            white-space: nowrap;
        }

        .dragscroll:active,
        .dragscroll:active a {
            cursor: -webkit-grabbing;
        }
    }

    .nav-tabs-wrapper-border {
        display: block;
        width: 100%;
        border-top: 1px solid #e68524;
    }

    .tab-pane {
        padding: 1rem;
    }

    body {
        color: #e68524;
    }
</style>


@endsection
@section('script')
<script src="{{ asset('js/Chart.min.js') }}"></script>

<script>
    (function(root, factory) {
        if (typeof define === 'function' && define.amd) {
            define(['exports'], factory);
        } else if (typeof exports !== 'undefined') {
            factory(exports);
        } else {
            factory((root.dragscroll = {}));
        }
    }(this, function(exports) {
        var _window = window;
        var _document = document;
        var mousemove = 'mousemove';
        var mouseup = 'mouseup';
        var mousedown = 'mousedown';
        var EventListener = 'EventListener';
        var addEventListener = 'add' + EventListener;
        var removeEventListener = 'remove' + EventListener;
        var newScrollX, newScrollY;

        var dragged = [];
        var reset = function(i, el) {
            for (i = 0; i < dragged.length;) {
                el = dragged[i++];
                el = el.container || el;
                el[removeEventListener](mousedown, el.md, 0);
                _window[removeEventListener](mouseup, el.mu, 0);
                _window[removeEventListener](mousemove, el.mm, 0);
            }

            // cloning into array since HTMLCollection is updated dynamically
            dragged = [].slice.call(_document.getElementsByClassName('dragscroll'));
            for (i = 0; i < dragged.length;) {
                (function(el, lastClientX, lastClientY, pushed, scroller, cont) {
                    (cont = el.container || el)[addEventListener](
                        mousedown,
                        cont.md = function(e) {
                            if (!el.hasAttribute('nochilddrag') ||
                                _document.elementFromPoint(
                                    e.pageX, e.pageY
                                ) == cont
                            ) {
                                pushed = 1;
                                lastClientX = e.clientX;
                                lastClientY = e.clientY;

                                e.preventDefault();
                            }
                        }, 0
                    );

                    _window[addEventListener](
                        mouseup, cont.mu = function() {
                            pushed = 0;
                        }, 0
                    );

                    _window[addEventListener](
                        mousemove,
                        cont.mm = function(e) {
                            if (pushed) {
                                (scroller = el.scroller || el).scrollLeft -=
                                    newScrollX = (-lastClientX + (lastClientX = e.clientX));
                                scroller.scrollTop -=
                                    newScrollY = (-lastClientY + (lastClientY = e.clientY));
                                if (el == _document.body) {
                                    (scroller = _document.documentElement).scrollLeft -= newScrollX;
                                    scroller.scrollTop -= newScrollY;
                                }
                            }
                        }, 0
                    );
                })(dragged[i++]);
            }
        }


        if (_document.readyState == 'complete') {
            reset();
        } else {
            _window[addEventListener]('load', reset, 0);
        }

        exports.reset = reset;
    }));




    new Chart(document.getElementById("pie-chart"), {
        type: 'pie',
        data: {
            labels: ["Land", "Building", "Vehicle", "Equipment", "Furniture"],
            datasets: [{
                label: "Assets",
                backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
                data: ['{{$landcount_data}}', 2, '{{$vehicle_count}}', '{{$application_data}}', '{{$furniturecount_data}}']
            }]
        },
        options: {
            legend: {
                position: 'right'
            },
            title: {
                display: true,
                text: 'Asset Representation'
            }
        }
    });
</script>
@endsection
@section('content')

<div style="background-color: #fff">
    <div class="mb-3 text-center p-5">
        <font size="2" color="#e68524">Brief summary of the Assets</font> <br>
        <font size="1" color="#3077bb"> Click on the tabs to view assets Summary </font>

    </div>


    <!-- Start Tabs -->
    <div class="nav-tabs-wrapper">
        <ul class="nav nav-tabs dragscroll horizontal">
            <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tabA"><i class="fas fa-home color-blue"></i>&nbspHome</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tabB"><i class="fas fa-mountain color-blue"></i>&nbspLand</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tabC"><i class="far fa-building color-blue"></i>&nbspBuilding</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tabD"><i class="fas fa-car color-blue"></i>&nbspVehicle</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tabE"><i class="fas fa-laptop color-blue"></i>&nbspEquipment</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tabF"><i class="fas fa-chair color-blue"></i>&nbspFurniture</a></li>
        </ul>
    </div>

    <span class="nav-tabs-wrapper-border" role="presentation"></span>

    <div class="tab-content">
        <div class="tab-pane fade show active" id="tabA">
            <div class="row">

                <div class="col-6">

                    <table class="table table-bordered">

                        <tr>

                            <td>Assets</td>
                            <td>Registered</td>
                            <td>Disposed</td>
                            <td>Current</td>
                            <td>Unallocated</td>


                        </tr>

           
                        <tr>

                            <td>Land</td>
                            <td>{{$landcount_data}}</td>
                            <td>0</td>
                            <td>{{$landcount_data}}</td>
                            <td>{{$unallocatedland}}</td>

                        </tr>
                        <tr>
                            <td>Buildings</td>
                            <td>{{$building_data}}</td>
                            <td>{{$buildingdisposed}}</td>
                            <td>{{$currentbuilding}}</td>
                            <td>{{$unallocatedbuilding}}</td>

                        </tr>
                        <tr>
                            <td>Vehicles</td>
                            <td>{{$vehicle_count}}</td>
                            <td>{{$disposedvehicle}}</td>
                            <td>{{$currentcount}}</td>
                            <td>{{$unallocatedvehicle}}</td>

                        </tr>
                        <tr>
                            <td>Equipment</td>
                            <td>{{$application_data}}</td>
                            <td>{{$disposedequipment_data}}</td>
                            <td>{{$registered_data}}</td>
                            <td>{{$equipmenunallocated}}</td>

                        </tr>
                        <tr>
                            <td>Furniture</td>
                            <td>{{$furniturecount_data}}</td>
                            <td>{{$furnituredisposal}}</td>
                            <td>{{$currentfurniture}}</td>
                            <td>{{$unallocatedfurniture}}</td>

                        </tr>



                    </table>
                </div>

                <div class="col-6">

                    <canvas id="pie-chart" width="800" height="450"></canvas>

                </div>

            </div>
        </div>
        <div class="tab-pane fade" id="tabB">

        </div>
        <div class="tab-pane fade" id="tabC">
            <p>and C</p>
        </div>
        <div class="tab-pane fade" id="tabD">
            <div class="row">

                <div class="col-12">

                    <table class="table table-bordered">

                        <thead class="thead-light">
                            <tr>
                                <th>ID</th>
                                <th>Vehicle</th>
                                <th>Total Current Count</th>

                            </tr>
                        </thead>
                        <tbody>
                            @if($divisionwisevehicle_data)
                            @foreach($divisionwisevehicle_data as $equip_data)
                            <tr>
                                <td>{{ $equip_data->asset_name_id}}</td>
                                <td>{{ @$equip_data->asset_name['asset_name']}}</td>
                                <td>{{ @$equip_data->vehicount }}</td>

                            </tr>
                            @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>

            </div>

        </div>
        <div class="tab-pane fade" id="tabE">
            <div class="row">

                <div class="col-12">

                    <table class="table table-bordered">

                        <thead class="thead-light">
                            <tr>
                                <th>ID</th>
                                <th>Equipment</th>
                                <th>Total Current Count</th>

                            </tr>
                        </thead>
                        <tbody>
                            @if($divisionwiseequipment_data)
                            @foreach($divisionwiseequipment_data as $equip_data)
                            <tr>
                                <td>{{ $equip_data->asset_name_id}}</td>
                                <td>{{ @$equip_data->asset_name['asset_name']}}</td>
                                <td>{{ @$equip_data->equipcount }}</td>

                            </tr>
                            @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
        <div class="tab-pane fade" id="tabF">
            <div class="row">

                <div class="col-12">

                    <table class="table table-bordered">

                        <thead class="thead-light">
                            <tr>
                                <th>ID</th>
                                <th>Furniture</th>
                                <th>Total Current Count</th>

                            </tr>
                        </thead>
                        <tbody>
                            @if($divisionwisefurniture_data)
                            @foreach($divisionwisefurniture_data as $equip_data)
                            <tr>
                                <td>{{ $equip_data->asset_name_id}}</td>
                                <td>{{ @$equip_data->asset_name['asset_name']}}</td>
                                <td>{{ @$equip_data->furnicount }}</td>

                            </tr>
                            @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
    <!-- End Tabs -->

</div>

@endsection