@extends('layouts.app')
@section('main-content')
<div class="container-fluid p-0">

    <h1 class="h3 mb-3"><strong>Analytics</strong> Dashboard</h1>
    <!-- auth()->user()->name -->
    <div class="row">
        <div class="col-xl-6 col-xxl-5 d-flex">
            <div class="w-100">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title">REVENUE</h5>
                                    </div>
                                    <div class="col-auto">
                                        <div class="stat text-primary">
                                            <a href="{{ route('reports.sales') }}" style="text-decoration: none;">
                                                <i class="align-middle" data-feather="dollar-sign"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                @role('Manager|Admin|Super Admin|Super Admin')
                                <div class="d-inline-flex">
                                    <span class="h5 pe-1">RM</span>
                                    <h1 class="h1 mt-1 mb-3">{{ number_format($revenue) }}</h1>
                                </div>
                                @else
                                <h1 class="mt-1 mb-3">--</h1>
                                @endrole
                                <div class="mb-0">
                                    @role('Manager|Admin|Super Admin|Super Admin')
                                    @if ($percentSales > 0)
                                    <span class="text-success"><i class="mdi mdi-arrow-bottom-right"></i> {{ $percentSales }}% </span>
                                    @else
                                    <span class="text-danger"><i class="mdi mdi-arrow-bottom-right"></i> {{ $percentSales }}% </span>
                                    @endif
                                    @else
                                    <span class="text-danger"><i class="mdi mdi-arrow-bottom-right"></i> --% </span>
                                    @endrole
                                    <span class="text-muted">Since last month</span>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-body py-4">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title">LOW STOCK</h5>
                                    </div>
                                    <div class="col-auto">
                                        <div class="stat text-primary">
                                            <a href="{{ route('inventories.lowstock') }}" style="text-decoration: none;">
                                                <i class="align-middle" data-feather="shopping-cart"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <h1 class="mt-1 mb-3">{{ $lowStock }}</h1>
                                <div class="mb-0">
                                    <!-- <span class="text-success"> <i class="mdi mdi-arrow-bottom-right"></i> 5.25% </span> -->
                                    <span class="text-muted">Low Inventory</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title">PROFIT</h5>
                                    </div>
                                    <div class="col-auto">
                                        <div class="stat text-primary">
                                            <i class="align-middle" data-feather="dollar-sign"></i>
                                        </div>
                                    </div>
                                </div>
                                @role('Manager|Admin|Super Admin')
                                <div class="d-inline-flex">
                                    <span class="h5 pe-1">RM</span><h1 class="h1 mt-1 mb-3">{{ number_format($earnMonth) }}</h1>
                                </div>
                                @else
                                <h1 class="mt-1 mb-3">--</h1>
                                @endrole
                                <div class="mb-0">
                                    @role('Manager|Admin|Super Admin')
                                    @if ($percentEarns > 0)
                                    <span class="text-success"><i class="mdi mdi-arrow-bottom-right"></i> {{ $percentEarns }}% </span>
                                    @else
                                    <span class="text-danger"><i class="mdi mdi-arrow-bottom-right"></i> {{ $percentEarns }}% </span>
                                    @endif
                                    @else
                                    <span class="text-danger"><i class="mdi mdi-arrow-bottom-right"></i>--% </span>
                                    @endrole
                                    <span class="text-muted">Since last month</span>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-body py-4">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title">NUM. OF SALES</h5>
                                    </div>
                                    <div class="col-auto">
                                        <div class="stat text-primary">
                                            <a href="{{ route('invoices') }}" style="text-decoration: none;">
                                                <i class="align-middle" data-feather="users"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <h1 class="mt-1 mb-3">{{ $countInvoice }}</h1>
                                <div class="mb-0">
                                    <!-- <span class="text-danger"> <i class="mdi mdi-arrow-bottom-right"></i> -2.25% </span> -->
                                    <span class="text-muted">Monthly Sales</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-6 col-xxl-7">
            <div class="card flex-fill w-100">
                <div class="card-header">

                    <h5 class="card-title mb-0">Monthly Sales {{ date('Y')}}</h5>
                </div>
                <div class="card-body py-3">
                    <div class="chart chart-sm">
                        @role('Manager|Admin|Super Admin')
                        <canvas id="chartjs-dashboard-line"></canvas>
                        @else
                        <canvas id="chartjs-dashboard-clerk"></canvas>
                        @endrole
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12 col-md-6 col-xxl-3 d-flex order-2 order-xxl-3">
            <div class="card flex-fill w-100">
                <div class="card-header">
                    <h5 class="card-title mb-0">Top 3 Products</h5>
                </div>
                <div class="card-body d-flex">
                    <div class="align-self-center w-100">
                        <div class="py-3">
                            <div class="chart chart-xs">
                                <canvas id="chartjs-dashboard-pie"></canvas>
                            </div>
                        </div>
                        <table class="table mb-0">
                            <tbody>
                                @forelse($topProducts as $product)
                                <tr>
                                    <td>{{ $product->description }}</td>
                                    <td>{{ $product->topProduct }}</td>
                                </tr>
                                @empty
                                <tr>
                                    <td>No</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-12 col-xxl-6 d-flex order-3 order-xxl-2">
            <div class="card flex-fill w-100">
                <div class="card-header">
                    <h5 class="card-title mb-0">Job Completed by Mechanics</h5>
                </div>
                <div class="card-body px-4 pt-1">
                    <table class="table table-condensed my-0">
                        <thead>
                            <tr>
                                <th class="text-muted">Top</th>
                                <th class="text-muted">Name</th>
                                <!-- <th class="d-none d-xl-table-cell text-muted">Start Date</th> -->
                                <!-- <th class="d-none d-xl-table-cell text-muted">End Date</th> -->
                                <th class="text-center text-muted col-sm-1">Count</th>
                                <th class="d-none d-md-table-cell text-end text-muted">Total</th>
                                <!-- <th class="d-none d-md-table-cell text-end">Commision</th> -->
                            </tr>
                        </thead>
                        <tbody style="border: none;">
                            @php $i=1 @endphp
                            @forelse($engineers as $engineer)
                            @if ($engineer->total > 0)
                            <tr>
                                <td class="col-sm-1" style="font-size: 0.78rem; padding: 0.70rem 0.80rem;"><span>{{ $i++ }}</span></td>
                                <td style="font-size: 0.78rem; padding: 0.70rem 0.80rem;">{{ strtoupper($engineer->foreman) }}</td>
                                <!-- <td style="font-size: 0.78rem; padding: 0.70rem 0.80rem;" class="d-none d-xl-table-cell">{{ date('01/m/Y') }}</td> -->
                                <!-- <td style="font-size: 0.78rem; padding: 0.70rem 0.80rem;" class="d-none d-xl-table-cell">{{ date('d/m/Y') }}</td> -->
                                <td class="col-sm-1 text-center" style="font-size: 0.78rem; padding: 0.70rem 0.80rem;">{{ $engineer->count }}</td>
                                <td style="font-size: 0.78rem; padding: 0.70rem 0.80rem;" class="d-none d-md-table-cell text-end"><span class="text-nowrap fw-bold">{{ 'RM '.number_format($engineer->total, 2) }}</span></td>
                                <!-- <td class="d-none d-md-table-cell text-end"><span class="text-nowrap">{{ 'RM '.number_format($engineer->total * 0.1, 2) }}</span></td> -->
                            </tr>
                            @endif
                            @empty
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-xxl-3 d-flex order-1 order-xxl-1">
            <div class="card flex-fill">
                <div class="card-header">
                    <h5 class="card-title mb-0">Calendar</h5>
                </div>
                <div class="card-body d-flex">
                    <div class="align-self-center w-100">
                        <div class="chart">
                            <div id="datetimepicker-dashboard"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12 col-lg-12 col-xxl-12 d-flex">
            <div class="card flex-fill w-100">
                <div class="card-header">
                    <h5 class="card-title mb-0">Frequent Models {{ date('M Y')}}</data></h5>
                </div>
                <div class="card-body px-4 pt-1">
                    <table class="table table-condensed">
                        <thead>
                            <tr>
                                <th class="text-muted">Top</th>
                                <th class="text-muted">Vehicle Model</th>
                                <th class="text-muted text-center">Count</th>
                            </tr>
                        </thead>
                        <tbody style="border:none;">
                            @php $i=1 @endphp
                            @forelse($topModels as $model)
                            @if( !empty($model->models && $model->countModel > 0 ) )
                            <tr>
                                <td style="font-size: 0.78rem; padding: 0.70rem 0.80rem;" class="col-sm-1">{{ $i++ }}</td>
                                <td style="font-size: 0.78rem; padding: 0.70rem 0.80rem;">{{ $model->models }}</td>
                                <td style="font-size: 0.78rem; padding: 0.70rem 0.80rem;" class="text-center col-sm-1">{{ $model->countModel }}</td>
                            </tr>
                            @endif
                            @empty
                            @endforelse
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
        <!-- <div class="col-12 col-lg-4 col-xxl-3 d-flex">
            <div class="card flex-fill w-100">
                <div class="card-header">

                    <h5 class="card-title mb-0">Monthly Sales</h5>
                </div>
                <div class="card-body d-flex w-100">
                    <div class="align-self-center chart chart-lg">
                        <canvas id="chartjs-dashboard-bar"></canvas>
                    </div>
                </div>
            </div>
        </div> -->
    </div>

