{{-- cadangan dari setting parameter dashboard  --}}

@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Setting Parameter'])

    <div class="container-fluid py-4">
        {{-- Header --}}
        <div class="row mt-4 mb-3">
            <div class="col-12 text-center">
                <h4 class="fw-bold text-primary mb-1">MSJ - Setting Parameter</h4>
                <p class="text-muted">Monitoring jumlah parameter per line</p>
            </div>
        </div>

        {{-- Summary Cards --}}
        <div class="row">
            @php
                $colors = ['primary', 'info', 'success', 'warning', 'danger', 'secondary'];
            @endphp

            @foreach ($sumParam as $index => $sum)
                <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
                    <div class="card shadow-sm border-0 h-100 hover-shadow transition-all"
                        style="border-top: 4px solid var(--bs-{{ $colors[$index % count($colors)] }});">
                        <div class="card-body text-center">
                            <p class="fw-semibold text-uppercase text-secondary mb-1">{{ $sum->nama_line }}</p>
                            <h2 class="fw-bold text-dark mb-0">{{ $sum->total }}</h2>
                            <span class="text-muted small">Parameter</span>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Chart Section --}}
        <div class="row mt-5">
            <div class="col-lg-10 col-md-12 mx-auto">
                <div class="card shadow border-0">
                    <div class="card-header bg-transparent pb-0">
                        <h6 class="mb-0 fw-bold text-primary">Tren Parameter</h6>
                        <p class="text-sm text-muted mb-0">Perkembangan parameter tiap bulan</p>
                    </div>
                    <div class="card-body p-4">
                        <canvas id="chart-line" height="100"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="{{ asset('assets/js/plugins/chartjs.min.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const ctx = document.getElementById("chart-line").getContext("2d");

            const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
            gradientStroke.addColorStop(1, 'rgba(54, 162, 235, 0.2)');
            gradientStroke.addColorStop(0.2, 'rgba(54, 162, 235, 0.0)');
            gradientStroke.addColorStop(0, 'rgba(54, 162, 235, 0)');

            new Chart(ctx, {
                type: "line",
                data: {
                    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov",
                        "Dec"
                    ],
                    datasets: [{
                        label: "Parameter Aktif",
                        tension: 0.4,
                        borderWidth: 3,
                        pointRadius: 4,
                        pointBackgroundColor: "#36A2EB",
                        borderColor: "#36A2EB",
                        backgroundColor: gradientStroke,
                        fill: true,
                        data: @json($chart),
                    }],
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: true,
                            labels: {
                                color: '#333'
                            }
                        }
                    },
                    interaction: {
                        intersect: false,
                        mode: 'index',
                    },
                    scales: {
                        y: {
                            grid: {
                                drawBorder: false,
                                color: 'rgba(200,200,200,0.2)',
                            },
                            ticks: {
                                color: '#555',
                                padding: 8,
                                font: {
                                    size: 12,
                                    family: "Open Sans"
                                }
                            }
                        },
                        x: {
                            grid: {
                                display: false,
                            },
                            ticks: {
                                color: '#555',
                                padding: 8,
                                font: {
                                    size: 12,
                                    family: "Open Sans"
                                }
                            }
                        },
                    },
                },
            });
        });
    </script>

    <style>
        .hover-shadow:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
        }

        .transition-all {
            transition: all 0.3s ease;
        }
    </style>
@endpush