@extends('layouts.admin.base-dashboard')

@section('title', 'Grafik Transaksi POS')

@section('content')
<div class="container-fluid">
    <div class="card shadow-sm">
        <div class="card-header fw-bold bg-primary text-white"></div>
        <div class="card-body">
            <div class="row mb-3">
                <form id="filter-form" class="col-12 row g-2 align-items-end">
                    <div class="col-md-4">
                        <label for="from">Dari Tanggal</label>
                        <input type="text" id="from" name="from" class="form-control datepicker" autocomplete="off" placeholder="yyyy-mm-dd">
                    </div>
                    <div class="col-md-4">
                        <label for="to">Sampai Tanggal</label>
                        <input type="text" id="to" name="to" class="form-control datepicker" autocomplete="off" placeholder="yyyy-mm-dd">
                    </div>
                    <div class="col-md-2 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary btn-sm w-100">Filter</button>
                    </div>
                </form>
            </div>
            <div class="row">
                <div class="col-lg-6 mb-4">
                    <div class="card shadow">
                        <div class="card-header bg-primary text-white">
                            Grafik Penjualan Harian
                        </div>
                        <div class="card-body">
                            <canvas id="chartDaily" height="180"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 mb-4">
                    <div class="card shadow">
                        <div class="card-header bg-success text-white">
                            Grafik Penjualan per Cabang
                        </div>
                        <div class="card-body">
                            <canvas id="chartBranch" height="180"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('script')
<!-- Bootstrap Datepicker CSS & JS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js"></script>
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    $(function() {
        $('.datepicker').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayHighlight: true,
            orientation: "bottom"
        });

        // Inisialisasi grafik kosong
        let chartDaily = new Chart(document.getElementById('chartDaily').getContext('2d'), {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: 'Total Penjualan',
                    data: [],
                    borderColor: '#0069d9',
                    backgroundColor: 'rgba(0,105,217,0.15)',
                    tension: 0.2,
                    pointRadius: 5,
                    pointBackgroundColor: '#0069d9',
                    fill: true
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: val => 'Rp' + val.toLocaleString()
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });
        let chartBranch = new Chart(document.getElementById('chartBranch').getContext('2d'), {
            type: 'bar',
            data: {
                labels: [],
                datasets: [{
                    label: 'Total Penjualan',
                    data: [],
                    backgroundColor: '#28a745',
                    borderRadius: 8
                }]
            },
            options: {
                indexAxis: 'y',
                scales: {
                    x: {
                        beginAtZero: true,
                        ticks: {
                            callback: val => 'Rp' + val.toLocaleString()
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });

        function loadCharts(params = {}) {
            // Grafik harian
            $.get("{{ route('reports.pos.chart-daily') }}", params, function(res) {
                chartDaily.data.labels = res.labels;
                chartDaily.data.datasets[0].data = res.data;
                chartDaily.update();
            });

            // Grafik per cabang
            $.get("{{ route('reports.pos.chart-branch') }}", params, function(res) {
                chartBranch.data.labels = res.labels;
                chartBranch.data.datasets[0].data = res.data;
                chartBranch.update();
            });
        }

        loadCharts();

        $('#filter-form').on('submit', function(e) {
            e.preventDefault();
            let from = $('#from').val();
            let to = $('#to').val();
            loadCharts({
                from,
                to
            });
        });
    });
</script>
@endpush