@extends('layouts.app')

@section('title', 'Dashboard')

@section('title-section', 'Dashboard')

@push('addon-style')
    <link rel="stylesheet" href="{{ asset('assets/plugins/jquery-ricksaw-chart/css/rickshaw.css') }}" type="text/css"
        media="screen">
    <link rel="stylesheet" href="{{ asset('assets/plugins/jquery-morris-chart/css/morris.css') }}" type="text/css"
        media="screen">
@endpush

@section('content')
    <div class="row">
        <div class="col-md-12 ">
            <div class="tiles white m-b-10">
                <div class="tiles-body">
                    <div class="controller">
                        <a href="javascript:;" class="reload"></a>
                        <a href="javascript:;" class="remove"></a>
                    </div>
                    <div class="tiles-title"> NOTIFICATION & REMINDER </div>
                    <br>
                    @foreach ($timelines as $timeline)
                        <div class="notification-messages danger">
                            <div class="iconholder"> <i class="icon-warning-sign"></i> </div>
                            <div class="message-wrapper">
                                <div class="heading"> {{ $timeline['nama_timeline'] }} </div>
                                <div class="description"> {{ $timeline['tgl_akhir'] }} </div>
                            </div>
                            <div class="date pull-right"> {{ $timeline['tgl_mulai'] }} </div>
                            <div class="clearfix"></div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <div class="row 2col">
        <div class="col-md-3 col-sm-6 m-b-10">
            <div class="tiles blue ">
                <div class="tiles-body">
                    <div class="controller">
                        <a href="javascript:;" class="reload"></a>
                        <a href="javascript:;" class="remove"></a>
                    </div>
                    <div class="tiles-title"> PROJECT BARU </div>
                    <div class="heading"> <span class="animate-number" data-value="{{ $countNewProject['sum'] }}"
                            data-animation-duration="700">{{ $countNewProject['sum'] }}</span> </div>
                    <div class="progress transparent progress-small no-radius">
                        <div class="progress-bar progress-bar-white animate-progress-bar" data-percentage="104%"></div>
                    </div>
                    <div class="description"><i class="icon-custom-up"></i><span class="text-white mini-description ">&nbsp;
                            {{ $countNewProject['percentage'] }}%
                            {{ $countNewProject['message'] == null ? '' : $countNewProject['message'] }} <span
                                class="blend">than last month</span></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 m-b-10">
            <div class="tiles green ">
                <div class="tiles-body">
                    <div class="controller">
                        <a href="javascript:;" class="reload"></a>
                        <a href="javascript:;" class="remove"></a>
                    </div>
                    <div class="tiles-title"> TOTAL PENJUALAN </div>
                    <div class="heading"> Rp <span class="animate-number" data-value="456000000"
                            data-animation-duration="700">0</span> </div>
                    <div class="progress transparent progress-small no-radius">
                        <div class="progress-bar progress-bar-white animate-progress-bar" data-percentage="79%"></div>
                    </div>
                    <div class="description"><i class="icon-custom-down"></i><span
                            class="text-white mini-description ">&nbsp; 21% lower <span class="blend">than last
                                month</span></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 m-b-10">
            <div class="tiles red ">
                <div class="tiles-body">
                    <div class="controller">
                        <a href="javascript:;" class="reload"></a>
                        <a href="javascript:;" class="remove"></a>
                    </div>
                    <div class="tiles-title"> PENJUALAN HARI INI </div>
                    <div class="heading"> Rp <span class="animate-number" data-value="62000000"
                            data-animation-duration="700">0</span> </div>
                    <div class="progress transparent progress-white progress-small no-radius">
                        <div class="progress-bar progress-bar-white animate-progress-bar" data-percentage="150%"></div>
                    </div>
                    <div class="description"><i class="icon-custom-up"></i><span class="text-white mini-description ">&nbsp;
                            50% higher <span class="blend">than last day</span></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 m-b-10">
            <div class="tiles purple  ">
                <div class="tiles-body">
                    <div class="controller">
                        <a href="javascript:;" class="reload"></a>
                        <a href="javascript:;" class="remove"></a>
                    </div>
                    <div class="tiles-title"> PESAN MASUK </div>
                    <div class="row-fluid">
                        <div class="heading"> <span class="animate-number" data-value="{{ $countMessages['sum'] }}"
                                data-animation-duration="700">{{ $countMessages['sum'] }}</span> </div>
                        <div class="progress transparent progress-white progress-small no-radius">
                            <div class="progress-bar progress-bar-white animate-progress-bar" data-percentage="103%">
                            </div>
                        </div>
                    </div>
                    <div class="description"><i class="icon-custom-up"></i><span
                            class="text-white mini-description ">&nbsp;
                            {{ $countMessages['percentage'] }}%
                            {{ $countMessages['message'] === null ? '' : $countMessages['message'] }} <span
                                class="blend">than last month</span></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- BEGIN WORLD MAP WIDGET - MAP -->
        <div class="col-md-6 col-vlg-6 m-b-10">
            <div class="row">
                <div class="col-md-12" data-sync-height="true">
                    <div class="col-md-12 col-vlg-12 col-sm-12 no-padding">
                        <div class="tiles black">
                            <div class="tiles-body">
                                <h5 class="text-white"><span class="semi-bold">DATA</span> CUSTOMER</h5>
                                <input type="text" placeholder="Search..." class="form-control input-sm m-t-20">
                                <div class="m-t-40">
                                    <div class="widget-stats">
                                        <div class="wrapper"> <span class="item-title">Total Project</span> <span
                                                class="item-count animate-number semi-bold"
                                                data-value="{{ $totalDataCustomer }}"
                                                data-animation-duration="700">0</span> </div>
                                    </div>
                                    <div class="widget-stats">
                                        <div class="wrapper"> <span class="item-title">Selesai</span> <span
                                                class="item-count animate-number semi-bold"
                                                data-value="{{ $dataCustomer['SELESAI'] ?? 0 }}"
                                                data-animation-duration="700">0</span> </div>
                                    </div>
                                    <div class="widget-stats">
                                        <div class="wrapper"> <span class="item-title">Sedang Diproses</span> <span
                                                class="item-count animate-number semi-bold"
                                                data-value="{{ $dataCustomer['PROSES'] ?? 0 }}"
                                                data-animation-duration="700">0</span> </div>
                                    </div>
                                    <div class="widget-stats">
                                        <div class="wrapper"> <span class="item-title">Status Pending</span> <span
                                                class="item-count animate-number semi-bold"
                                                data-value="{{ $dataCustomer['PENDING'] ?? 0 }}"
                                                data-animation-duration="700">0</span> </div>
                                    </div>
                                    <div class="widget-stats hidden-sm">
                                        <div class="wrapper last"> <span class="item-title">Dibatalkan</span> <span
                                                class="item-count animate-number semi-bold"
                                                data-value="{{ $dataCustomer['BATAL'] ?? 0 }}"
                                                data-animation-duration="700">0</span> </div>
                                    </div>
                                    <div class="progress transparent progress-small no-radius m-t-20" style="width:90%">
                                        <div class="progress-bar progress-bar-success animate-progress-bar"
                                            data-percentage="64.8%"></div>
                                    </div>
                                    <div class="description"> <span class="text-white mini-description ">4% higher <span
                                                class="blend">than last month</span></span>
                                    </div>
                                </div>
                            </div>
                            <div id="chart" style="height:110px"> </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END WORLD MAP WIDGET - CRAFT MAP -->
        <!-- BEGIN REALTIME SALES GRAPH -->
        <div class="col-md-6 col-vlg-6 m-b-10 ">
            <div class="tiles white">
                <div class="row">

                </div>
                <h5 class="semi-bold m-t-30 m-l-30">HISTORY REGISTRASI</h5>
                <table class="table no-more-tables m-t-20 m-l-20">
                    <thead style="display:none">
                        <tr>
                            <th style="width:9%">Register</th>
                            <th style="width:22%">Nama Project</th>
                            <th style="width:6%">Layanan</th>
                            <th style="width:1%"> </th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($data as $row)
                            <tr>
                                <td class="v-align-middle bold text-success">{{ $row->no_registrasi }}</td>
                                <td class="v-align-middle"><span
                                        class="muted">{{ $row->customer->customer_name }}</span>
                                </td>
                                <td><span
                                        class="muted bold text-success">{{ $row->layananRegistrasi->nama_layanan }}</span>
                                </td>
                                <td class="v-align-middle"></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                <div id="sales-graph"> </div>
            </div>
        </div>
        <!-- END REALTIME SALES GRAPH -->
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="grid simple">
                <div class="grid-title no-border">
                    <h4>Bar <span class="semi-bold">Charts</span></h4>
                    <div class="tools">
                        <a href="javascript:;" class="collapse"></a>
                        <a href="#grid-config" data-toggle="modal" class="config"></a>
                        <a href="javascript:;" class="reload"></a>
                        <a href="javascript:;" class="remove"></a>
                    </div>
                </div>
                <div class="grid-body no-border">
                    <h4>Data <span class="semi-bold"> Perbulan</span></h4>
                    <p>Customer atau project baru berdasarakan bulan</p>
                    <br>
                    <div id="data-perbulan" style="height:250px"></div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="grid simple">
                <div class="grid-title no-border">
                    <h4>Bar <span class="semi-bold">Charts</span></h4>
                    <div class="tools">
                        <a href="javascript:;" class="collapse"></a>
                        <a href="#grid-config" data-toggle="modal" class="config"></a>
                        <a href="javascript:;" class="reload"></a>
                        <a href="javascript:;" class="remove"></a>
                    </div>
                </div>
                <div class="grid-body no-border">
                    <h4>Data <span class="semi-bold"> Pertahun</span></h4>
                    <p>Customer atau project baru berdasarakan tahun</p>
                    <br>
                    <div id="data-pertahun" style="height:250px"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('addon-script')
    <script src="{{ asset('assets/plugins/jquery-ricksaw-chart/js/d3.v2.js') }}"></script>
    <script src="{{ asset('assets/plugins/jquery-ricksaw-chart/js/rickshaw.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/jquery-morris-chart/js/morris.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/jquery-easy-pie-chart/js/jquery.easypiechart.min.js') }}"></script>
    <script>
        var chartRegisterMonth = '{!! $chartRegisterMonth !!}';
        chartRegisterMonth = JSON.parse(chartRegisterMonth);

        var chartCustomerMonth = '{!! $chartCustomerMonth !!}';
        chartCustomerMonth = JSON.parse(chartCustomerMonth);

        // console.log(chartRegisterMonth, chartCustomerMonth);

        var dataChartMonthly = [];
        chartRegisterMonth.forEach(function(item) {
            dataChartMonthly.push({
                y: item.month,
                a: item.order,
            });
        });

        chartCustomerMonth.forEach(function(item) {
            dataChartMonthly.forEach(function(data) {
                if (data.y == item.month) {
                    data.b = item.customer;
                } else {
                    data.b = 0;
                }
            });
        });

        // console.log(dataChartMonthly);

        Morris.Line({
            element: "data-perbulan",
            data: dataChartMonthly,
            xkey: "y",
            ykeys: ["a", "b"],
            labels: ["Project", "Customer"],
            lineColors: ["#0aa699", '#6a5acd'],
            parseTime: false,
            xLabelFormat: function(x) {
                return x.label.substring(0, 3);
            },
            hoverCallback: (index, options, content, row) => {
                var month = options.data[index].y;
                var order = options.data[index].a;
                var customer = options.data[index].b;
                content = `<div class='morris-hover-row-label'>${month}</div>
                <div class='morris-hover-point' style='color: #0aa699'>Project: ${order}</div>
                <div class='morris-hover-point' style='color: #6a5acd'>Customer: ${customer}</div>`;
                return content;
            },
            hideHover: 'auto',
            resize: 'true',
        });
    </script>

    <script>
        Morris.Line({
            element: "data-pertahun",
            data: [{
                    y: "2006",
                    a: 50,
                },
                {
                    y: "2007",
                    a: 65,
                },
                {
                    y: "2008",
                    a: 50,
                },
                {
                    y: "2009",
                    a: 75,
                },
                {
                    y: "2010",
                    a: 50,
                },
                {
                    y: "2011",
                    a: 75,
                },
                {
                    y: "2012",
                    a: 150,
                },
            ],
            xkey: "y",
            ykeys: ["a"],
            labels: ["Jumlah"],
            lineColors: ["#0aa699"],
        });
    </script>
@endpush