</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        var ctx = document.getElementById("chartjs-dashboard-line").getContext("2d");
        var gradient = ctx.createLinearGradient(0, 0, 0, 225);
        gradient.addColorStop(0, "rgba(215, 227, 244, 1)");
        gradient.addColorStop(1, "rgba(215, 227, 244, 0)");
        // Line chart
        new Chart(document.getElementById("chartjs-dashboard-line"), {
            type: "line",
            data: {
                labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                datasets: [{
                    label: "Sales (RM)",
                    fill: true,
                    backgroundColor: gradient,
                    borderColor: window.theme.primary,
                    data:                 }]
            },
            options: {
                maintainAspectRatio: false,
                legend: {
                    display: false
                },
                tooltips: {
                    intersect: false
                },
                hover: {
                    intersect: true
                },
                plugins: {
                    filler: {
                        propagate: false
                    }
                },
                scales: {
                    xAxes: [{
                        reverse: true,
                        gridLines: {
                            color: "rgba(0,0,0,0.0)"
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            stepSize: 1000
                        },
                        display: true,
                        borderDash: [3, 3],
                        gridLines: {
                            color: "rgba(0,0,0,0.0)"
                        }
                    }]
                }
            }
        });
    });

    //Clerk
    // document.addEventListener("DOMContentLoaded", function() {
    //     var ctx = document.getElementById("chartjs-dashboard-clerk").getContext("2d");
    //     var gradient = ctx.createLinearGradient(0, 0, 0, 225);
    //     gradient.addColorStop(0, "rgba(215, 227, 244, 1)");
    //     gradient.addColorStop(1, "rgba(215, 227, 244, 0)");
    //     // Line chart
    //     new Chart(document.getElementById("chartjs-dashboard-clerk"), {
    //         type: "line",
    //         data: {
    //             labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    //             datasets: [{
    //                 label: "Sales (RM)",
    //                 fill: true,
    //                 backgroundColor: gradient,
    //                 borderColor: window.theme.primary,
    //                 // data: ['']
    //             }]
    //         },
    //         options: {
    //             maintainAspectRatio: false,
    //             legend: {
    //                 display: false
    //             },
    //             tooltips: {
    //                 intersect: false
    //             },
    //             hover: {
    //                 intersect: true
    //             },
    //             plugins: {
    //                 filler: {
    //                     propagate: false
    //                 }
    //             },
    //             scales: {
    //                 xAxes: [{
    //                     reverse: true,
    //                     gridLines: {
    //                         color: "rgba(0,0,0,0.0)"
    //                     }
    //                 }],
    //                 yAxes: [{
    //                     ticks: {
    //                         stepSize: 1000
    //                     },
    //                     display: true,
    //                     borderDash: [3, 3],
    //                     gridLines: {
    //                         color: "rgba(0,0,0,0.0)"
    //                     }
    //                 }]
    //             }
    //         }
    //     });
    // });
