<?php
use yii\helpers\Html;

$this->title = 'Data Shift Kasir';
?>
<div class="row mb-4">

    <div class="col-md-3">
        <div class="card text-white bg-primary p-3">
            <h6>Total Shift Hari Ini</h6>
            <h4><?= $totalShiftHariIni ?></h4>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card text-white bg-success p-3">
            <h6>Total Omset Hari Ini</h6>
            <h4>Rp <?= number_format($totalOmsetHariIni,0,',','.') ?></h4>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card text-white bg-info p-3">
            <h6>Total Cash Hari Ini</h6>
            <h4>Rp <?= number_format($totalCashHariIni,0,',','.') ?></h4>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card text-white bg-danger p-3">
            <h6>Total Selisih Hari Ini</h6>
            <h4>Rp <?= number_format($totalSelisihHariIni,0,',','.') ?></h4>
        </div>
    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="card p-3 mb-4">
    <h5>Grafik Omset 7 Hari Terakhir</h5>
    <canvas id="omsetChart" height="100"></canvas>
</div>

<script>
const ctx = document.getElementById('omsetChart');

new Chart(ctx, {
    type: 'line',
    data: {
        labels: <?= json_encode($labels) ?>,
        datasets: [
            {
                label: 'Modal Awal',
                data: <?= json_encode($dataModal) ?>,
                borderColor: 'orange',
                backgroundColor: 'rgba(255,165,0,0.2)',
                tension: 0.3,
                fill: true
            },
            {
                label: 'Omset',
                data: <?= json_encode($dataOmset) ?>,
                borderColor: 'green',
                backgroundColor: 'rgba(0,128,0,0.2)',
                tension: 0.3,
                fill: true
            }
        ]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { display: true }
        },
        scales: { y: { beginAtZero: true } }
    }
});

</script>

<div class="card p-3 mb-4">
    <h5>Grafik Cash vs Non-Cash (7 Hari)</h5>
    <canvas id="paymentChart" height="100"></canvas>
</div>

<script>
const ctxPayment = document.getElementById('paymentChart');

new Chart(ctxPayment, {
    type: 'bar',
    data: {
        labels: <?= json_encode($labelsPayment) ?>,
        datasets: [
            {
                label: 'Cash',
                data: <?= json_encode($dataCash) ?>,
                borderWidth: 1
            },
            {
                label: 'Non-Cash',
                data: <?= json_encode($dataNonCash) ?>,
                borderWidth: 1
            }
        ]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
</script>

<h3>Data Shift Kasir</h3>

<p>
    <?= Html::a('Buka Shift', ['buka'], ['class' => 'btn btn-success']) ?>
</p>

<table id="shiftTable" class="display table table-bordered">
    <thead>
        <tr>
            <th>No</th>
            <th>Nama Kasir</th>
            <th>Modal</th>
            <th>Total Penjualan</th>
            <th>Total Cash</th>
            <th>Selisih</th>
            <th>Status</th>
            <th>Tanggal Buka</th>
            <th>Tanggal Tutup</th>
            <th>Aksi</th>
        </tr>
    </thead>
    <tbody>
        <?php $no = 1; foreach($shifts as $shift): ?>
        <tr>
            <td><?= $no++ ?></td>
            <td><?= $shift->user->vNama ?? '-' ?></td>
            <td><?= number_format($shift->modal_awal,0,',','.') ?></td>
            <td><?= number_format($shift->total_penjualan,0,',','.') ?></td>
            <td><?= number_format($shift->total_cash_shift,0,',','.') ?></td>
            <td style="color: <?= $shift->selisih < 0 ? 'red' : 'green' ?>">
                <?= number_format($shift->selisih,0,',','.') ?>
            </td>
            <td>
                <?php if($shift->status == 'open'): ?>
                    <span class="badge bg-warning">OPEN</span>
                <?php else: ?>
                    <span class="badge bg-success">CLOSED</span>
                <?php endif; ?>
            </td>
            <td><?= $shift->tanggal_buka ?></td>
            <td><?= $shift->tanggal_tutup ?></td>
            <td>
                <?php if($shift->status == 'closed'): ?>
                    <?= Html::a('Print', ['print', 'id'=>$shift->id], [
                        'class'=>'btn btn-sm btn-primary',
                        'target'=>'_blank'
                    ]) ?>
                    <?= Html::a('PDF', ['pdf', 'id'=>$shift->id], [
                        'class'=>'btn btn-sm btn-danger'
                    ]) ?>
                <?php endif; ?>
            </td>
        </tr>
        <?php endforeach; ?>
    </tbody>
</table>

<script>
$(document).ready(function() {
    $('#shiftTable').DataTable();
});
</script>
