@extends('layouts.master')

@section('title', 'Modernize Bootstrap Admin')

@section('pageContent')
    <div class="row">
        <div class="col-lg-8 d-flex align-items-stretch">
            <div class="card w-100 bg-primary-subtle overflow-hidden shadow-none">
                <div class="card-body position-relative">
                    <div class="row">
                        <div class="col-sm-7">
                            <div class="d-flex align-items-center mb-7">
                                <div class="rounded-circle overflow-hidden me-6">
                                    <img src="{{ URL::asset('build/images/profile/user-1.jpg') }}" alt="modernize-img" width="40" height="40">
                                </div>
                                <h5 class="fw-semibold mb-0 fs-5">Selamat Datang Pedjuang Patra Safety!</h5>
                            </div>
                            <div class="d-flex align-items-center">
                                <div class="border-end pe-4 border-muted border-opacity-10">
                                    <h3 class="mb-1 fw-semibold fs-8 d-flex align-content-center">{{ $carbonOffset['co2'] }}<i
                                            class="ti ti-arrow-up-right fs-5 lh-base text-success"></i></h3>
                                    <p class="mb-0 text-dark">CO2 KG/Liter</p>
                                </div>
                                <div class="ps-4">
                                    <h3 class="mb-1 fw-semibold fs-8 d-flex align-content-center">{{ $carbonOffset['tree'] }}<i
                                            class="ti ti-arrow-up-right fs-5 lh-base text-success"></i></h3>
                                    <p class="mb-0 text-dark">Bibit Pohon</p>
                                </div>
                            </div>
                            <div class="d-flex align-items-center mt-5">
                                <div class="pe-4 border-muted border-opacity-10">
                                    <h3 class="mb-1 fw-semibold fs-7 d-flex align-content-center">Rp. {{ $carbonOffset['money'] }} / Tahun<i
                                            class="ti ti-arrow-up-right fs-5 lh-base text-success"></i></h3>
                                    <p class="mb-0 text-dark">Konversi Rupiah</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-5">
                            <div class="welcome-bg-img mb-n7 text-end">
                                <img src="{{ URL::asset('build/images/backgrounds/welcome-bg.svg') }}" alt="modernize-img" class="img-fluid">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-lg-4 d-flex align-items-stretch">
            <div class="card w-100">
                <div class="card-body p-4">
                    <p class="mb-1 fs-3">Summary Error Log By TLPG(s)</p>
                    <div id="sales" class="sales-chart mx-n2"></div>
                </div>
            </div>
        </div>
        <h3 class="mb-1 fw-semibold fs-8 d-flex align-content-center text-center mx-3">Visualisasi Trend MT Pelanggaran Terbanyak</h3>
        @if(count($biggestViolation) > 0)
            @foreach($biggestViolation as $index => $bg)
                <div class="col-md-6 col-lg-4 d-flex align-items-stretch">
                    <div class="card w-100">
                        <div class="card-body">
                            <div>
                                <h4 class="card-title fw-semibold">{{ $index }}</h4>
                                <p class="card-subtitle">Trend Violation MT per month</p>
                                <div id="salary-{{ $index }}" class="mb-7 pb-8 mx-n4"></div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        @endif
        <h3 class="mb-1 fw-semibold fs-8 d-flex align-content-center text-center mx-3">Monthly Review GPS</h3>
        @if(count($reviewEventGps) > 0)
            @php $i = 0; @endphp
            @foreach($reviewEventGps as $index => $bg)
                <div class="col-md-6 col-lg-4 d-flex align-items-stretch">
                    <div class="card w-100">
                        <div class="card-body">
                            <div>
                                <h4 class="card-title fw-semibold">{{ $index }}</h4>
                                <p class="card-subtitle">Event GPS per Terminals</p>
                                <div id="{{ 'review-gps-' . $i }}" class="mx-n8"></div>
                            </div>
                        </div>
                    </div>
                </div>
                @php $i++; @endphp
            @endforeach
        @endif
    </div>

@endsection