</script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Pie chart
        new Chart(document.getElementById("chartjs-dashboard-pie"), {
            type: "pie",
            data: {
                // labels: ["Chrome", "Firefox", "IE"],
                labels: ,
                datasets: [{
                    data: ,
                    backgroundColor: [
                        window.theme.primary,
                        window.theme.warning,
                        window.theme.danger,
                        window.theme.info,
                        window.theme.success,
                    ],
                    borderWidth: 5
                }]
            },
            options: {
                responsive: !window.MSInputMethodContext,
                maintainAspectRatio: false,
                legend: {
                    display: false
                },
                cutoutPercentage: 75
            }
        });
    });
</script>
<!-- <script>
    document.addEventListener("DOMContentLoaded", function() {
        // Bar chart
        new Chart(document.getElementById("chartjs-dashboard-bar"), {
            type: "bar",
            data: {
                labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                datasets: [{
                    label: "This year",
                    backgroundColor: window.theme.primary,
                    borderColor: window.theme.primary,
                    hoverBackgroundColor: window.theme.primary,
                    hoverBorderColor: window.theme.primary,
                    data: [54, 67, 41, 55, 62, 45, 55, 73, 60, 76, 48, 79],
                    barPercentage: .75,
                    categoryPercentage: .5
                }]
            },
            options: {
                maintainAspectRatio: false,
                legend: {
                    display: false
                },
                scales: {
                    yAxes: [{
                        gridLines: {
                            display: false
                        },
                        stacked: false,
                        ticks: {
                            stepSize: 20
                        }
                    }],
                    xAxes: [{
                        stacked: false,
                        gridLines: {
                            color: "transparent"
                        }
                    }]
                }
            }
        });
    });
