@extends('template.master')

@section('page_styles')
    {{--CUSTOM STYLES HERE--}}
    <link rel="stylesheet" href="{{asset('assets/css/animate/animate.min.css')}}">
    <link rel="stylesheet" href="{{asset('assets/css/owl-carousel/owl.carousel.min.css')}}">
    <link rel="stylesheet" href="{{asset('assets/css/owl-carousel/owl.theme.min.css')}}">
    <link rel="stylesheet" href="{{asset('assets/css/leaflet/leaflet.min.css')}}">
@stop

@section('content')
    <div class="container-fluid">
        <!-- Begin Page Header-->
        <div class="row">
            <div class="page-header">
                <div class="d-flex align-items-center">
                    <h2 class="page-header-title text-gradient-01">Dashboard</h2>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xl-4">
                <!-- Begin Widget 34 -->
                <div class="widget widget-34 has-shadow">
                    <!-- Begin Widget Header -->
                    <div class="widget-header d-flex align-items-center">
                        <h2>Real Time ReviewsOverall Ratings</h2>
                        <div class="widget-options">
                            <div class="dropdown">
                                <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle">
                                    <i class="la la-circle-o-notch"></i>
                                </button>
                                <div class="dropdown-menu">
                                    <a href="#" class="dropdown-item">
                                        <i class="la la-edit"></i>Edit Widget
                                    </a>
                                    <a href="#" class="dropdown-item faq">
                                        <i class="la la-question-circle"></i>FAQ
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End Widget Header -->
                    <!-- Begin Widget Body -->
                    <div class="widget-body hidden">
                        <div class="row">
                            <div class="col-12 d-flex align-items-center">
                                <div class="r-title">
                                    4.9
                                </div>
                                <div class="star-rating">
                                    <ul>
                                        <li><i class="la la-star rate"></i></li>
                                        <li><i class="la la-star rate"></i></li>
                                        <li><i class="la la-star rate"></i></li>
                                        <li><i class="la la-star rate"></i></li>
                                        <li><i class="la la-star rate"></i></li>
{{--                                        <li><i class="la la-star"></i></li>--}}
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="chart">
                            <div class="row justify-content-center">
                                <div class="col-12">
                                    <!-- Begin Chart -->
                                    <div class="chart-graph">
                                        <div class="chart">
                                            <canvas id="reviews-stats"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End Widget Body -->
                </div>
                <!-- End Widget 34 -->
            </div>


            <div class="col-md-4 db-social" >
                <div class="widget has-shadow">
                    <!-- Begin Widget Header -->
                    <div class="widget-header d-flex align-items-center">
                        <div class="user-image">
                            <img class="rounded-circle" src="assets/img/avatar/avatar-09.jpg" alt="...">
                        </div>
                        <div class="d-flex flex-column mr-auto">
                            <div class="title">
                                <span class="username">Real Time Social</span>
                            </div>
                            <div class="time">Will be published in 20 minutes from now</div>
                        </div>
                        <div class="widget-options">
                            <div class="dropdown">
                                <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle">
                                    <i class="la la-ellipsis-h"></i>
                                </button>
                                <div class="dropdown-menu">
                                    <a href="javascript:void(0);" class="dropdown-item">
                                        <i class="la la-edit"></i>Edit Post
                                    </a>
                                    <a href="javascript:void(0);" class="dropdown-item">
                                        <i class="la la-trash"></i>Delete Post
                                    </a>
                                    <a href="javascript:void(0);" class="dropdown-item">
                                        <i class="la la-bell-slash"></i>Disable Notifications
                                    </a>
                                    <a href="javascript:void(0);" class="dropdown-item faq">
                                        <i class="la la-question-circle"></i>FAQ
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End Widget Header -->
                    <!-- Begin Widget Body -->
                    <div class="widget-body">
                        <p>
                            Aenean dignissim sit amet lectus vitae tempus. Morbi suscipit, tortor at mollis bibendum, mauris risus luctus orci, ut efficitur nisl dolor et orci. Morbi quis justo eu urna efficitur pellentesque vel quis neque. Duis non velit ut tellus luctus pellentesque sed ut est. Etiam convallis sollicitudin tincidunt. Ut iaculis lacus vel dolor faucibus, vitae commodo massa posuere. Fusce tempus iaculis mollis. Vivamus sodales placerat dui, a varius ipsum. Aenean pulvinar felis sit amet turpis gravida dapibus. Sed congue lorem vitae nunc commodo bibendum. Vestibulum quis egestas nunc.
                        </p>
                    </div>
                </div>
            </div>

            {{--CHAT--}}
            <div class="col-xl-4">
                <!-- Begin Widget 36 -->
                <div class="widget-36 widget has-shadow">
                    <!-- Begin Widget Body -->
                    <div class="widget-body">
                        <div class="row">
                            <div class="col-xl-12 text-center mt-5 mb-5">
                                <div class="visitors-nb text-gradient-02">
                                    <img src="{{asset('assets/img/logos/realtimechat-sampler.png')}}" style="width: 55%;"/>
                                </div>
                            </div>
                            <div class="col-xl-6 text-center mt-5">
                                <p class="text-dark">Subscribe Now</p>
                                <div class="mt-2">
                                    <button type="button" class="btn btn-success ripple mr-1 mb-2 btn-block">Go</button>
                                </div>
                            </div>
                            <div class="col-xl-6 text-center mt-5">
                                <p class="text-dark">Service Details</p>
                                <div class="mt-2">
                                    <button type="button" class="btn btn-info ripple mr-1 mb-2 btn-block">
                                        Click to read more
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End Widget Body -->
                </div>
            </div>

            <div class="col-xl-4">
                <!-- Begin Widget 36 -->
                <div class="widget-36 widget has-shadow">
                    <!-- Begin Widget Body -->
                    <div class="widget-body">
                        <center>
                            <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ftrenchlessmarketing%2F&tabs=timeline&width=500&height=1000&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=117353318423325" width="500" height="1000" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
                        </center>
                    </div>
                    <!-- End Widget Body -->
                </div>
            </div>

            <div class="col-xl-8">
                <div class="widget has-shadow">
                    <div class="widget-header bordered no-actions d-flex align-items-center">
                        <h2>News & Announcements</h2>
{{--                        <span>Results:  1 - 12 of 84</span>--}}
                    </div>
                    <div class="widget-body">
                        <div class="row d-flex align-items-center margin-top-20">
                            @for($x=0;$x<=6;$x++)
                            <div class="col-md-12 search-items margin-bottom-20">
                                <h4>
                                    <a class="link-effect" href="#">Some Cool Announcement #{{$x}}</a>
                                </h4>
                                <div class="text-success">{{date('F d, Y '.rand(01,12).':iA', strtotime('-'.$x.' days'))}}</div>
                                <p>
                                    Dolor posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor tincidunt himenaeos habitant quis dictumst proin odio sagittis purus mi, nec taciti vestibulum quis in sit varius lorem sit metus mi.
                                </p>
                            </div>
                            @endfor
                        </div>
                    </div>
                </div>
            </div>
         </div>


    </div>

