<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <title>Ellia Cellular</title>
    <meta content="" name="description">
    <meta content="" name="keywords">

    <!-- Favicons -->
    <link href="{{ asset('assets/img/logo_ellia_cellular.jpeg') }}" rel="icon">
    <link href="{{ asset('assets/img/apple-touch-icon.png') }}" rel="apple-touch-icon">

    <!-- Google Fonts -->
    <link href="https://fonts.gstatic.com" rel="preconnect">
    <link
        href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
        rel="stylesheet">

    <!-- Vendor CSS Files -->
    <link href="{{ asset('assets/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/vendor/bootstrap-icons/bootstrap-icons.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/vendor/boxicons/css/boxicons.min.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/vendor/quill/quill.snow.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/vendor/quill/quill.bubble.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/vendor/remixicon/remixicon.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/vendor/simple-datatables/style.css') }}" rel="stylesheet">

    <!-- Template Main CSS File -->
    <link href="{{ asset('assets/css/style.css') }}" rel="stylesheet">

</head>

<body>

    <!-- ======= Header ======= -->
    @include('header')
    <!-- ======= Sidebar ======= -->
    @include('sidebar')

    <main id="main" class="main">

        <!-- Page Title & Filter -->
        <div class="pagetitle d-flex justify-content-between align-items-center">
            <div>
                <h1>Dashboard</h1>
                <nav>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
                        <li class="breadcrumb-item active">Dashboard</li>
                    </ol>
                </nav>
            </div>
            <form method="GET" action="{{ route('dashboard') }}">
                <div class="d-flex gap-2 justify-content-end mb-3">
                    <!-- Filter Bulan -->
                    <select class="form-select w-auto bg-white" name="bulan" onchange="this.form.submit()">
                        @php
                            $bulanSekarang = request('bulan', date('n'));
                        @endphp
                        <option disabled {{ is_null(request('bulan')) ? 'selected' : '' }}>Pilih Bulan</option>
                        @foreach ([
        1 => 'Januari',
        2 => 'Februari',
        3 => 'Maret',
        4 => 'April',
        5 => 'Mei',
        6 => 'Juni',
        7 => 'Juli',
        8 => 'Agustus',
        9 => 'September',
        10 => 'Oktober',
        11 => 'November',
        12 => 'Desember',
    ] as $num => $name)
                            <option value="{{ $num }}" {{ $bulanSekarang == $num ? 'selected' : '' }}>
                                {{ $name }}</option>
                        @endforeach
                    </select>

                    <!-- Filter Tahun -->
                    <select class="form-select w-auto bg-white" name="tahun" onchange="this.form.submit()">
                        @php
                            $tahunSekarang = request('tahun', date('Y'));
                        @endphp
                        <option disabled {{ is_null(request('tahun')) ? 'selected' : '' }}>Pilih Tahun</option>
                        @for ($y = 2024; $y <= now()->year; $y++)
                            <option value="{{ $y }}" {{ $tahunSekarang == $y ? 'selected' : '' }}>
                                {{ $y }}</option>
                        @endfor
                    </select>
                </div>
            </form>
        </div><!-- End Page Title -->


        <section class="section dashboard">
            <div class="row">

                <!-- 3 Card Statistik -->
                <div class="col-12">
                    <div class="row">
                        <!-- Total Pendapatan -->
                        <div class="col-lg-4 col-md-6">
                            <div class="card info-card">
                                <div class="card-body">
                                    <h5 class="card-title">Total Pendapatan</h5>
                                    <div class="d-flex align-items-center">
                                        <div
                                            class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                                            <i class="bi bi-currency-dollar"></i>
                                        </div>
                                        <div class="ps-3">
                                            <h6>Rp {{ number_format($totalPendapatan, 0, ',', '.') }}</h6>
                                            <span class="text-success small pt-1 fw-bold">Rp
                                                {{ number_format($rataRataPerHari, 0, ',', '.') }} Rata-Rata
                                                Perhari</span>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Total Transaksi -->
                        <div class="col-lg-4 col-md-6">
                            <div class="card info-card">
                                <div class="card-body">
                                    <h5 class="card-title">Total Transaksi</h5>
                                    <div class="d-flex align-items-center">
                                        <div
                                            class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                                            <i class="bi bi-receipt"></i>
                                        </div>
                                        <div class="ps-3">
                                            <h6>{{ $totalTransaksi }} Transaksi</h6>
                                            <span class="text-success small pt-1 fw-bold">
                                                {{ number_format($transaksiRataRataPerHari, 0, ',', '.') }} Rata-Rata
                                                Per Hari
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <!-- Jumlah Produk -->
                        <div class="col-lg-4 col-md-6">
                            <div class="card info-card">
                                <div class="card-body">
                                    <h5 class="card-title">Jumlah Produk</h5>
                                    <div class="d-flex align-items-center">
                                        <div
                                            class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                                            <i class="bi bi-box-seam"></i>
                                        </div>
                                        <div class="ps-3">
                                            <h6>{{ $totalProduk }} Produk</h6>
                                            <span class="text-success small pt-1 fw-bold">
                                                {{ $produkBaru }} Produk Baru
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>

                <!-- Grafik Penjualan & Penjualan Tertinggi -->
                <div class="col-12">
                    <div class="row">
                        <!-- Grafik Penjualan -->
                        <div class="col-lg-8">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">Grafik Penjualan</h5>
                                    <div id="salesChart"></div>

                                    <script>
                                        document.addEventListener("DOMContentLoaded", () => {
                                            const salesData = @json($pendapatanPerBulan); // Ambil dari controller

                                            new ApexCharts(document.querySelector("#salesChart"), {
                                                chart: {
                                                    type: 'bar',
                                                    height: 350,
                                                    toolbar: {
                                                        show: false
                                                    }
                                                },
                                                series: [{
                                                    name: 'Penjualan',
                                                    data: salesData
                                                }],
                                                xaxis: {
                                                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt',
                                                        'Nov', 'Des'
                                                    ],
                                                    labels: {
                                                        style: {
                                                            fontSize: '12px'
                                                        }
                                                    }
                                                },
                                                yaxis: {
                                                    min: 0,
                                                    max: 400000000,
                                                    labels: {
                                                        formatter: function(value) {
                                                            if (value >= 1000000) return (value / 1000000) + ' jt';
                                                            if (value >= 1000) return (value / 1000) + ' rb';
                                                            return value;
                                                        },
                                                        style: {
                                                            fontSize: '12px'
                                                        }
                                                    }
                                                },
                                                plotOptions: {
                                                    bar: {
                                                        borderRadius: 4,
                                                        columnWidth: '40%',
                                                    }
                                                },
                                                dataLabels: {
                                                    enabled: false
                                                },
                                                fill: {
                                                    opacity: 0.7,
                                                    colors: ['#cbd5e1']
                                                },
                                                tooltip: {
                                                    y: {
                                                        formatter: function(val) {
                                                            return "Rp " + val.toLocaleString("id-ID");
                                                        }
                                                    }
                                                }
                                            }).render();
                                        });
                                    </script>
                                </div>
                            </div>
                        </div>

                        <!-- Penjualan Tertinggi -->
                        <div class="col-lg-4">
                            <div class="card top-selling">
                                <div class="card-body pb-0">
                                    <!-- Header: Judul + Filter -->
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <h5 class="card-title mb-0">Penjualan Tertinggi</h5>
                                    </div>

                                    <!-- Tabel Produk -->
                                    <table class="table table-borderless">
                                        <thead>
                                            <tr>
                                                <th scope="col">Produk</th>
                                                <th scope="col">Jumlah</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($penjualanTertinggi as $item)
                                                <tr>
                                                    <td><a class="text-black">{{ $item->nama_produk }}</a></td>
                                                    <td>{{ $item->total_terjual }} Terjual</td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="2">Tidak ada data.</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </section>



    </main><!-- End #main -->

    <!-- ======= Footer ======= -->
    @include('footer')

    <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
            class="bi bi-arrow-up-short"></i></a>

    <!-- Vendor JS Files -->
    <script src="{{ asset('assets/vendor/apexcharts/apexcharts.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/chart.js/chart.umd.js') }}"></script>
    <script src="{{ asset('assets/vendor/echarts/echarts.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/quill/quill.js') }}"></script>
    <script src="{{ asset('assets/vendor/simple-datatables/simple-datatables.js') }}"></script>
    <script src="{{ asset('assets/vendor/tinymce/tinymce.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/php-email-form/validate.js') }}"></script>

    <!-- Template Main JS File -->
    <script src="{{ asset('assets/js/main.js') }}"></script>

</body>

</html>
