@extends('layouts.master')

@section('title', 'KPI Log Dashboard')

@section('pageContent')
    <div class="row">
        <div class="col-12">
            <div class="row">
                <div class="d-flex col-md-6 align-items-center gap-4 mb-4">
                    <div class="position-relative">
                        <div class="border border-2 border-primary rounded-circle">
                            <img src="{{ URL::asset('build/images/profile/user-1.jpg') }}" class="rounded-circle m-1" alt="user1"
                                 width="60" />
                        </div>
                    </div>
                    <div>
                        <h3 class="fw-semibold">{{ $onshift[0]['leader'] ?? "NULL" }}</h3>
                        <span>Leader on Shift</span>
                    </div>
                </div>
                <div class="d-flex col-md-6 align-items-center gap-4 mb-4">
                    <div class="position-relative">
                        <div class="border border-2 border-primary rounded-circle">
                            <img src="{{ URL::asset('build/images/profile/user-1.jpg') }}" class="rounded-circle m-1" alt="user1"
                                 width="60" />
                        </div>
                    </div>
                    <div>
                        <h3 class="fw-semibold">{{ $onshift[0]['co_leader'] ?? "NULL" }}</h3>
                        <span>Co-Leader on Shift</span>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <div class="row pb-4">
                        <div class="col-lg-4 d-flex align-items-stretch">
                            <div class="d-flex flex-column align-items-start w-100">
                                <div class="text-start">
                                    <h5 class="card-title fw-semibold">Road Traffic Controller</h5>
                                    <h6>Fleet Safety</h6>
                                </div>
                                <div class="mt-lg-auto mt-4 mb-4">
                          <span class="text-dark">CCTV & GPS ON</span>
                                    <h2 class="mt-2 fw-bold">{{ $eventShift['cctv_gps'] }} Unit</h2>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-8 d-flex align-items-stretch">
                            <div class="w-100">
                                <div class="d-md-flex align-items-start gap-3">
                                    <div>
                                        <h6 class="mb-0">KPI Log Operator Daily On Shifting</h6>
                                        <div class="d-flex align-items-center gap-3">
                                            <h2 class="mt-2 fw-bold">{{ $totalGreetingPreventive }}%</h2>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-4">
                                    <div id="financial1" class="mx-n8"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="border-top">
                    <div class="row gx-0">
                        <div class="col-md-4 border-end">
                            <div class="p-4 py-3 py-md-4">
                                <p class="fs-4 text-danger mb-0">
                          <span class="text-danger">
                            <span class="round-8 text-bg-danger rounded-circle d-inline-block me-1"></span>
                          </span>MT SHIPMENT DAILY
                                </p>
                                <h3 class=" mt-2 mb-0">{{ $eventShift['mt_shipment'] }} Mt</h3>
                            </div>
                        </div>
                        <div class="col-md-4 border-end">
                            <div class="p-4 py-3 py-md-4">
                                <p class="fs-4 text-primary mb-0">
                          <span class="text-primary">
                            <span class="round-8 text-bg-primary rounded-circle d-inline-block me-1"></span>
                          </span>MT OFFLINE
                                </p>
                                <h3 class=" mt-2 mb-0">{{ $eventShift['mt_offline'] }} Mt</h3>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="p-4 py-3 py-md-4">
                                <p class="fs-4 text-info mb-0">
                          <span class="text-info">
                            <span class="round-8 text-bg-info rounded-circle d-inline-block me-1"></span>
                          </span>VIOLATION OF BEHAVIOUR AMT
                                </p>
                                <h3 class=" mt-2 mb-0">{{ $eventShift['violation_amt'] }} Unit</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @php
            function getCardColorClass($index) {
                $colors = ['primary', 'success', 'warning', 'info', 'danger'];
                return $colors[$index % count($colors)];
            }
        @endphp

        <div class="col-12">
            <div class="card mb-4">
                <div class="card-body">
                    <form method="GET" action="{{ route('admin.kpi-log.index') }}" class="row g-3">
                        <div class="col-md-3">
                            <label for="shift" class="form-label">Shift</label>
                            <select class="form-select" name="shift" id="shift" required>
                                <option value="">Pilih Shift</option>
                                <option value="1" {{ request('shift') == '1' ? 'selected' : '' }}>Shift 1</option>
                                <option value="2" {{ request('shift') == '2' ? 'selected' : '' }}>Shift 2</option>
                                <option value="3" {{ request('shift') == '3' ? 'selected' : '' }}>Shift 3</option>
                            </select>
                        </div>

                        <div class="col-md-3">
                            <label for="month" class="form-label">Bulan</label>
                            @php
                                $bulanIndo = [
                                    'januari' => 'Januari',
                                    'februari' => 'Februari',
                                    'maret' => 'Maret',
                                    'april' => 'April',
                                    'mei' => 'Mei',
                                    'juni' => 'Juni',
                                    'juli' => 'Juli',
                                    'agustus' => 'Agustus',
                                    'september' => 'September',
                                    'oktober' => 'Oktober',
                                    'november' => 'November',
                                    'desember' => 'Desember'
                                ];
                            @endphp
                            <select class="form-select" name="month" id="month" required>
                                <option value="">Pilih Bulan</option>
                                @foreach($bulanIndo as $value => $label)
                                    <option value="{{ $value }}" {{ request('month') === $value ? 'selected' : '' }}>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-3">
                            <label for="date" class="form-label">Tanggal</label>
                            <input type="number" name="date" id="date" min="1" max="31" class="form-control" value="{{ request('date') }}" required>
                        </div>

                        <div class="col-md-3 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="ti ti-filter me-2"></i> Tampilkan
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- PC Monitoring -->
        <div class="col-12">
            <div class="row">
                @forelse($data as $index => $item)
                    <div class="col-md-6 col-lg-4 mb-4">
                        <div class="card shadow-sm border-0 h-100">
                            <div class="card-body d-flex flex-column justify-content-between">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h5 class="text-uppercase fw-bold mb-0 text-dark">{{ $item['pc'] }} - {{ $item['operator'] }}</h5>
                                    <span class="badge bg-{{ getCardColorClass($index) }}">Shift {{ request('shift') }}</span>
                                </div>
                                <div class="row text-center">
                                    <div class="col-4 border-end">
                                        <small class="text-muted d-block mb-1">GREETING</small>
                                        <strong class="text-dark">{{ $item['greeting'] }}</strong>
                                    </div>
                                    <div class="col-4 border-end">
                                        <small class="text-muted d-block mb-1">PREVENTIF</small>
                                        <strong class="text-dark">{{ $item['preventive'] }}</strong>
                                    </div>
                                    <div class="col-4">
                                        <small class="text-muted d-block mb-1">MT WORK</small>
                                        <strong class="text-dark">{{ $item['mt_work'] }}</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12">
                        <div class="alert alert-info">Tidak ada data ditemukan untuk filter yang dipilih.</div>
                    </div>
                @endforelse
            </div>
        </div>

        <div class="col-12">
            <!--  Row 1 -->
            <div class="row">
                <div class="col-lg-4 d-flex align-items-stretch">
                    <div class="card w-100">
                        <div class="card-body">
                            <div class="d-sm-flex d-block align-items-center justify-content-between mb-9">
                                <div class="mb-3 mb-sm-0">
                                    <h4 class="card-title fw-semibold">Preventive Call & Greeting Gate Out</h4>
                                    <p class="card-subtitle mb-0">Overview preventive call & greeting gate out</p>
                                </div>
                            </div>
                            <div class="row align-items-center">
                                <div class="col-md-12">
                                    <div id="chart" class="mx-n6"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 d-flex align-items-stretch">
                    <div class="card w-100">
                        <div class="card-body">
                            <h4 class="card-title fw-semibold">KPI By Shifting</h4>
                            <p class="card-subtitle mb-2">Every Day</p>
                            <div id="sales-overview" class="mb-4"></div>
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center">
                                    <div
                                        class="bg-primary-subtle text-primary rounded-2 me-8 p-8 d-flex align-items-center justify-content-center">
                                        <i class="ti ti-grid-dots fs-6"></i>
                                    </div>
                                    <div>
                                        <h6 class="fw-semibold text-dark fs-4 mb-0">{{ $kpi[2]['count'] }} call</h6>
                                        <p class="fs-3 mb-0 fw-normal">Total Call</p>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center">
                                    <div
                                        class="bg-secondary-subtle text-secondary rounded-2 me-8 p-8 d-flex align-items-center justify-content-center">
                                        <i class="ti ti-grid-dots fs-6"></i>
                                    </div>
                                    <div>
                                        <h6 class="fw-semibold text-dark fs-4 mb-0">{{ $kpi[0]['count'] }} call</h6>
                                        <p class="fs-3 mb-0 fw-normal">Average</p>
                                    </div>
                                </div>
                            </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 rounded-2 d-inline-block mb-3">
                                        <img src="{{ URL::asset('build/images/svgs/icon-cart.svg') }}" alt="modernize-img" class="img-fluid" width="24"
                                             height="24">
                                    </div>
                                    <div id="sales-two" class="mb-3 mx-n4"></div>
                                    <p class="mb-0">Installment GPS Cam</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-info-subtle 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">
                                    </div>
                                    <div id="growth" class="mb-3"></div>
                                    <h4 class="mb-1 fw-semibold d-flex align-content-center">{{ $onshift[0]['emp_shift'] ?? "0" }} People</h4>
                                    <p class="mb-0">Total Man Power in Shift</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"> Trend Parking AMT </h4>
                                </div>
                            </div>
                            <div id="monthly-earning"></div>
                            <div id="labelContainer" class="flex gap-4" style="display: flex; justify-content: space-between; font-size: 10px; margin-top: 4px;">
                                <!-- Labels will be inserted here -->
                            </div>
                        </div>
                    </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 () {

            var optionsGPSCam = {
                series: [
                    {
                        name: "",
                        data: [100, 60, 35, 90, 35, 100]
                    },
                ],
                chart: {
                    type: 'bar',
                    height: 25,
                    fontFamily: "inherit",
                    toolbar: {
                        show: false
                    },
                    sparkline: {
                        enabled: true
                    }
                },
                colors: ["var(--bs-primary)"],
                grid: {
                    show: false
                },
                plotOptions: {
                    bar: {
                        horizontal: false,
                        columnWidth: '100%',
                        borderRadius: 4,
                        distributed: true,
                    }
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    show: true,
                    width: 5,
                    colors: ['rgba(0,0,0,0.01)']
                },
                xaxis: {
                    axisBorder: {
                        show: false
                    },
                    axisTicks: {
                        show: false
                    },
                    labels: {
                        show: false
                    }
                },
                yaxis: {
                    labels: {
                        show: false
                    }
                },
                axisBorder: {
                    show: false
                },
                fill: {
                    opacity: 1
                },
                tooltip: {
                    theme: 'dark',
                    x: {
                        show: false
                    }
                },
            };

            var chartGPSCam = new ApexCharts(document.querySelector("#sales-two"), optionsGPSCam);
            chartGPSCam.render();

            const type = @json(array_column($trendParking, 'type'));
            const counts = @json(array_column($trendParking, 'count'));

            var optionsTrendParkingAMT = {
                chart: {
                    id: "monthly-earning",
                    type: "area",
                    height: 56,
                    sparkline: {
                        enabled: true,
                    },
                    group: 'sparklines',
                    fontFamily: "inherit",
                    foreColor: "#adb0bb",
                },
                series: [
                    {
                        name: 'AMT',
                        color: "var(--bs-primary)",
                        data: counts,
                    },
                ],
                stroke: {
                    curve: "smooth",
                    width: 2,
                },
                fill: {
                    type: "gradient",
                    gradient: {
                        shadeIntensity: 0,
                        inverseColors: false,
                        opacityFrom: 0.10,
                        opacityTo: 0,
                        stops: [20, 180],
                    },
                },
                markers: {
                    size: 0,
                },
                tooltip: {
                    theme: "dark",
                    fixed: {
                        enabled: true,
                        position: "right",
                    },
                    x: {
                        show: false,
                    },
                },
            };
            new ApexCharts(document.querySelector("#monthly-earning"), optionsTrendParkingAMT).render();
            const labelContainer = document.getElementById("labelContainer");
            type.forEach(label => {
                const span = document.createElement("span");
                span.textContent = label;
                span.style.flex = "1";  // biar rata jaraknya
                labelContainer.appendChild(span);
            });

            const typeKPI = @json(array_column($kpi, 'type'));
            const countsKPI = @json(array_column($kpi, 'count'))

            var optionsKPIByShifting = {
                color: "#adb5bd",
                series: countsKPI,
                labels: typeKPI,
                chart: {
                    type: "donut",
                    fontFamily: "inherit",
                    foreColor: "#adb0bb",
                },
                plotOptions: {
                    pie: {
                        donut: {
                            size: '88%',
                            background: 'transparent',
                            labels: {
                                show: true,
                                name: {
                                    show: true,
                                    offsetY: 7,
                                },
                                value: {
                                    show: false,
                                },
                                total: {
                                    show: true,
                                    color: '#7C8FAC',
                                    fontSize: '20px',
                                    fontWeight: "600",
                                    label: 'KPI Shifting',
                                },
                            },
                        },
                    },
                },
                stroke: {
                    show: false,
                },
                dataLabels: {
                    enabled: false,
                },

                legend: {
                    show: false,
                },
                colors: ["var(--bs-primary)", "#EAEFF4", "var(--bs-secondary)"],

                tooltip: {
                    theme: "dark",
                    fillSeriesColor: false,
                },
            };

            var chartKPIByShifting = new ApexCharts(document.querySelector("#sales-overview"), optionsKPIByShifting);
            chartKPIByShifting.render();


            const greeting = @json(array_column($greetingVsPreventive, 'greeting'));
            const preventive = @json(array_column($greetingVsPreventive, 'preventive'));
            const monitor = ["PC 1", "PC 2", "PC3", "PC 4", "PC 5", "PC 6", "PC 7", "PC 8", "PC 9", "PC 10", "PC 11", "PC 12"];

            var chart1 = {
                series: [
                    {
                        name: 'Greeting',
                        data: greeting
                    },
                    {
                        name: 'Preventive',
                        data: preventive
                    },
                ],
                chart: {
                    toolbar: {
                        show: false,
                    },
                    type: "bar",
                    fontFamily: "inherit",
                    foreColor: "#adb0bb",
                    height: 310,
                    stacked: true,
                },
                colors: ["var(--bs-primary)", "var(--bs-secondary)"],
                plotOptions: {
                    bar: {
                        horizontal: false,
                        barHeight: "60%",
                        columnWidth: "20%",
                        borderRadius: [6],
                        borderRadiusApplication: "end",
                        borderRadiusWhenStacked: "all",
                    },
                },
                dataLabels: {
                    enabled: false,
                },
                legend: {
                    show: false,
                },
                grid: {
                    borderColor: "rgba(0,0,0,0.1)",
                    strokeDashArray: 3,
                    xaxis: {
                        lines: {
                            show: false,
                        },
                    },
                },
                yaxis: {
                    min: -5,
                    max: 5,
                    title: {
                        // text: 'Age',
                    },
                },
                xaxis: {
                    axisBorder: {
                        show: false,
                    },
                    categories: monitor,
                },
                yaxis: {
                    tickAmount: 4,
                },
                tooltip: {
                    theme: "dark",
                },
            };

            var chartPreventive = new ApexCharts(document.querySelector("#chart"), chart1);
            chartPreventive.render();

            const valueGreeting = @json(array_column($kpiLog, 'value_greeting'));
            const valuePreventive = @json(array_column($kpiLog, 'value_preventive'));
            const operatorLog = @json(array_column($kpiLog, 'operator'));
            const limitLog = @json(array_column($kpiLog, 'limit'));


            var chart = {
                series: [
                    {
                        name: 'Greetting',
                        data: valueGreeting
                    },
                    {
                        name: 'Preventive',
                        data: valuePreventive
                    },
                    {
                        name: 'Target',
                        data: limitLog
                    }
                ],
                chart: {
                    toolbar: {
                        show: false,
                    },
                    type: "line",
                    fontFamily: "inherit",
                    foreColor: "#adb0bb",
                    height: 200,
                },
                colors: ["var(--bs-danger)", "var(--bs-primary)", "var(--bs-secondary)"],
                dataLabels: {
                    enabled: false,
                },
                legend: {
                    show: false,
                },
                stroke: {
                    curve: "smooth",
                    width: 3,
                },
                grid: {
                    borderColor: "rgba(0,0,0,0.1)",
                    strokeDashArray: 3,
                    xaxis: {
                        lines: {
                            show: false,
                        },
                    },
                    padding: {
                        top: 0,
                        right: 0,
                        bottom: 0,
                        left: 0,
                    },
                },
                xaxis: {
                    categories: operatorLog,
                },
                yaxis: {
                    tickAmount: 4,
                },
                tooltip: {
                    theme: "dark",
                },
            };

            var chartCompare = new ApexCharts(document.querySelector("#financial1"), chart);
            chartCompare.render();
        })
    </script>
@endsection