@extends('layouts.master')

@section('title', 'Dashboard Accident/Insiden')

@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">Most AMT Mileage in a Month!</h5>
                            </div>
                            <div class="mb-2">
                                <h6 class="fw-semibold mb-0 fs-5">{{ $mostMileageValues[0][0] }}</h6>
                            </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">{{ $mostMileageValues[0][1] }}<i
                                            class="ti ti-arrow-up-right fs-5 lh-base text-success"></i></h3>
                                    <p class="mb-0 text-dark">Total Score</p>
                                </div>
                                <div class="ps-4 border-end pe-4 border-muted border-opacity-10">
                                    <h3 class="mb-1 fw-semibold fs-8 d-flex align-content-center">{{ $mostMileageValues[0][2] }}<i
                                            class="ti ti-arrow-up-right fs-5 lh-base text-success"></i></h3>
                                    <p class="mb-0 text-dark">Index</p>
                                </div>
                                <div class="ps-4">
                                    <h3 class="mb-1 fw-semibold fs-8 d-flex align-content-center">{{ $mostMileageValues[0][3] }}<i
                                            class="ti ti-arrow-up-right fs-5 lh-base text-success"></i></h3>
                                    <p class="mb-0 text-dark">Total KM</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-6 col-lg-2 d-flex align-items-stretch">
            <div class="card w-100">
                <div class="card-body p-4">
                    <div class="p-2 bg-primary-subtle flex gap-2 justify-content-center align-items-center rounded-2 d-inline-block mb-3">
                        <img src="{{ URL::asset('build/images/svgs/icon-bar.svg') }}" alt="modernize-img" class="img-fluid" width="24"
                             height="24">
                        <span class="fw-semibold fs-3">K3-2 Daily</span>
                    </div>
                    <h4 class="fw-semibold">{{ $k3Violation['category_1'] }}</h4>
                    <p class="mb-2 fs-3">Violation Category One</p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-2 d-flex align-items-stretch">
            <div class="card w-100">
                <div class="card-body p-4">
                    <div class="p-2 bg-primary-subtle flex gap-2 justify-content-center align-items-center rounded-2 d-inline-block mb-3">
                        <img src="{{ URL::asset('build/images/svgs/icon-bar.svg') }}" alt="modernize-img" class="img-fluid" width="24"
                             height="24">
                        <span class="fw-semibold fs-3">K3-2 Daily</span>
                    </div>
                    <h4 class="fw-semibold">{{ $k3Violation['category_2'] }}</h4>
                    <p class="mb-2 fs-3">Violation Category Two</p>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-8 d-flex align-items-stretch">
            <div class="card w-100">
                <div class="card-body">
                    <h4 class="card-title fw-semibold">Behaviour AMT Base On Skor YTM</h4>
                    <p class="card-subtitle mb-4">Overview behaviour amt base on skor ytm</p>
                    <div id="behaviorChart" class="revenue-chart mx-n3"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="row">
                <div class="col-sm-6 d-flex align-items-stretch">
                    <div class="card w-100">
                        <div class="card-body">
                            <div class="p-2 bg-primary-subtle flex gap-2 justify-content-center align-items-center rounded-2 d-inline-block mb-3">
                                <img src="{{ URL::asset('build/images/svgs/icon-bar.svg') }}" alt="modernize-img" class="img-fluid" width="24"
                                     height="24">
                                <span class="fw-semibold fs-2">K3-2 Daily</span>
                            </div>
                            <h4 class="fw-semibold">{{ $k3Violation['category_3'] }}</h4>
                            <p class="mb-2 fs-3">Violation Category Three</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 d-flex align-items-stretch">
                    <div class="card w-100">
                        <div class="card-body">
                            <div class="p-2 bg-primary-subtle flex gap-2 justify-content-center align-items-center rounded-2 d-inline-block mb-3">
                                <img src="{{ URL::asset('build/images/svgs/icon-bar.svg') }}" alt="modernize-img" class="img-fluid" width="24"
                                     height="24">
                                <span class="fw-semibold fs-2">K3-2 Daily</span>
                            </div>
                            <h4 class="fw-semibold">{{ $k3Violation['category_4'] }}</h4>
                            <p class="mb-2 fs-3">Violation Category Four</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <div class="row alig n-items-start">
                        <div class="col-8">
                            <h4 class="card-title mb-9 fw-semibold"> Monthly Comparation of Violations </h4>
                        </div>
                        <div class="col-4">
                            <div class="d-flex justify-content-end">
                                <div class="p-2 bg-primary-subtle rounded-2 d-inline-block">
                                    <img src="{{ URL::asset('build/images/svgs/icon-master-card-2.svg') }}" alt="modernize-img" class="img-fluid"
                                         width="24" height="24">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="monthly-earning"></div>
                </div>
            </div>
        </div>
        <div class="col-12 d-flex align-items-stretch">
            <div class="card w-100">
                <div class="card-body">
                    <h4 class="card-title fw-semibold">Event CAM (Perilaku AMT) Monthly</h4>
                    <p class="card-subtitle mb-4">Overview event cam monthly</p>
                    <div id="eventCam" class="revenue-chart mx-n3"></div>
                </div>
            </div>
        </div>
        <div class="col-12 d-flex align-items-stretch">
            <div class="card w-100">
                <div class="card-body">
                    <h4 class="card-title fw-semibold">Event GPS (Perilaku Pengemudi) Monthly</h4>
                    <p class="card-subtitle mb-4">Overview event gps monthly</p>
                    <div id="eventGPS" class="revenue-chart mx-n3"></div>
                </div>
            </div>
        </div>

        <div class="col-12 d-flex align-items-stretch">
            <div class="card w-100">
                <div class="card-body">
                    <h4 class="card-title fw-semibold">Event GPS By TLPG</h4>
                    <p class="card-subtitle mb-4">Overview event gps by tlpg</p>
                    <div id="eventGPSTLPG" class="revenue-chart mx-n3"></div>
                </div>
            </div>
        </div>
    </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 () {

            const typeEventGpsTLPG = @json($eventGpsTLPG['type']);
            const valueEventGpsTLPG = @json($eventGpsTLPG['value']);

            const optionsEventGpsTLPG = {
                chart: {
                    type: 'bar',
                    height: 350,
                    toolbar: { show: false }
                },
                series: valueEventGpsTLPG,
                xaxis: {
                    categories: typeEventGpsTLPG,
                },
                yaxis: {
                    title: {
                        text: 'Skor'
                    }
                },
                stroke: {
                    curve: 'smooth',
                },
                colors: [
                    '#FF5733', // Januari
                    '#33C1FF', // Februari
                    '#FF33A8', // Maret
                    '#33FF57', // April
                    '#FFC133', // Mei
                    '#8D33FF', // Juni
                    '#FF3333', // Juli
                    '#33FFEC', // Agustus
                    '#FF8633', // September
                    '#33FF8A', // Oktober
                    '#335BFF', // November
                    '#FF33D1'  // Desember
                ],
                markers: {
                    size: 6
                },
            }

            const chartEventGpsTLPG = new ApexCharts(document.querySelector("#eventGPSTLPG"), optionsEventGpsTLPG);
            chartEventGpsTLPG.render();

            const typeEventGps = @json($eventGps['type']);
            const valueEventGps = @json($eventGps['value']);

            const optionsEventGps = {
                chart: {
                    type: 'line',
                    height: 350,
                    toolbar: { show: false }
                },
                series: [
                    { name: 'Januari', data: valueEventGps.januari },
                    { name: 'Februari', data: valueEventGps.februari },
                    { name: 'Maret', data: valueEventGps.maret },
                    { name: 'April', data: valueEventGps.april },
                    { name: 'Mei', data: valueEventGps.mei },
                    { name: 'Juni', data: valueEventGps.juni },
                    { name: 'Juli', data: valueEventGps.juli },
                    { name: 'Agustus', data: valueEventGps.agustus },
                    { name: 'September', data: valueEventGps.september },
                    { name: 'Oktober', data: valueEventGps.oktober },
                    { name: 'November', data: valueEventGps.november },
                    { name: 'Desember', data: valueEventGps.desember },
                ],
                xaxis: {
                    categories: typeEventGps,
                },
                yaxis: {
                    title: {
                        text: 'Skor'
                    }
                },
                stroke: {
                    curve: 'smooth',
                },
                colors: [
                    '#FF5733', // Januari
                    '#33C1FF', // Februari
                    '#FF33A8', // Maret
                    '#33FF57', // April
                    '#FFC133', // Mei
                    '#8D33FF', // Juni
                    '#FF3333', // Juli
                    '#33FFEC', // Agustus
                    '#FF8633', // September
                    '#33FF8A', // Oktober
                    '#335BFF', // November
                    '#FF33D1'  // Desember
                ],
                markers: {
                    size: 6
                },
            }

            const chartEventGps = new ApexCharts(document.querySelector("#eventGPS"), optionsEventGps);
            chartEventGps.render();

            const typeEventCam = @json($eventCam['type']);
            const valueEventCam = @json($eventCam['count']);

            const optionsEventCam = {
                chart: {
                    type: 'line',
                    height: 350,
                    toolbar: { show: false }
                },
                series: [
                    {
                        name: 'Value',
                        data: valueEventCam
                    },
                ],
                xaxis: {
                    categories: typeEventCam,
                },
                yaxis: {
                    title: {
                        text: 'Skor'
                    }
                },
                stroke: {
                    curve: 'smooth',
                },
                colors: ['var(--bs-primary)'],
                markers: {
                    size: 6
                },
            }

            const chartEventCam = new ApexCharts(document.querySelector("#eventCam"), optionsEventCam);
            chartEventCam.render();

            const typeMonthlyComparation = @json($monthlyComparation['month']);
            const valueMonthlyComparation = @json($monthlyComparation['count']);

            var optionsMonthlyComparation = {
                chart: {
                    type: 'area',
                    height: 200,
                    toolbar: { show: false }
                },
                series: [
                    {
                        name: 'Value',
                        data: valueMonthlyComparation
                    },
                ],
                xaxis: {
                    categories: typeMonthlyComparation,
                },
                yaxis: {
                    title: {
                        text: 'Skor'
                    }
                },
                colors: ['var(--bs-primary)'],
                markers: {
                    size: 4
                },
            };

            new ApexCharts(document.querySelector("#monthly-earning"), optionsMonthlyComparation).render();



            const typeBehavior = @json(array_column($behaviorATMValues, '0'));
            const valueBehavior = @json(array_column($behaviorATMValues, '1'));

            const optionsBehavior = {
                chart: {
                    type: 'line',
                    height: 350,
                    toolbar: { show: false }
                },
                series: [
                    {
                        name: 'Value',
                        data: valueBehavior
                    },
                ],
                xaxis: {
                    categories: typeBehavior,
                },
                yaxis: {
                    title: {
                        text: 'Skor'
                    }
                },
                stroke: {
                    curve: 'smooth',
                    dashArray: [9]
                },
                colors: ['var(--bs-primary)'],
                markers: {
                    size: 6
                },
            }

            const chartBehavior = new ApexCharts(document.querySelector("#behaviorChart"), optionsBehavior);
            chartBehavior.render();
        });
    </script>
@endsection