@extends('layouts/layout_comand_center')

@section('title', 'Dashboard')

@section('vendor-style')
    <!-- vendor css files -->
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/charts/apexcharts.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/toastr.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/dataTables.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/responsive.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
@endsection
@section('page-style')
    <!-- Page css files -->
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/charts/chart-apex.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/extensions/ext-component-toastr.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('css/base/pages/app-invoice-list.css')) }}">
@endsection
@section('content')

    <style>
        body,
        html {
            overflow: hidden !important;
            zoom: 0.7;
            margin-left: 15px;
            margin-right: 15px;
            font-size: 25px;
        }

        .grif {
            display: grid;
            grid-template-columns: repeat(1, 1fr) repeat(1, 200px);
            gap: 20px;
        }

        @media screen and (max-width:760px) {
            .grif {
                grid-template-columns: repeat(1, 1fr);
                gap: 20px;
            }
        }

        .apexcharts-toolbar {
            display: none !important;
        }


        .respon_grif {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 20px;
        }

        @media screen and (max-width:1200px) {
            .respon_grif {
                grid-template-columns: repeat(2, 1fr);
            }


        }

        @media screen and (max-width:900px) {
            .respon_grif {
                grid-template-columns: repeat(1, 1fr);
            }


        }

        .apexcharts-yaxis-annotations rect {
            display: none !important;
        }

        .flexs {
            display: flex !important;
            justify-content: center !important;
            /* width: 100% !important; */
            margin-top: -30px !important;
        }

        .flexs .cards {
            width: 80% !important;
        }

        .apexcharts-data-labels text {
            color: white !important;
            font-weight: bold !important;
        }

        .apexcharts-data-labels .apexcharts-datalabel {
            color: white !important;
            font-weight: bold !important;
        }

        .apexcharts-yaxis-annotations text {
            font-weight: bold !important;
            color: black !important;
            position: relative !important;
            right: 200px !important;
            text-shadow: 1px 1px 1px solid white;
        }


        .res {
            width: 100% !important;
            height: 600px !important;


        }


        @media screen and (max-width:450px) {

            .flexs .cards {
                width: 100% !important;
            }
        }

        .apexcharts-legend-text {
            transform: translateX(-20px);
            font-size: 25px !important;
        }

        tspan {
            font-size: 25px !important;

        }

        span.apexcharts-legend-text {
            font-size: 3px !important;
            color: red !important;
        }

        /*.grafiks #col .apexcharts-canvas svg g g text:first-child {*/
        /*    display:none !important;*/
        /*}*/

        /* .apexcharts-yaxis-texts-g text:first-child {
                                        display:none !important;
                                    } */
        .grafiks #col .apexcharts-canvas svg text.apexcharts-title-text {
            /* display: none !important; */

        }
    </style>

    @if ($count_device)
        <div class=" mt-3">

            <div class="card-body">
                <h3 class="text-center mb-1">Grafik Permukaan Air Selama 7 Hari Terakhir</h3>
                <section class="grafiks">

                    <div id="col" style="width: 100% !important;height:500px !important"></div>
                </section>
            </div>
        </div>
    @endif
    <script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM="
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>


    <script>
        var today = new Date();

        var sevenDaysAgo = new Date();
        sevenDaysAgo.setDate(today.getDate() - 7);

        var dateArray = [];
        var monthNames = [
            'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
        ];

        for (var date = sevenDaysAgo; date <= today; date.setDate(date.getDate() + 1)) {
            var formattedDate = `${date.getDate()} ${monthNames[date.getMonth()]}`;
            dateArray.push(formattedDate);
        }

        var options = {
            series: [
                @foreach ($device as $satu)
                    @php
                        $one = App\Models\DeviceResultModel::where('uuid_device', $satu->no)
                            ->whereBetween('created', [$awal_waktu, $now])
                            ->orderby('uuid', 'desc')
                            ->get()
                            ->unique('created');
                        $satus = $one->sortBy('created');
                    @endphp {
                        name: "{{ !empty($satu) ? $satu->nama_device : '' }}",
                        data: [
                            @foreach ($satus as $item)
                                @if (!empty($one))
                                {{ !empty($item->depth_average) ? $item->depth_average : '' }},
                                @endif
                            @endforeach
                        ]
                    },
                @endforeach
            ],
            chart: {
                height: 900,
                width: '100%',
                type: 'line',
                dropShadow: {
                    enabled: true,
                    color: '#7148FC',
                    top: 18,
                    left: 7,
                    blur: 10,
                    opacity: 0.2
                },
                toolbar: {
                    show: false
                }
            },
            colors: ['#008ffb', '#00e396', '#feb019'],
            dataLabels: {
                enabled: true,
                style: {
                    fontSize: '22px',

                },
            },
            stroke: {
                curve: 'smooth'
            },
            title: {
                text: ' `',
                align: 'left',
            },
            grid: {
                borderColor: '#7148FC',
                row: {
                    colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
                    opacity: 0.5
                },
            },
            markers: {
                size: 1
            },
            xaxis: {
                categories: dateArray,
                title: {
                    text: '',
                },
            },
            yaxis: {
                title: {
                    text: ''
                },
                min: 0,
                max: 1000,
                style: {
                    fontSize: '30px',
                },
            },
            legend: {
                position: 'top',
                horizontalAlign: 'center',
                floating: true,
                offsetY: -25,
                offsetX: -5
            },

            tooltip: {
                enabled: false,
                onDatasetHover: {
                    enabled: false,
                },
            },

        };

        var chart = new ApexCharts(document.querySelector("#col"), options);
        chart.render();


        setInterval(function() {
            location.reload();
        }, 300000);
    </script>


@endsection