@section('scripts')
    <script src="{{ URL::asset('build/js/vendor.min.js') }}"></script>
    <script src="{{ URL::asset('build/libs/apexcharts/dist/apexcharts.min.js') }}"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            @foreach($biggestViolation as $index => $bg)
                var options{{ $index }} = {
                series: [
                    {
                        name: "Total",
                        data: @json($bg['total']),
                    },
                ],

                chart: {
                    toolbar: {
                        show: false,
                    },
                    height: 250,
                    type: "bar",
                    fontFamily: "inherit",
                    foreColor: "#adb0bb",
                },
                colors: ["var(--bs-primary)"],
                plotOptions: {
                    bar: {
                        borderRadius: 5,
                        columnWidth: "45%",
                        distributed: true,
                        endingShape: "rounded",
                    },
                },

                dataLabels: {
                    enabled: false,
                },
                legend: {
                    show: false,
                },
                grid: {
                    yaxis: {
                        lines: {
                            show: false,
                        },
                    },
                    xaxis: {
                        lines: {
                            show: false,
                        },
                    },
                },
                xaxis: {
                    categories: @json($bg['terminal']),
                    labels: {
                        show: false,
                    },
                    axisBorder: {
                        show: false,
                    },
                    axisTicks: {
                        show: false,
                    },
                },
                yaxis: {
                    labels: {
                        show: false,
                    },
                },
                tooltip: {
                    theme: "dark",
                },
            };

                var chart{{ $index }} = new ApexCharts(document.querySelector("#salary-{{ $index }}"), options{{ $index }});
                chart{{ $index }}.render();
            @endforeach

            @foreach(array_values($reviewEventGps) as $index => $value)
                var valuesReviewEventGps = @json($value['total']);
                var labelsReviewEventGps = @json($value['month']);

                var optionsReviewGps{{ $index }} = {
                series: [
                    {
                        name: "Total",
                        data: valuesReviewEventGps,
                    },
                ],

                chart: {
                    toolbar: {
                        show: false,
                    },
                    height: 200,
                    type: "bar",
                    fontFamily: "inherit",
                    foreColor: "#adb0bb",
                },
                colors: ["var(--bs-primary)"],
                plotOptions: {
                    bar: {
                        borderRadius: 5,
                        columnWidth: "45%",
                        distributed: true,
                        endingShape: "rounded",
                    },
                },

                dataLabels: {
                    enabled: false,
                },
                legend: {
                    show: false,
                },
                grid: {
                    yaxis: {
                        lines: {
                            show: false,
                        },
                    },
                    xaxis: {
                        lines: {
                            show: false,
                        },
                    },
                },
                xaxis: {
                    categories: labelsReviewEventGps,
                    axisBorder: {
                        show: false,
                    },
                    axisTicks: {
                        show: false,
                    },
                },
                yaxis: {
                    labels: {
                        show: false,
                    },
                },
                tooltip: {
                    theme: "dark",
                },
            };

                var chartReviewGps{{ $index }} = new ApexCharts(document.querySelector("#review-gps-{{ $index }}"), optionsReviewGps{{ $index }});
                chartReviewGps{{ $index }}.render();
            @endforeach


            const valuesSummaryError = @json($summaryErrorLog['value']);
            const labelsSummaryError = @json($summaryErrorLog['category']);

            var optionsSummaryError = {
                series: [
                    {
                        name: "Total",
                        data: valuesSummaryError,
                    },
                ],
                chart: {
                    type: "line",
                    height: 250,
                    fontFamily: "inherit",
                    foreColor: "#adb0bb",
                    toolbar: {
                        show: false
                    },
                    zoom: {
                        enabled: false
                    }
                },
                colors: ["var(--bs-primary)"],
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    curve: 'smooth',
                    width: 3
                },
                markers: {
                    size: 4,
                    strokeColors: "white",
                    strokeWidth: 2,
                    hover: {
                        size: 6
                    }
                },
                xaxis: {
                    categories: labelsSummaryError,
                    axisBorder: {
                        show: false
                    },
                    axisTicks: {
                        show: false
                    },
                    labels: {
                        show: true
                    }
                },
                yaxis: {
                    labels: {
                        show: true
                    }
                },
                grid: {
                    borderColor: "#f1f1f1",
                    strokeDashArray: 4,
                    yaxis: {
                        lines: {
                            show: true
                        }
                    }
                },
                tooltip: {
                    theme: 'dark',
                    x: {
                        show: true
                    }
                },
                fill: {
                    type: 'gradient',
                    gradient: {
                        shade: 'light',
                        type: "vertical",
                        shadeIntensity: 0.4,
                        gradientToColors: undefined,
                        inverseColors: true,
                        opacityFrom: 0.45,
                        opacityTo: 0.05,
                        stops: [0, 90, 100]
                    }
                }
            };


            var chartSummaryError = new ApexCharts(document.querySelector("#sales"), optionsSummaryError);
            chartSummaryError.render();
        });
    </script>
{{--    <script src="{{ URL::asset('build/js/dashboards/dashboard2.js') }}"></script>--}}
@endsection