<?php
use yii\helpers\Html;
use yii\grid\GridView;

$this->title = 'Dashboard Kasir';
?>
<div class="d-flex justify-content-between align-items-center mb-3">
    <h3>📊 Dashboard Kasir</h3>

    <button id="darkToggle" class="btn btn-sm btn-dark">
        🌙 Dark Mode
    </button>
</div>


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/countup.js@2.6.2/dist/countUp.umd.js"></script>

<div class="container-fluid">

<h3 class="mb-4">📊 Dashboard Kasir</h3>

<div class="row">

<?php
function cardBox($title,$value,$color,$id){
    return "
    <div class='col-md-2'>
        <div class='card shadow mb-4 text-white' style='background:$color'>
            <div class='card-body'>
                <h6>$title</h6>
                <h4 id='$id'>0</h4>
            </div>
        </div>
    </div>";
}

echo cardBox('Shift Hari Ini',$totalShiftHariIni,'#343a40','shift');
echo cardBox('Modal Hari Ini',$totalModal,'#007bff','modal');
echo cardBox('Total Omset',$totalOmset,'#28a745','omset');
echo cardBox('Total Cash',$totalCash,'#17a2b8','cash');
echo cardBox('Non Cash',$totalNonCash,'#ffc107','noncash');
echo cardBox('Total Selisih',$totalSelisih,'#dc3545','selisih');
?>

</div>

<!-- ================= GRAFIK ================= -->

<!-- <div class="row">

<div class="col-md-6">
<div class="card shadow mb-4">
<div class="card-header bg-dark text-white">
📈 Omset 7 Hari Terakhir
</div>
<div class="card-body">
<canvas id="omsetChart"></canvas>
</div>
</div>
</div>

<div class="col-md-6">
<div class="card shadow mb-4">
<div class="card-header bg-dark text-white">
💳 Cash vs Non Cash
</div>
<div class="card-body">
<canvas id="metodeChart"></canvas>
</div>
</div>
</div>

</div> -->

<!-- ================= GRID ================= -->

<div class="card shadow mb-4">
<div class="card-header bg-secondary text-white">
📋 Data Shift
</div>
<div class="card-body">

<?= GridView::widget([
'dataProvider'=>$dataProvider,
'tableOptions'=>['class'=>'table table-bordered table-striped'],
'columns'=>[

['class'=>'yii\grid\SerialColumn'],

[
'attribute'=>'user_id',
'value'=>function($model){
    return $model->user->vNama;
}
],

[
'attribute'=>'modal_awal',
'value'=>function($m){
    return 'Rp '.number_format($m->modal_awal,0,',','.');
}
],

[
'attribute'=>'total_penjualan',
'value'=>function($m){
    return 'Rp '.number_format($m->total_penjualan,0,',','.');
}
],

[
'attribute'=>'total_cash_shift',
'value'=>function($m){
    return 'Rp '.number_format($m->total_cash_shift,0,',','.');
}
],

[
'attribute'=>'selisih',
'format'=>'raw',
'value'=>function($m){
    $color = $m->selisih < 0 ? 'red':'green';
    return "<span style='color:$color'>Rp ".number_format($m->selisih,0,',','.')."</span>";
}
],

[
'attribute'=>'status',
'format'=>'raw',
'value'=>function($m){
    if($m->status=='open'){
        return '<span class="badge badge-warning">OPEN</span>';
    }else{
        return '<span class="badge badge-success">CLOSED</span>';
    }
}
],

[
'class'=>'yii\grid\ActionColumn',
'template'=>'{view} {print}',
'buttons'=>[
'print'=>function($url,$model){
    if($model->status=='closed'){
        return Html::a('🖨',['print','id'=>$model->id],[
            'target'=>'_blank',
            'class'=>'btn btn-sm btn-primary'
        ]);
    }
}
]
]

]
]); ?>

</div>
</div>

</div>

<?php
$labels = json_encode($labels7Hari);
$data = json_encode($data7Hari);
?>

<script>

// COUNT UP
var CountUp = window.countUp.CountUp;

new CountUp('shift', <?= $totalShiftHariIni ?>).start();
new CountUp('modal', <?= $totalModal ?>).start();
new CountUp('omset', <?= $totalOmset ?>).start();
new CountUp('cash', <?= $totalCash ?>).start();
new CountUp('noncash', <?= $totalNonCash ?>).start();
new CountUp('selisih', <?= $totalSelisih ?>).start();


// LINE CHART
var ctx = document.getElementById('omsetChart').getContext('2d');
var gradient = ctx.createLinearGradient(0,0,0,400);
gradient.addColorStop(0,'rgba(40,167,69,0.5)');
gradient.addColorStop(1,'rgba(40,167,69,0)');

new Chart(ctx,{
type:'line',
data:{
labels: <?= $labels ?>,
datasets:[{
label:'Omset',
data: <?= $data ?>,
borderColor:'#28a745',
backgroundColor:gradient,
fill:true,
tension:0.3
}]
}
});


// DOUGHNUT
new Chart(document.getElementById('metodeChart'),{
type:'doughnut',
data:{
labels:['Cash','Non Cash'],
datasets:[{
data:[<?= $totalCash ?>, <?= $totalNonCash ?>],
backgroundColor:['#007bff','#ffc107']
}]
}
});

</script>


<style>
body.dark-mode {
    background-color: #1e1e2f !important;
    color: #e4e6eb !important;
}

body.dark-mode .card {
    background-color: #2b2b3c !important;
    color: #ffffff !important;
}

body.dark-mode .card-header {
    background-color: #111827 !important;
}

body.dark-mode .table {
    color: #ffffff;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: #2f2f44;
}

body.dark-mode .badge-warning {
    background-color: #ff9800;
}

body.dark-mode .badge-success {
    background-color: #4caf50;
}

body.dark-mode .btn-dark {
    background-color: #444;
}
</style>
<script>

// Toggle Dark Mode
var toggleBtn = document.getElementById('darkToggle');

// Load state saat halaman dibuka
if(localStorage.getItem('darkMode') === 'on'){
    document.body.classList.add('dark-mode');
    toggleBtn.innerHTML = "☀ Light Mode";
}

toggleBtn.addEventListener('click', function(){

    document.body.classList.toggle('dark-mode');

    if(document.body.classList.contains('dark-mode')){
        localStorage.setItem('darkMode','on');
        toggleBtn.innerHTML = "☀ Light Mode";
    }else{
        localStorage.setItem('darkMode','off');
        toggleBtn.innerHTML = "🌙 Dark Mode";
    }

});
</script>