</script> -->

<!-- <script>
    document.addEventListener("DOMContentLoaded", function() {
        // Maps
        var markers = [{
                coords: [31.230391, 121.473701],
                name: "Shanghai"
            },
            {
                coords: [28.704060, 77.102493],
                name: "Delhi"
            },
            {
                coords: [6.524379, 3.379206],
                name: "Lagos"
            },
            {
                coords: [35.689487, 139.691711],
                name: "Tokyo"
            },
            {
                coords: [23.129110, 113.264381],
                name: "Guangzhou"
            },
            {
                coords: [40.7127837, -74.0059413],
                name: "New York"
            },
            {
                coords: [34.052235, -118.243683],
                name: "Los Angeles"
            },
            {
                coords: [41.878113, -87.629799],
                name: "Chicago"
            },
            {
                coords: [51.507351, -0.127758],
                name: "London"
            },
            {
                coords: [40.416775, -3.703790],
                name: "Madrid "
            }
        ];
        var map = new jsVectorMap({
            map: "world",
            selector: "#world_map",
            zoomButtons: true,
            markers: markers,
            markerStyle: {
                initial: {
                    r: 9,
                    strokeWidth: 7,
                    stokeOpacity: .4,
                    fill: window.theme.primary
                },
                hover: {
                    fill: window.theme.primary,
                    stroke: window.theme.primary
                }
            },
            zoomOnScroll: false
        });
        window.addEventListener("resize", () => {
            map.updateSize();
        });
    });
</script> -->
<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Calendar
        var date = new Date(Date.now() - 0 * 24 * 60 * 60 * 1000);
        var defaultDate = date.getUTCFullYear() + "-" + (date.getUTCMonth() + 1) + "-" + date.getUTCDate();
        document.getElementById("datetimepicker-dashboard").flatpickr({
            inline: true,
            prevArrow: "<span title=\"Previous month\">&laquo;</span>",
            nextArrow: "<span title=\"Next month\">&raquo;</span>",
            defaultDate: defaultDate
        });
    });
</script>
@endsection