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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid py-4">
    @if(auth()->user()->idroles == 'admins')
        @php
            $adminTotalKaryawan = $admin_total_karyawan ?? 0;
            $adminTotalDepartemen = $admin_total_departemen ?? 0;
            $adminTotalShift = $admin_total_shift ?? 0;
            $adminTotalLinkLinked = $admin_total_link_linked ?? 0;
            $adminTotalLinkUnlinked = $admin_total_link_unlinked ?? 0;
            $adminTotalLinkPending = $admin_total_link_pending ?? 0;
            $adminDeptList = $admin_dept_list ?? collect();
            $adminLinkStats = $admin_link_stats ?? collect();
            $adminTotalLink = $admin_total_link ?? 0;
            $adminShiftList = $admin_shift_list ?? collect();
            $adminHariLiburCount = $admin_hari_libur_count ?? 0;
            $adminChartLabels = $admin_chart_labels ?? $adminLinkStats->pluck('status_link')->values()->all();
            $adminChartData = $admin_chart_data ?? $adminLinkStats->pluck('jumlah')->map(fn ($v) => (int) $v)->values()->all();
        @endphp
        {{-- Dashboard Admin --}}
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0 p-3">
                        <h6 class="mb-1">Dashboard Admin</h6>
                        <p class="text-sm">Sistem Manajemen Absensi Karyawan</p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Total Karyawan</p>
                                    <h5 class="font-weight-bolder">
                                        {{ $adminTotalKaryawan }}
                                    </h5>
                                    <p class="mb-0">
                                        <span class="text-success text-sm font-weight-bolder">Karyawan Aktif</span>
                                    </p>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-primary shadow-primary text-center rounded-circle">
                                    <i class="ni ni-single-02 text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Departemen</p>
                                    <h5 class="font-weight-bolder">
                                        {{ $adminTotalDepartemen }}
                                    </h5>
                                    <p class="mb-0">
                                        <span class="text-info text-sm font-weight-bolder">Total Departemen</span>
                                    </p>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-danger shadow-danger text-center rounded-circle">
                                    <i class="ni ni-building text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Jadwal Shift</p>
                                    <h5 class="font-weight-bolder">
                                        {{ $adminTotalShift }}
                                    </h5>
                                    <p class="mb-0">
                                        <span class="text-success text-sm font-weight-bolder">Shift Aktif</span>
                                    </p>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-success shadow-success text-center rounded-circle">
                                    <i class="ni ni-time-alarm text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Link PIN</p>
                                    <h5 class="font-weight-bolder">
                                        {{ $adminTotalLinkLinked }}
                                    </h5>
                                    <p class="mb-0">
                                        <span class="text-success text-sm font-weight-bolder">Terhubung</span>
                                    </p>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-success shadow-success text-center rounded-circle">
                                    <i class="ni ni-badge text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Unlinked</p>
                                    <h5 class="font-weight-bolder">
                                        {{ $adminTotalLinkUnlinked }}
                                    </h5>
                                    <p class="mb-0">
                                        <span class="text-warning text-sm font-weight-bolder">Belum Terhubung</span>
                                    </p>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-warning shadow-warning text-center rounded-circle">
                                    <i class="ni ni-fat-remove text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row mt-4">
            <div class="col-lg-6 mb-lg-0 mb-4">
                <div class="card">
                    <div class="card-header pb-0 p-3">
                        <div class="d-flex justify-content-between">
                            <h6 class="mb-2">Daftar Departemen</h6>
                        </div>
                    </div>
                    <div class="card-body p-3">
                        <div class="table-responsive">
                            <table class="table align-items-center">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Departemen</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">Level ID</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">Dept ID</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $deptList = $adminDeptList;
                                    @endphp
                                    @foreach($deptList as $dept)
                                    <tr>
                                        <td>
                                            <div class="d-flex px-2 py-1">
                                                <div>
                                                    <div class="icon icon-shape icon-sm bg-gradient-primary shadow text-center border-radius-sm me-2">
                                                        <i class="ni ni-building text-white opacity-10 text-xs"></i>
                                                    </div>
                                                </div>
                                                <div class="d-flex flex-column justify-content-center">
                                                    <h6 class="mb-0 text-sm">{{ $dept->nama }}</h6>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="align-middle text-center">
                                            <span class="badge badge-sm bg-gradient-info">{{ $dept->level_id ?? '-' }}</span>
                                        </td>
                                        <td class="align-middle text-center">
                                            <span class="text-secondary text-xs">{{ $dept->dept_id_auto ?? '-' }}</span>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header pb-0 p-3">
                        <h6 class="mb-0">Status Link PIN Karyawan</h6>
                    </div>
                    <div class="card-body p-3">
                        <ul class="list-group">
                            @php
                                $linkStats = $adminLinkStats;
                                $totalLink = $adminTotalLink;
                            @endphp
                            @foreach($linkStats as $stat)
                            <li class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
                                <div class="d-flex align-items-center">
                                    <div class="icon icon-shape icon-sm me-3 bg-gradient-{{ $stat->status_link == 'Linked' ? 'success' : ($stat->status_link == 'Pending' ? 'warning' : 'danger') }} shadow text-center">
                                        <i class="ni ni-{{ $stat->status_link == 'Linked' ? 'check-bold' : ($stat->status_link == 'Pending' ? 'time-alarm' : 'fat-remove') }} text-white opacity-10"></i>
                                    </div>
                                    <div class="d-flex flex-column">
                                        <h6 class="mb-1 text-dark text-sm">{{ $stat->status_link }}</h6>
                                        <span class="text-xs">{{ $stat->jumlah }} karyawan ({{ $totalLink > 0 ? round(($stat->jumlah / $totalLink) * 100, 1) : 0 }}%)</span>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center">
                                    <h5 class="mb-0 text-{{ $stat->status_link == 'Linked' ? 'success' : ($stat->status_link == 'Pending' ? 'warning' : 'danger') }}">{{ $stat->jumlah }}</h5>
                                </div>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row mt-4">
            <div class="col-lg-7 mb-lg-0 mb-4">
                <div class="card z-index-2 h-100">
                    <div class="card-header pb-0 pt-3 bg-transparent">
                        <h6 class="text-capitalize">Statistik Link PIN Karyawan</h6>
                        <p class="text-sm mb-0">
                            <i class="fa fa-check text-success"></i>
                            <span class="font-weight-bold">Status Koneksi</span> Real-time
                        </p>
                    </div>
                    <div class="card-body p-3">
                        <div class="chart">
                            <canvas id="chart-admin-pin" class="chart-canvas" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="card">
                    <div class="card-header pb-0 p-3">
                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                            <h6 class="mb-0">Progress Link PIN</h6>
                        </div>
                    </div>
                    <div class="card-body p-3">
                        @php
                            $linkStats = $adminLinkStats;
                            $totalLink = $adminTotalLink;
                        @endphp
                        @foreach($linkStats as $stat)
                        @php
                            $percentage = $totalLink > 0 ? round(($stat->jumlah / $totalLink) * 100, 1) : 0;
                            $colorClass = $stat->status_link == 'Linked' ? 'success' : ($stat->status_link == 'Pending' ? 'warning' : 'danger');
                        @endphp
                        <div class="mb-3">
                            <div class="d-flex justify-content-between mb-1">
                                <span class="text-sm font-weight-bold">{{ $stat->status_link }}</span>
                                <span class="text-sm font-weight-bold">{{ $stat->jumlah }} ({{ $percentage }}%)</span>
                            </div>
                            <div class="progress">
                                <div class="progress-bar bg-gradient-{{ $colorClass }}" role="progressbar" 
                                     style="width: {{ $percentage }}%" 
                                     aria-valuenow="{{ $percentage }}" 
                                     aria-valuemin="0" 
                                     aria-valuemax="100"></div>
                            </div>
                        </div>
                        @endforeach
                        <hr class="horizontal dark">
                        <div class="row">
                            <div class="col-4 text-center">
                                <div class="icon icon-shape icon-sm bg-gradient-success shadow mx-auto">
                                    <i class="ni ni-check-bold text-white opacity-10"></i>
                                </div>
                                <p class="text-xs mt-1 mb-0 font-weight-bold">Linked</p>
                                <h6 class="font-weight-bolder">{{ $adminTotalLinkLinked }}</h6>
                            </div>
                            <div class="col-4 text-center">
                                <div class="icon icon-shape icon-sm bg-gradient-warning shadow mx-auto">
                                    <i class="ni ni-fat-remove text-white opacity-10"></i>
                                </div>
                                <p class="text-xs mt-1 mb-0 font-weight-bold">Unlinked</p>
                                <h6 class="font-weight-bolder">{{ $adminTotalLinkUnlinked }}</h6>
                            </div>
                            <div class="col-4 text-center">
                                <div class="icon icon-shape icon-sm bg-gradient-info shadow mx-auto">
                                    <i class="ni ni-time-alarm text-white opacity-10"></i>
                                </div>
                                <p class="text-xs mt-1 mb-0 font-weight-bold">Pending</p>
                                <h6 class="font-weight-bolder">{{ $adminTotalLinkPending }}</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row mt-4">
            <div class="col-lg-5">
                <div class="card">
                    <div class="card-header pb-0 p-3">
                        <h6 class="mb-0">Jadwal Shift Aktif</h6>
                    </div>
                    <div class="card-body p-3">
                        <ul class="list-group">
                            @php
                                $shifts = $adminShiftList;
                            @endphp
                            @foreach($shifts as $shift)
                            <li class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
                                <div class="d-flex align-items-center">
                                    <div class="icon icon-shape icon-sm me-3 bg-gradient-success shadow text-center">
                                        <i class="ni ni-time-alarm text-white opacity-10"></i>
                                    </div>
                                    <div class="d-flex flex-column">
                                        <h6 class="mb-1 text-dark text-sm">{{ $shift->nama_shift }}</h6>
                                        <span class="text-xs">{{ $shift->begin_time_display ?? $shift->begin_time }} - {{ $shift->end_time_display ?? $shift->end_time }} | Kode: {{ $shift->kode }}</span>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center">
                                    <span class="badge badge-sm bg-gradient-info">{{ $shift->nama_grup ?? $shift->kode }}</span>
                                </div>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-7">
                <div class="card">
                    <div class="card-header pb-0 p-3">
                        <h6 class="mb-0">Informasi Sistem</h6>
                    </div>
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="card card-body border card-plain border-radius-lg d-flex align-items-center flex-row">
                                    <div class="icon icon-shape icon-sm bg-gradient-primary shadow text-center me-2">
                                        <i class="ni ni-single-02 text-white opacity-10"></i>
                                    </div>
                                    <div>
                                        <h6 class="mb-0 text-sm">Total Karyawan</h6>
                                        <p class="text-xs mb-0">{{ $adminTotalKaryawan }} Karyawan</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="card card-body border card-plain border-radius-lg d-flex align-items-center flex-row">
                                    <div class="icon icon-shape icon-sm bg-gradient-danger shadow text-center me-2">
                                        <i class="ni ni-building text-white opacity-10"></i>
                                    </div>
                                    <div>
                                        <h6 class="mb-0 text-sm">Departemen</h6>
                                        <p class="text-xs mb-0">{{ $adminTotalDepartemen }} Departemen</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="card card-body border card-plain border-radius-lg d-flex align-items-center flex-row">
                                    <div class="icon icon-shape icon-sm bg-gradient-success shadow text-center me-2">
                                        <i class="ni ni-badge text-white opacity-10"></i>
                                    </div>
                                    <div>
                                        <h6 class="mb-0 text-sm">PIN Linked</h6>
                                        <p class="text-xs mb-0">{{ $adminTotalLinkLinked }} Terhubung</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="card card-body border card-plain border-radius-lg d-flex align-items-center flex-row">
                                    <div class="icon icon-shape icon-sm bg-gradient-warning shadow text-center me-2">
                                        <i class="ni ni-calendar-grid-58 text-white opacity-10"></i>
                                    </div>
                                    <div>
                                        <h6 class="mb-0 text-sm">Hari Libur</h6>
                                        <p class="text-xs mb-0">{{ $adminHariLiburCount }} Hari</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        @else
        {{-- Dashboard HRD --}}
        <div class="row mt-4">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0 p-3">
                        <h6 class="mb-1">Dashboard HR</h6>
                        <p class="text-sm">Dashboard MSJ ABSENSI</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Unsafe Action Cards -->
        <div class="row mt-4">
            <div class="col-12 mb-3">
                <div class="card">
                    <div class="card-header pb-0 p-3">
                        <h6 class="mb-1">Unsafe Action - {{ date('F Y') }}</h6>
                    </div>
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-lg-4 mb-3 mb-lg-0">
                                <div class="card border-0 shadow-sm h-100">
                                    <div class="card-body p-3 text-center d-flex flex-column justify-content-center" style="min-height: 190px;">
                                        <div class="mb-2">
                                            <i class="fas fa-exclamation-circle text-warning msj-icon-flat" aria-hidden="true"></i>
                                        </div>
                                        <h5 class="text-secondary font-weight-normal mb-2">Total Unsafe Action</h5>
                                        <h2 class="font-weight-bolder text-dark mb-3">{{ $unsafe_total ?? 0 }}</h2>
                                        <div>
                                            <a href="{{ url('/trssp?jenis_surat=unsafe+action') }}" class="btn btn-primary px-4 font-weight-bold">Lihat</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 mb-3 mb-lg-0">
                                <div class="card border-0 shadow-sm h-100">
                                    <div class="card-body p-3 text-center d-flex flex-column justify-content-center" style="min-height: 190px;">
                                        <div class="mb-2">
                                            <i class="fas fa-clock text-primary msj-icon-flat" aria-hidden="true"></i>
                                        </div>
                                        <h5 class="text-secondary font-weight-normal mb-2">Menunggu Approval</h5>
                                        <h2 class="font-weight-bolder text-dark mb-3">{{ $unsafe_menunggu_approval ?? 0 }}</h2>
                                        <div>
                                            <a href="{{ url('/trssp?jenis_surat=unsafe+action&status=menunggu_approval') }}" class="btn btn-primary px-4 font-weight-bold">Lihat</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="card border-0 shadow-sm h-100">
                                    <div class="card-body p-3 text-center d-flex flex-column justify-content-center" style="min-height: 190px;">
                                        <div class="mb-2">
                                            <i class="fas fa-check-circle text-success msj-icon-flat" aria-hidden="true"></i>
                                        </div>
                                        <h5 class="text-secondary font-weight-normal mb-2">Sudah Selesai</h5>
                                        <h2 class="font-weight-bolder text-dark mb-3">{{ $unsafe_sudah_selesai ?? 0 }}</h2>
                                        <div>
                                            <a href="{{ url('/trssp?jenis_surat=unsafe+action&status=selesai') }}" class="btn btn-primary px-4 font-weight-bold">Lihat</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Unsafe Action Charts Row -->
        <div class="row mt-4">
            <div class="col-lg-7 mb-lg-0 mb-4">
                <div class="card z-index-2 h-100">
                    <div class="card-header pb-0 pt-3 bg-transparent">
                        <h6 class="text-capitalize">Unsafe Action per Departemen</h6>
                        <p class="text-sm mb-0">
                            <span class="font-weight-bold">{{ date('F Y') }}</span>
                        </p>
                    </div>
                    <div class="card-body p-3">
                        <div class="chart">
                            <canvas id="chart-bar-unsafe-dept" class="chart-canvas" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="card h-100">
                    <div class="card-header pb-0 pt-3 bg-transparent">
                        <h6 class="text-capitalize">Unsafe Action per Jenis Pelanggaran</h6>
                        <p class="text-sm mb-0">
                            <span class="font-weight-bold">{{ date('F Y') }}</span>
                        </p>
                    </div>
                    <div class="card-body p-3">
                        <div class="chart">
                            <canvas id="chart-bar-unsafe-violation" class="chart-canvas" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-lg-7 mb-lg-0 mb-4">
                <div class="card z-index-2 h-100">
                    <div class="card-header pb-0 pt-3 bg-transparent">
                        <h6 class="text-capitalize">Sales overview</h6>
                        <p class="text-sm mb-0">
                            <i class="fa fa-arrow-up text-success"></i>
                            <span class="font-weight-bold">4% more</span> in 2021
                        </p>
                    </div>
                    <div class="card-body p-3">
                        <div class="chart">
                            <canvas id="chart-line" class="chart-canvas" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="card card-carousel overflow-hidden h-100 p-0">
                    <div id="carouselExampleCaptions" class="carousel slide h-100" data-bs-ride="carousel">
                        <div class="carousel-inner border-radius-lg h-100">
                            <div class="carousel-item h-100 active"
                                style="background-image: url('./img/carousel-1.jpg');background-size: cover;">
                                <div class="carousel-caption d-none d-md-block bottom-0 text-start start-0 ms-5">
                                    <div class="icon icon-shape icon-sm bg-white text-center border-radius-md mb-3">
                                        <i class="ni ni-camera-compact text-dark opacity-10"></i>
                                    </div>
                                    <h5 class="text-white mb-1">Get started with Argon</h5>
                                    <p>There's nothing I really wanted to do in life that I wasn't able to get good at.</p>
                                </div>
                            </div>
                            <div class="carousel-item h-100"
                                style="background-image: url('./img/carousel-2.jpg');background-size: cover;">
                                <div class="carousel-caption d-none d-md-block bottom-0 text-start start-0 ms-5">
                                    <div class="icon icon-shape icon-sm bg-white text-center border-radius-md mb-3">
                                        <i class="ni ni-bulb-61 text-dark opacity-10"></i>
                                    </div>
                                    <h5 class="text-white mb-1">Faster way to create web pages</h5>
                                    <p>That's my skill. I'm not really specifically talented at anything except for the ability to learn.</p>
                                </div>
                            </div>
                            <div class="carousel-item h-100"
                                style="background-image: url('./img/carousel-3.jpg');background-size: cover;">
                                <div class="carousel-caption d-none d-md-block bottom-0 text-start start-0 ms-5">
                                    <div class="icon icon-shape icon-sm bg-white text-center border-radius-md mb-3">
                                        <i class="ni ni-trophy text-dark opacity-10"></i>
                                    </div>
                                    <h5 class="text-white mb-1">Share with us your design tips!</h5>
                                    <p>Don't be afraid to be wrong because you can't learn anything from a compliment.</p>
                                </div>
                            </div>
                        </div>
                        <button class="carousel-control-prev w-5 me-3" type="button"
                            data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next w-5 me-3" type="button"
                            data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-lg-7 mb-lg-0 mb-4">
                <div class="card">
                    <div class="card-header pb-0 p-3">
                        <div class="d-flex justify-content-between">
                            <h6 class="mb-2">Sales by Country</h6>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table align-items-center">
                            <tbody>
                                <tr>
                                    <td class="w-30">
                                        <div class="d-flex px-2 py-1 align-items-center">
                                            <div>
                                                <img src="./img/icons/flags/US.png" alt="Country flag">
                                            </div>
                                            <div class="ms-4">
                                                <p class="text-xs font-weight-bold mb-0">Country:</p>
                                                <h6 class="text-sm mb-0">United States</h6>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="text-center">
                                            <p class="text-xs font-weight-bold mb-0">Sales:</p>
                                            <h6 class="text-sm mb-0">2500</h6>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="text-center">
                                            <p class="text-xs font-weight-bold mb-0">Value:</p>
                                            <h6 class="text-sm mb-0">$230,900</h6>
                                        </div>
                                    </td>
                                    <td class="align-middle text-sm">
                                        <div class="col text-center">
                                            <p class="text-xs font-weight-bold mb-0">Bounce:</p>
                                            <h6 class="text-sm mb-0">29.9%</h6>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="w-30">
                                        <div class="d-flex px-2 py-1 align-items-center">
                                            <div>
                                                <img src="./img/icons/flags/DE.png" alt="Country flag">
                                            </div>
                                            <div class="ms-4">
                                                <p class="text-xs font-weight-bold mb-0">Country:</p>
                                                <h6 class="text-sm mb-0">Germany</h6>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="text-center">
                                            <p class="text-xs font-weight-bold mb-0">Sales:</p>
                                            <h6 class="text-sm mb-0">3.900</h6>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="text-center">
                                            <p class="text-xs font-weight-bold mb-0">Value:</p>
                                            <h6 class="text-sm mb-0">$440,000</h6>
                                        </div>
                                    </td>
                                    <td class="align-middle text-sm">
                                        <div class="col text-center">
                                            <p class="text-xs font-weight-bold mb-0">Bounce:</p>
                                            <h6 class="text-sm mb-0">40.22%</h6>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="w-30">
                                        <div class="d-flex px-2 py-1 align-items-center">
                                            <div>
                                                <img src="./img/icons/flags/GB.png" alt="Country flag">
                                            </div>
                                            <div class="ms-4">
                                                <p class="text-xs font-weight-bold mb-0">Country:</p>
                                                <h6 class="text-sm mb-0">Great Britain</h6>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="text-center">
                                            <p class="text-xs font-weight-bold mb-0">Sales:</p>
                                            <h6 class="text-sm mb-0">1.400</h6>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="text-center">
                                            <p class="text-xs font-weight-bold mb-0">Value:</p>
                                            <h6 class="text-sm mb-0">$190,700</h6>
                                        </div>
                                    </td>
                                    <td class="align-middle text-sm">
                                        <div class="col text-center">
                                            <p class="text-xs font-weight-bold mb-0">Bounce:</p>
                                            <h6 class="text-sm mb-0">23.44%</h6>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="w-30">
                                        <div class="d-flex px-2 py-1 align-items-center">
                                            <div>
                                                <img src="./img/icons/flags/BR.png" alt="Country flag">
                                            </div>
                                            <div class="ms-4">
                                                <p class="text-xs font-weight-bold mb-0">Country:</p>
                                                <h6 class="text-sm mb-0">Brasil</h6>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="text-center">
                                            <p class="text-xs font-weight-bold mb-0">Sales:</p>
                                            <h6 class="text-sm mb-0">562</h6>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="text-center">
                                            <p class="text-xs font-weight-bold mb-0">Value:</p>
                                            <h6 class="text-sm mb-0">$143,960</h6>
                                        </div>
                                    </td>
                                    <td class="align-middle text-sm">
                                        <div class="col text-center">
                                            <p class="text-xs font-weight-bold mb-0">Bounce:</p>
                                            <h6 class="text-sm mb-0">32.14%</h6>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="card">
                    <div class="card-header pb-0 p-3">
                        <h6 class="mb-0">Categories</h6>
                    </div>
                    <div class="card-body p-3">
                        <ul class="list-group">
                            <li class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
                                <div class="d-flex align-items-center">
                                    <div class="icon icon-shape icon-sm me-3 bg-gradient-dark shadow text-center">
                                        <i class="ni ni-mobile-button text-white opacity-10"></i>
                                    </div>
                                    <div class="d-flex flex-column">
                                        <h6 class="mb-1 text-dark text-sm">Devices</h6>
                                        <span class="text-xs">250 in stock, <span class="font-weight-bold">346+ sold</span></span>
                                    </div>
                                </div>
                                <div class="d-flex">
                                    <button class="btn btn-link btn-icon-only btn-rounded btn-sm text-dark icon-move-right my-auto">
                                        <i class="ni ni-bold-right" aria-hidden="true"></i>
                                    </button>
                                </div>
                            </li>
                            <li class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
                                <div class="d-flex align-items-center">
                                    <div class="icon icon-shape icon-sm me-3 bg-gradient-dark shadow text-center">
                                        <i class="ni ni-tag text-white opacity-10"></i>
                                    </div>
                                    <div class="d-flex flex-column">
                                        <h6 class="mb-1 text-dark text-sm">Tickets</h6>
                                        <span class="text-xs">123 closed, <span class="font-weight-bold">15 open</span></span>
                                    </div>
                                </div>
                                <div class="d-flex">
                                    <button class="btn btn-link btn-icon-only btn-rounded btn-sm text-dark icon-move-right my-auto">
                                        <i class="ni ni-bold-right" aria-hidden="true"></i>
                                    </button>
                                </div>
                            </li>
                            <li class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
                                <div class="d-flex align-items-center">
                                    <div class="icon icon-shape icon-sm me-3 bg-gradient-dark shadow text-center">
                                        <i class="ni ni-box-2 text-white opacity-10"></i>
                                    </div>
                                    <div class="d-flex flex-column">
                                        <h6 class="mb-1 text-dark text-sm">Error logs</h6>
                                        <span class="text-xs">1 is active, <span class="font-weight-bold">40 closed</span></span>
                                    </div>
                                </div>
                                <div class="d-flex">
                                    <button class="btn btn-link btn-icon-only btn-rounded btn-sm text-dark icon-move-right my-auto">
                                        <i class="ni ni-bold-right" aria-hidden="true"></i>
                                    </button>
                                </div>
                            </li>
                            <li class="list-group-item border-0 d-flex justify-content-between ps-0 border-radius-lg">
                                <div class="d-flex align-items-center">
                                    <div class="icon icon-shape icon-sm me-3 bg-gradient-dark shadow text-center">
                                        <i class="ni ni-satisfied text-white opacity-10"></i>
                                    </div>
                                    <div class="d-flex flex-column">
                                        <h6 class="mb-1 text-dark text-sm">Happy users</h6>
                                        <span class="text-xs font-weight-bold">+ 430</span>
                                    </div>
                                </div>
                                <div class="d-flex">
                                    <button class="btn btn-link btn-icon-only btn-rounded btn-sm text-dark icon-move-right my-auto">
                                        <i class="ni ni-bold-right" aria-hidden="true"></i>
                                    </button>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>