@stop

@section('page_modals')

@stop
@section('page_scripts')
    <!--CUSTOM SCRIPTS-->
    <script src="{{asset('assets/vendors/js/owl-carousel/owl.carousel.min.js')}}"></script>
    <script>
        (function (d) {
            var j = document.getElementById("reviews-stats").getContext("2d");
            var c = new Chart(j, {
                type: "line",
                data: {
                    labels: ["Jan", "Feb", "Mar", "Apr", "May"],
                    datasets: [{
                        label: "Ratings",
                        borderColor: "#08a6c3",
                        pointRadius: 0,
                        pointHitRadius: 5,
                        pointHoverRadius: 3,
                        pointHoverBorderColor: "#08a6c3",
                        pointHoverBackgroundColor: "#08a6c3",
                        pointHoverBorderWidth: 3,
                        fill: true,
                        backgroundColor: "#fff",
                        borderWidth: 3,
                        data: [10, 4, 10, 7, 12]
                    }]
                },
                options: {
                    tooltips: {
                        backgroundColor: "rgba(47, 49, 66, 0.8)",
                        titleFontSize: 13,
                        titleFontColor: "#fff",
                        caretSize: 0,
                        cornerRadius: 4,
                        xPadding: 5,
                        displayColors: false,
                        yPadding: 5,
                    },
                    layout: {padding: {left: 0, right: 0, top: 0, bottom: 0}},
                    legend: {display: false},
                    scales: {
                        yAxes: [{
                            ticks: {display: false, beginAtZero: false, maxTicksLimit: 2,},
                            gridLines: {drawBorder: false, display: false}
                        }], xAxes: [{gridLines: {drawBorder: false, display: false}, ticks: {display: true}}]
                    }
                }
            });
            d(".widget35").owlCarousel({
                animateOut: "fadeOutDown",
                animateIn: "fadeInDown",
                loop: true,
                autoplay: true,
                autoplayTimeout: 4000,
                autoplayHoverPause: true,
                items: 1,
                margin: 30,
                stagePadding: 0,
                smartSpeed: 450
            });
            var f = function () {
                return (Math.random() > 0.5 ? 1 : 1) * Math.round(Math.random() * 100)
            };
            Chart.helpers.drawRoundedTopRectangle = function (v, u, z, w, t, s) {
                v.beginPath();
                v.moveTo(u + s, z);
                v.lineTo(u + w - s, z);
                v.quadraticCurveTo(u + w, z, u + w, z + s);
                v.lineTo(u + w, z + t);
                v.lineTo(u, z + t);
                v.lineTo(u, z + s);
                v.quadraticCurveTo(u, z, u + s, z);
                v.closePath()
            };
            Chart.elements.RoundedTopRectangle = Chart.elements.Rectangle.extend({
                draw: function () {
                    var I = this._chart.ctx;
                    var K = this._view;
                    var x, M, F, B, u, t, H;
                    var N = K.borderWidth;
                    if (!K.horizontal) {
                        x = K.x - K.width / 2;
                        M = K.x + K.width / 2;
                        F = K.y;
                        B = K.base;
                        u = 1;
                        t = B > F ? 1 : -1;
                        H = K.borderSkipped || "bottom"
                    } else {
                        x = K.base;
                        M = K.x;
                        F = K.y - K.height / 2;
                        B = K.y + K.height / 2;
                        u = M > x ? 1 : -1;
                        t = 1;
                        H = K.borderSkipped || "left"
                    }
                    if (N) {
                        var J = Math.min(Math.abs(x - M), Math.abs(F - B));
                        N = N > J ? J : N;
                        var A = N / 2;
                        var s = x + (H !== "left" ? A * u : 0);
                        var w = M + (H !== "right" ? -A * u : 0);
                        var G = F + (H !== "top" ? A * t : 0);
                        var y = B + (H !== "bottom" ? -A * t : 0);
                        if (s !== w) {
                            F = G;
                            B = y
                        }
                        if (G !== y) {
                            x = s;
                            M = w
                        }
                    }
                    var E = Math.abs(x - M);
                    var C = this._chart.config.options.barRoundness || 0.2;
                    var v = E * C * 0.2;
                    var D = F;
                    F = D + v;
                    var z = F - D;
                    I.beginPath();
                    I.fillStyle = K.backgroundColor;
                    I.strokeStyle = K.borderColor;
                    I.lineWidth = N;
                    Chart.helpers.drawRoundedTopRectangle(I, x, (F - z + 1), E, B - D, z);
                    I.fill();
                    if (N) {
                        I.stroke()
                    }
                    F = D
                },
            });
            Chart.defaults.roundedBar = Chart.helpers.clone(Chart.defaults.bar);
            Chart.controllers.roundedBar = Chart.controllers.bar.extend({dataElementType: Chart.elements.RoundedTopRectangle});
            var j = document.getElementById("orders").getContext("2d");
            var c = new Chart(j, {
                type: "roundedBar",
                data: {
                    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                    datasets: [{
                        label: "Delivered",
                        data: [30, 24, 22, 17, 22, 24, 9, 14, 20, 13, 17, 13],
                        borderColor: "#fff",
                        backgroundColor: "#e76c90",
                        hoverBackgroundColor: "#e76c90"
                    }, {
                        label: "Estimated",
                        data: [10, 14, 12, 20, 20, 8, 10, 20, 7, 11, 8, 10],
                        borderColor: "#fff",
                        backgroundColor: "#5d5386",
                        hoverBackgroundColor: "#5d5386"
                    }]
                },
                options: {
                    responsive: true,
                    barRoundness: 1,
                    tooltips: {
                        backgroundColor: "rgba(47, 49, 66, 0.8)",
                        titleFontSize: 13,
                        titleFontColor: "#fff",
                        caretSize: 0,
                        cornerRadius: 4,
                        xPadding: 5,
                        displayColors: false,
                        yPadding: 5,
                    },
                    legend: {
                        display: true,
                        position: "bottom",
                        labels: {fontColor: "#2e3451", usePointStyle: true, padding: 50, fontSize: 13}
                    },
                    scales: {
                        xAxes: [{
                            barThickness: 12,
                            stacked: false,
                            gridLines: {drawBorder: false, display: false},
                            ticks: {display: true}
                        }],
                        yAxes: [{
                            stacked: false,
                            gridLines: {drawBorder: false, display: false},
                            ticks: {display: false}
                        }]
                    }
                }
            });
            var j = document.getElementById("sale-chart").getContext("2d");
            var c = new Chart(j, {
                type: "line",
                data: {
                    labels: ["September", "October", "November", "December", "January", "Febuary"],
                    datasets: [{
                        label: "Sales",
                        borderColor: "#e76c90",
                        pointBackgroundColor: "#e76c90",
                        pointHoverBorderColor: "#e76c90",
                        pointHoverBackgroundColor: "#e76c90",
                        pointBorderColor: "#fff",
                        pointBorderWidth: 3,
                        pointRadius: 6,
                        fill: true,
                        backgroundColor: "rgba(231, 108, 144, 0.075)",
                        borderWidth: 4,
                        data: [70, 80, 105, 80, 140, 120]
                    }, {
                        label: "Visitors",
                        borderColor: "#aea9c3",
                        pointBackgroundColor: "#aea9c3",
                        pointHoverBorderColor: "#5d5386",
                        pointHoverBackgroundColor: "#5d5386",
                        pointBorderColor: "#fff",
                        pointBorderWidth: 3,
                        pointRadius: 6,
                        fill: true,
                        backgroundColor: "transparent",
                        borderWidth: 3,
                        borderDash: [10, 5],
                        data: [90, 100, 80, 120, 100, 110]
                    }]
                },
                options: {
                    legend: {display: false},
                    tooltips: {
                        backgroundColor: "rgba(47, 49, 66, 0.8)",
                        titleFontSize: 13,
                        titleFontColor: "#fff",
                        caretSize: 0,
                        cornerRadius: 4,
                        xPadding: 10,
                        displayColors: false,
                        yPadding: 10
                    },
                    layout: {padding: {left: -10, right: 0, top: 0, bottom: -20}},
                    scales: {
                        yAxes: [{
                            ticks: {display: false, beginAtZero: false, maxTicksLimit: 3},
                            gridLines: {drawBorder: false, display: false}
                        }], xAxes: [{gridLines: {drawBorder: false, display: false}, ticks: {display: false}}]
                    }
                }
            });
            d(function () {
                d("#demo-calendar").fullCalendar({
                    businessHours: true,
                    defaultView: "month",
                    editable: true,
                    header: {left: "title", center: "month,agendaWeek,agendaDay", right: "today prev,next"},
                    events: [{
                        title: "Barber",
                        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.",
                        start: "2018-09-05",
                        end: "2018-09-05",
                        className: "fc-bg-default",
                        icon: "scissors"
                    }, {
                        title: "Flight Paris",
                        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.",
                        start: "2018-09-08T14:00:00",
                        end: "2018-09-08T20:00:00",
                        className: "fc-bg-violet",
                        icon: "plane",
                        allDay: false
                    }, {
                        title: "Team Meeting",
                        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.",
                        start: "2018-09-10T13:00:00",
                        end: "2018-09-10T16:00:00",
                        className: "fc-bg-orange",
                        icon: "group",
                        allDay: false
                    }, {
                        title: "Meeting",
                        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.",
                        start: "2018-09-12",
                        className: "fc-bg-orange",
                        icon: "suitcase"
                    }, {
                        title: "Conference",
                        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.",
                        start: "2018-09-13",
                        end: "2018-09-15",
                        className: "fc-bg-violet",
                        icon: "calendar"
                    }, {
                        title: "Baby Shower",
                        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.",
                        start: "2018-09-13",
                        end: "2018-09-14",
                        className: "fc-bg-default",
                        icon: "child"
                    }, {
                        title: "Birthday",
                        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.",
                        start: "2018-09-13",
                        end: "2018-09-14",
                        className: "fc-bg-default",
                        icon: "birthday-cake"
                    }, {
                        title: "Restaurant",
                        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.",
                        start: "2018-09-15T09:30:00",
                        end: "2018-09-15T11:45:00",
                        className: "fc-bg-default",
                        icon: "glass",
                        allDay: false
                    }, {
                        title: "Dinner",
                        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.",
                        start: "2018-09-15T20:00:00",
                        end: "2018-09-15T22:30:00",
                        className: "fc-bg-default",
                        icon: "cutlery",
                        allDay: false
                    }, {
                        title: "Shooting",
                        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.",
                        start: "2018-09-25",
                        end: "2018-09-25",
                        className: "fc-bg-blue",
                        icon: "camera"
                    }, {
                        title: "Go Space :)",
                        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.",
                        start: "2018-09-27",
                        end: "2018-09-27",
                        className: "fc-bg-default",
                        icon: "rocket"
                    }, {
                        title: "Dentist",
                        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.",
                        start: "2018-09-29T11:30:00",
                        end: "2018-09-29T012:30:00",
                        className: "fc-bg-blue",
                        icon: "medkit",
                        allDay: false
                    }],
                    eventRender: function (t, s) {
                        if (t.icon) {
                            s.find(".fc-title").prepend("<i class='la la-" + t.icon + "'></i>")
                        }
                    },
                    eventClick: function (u, t, s) {
                        d(".event-icon").html("<i class='la la-" + u.icon + "'></i>");
                        d(".event-title").html(u.title);
                        d(".event-body").html(u.description);
                        d(".eventUrl").attr("href", u.url);
                        d("#modal-view-event").modal()
                    },
                })
            });
            var b = L.layerGroup();
            var k = '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
                e = "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw";
            var h = L.tileLayer(e, {id: "mapbox.light", attribution: k}),
                a = L.tileLayer(e, {id: "mapbox.streets", attribution: k});
            var q = L.map("layer-control", {center: [39.75, -104.9], zoom: 11, layers: [h, b]});
            var p = {Grayscale: h, Streets: a};
            var r = {Customers: b};
            var o = L.icon({iconUrl: "assets/img/avatar/avatar-02.jpg", iconSize: [80, 80],});
            var i = L.icon({iconUrl: "assets/img/avatar/avatar-04.jpg", iconSize: [80, 80],});
            var l = L.icon({iconUrl: "assets/img/avatar/avatar-05.jpg", iconSize: [80, 80],});
            var n = "Brandon Smith <span class='badge-text badge-text-small info ml-2'>Paid</span>";
            var m = "Nathan Hunter <span class='badge-text badge-text-small danger ml-2'>Failed</span>";
            var g = "Megan Duncan <span class='badge-text badge-text-small info ml-2'>Paid</span>";
            L.marker([39.76, -104.9], {icon: o}).bindPopup(n).addTo(b);
            L.marker([39.68, -104.99], {icon: i}).bindPopup(m).addTo(b);
            L.marker([39.73, -104.8], {icon: l}).bindPopup(g).addTo(b);
            L.control.layers(p, r).addTo(q)
        })(jQuery);
    </script>
@stop