@extends('layouts.dashboard')

@section('title', 'Dashboard')
@section('main')
<div class="page-wrapper">
    <div class="page-content">
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pr-3">Chart</div>
            <div class="pl-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item"><a href="{{ url('dashboard') }}"><i class="bx bx-home-alt"></i></a></li>
                        <li class="breadcrumb-item active" aria-current="page">@yield('title')</li>
                        <li class="breadcrumb-item active" aria-current="page">Transaksi</li>
                    </ol>
                </nav>
            </div>
        </div>

        <section class="row">
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title"><i class="bi bi-clock-history mr-2"></i>Transaksi Hari ini</h5>
                        <hr>
                        {{ formatRupiah($transaksiHariIni) }}
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title"><i class="bi bi-clock-history mr-2"></i>Transaksi Bulan 
                            <span class="label-bulan">{{ formatTanggal(date('Y-m-d'), 'F') }}</span></h5>
                        <hr>
                        <span id="total-transaksi">
                            Rp. 0
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title"><i class="bi bi-clock-history mr-2"></i>Transaksi Bulan 
                            <span class="label-bulan">{{ formatTanggal(date('Y-m-d'), 'F') }}</span></h5>
                        <hr>
                        <div class="row mb-3">
                            <div class="col-lg-6 mb-3">
                                <div class="form-group">
                                    <label for="bulan_filter">Bulan</label>
                                    <select name="bulan_filter" id="bulan_filter" class="form-control">
                                        @foreach (bulan() as $key => $value)
                                            <option value="{{ $key + 1 }}" {{ $key + 1 == date('m') ? 'selected' : '' }}>
                                                {{ $value }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6 mb-3">
                                <div class="form-group">
                                    <label for="tahun_filter">Tahun</label>
                                    <select name="tahun_filter" id="tahun_filter" class="form-control">
                                        @for ($i = now()->year; $i >= now()->year - 4; $i--)
                                            <option value="{{ $i }}" {{ $i == date('Y') ? 'selected' : '' }}>
                                                {{ $i }}
                                            </option>
                                        @endfor
                                    </select>
                                </div>
                            </div>
                            <div class="col-12">
                                <div id="chart-transaksi"></div>
                            </div>
                            <div class="col-4">
                                {{-- <div class="card-header"><h5>Penjualan per Kategori</h5></div>
                                <div class="card-body"> --}}
                                    <div id="pieChartKategori"></div>
                                {{-- </div> --}}
                            </div>
                            <div class="col-4">
                                {{-- <div class="card-header"><h5>TOP 10 Pelanggan</h5></div>
                                <div class="card-body"> --}}
                                    <div id="barChartTopPelanggan"></div>
                                {{-- </div> --}}
                            </div>
                            <div class="col-4">
                                {{-- <div class="card-header"><h5>TOP 7 Menu Terlaris</h5></div>
                                <div class="card-body"> --}}
                                    <div id="barChartMenuTerlaris"></div>
                                {{-- </div> --}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
@endsection

@push('script')
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script>
    $(document).ready(function () {
        renderData();

        $("#bulan_filter, #tahun_filter").on("change", function () {
            renderData();
        });
    });

    const renderData = () => {
        const bulan = $("#bulan_filter").val();
        const tahun = $("#tahun_filter").val();

        // Transaksi harian (grafik area)
        ajaxCall(`/dashboard?bulan=${bulan}&tahun=${tahun}`, "GET", null, function (response) {
            renderChart(response.labels, response.transaksi);
            $('#total-transaksi').html(response.amount);
            $('.label-bulan').html(response.bulan);
        }, function (error) {
            console.error("Gagal ambil data transaksi:", error);
        });

        // Penjualan per kategori (pie chart)
        ajaxCall(`/dashboard?bulan=${bulan}&tahun=${tahun}&chart=kategori`, "GET", null, function(response) {
            renderPieChart("pieChartKategori", response.labels, response.series, "Penjualan Per Kategori");
        });
        
        // Produk Terlaris (grafik bar)
        ajaxCall(`/dashboard?bulan=${bulan}&tahun=${tahun}&chart=topPelanggan`, "GET", null, function(response) {
            // console.log(response.series, response.labels);
            renderBarChart("barChartTopPelanggan", response.labels, response.series, "TOP 10 Pelanggan");
        });
        ajaxCall(`/dashboard?bulan=${bulan}&tahun=${tahun}&chart=terlaris`, "GET", null, function(response) {
            renderBarChart("barChartMenuTerlaris", response.labels, response.series, "TOP 7 Menu Terlaris");
        });
    };
</script>

    
@endpush