@endsection

@push('js')
    <script src="{{ asset('assets/js/plugins/chartjs.min.js') }}"></script>
    <script>
        // Bar Chart - Unsafe Action per Departemen (Horizontal)
        var unsafeDeptCanvas = document.getElementById("chart-bar-unsafe-dept");
        if (unsafeDeptCanvas) {
            var ctxUnsafeDept = unsafeDeptCanvas.getContext("2d");

            new Chart(ctxUnsafeDept, {
                type: "bar",
                data: {
                    labels: @json($unsafe_by_dept_labels ?? []),
                    datasets: [{
                        label: "Total Unsafe Action",
                        backgroundColor: "#f5365c",
                        data: @json($unsafe_by_dept_data ?? []),
                        maxBarThickness: 40
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            grid: {
                                drawBorder: false,
                                display: true,
                                drawOnChartArea: true,
                                drawTicks: false,
                                borderDash: [5, 5]
                            },
                            ticks: {
                                display: true,
                                padding: 10,
                                color: '#9ca2b7',
                                font: {
                                    size: 11,
                                    family: "Open Sans",
                                    style: 'normal',
                                    lineHeight: 2
                                },
                            }
                        },
                        x: {
                            grid: {
                                drawBorder: false,
                                display: false,
                                drawOnChartArea: false,
                                drawTicks: false,
                            },
                            ticks: {
                                display: true,
                                color: '#9ca2b7',
                                padding: 10,
                                font: {
                                    size: 11,
                                    family: "Open Sans",
                                    style: 'normal',
                                    lineHeight: 2
                                },
                            }
                        },
                    },
                },
            });
        }

        // Bar Chart - Unsafe Action per Jenis Pelanggaran
        var unsafeViolationCanvas = document.getElementById("chart-bar-unsafe-violation");
        if (unsafeViolationCanvas) {
            var ctxUnsafeViolation = unsafeViolationCanvas.getContext("2d");

            new Chart(ctxUnsafeViolation, {
                type: "bar",
                data: {
                    labels: @json($unsafe_by_violation_labels ?? []),
                    datasets: [{
                        label: "Total Unsafe Action",
                        backgroundColor: "#fb6340",
                        data: @json($unsafe_by_violation_data ?? []),
                        maxBarThickness: 40
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            grid: {
                                drawBorder: false,
                                display: true,
                                drawOnChartArea: true,
                                drawTicks: false,
                                borderDash: [5, 5]
                            },
                            ticks: {
                                display: true,
                                padding: 10,
                                color: '#9ca2b7',
                                font: {
                                    size: 11,
                                    family: "Open Sans",
                                    style: 'normal',
                                    lineHeight: 2
                                },
                            }
                        },
                        x: {
                            grid: {
                                drawBorder: false,
                                display: false,
                                drawOnChartArea: false,
                                drawTicks: false,
                            },
                            ticks: {
                                display: true,
                                color: '#9ca2b7',
                                padding: 10,
                                font: {
                                    size: 11,
                                    family: "Open Sans",
                                    style: 'normal',
                                    lineHeight: 2
                                },
                            }
                        },
                    },
                },
            });
        }
    </script>
    @if(auth()->user()->idroles == 'admins')
    <script src="{{ asset('assets/js/plugins/chartjs.min.js') }}"></script>
    <script>
        // Chart untuk Admin - Link PIN Status
        var ctx = document.getElementById("chart-admin-pin").getContext("2d");
        var gradientStroke1 = ctx.createLinearGradient(0, 230, 0, 50);
        gradientStroke1.addColorStop(1, 'rgba(94, 114, 228, 0.2)');
        gradientStroke1.addColorStop(0.2, 'rgba(94, 114, 228, 0.0)');
        gradientStroke1.addColorStop(0, 'rgba(94, 114, 228, 0)');
        
        new Chart(ctx, {
            type: "bar",
            data: {
                labels: [@foreach($adminChartLabels as $label)"{{ $label }}",@endforeach],
                datasets: [{
                    label: "Jumlah Karyawan",
                    tension: 0.4,
                    borderWidth: 0,
                    borderRadius: 4,
                    borderSkipped: false,
                    backgroundColor: ["#5e72e4", "#f5365c", "#fb6340"],
                    data: [@foreach($adminChartData as $value){{ $value }},@endforeach],
                    maxBarThickness: 60
                }],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false,
                    }
                },
                interaction: {
                    intersect: false,
                    mode: 'index',
                },
                scales: {
                    y: {
                        grid: {
                            drawBorder: false,
                            display: true,
                            drawOnChartArea: true,
                            drawTicks: false,
                            borderDash: [5, 5]
                        },
                        ticks: {
                            display: true,
                            padding: 10,
                            color: '#9ca2b7',
                            font: {
                                size: 11,
                                family: "Open Sans",
                                style: 'normal',
                                lineHeight: 2
                            },
                        }
                    },
                    x: {
                        grid: {
                            drawBorder: false,
                            display: false,
                            drawOnChartArea: false,
                            drawTicks: false,
                        },
                        ticks: {
                            display: true,
                            color: '#9ca2b7',
                            padding: 10,
                            font: {
                                size: 11,
                                family: "Open Sans",
                                style: 'normal',
                                lineHeight: 2
                            },
                        }
                    },
                },
            },
        });
    </script>
    @else
    <script src="{{ asset('assets/js/plugins/chartjs.min.js') }}"></script>
    <script>
        var ctx1 = document.getElementById("chart-line").getContext("2d");
        var gradientStroke1 = ctx1.createLinearGradient(0, 230, 0, 50);
        gradientStroke1.addColorStop(1, 'rgba(251, 99, 64, 0.2)');
        gradientStroke1.addColorStop(0.2, 'rgba(251, 99, 64, 0.0)');
        gradientStroke1.addColorStop(0, 'rgba(251, 99, 64, 0)');
        new Chart(ctx1, {
            type: "line",
            data: {
                labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                datasets: [{
                    label: "Mobile apps",
                    tension: 0.4,
                    borderWidth: 0,
                    pointRadius: 0,
                    borderColor: "#fb6340",
                    backgroundColor: gradientStroke1,
                    borderWidth: 3,
                    fill: true,
                    data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
                    maxBarThickness: 6
                }],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false,
                    }
                },
                interaction: {
                    intersect: false,
                    mode: 'index',
                },
                scales: {
                    y: {
                        grid: {
                            drawBorder: false,
                            display: true,
                            drawOnChartArea: true,
                            drawTicks: false,
                            borderDash: [5, 5]
                        },
                        ticks: {
                            display: true,
                            padding: 10,
                            color: '#fbfbfb',
                            font: {
                                size: 11,
                                family: "Open Sans",
                                style: 'normal',
                                lineHeight: 2
                            },
                        }
                    },
                    x: {
                        grid: {
                            drawBorder: false,
                            display: false,
                            drawOnChartArea: false,
                            drawTicks: false,
                            borderDash: [5, 5]
                        },
                        ticks: {
                            display: true,
                            color: '#ccc',
                            padding: 20,
                            font: {
                                size: 11,
                                family: "Open Sans",
                                style: 'normal',
                                lineHeight: 2
                            },
                        }
                    },
                },
            },
        });
    </script>
    @endif
@endpush