@extends('layouts.plain')
<style>
    .tab-content > .tab-pane:not(.active),
    .pill-content > .pill-pane:not(.active) {
        display: block;
        height: 0;
        overflow-y: hidden;
    } 

    .table {
        width: max-content; /* agar table menyesuaikan konten, bukan container */
    }

    /* Membuat semua checkbox header lebih besar */
    .toggle-col {
        width: 12px;      /* Lebar kotak */
        height: 12px;     /* Tinggi kotak */
        transform: scale(1.5);  /* Perbesar checkbox 1.5x */
        cursor: pointer;
        margin-left: 5px; /* Sedikit spasi agar rapi */
    }
</style>

@section('content')
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0">Dashboard II</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item active">Dashboard II</li>
            </ol>
          </div>
        </div>
      </div>
    </div>
    <!-- /.content-header -->

    <!-- Status -->
    @if (session('status'))
        <div class="alert alert-success">
            {{session('status')}}
        </div>
    @endif

    <!-- Main content -->
    <div class="content">
      <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <ul class="nav nav-tabs">
                    <li class="nav-item active">
                        <a class="nav-link" href="#jual" id="jual_tab" data-toggle="tab">Penjualan</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#beli_non" id="beli_non_tab" data-toggle="tab">Pembelian Non</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#beli" id="beli_tab" data-toggle="tab">Pembelian Kedele</a>
                    </li>
                </ul>
            </div>

            <div class="tab-content mt-3">
                
                <div id="jual" class="tab-pane active">

                    <div class="form-group row">
                        <div class="col-md-12">
                            <div class="card card-success">
                                <div class="card-header">
                                    <h3 class="card-title">10 Kota Teratas - Selain Surabaya</h3>

                                    <div class="card-tools">
                                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                            <i class="fas fa-minus"></i>
                                        </button>
                                        <button type="button" class="btn btn-tool" data-card-widget="remove">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="chart" >
                                        <canvas id="jualChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 1500px;"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-12">
                            <div class="card card-success">
                                <div class="card-header">
                                    <h3 class="card-title">10 Kota Teratas - Global</h3>

                                    <div class="card-tools">
                                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                            <i class="fas fa-minus"></i>
                                        </button>
                                        <button type="button" class="btn btn-tool" data-card-widget="remove">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="chart" >
                                        <canvas id="jualKgChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 1500px;"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-12">
                            <div class="card card-success">
                                <div class="card-header">
                                    <h3 class="card-title">10 Customer Teratas</h3>

                                    <div class="card-tools">
                                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                            <i class="fas fa-minus"></i>
                                        </button>
                                        <button type="button" class="btn btn-tool" data-card-widget="remove">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="chart" >
                                        <canvas id="jualCharty" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 1500px;"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    
                    <div class="form-group row">
                        <!-- PASTE DIBAWAH INI -->

                        <style>
                            /* 🎨 Styling background tabel */
                            .report-content table {
                                background-color: #f8f9fa; /* abu muda */
                            }
                            .report-content th {
                                background-color: #007bff; /* biru header */
                                color: white;
                            }
                            .report-content tfoot {
                                background-color: #e0e0e0; /* abu footer */
                                font-weight: bold;
                            }
                            /* Opsional: efek hover */
                            .report-content tbody tr:hover {
                                background-color: #d9edf7; /* biru muda saat hover */
                            }
                        </style>

                        <!-- DISINI BATAS AWAL KOOLREPORT-->
                        <div style="overflow-x:auto;">
                            <div class="report-content col-md-12">
                                <legend class="font-weight-bold">Rekap Penjualan (1 Tahun)</legend>

                                                            </div>
                        </div>
                        <!-- DISINI BATAS AKHIR KOOLREPORT-->

                        <div class="form-group row">
                            <!-- PASTE DIBAWAH INI -->
                            <!-- DISINI BATAS AWAL KOOLREPORT-->
                            <div style="overflow-x:auto;">
                                <div class="report-content col-md-12">
                                    <legend class="font-weight-bold">Data Penjualan Per Bulan</legend>

                                                                    </div>
                            </div>
                            <!-- DISINI BATAS AKHIR KOOLREPORT-->
                        </div>
                    </div>
                </div>

                <div id="beli_non" class="tab-pane">

                    <div class="form-group row">
                        <div class="col-md-12">
                            <div class="card card-success">
                                <div class="card-header">
                                    <h3 class="card-title">10 Supplier Non Teratas</h3>

                                    <div class="card-tools">
                                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                            <i class="fas fa-minus"></i>
                                        </button>
                                        <button type="button" class="btn btn-tool" data-card-widget="remove">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="chart" >
                                        <canvas id="beliNonChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 1500px;"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group row">
                        <!-- PASTE DIBAWAH INI -->

                        <style>
                            /* 🎨 Styling background tabel */
                            .report-content table {
                                background-color: #f8f9fa; /* abu muda */
                            }
                            .report-content th {
                                background-color: #007bff; /* biru header */
                                color: white;
                            }
                            .report-content tfoot {
                                background-color: #e0e0e0; /* abu footer */
                                font-weight: bold;
                            }
                            /* Opsional: efek hover */
                            .report-content tbody tr:hover {
                                background-color: #d9edf7; /* biru muda saat hover */
                            }
                        </style>

                        <!-- DISINI BATAS AWAL KOOLREPORT-->
                        <div style="overflow-x:auto;">
                            <div class="report-content col-md-12">
                                <legend class="font-weight-bold">Rekap Pembelian Non (1 Tahun)</legend>

                                                            </div>
                        </div>
                        <!-- DISINI BATAS AKHIR KOOLREPORT-->

                        <div class="form-group row">
                            <!-- PASTE DIBAWAH INI -->
                            <!-- DISINI BATAS AWAL KOOLREPORT-->
                            <div style="overflow-x:auto;">
                                <div class="report-content col-md-12">
                                    <legend class="font-weight-bold">Data Pembelian Non Per Bulan</legend>

                                                                    </div>
                            </div>
                            <!-- DISINI BATAS AKHIR KOOLREPORT-->
                        </div>
                    </div>

                

                </div>


                <div id="beli" class="tab-pane">

                    <div class="form-group row">
                        <div class="col-md-12">
                            <div class="card card-success">
                                <div class="card-header">
                                    <h3 class="card-title">10 Supplier Kedele Teratas</h3>

                                    <div class="card-tools">
                                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                            <i class="fas fa-minus"></i>
                                        </button>
                                        <button type="button" class="btn btn-tool" data-card-widget="remove">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="chart" >
                                        <canvas id="beliChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 1500px;"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group row">
                        <!-- PASTE DIBAWAH INI -->

                        <style>
                            /* 🎨 Styling background tabel */
                            .report-content table {
                                background-color: #f8f9fa; /* abu muda */
                            }
                            .report-content th {
                                background-color: #007bff; /* biru header */
                                color: white;
                            }
                            .report-content tfoot {
                                background-color: #e0e0e0; /* abu footer */
                                font-weight: bold;
                            }
                            /* Opsional: efek hover */
                            .report-content tbody tr:hover {
                                background-color: #d9edf7; /* biru muda saat hover */
                            }
                        </style>

                        <!-- DISINI BATAS AWAL KOOLREPORT-->
                        <div style="overflow-x:auto;">
                            <div class="report-content col-md-12">
                                <legend class="font-weight-bold">Rekap Pembelian Kedele (1 Tahun)</legend>

                                                            </div>
                        </div>
                        <!-- DISINI BATAS AKHIR KOOLREPORT-->

                        <div class="form-group row">
                            <!-- PASTE DIBAWAH INI -->
                            <!-- DISINI BATAS AWAL KOOLREPORT-->
                            <div style="overflow-x:auto;">
                                <div class="report-content col-md-12">
                                    <legend class="font-weight-bold">Data Pembelian Kedele Per Bulan</legend>


                                                                    </div>
                            </div>
                            <!-- DISINI BATAS AKHIR KOOLREPORT-->

                        </div>
                    </div>

                

                </div>

            </div>
        </div>
    </div>
