@extends('layouts.admin')
@section('title', 'Admin || Dashboard')
@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 class="page-content fade-in-up">

    <div class="row">
        <div class="col-lg-12">
            <div class="ibox">
                <div class="ibox-head">
                    <div class="ibox-title">
                        <br>
                        <br>
                        <font size="2" color="#e68524" >
                            <center>Brief summery of the Assets</center>
                        </font> <br>
                        <font size="1" color="#3077bb">
                            <center>Click on the tabs to view assets Summery</center>
                        </font>
                    </div>
                </div>

                <br>
                <br>
                <!-- 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>Current</td>
                                        <td>Registered</td>


                                    </tr>


                                    <tr>

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

                                    </tr>
                                    <tr>
                                        <td>Buildings</td>
                                        <td>{{$building_data}}</td>
                                        <td>{{$building_data}}</td>

                                    </tr>
                                    <tr>
                                        <td>Vehicles</td>
                                        <td>{{$vehicle_count}}</td>
                                        <td>{{$vehicle_count}}</td>

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

                                    </tr>
                                    <tr>
                                        <td>Furniture</td>
                                        <td>{{$furniturecount_data}}</td>
                                        <td>{{$furniturecount_data}}</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">
                        <p>...D</p>
                    </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>Equipment</th>
                                            <th>Total Current Count</th>

                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                    <div class="tab-pane fade" id="tabF">
                        <p>Okay, last one E</p>
                    </div>
                </div>
                <!-- End Tabs -->
<br>
<br>
<br>
            </div>


            @endsection