</div>
@endsection

@section('javascripts')

<script>

$(function () {

    // penjualan
    var dataChart = @json($dataChart);
    var dataChartx = @json($dataChartx);
    var dataCharty = @json($dataCharty);

    // pembelian Non
    var dataBeliNon = @json($dataBeliNon);

    // pembelian
    var dataBeli = @json($dataBeli);

    //////////////////////////////////////////////

    // Penjualan
    // Chart pertama (jualKgChart)
    var labels = dataChart.map(d => d.KOTA);
    var values = dataChart.map(d => d.total);

    // Chart kedua (jualChart) — PAKAI $dataChartx
    var labels2 = dataChartx.map(d => d.KOTA);
    var values2 = dataChartx.map(d => d.total);

    // Chart ketiga (jualCharty) — PAKAI $dataCharty
    var labels3 = dataCharty.map(d => d.NAMAC);
    var values3 = dataCharty.map(d => d.total);

    // Pembelian Non

    // Chart pertama (beliNonChart)
    var labels4 = dataBeliNon.map(d => d.NAMAS);
    var values4 = dataBeliNon.map(d => d.total);

    // Pembelian
    
    // Chart pertama (beliChart)
    var labels5 = dataBeli.map(d => d.NAMAS);
    var values5 = dataBeli.map(d => d.total);

    var colors = [
        'rgba(255, 99, 132, 0.5)',
        'rgba(54, 162, 235, 0.5)',
        'rgba(255, 206, 86, 0.5)',
        'rgba(75, 192, 192, 0.5)',
        'rgba(153, 102, 255, 0.5)',
        'rgba(255, 159, 64, 0.5)',
        'rgba(199, 199, 199, 0.5)',
        'rgba(83, 102, 255, 0.5)',
        'rgba(255, 99, 255, 0.5)',
        'rgba(99, 255, 132, 0.5)'
    ];

    var borderColors = colors.map(c => c.replace('0.5', '1'));

    // =================== CHART 1 ======================
    var ctx1 = document.getElementById('jualKgChart').getContext('2d');
    new Chart(ctx1, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: 'Total Penjualan (Rp.)',
                data: values,
                backgroundColor: colors.slice(0, labels.length),
                borderColor: borderColors.slice(0, labels.length),
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR' }).format(context.raw);
                        }
                    }
                },
                datalabels: {
                    anchor: 'end',
                    align: 'end',
                    color: '#000',
                    formatter: function(value) {
                        return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR' }).format(value);
                    },
                    font: { weight: 'bold', size: 13 }
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        },
        plugins: [ChartDataLabels]
    });

    // =================== CHART 2 (pakai dataChartx) ======================
    var ctx2 = document.getElementById('jualChart').getContext('2d');
    new Chart(ctx2, {
        type: 'bar',
        data: {
            labels: labels2,
            datasets: [{
                label: 'Total Penjualan (Rp.)',
                data: values2,
                backgroundColor: colors.slice(0, labels2.length),
                borderColor: borderColors.slice(0, labels2.length),
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR' }).format(context.raw);
                        }
                    }
                },
                datalabels: {
                    anchor: 'end',
                    align: 'end',
                    color: '#000',
                    formatter: function(value) {
                        return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR' }).format(value);
                    },
                    font: { weight: 'bold', size: 13 }
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        },
        plugins: [ChartDataLabels]
    });

    // =================== CHART 3 (pakai dataCharty) ======================
    var ctx3 = document.getElementById('jualCharty').getContext('2d');
    new Chart(ctx3, {
        type: 'bar',
        data: {
            labels: labels3,
            datasets: [{
                label: 'Total Penjualan (Rp.)',
                data: values3,
                backgroundColor: colors.slice(0, labels3.length),
                borderColor: borderColors.slice(0, labels3.length),
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR' }).format(context.raw);
                        }
                    }
                },
                datalabels: {
                    anchor: 'end',
                    align: 'end',
                    color: '#000',
                    formatter: function(value) {
                        return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR' }).format(value);
                    },
                    font: { weight: 'bold', size: 13 }
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        },
        plugins: [ChartDataLabels]
    });


    //Pembelian Non

    // =================== CHART 1 ======================
    var ctx4 = document.getElementById('beliNonChart').getContext('2d');
    new Chart(ctx4, {
        type: 'bar',
        data: {
            labels: labels4,
            datasets: [{
                label: 'Total Pembelian (Rp.)',
                data: values4,
                backgroundColor: colors.slice(0, labels4.length),
                borderColor: borderColors.slice(0, labels4.length),
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR' }).format(context.raw);
                        }
                    }
                },
                datalabels: {
                    anchor: 'end',
                    align: 'end',
                    color: '#000',
                    formatter: function(value) {
                        return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR' }).format(value);
                    },
                    font: { weight: 'bold', size: 13 }
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        },
        plugins: [ChartDataLabels]
    });

    //Pembelian 

    // =================== CHART 1 ======================
    var ctx5 = document.getElementById('beliChart').getContext('2d');
    new Chart(ctx5, {
        type: 'bar',
        data: {
            labels: labels5,
            datasets: [{
                label: 'Total Pembelian (Rp.)',
                data: values5,
                backgroundColor: colors.slice(0, labels5.length),
                borderColor: borderColors.slice(0, labels5.length),
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR' }).format(context.raw);
                        }
                    }
                },
                datalabels: {
                    anchor: 'end',
                    align: 'end',
                    color: '#000',
                    formatter: function(value) {
                        return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR' }).format(value);
                    },
                    font: { weight: 'bold', size: 13 }
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        },
        plugins: [ChartDataLabels]
    });

});

</script>
@endsection