@extends('layouts.admin.app', ["title" => "dashboard"])




@section('main')
<div class="main-content">

    <section class="section">
        <div class="section-header">
            <h1>Dashboard</h1>
        </div>
        <div class="mb-2">


            <button type="button" data-toggle="modal" data-target="#filter-1" class="btn btn-primary">Filter</button>
        </div>
        <div class="row">

            <div class="col-lg-4 col-md-4 col-sm-12">
                <div class="card card-active card-statistic-2 ">

                    <div class="card-icon active-icon shadow-white bg-white">
                        <i class="fa-solid fa-cash-register"></i>
                    </div>
                    <div class="card-wrap ">
                        <div class="card-header ">
                            <h4 class="text-white">Penjualan Hari ini
                            </h4>
                        </div>
                        <div class="card-body text-white  " id="penjualan-harian">
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-4 col-sm-12">
                <div class="card card-statistic-2">

                    <div class="card-icon shadow-primary bg-primary">
                        <i class="fas fa-money-bill-wave"></i>

                    </div>
                    <div class="card-wrap">
                        <div class="card-header">
                            <h4 class="text-primary">Profit Hari ini</h4>
                        </div>
                        <div class="card-body text-primary  " id="profit-harian">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-12">
                <div class="card card-active card-statistic-2 ">
                    <div class="card-icon active-icon shadow-white bg-white">
                        <i class="fa-solid fa-bag-shopping"></i>
                    </div>
                    <div class="card-wrap">
                        <div class="card-header">
                            <h4 class="text-white">Jumlah Barang Keluar </h4>
                        </div>
                        <div class="card-body text-white" id="jumlah-barang">

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12">
                <div class="card card-statistic-2">

                    <div class="card-icon shadow-primary bg-primary">
                        <i class="fas fa-cash-register"></i>

                    </div>
                    <div class="card-wrap">
                        <div class="card-header">
                            <h4 class="text-primary">Penjualan Bulan <span class="bulan"></span>
                            </h4>
                        </div>
                        <div class="card-body text-primary" id="penjualan-bulan">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12">
                <div class="card card-active card-statistic-2 ">
                    <div class="card-icon active-icon shadow-white bg-white">
                        <i class="fa-solid fa-money-bill-wave"></i>
                    </div>
                    <div class="card-wrap">
                        <div class="card-header">
                            <h4 class="text-white">Profit Bulan <span class="bulan"></span>
                            </h4>
                        </div>
                        <div class="card-body text-white" id="profit-bulan">

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-8 col-md-8 col-sm-12">
                <div class="card card-chart">
                    <div class="card-header">
                        <h4>Grafik Penjualan dan Profit Tahun<h4 class="tahun">2025</h4>
                        </h4>
                        <div class="card-header-action">
                            {{-- <a href="#" class="btn active">Week</a>
                            <a href="#" class="btn">Month</a> --}}
                            <button type="button" data-toggle="modal" data-target="#filter-2"
                                class="btn btn-primary daterange-btn icon-left btn-icon"><i class="fas fa-calendar"></i>
                                Pilih Tahun
                                </a>
                        </div>
                    </div>
                    <div class="card-body">
                        <canvas id="myChart2" height="180"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-12">

                <div class="card">
                    <div class="card-header">
                        <h4 class="d-inline">Barang yang sering keluar <span class="bulan"></span></h4>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled list-unstyled-border" id="list-barang">


                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<div class="modal fade" id="filter-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h5 class="modal-title text-white" id="exampleModalLabel">Filter</h5>
                <button type="button" class="rounded-circle btn btn-icon btn-danger text-white" data-dismiss="modal"
                    aria-label="Close"> <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">

                    <div class="row">

                        <div class="form-group col-md-12 col-12">
                            <label>Tanggal</label>
                            <input type="text" class="form-control tanggal" readonly id="input-tanggal"
                                placeholder="Pilih rentang tanggal">

                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <!-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> -->
                <button type="button" class="btn btn-filter-1 btn-info"> <i class="fas fa-sort"> </i> Filter</button>

            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="filter-2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h5 class="modal-title text-white" id="exampleModalLabel">Filter</h5>
                <button type="button" class="rounded-circle btn btn-icon btn-danger text-white" data-dismiss="modal"
                    aria-label="Close"> <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">

                    <div class="row">

                        <div class="form-group col-md-12 col-12">
                            <label>Tahun</label>
                            <select class="form-control select2" id="select-tahun" required>

                                @foreach ($tahuns as $tahun)
                                <option value="{{ old('tahun', $tahun->tahun) }}">{{ $tahun->tahun }}</option>
                                @if ($tahun->tahun != $tahun->tahun)
                                <option value="{{ $tahun->tahun }}">{{ $tahun->tahun }}</option>
                                @endif
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <!-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> -->
                <button type="button" class="btn btn-filter-2 btn-info"> <i class="fas fa-sort"> </i> Filter</button>

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

@push('js')

<script>
    let token = '{{ $token }}'
        let myChart = null;


        $(document).ready(function () {
            dashboard();
            showChart();
            const now = new Date();

            showBulan(now, now);
            showTahun(now);
        })
        function dashboard(tanggal = null) {

            $.ajax({
                url: '/api/dashboard',
                type: "GET",
                headers: {
                    'Authorization': 'Bearer ' + token
                }, data: {
                    tanggal: tanggal
                },
                success: function (response) {

                    
                    $('#penjualan-bulan').text('Rp ' + rupiah(response.penjualan_bulan));
                    $('#penjualan-harian').text('Rp ' + rupiah(response.penjualan_harian));
                    $('#profit-harian').text('Rp ' + rupiah(response.profit_harian));
                    $('#profit-bulan').text('Rp ' + rupiah(response.profit_bulan));
                    $('#jumlah-barang').text(rupiah(response.qty_harian) + ' Barang');
                    $('#list-barang').empty();


                    response.barang_keluar.forEach(function (b, index) {



                        $('#list-barang').append(`
                            <li class="media">
                                <div class="media-body">
                                    <div class="badge badge-pill badge-primary float-right mb-1">${b.total_qty} ${b.barang.satuan?.nama ?? 'Qty'}</div>
                                    <h6 class="media-title"><a href="#">${b.barang.nama}</a></h6>
                                    <div class="text-small text-muted">
                                        ${b.barang.kategori?.nama ?? 'Tidak ada kategori'}

                                        </div>
                                </div>
                            </li>
                        `);
                    })


                }
            })
        }
        function showChart(tahun = null) {

            $.ajax({
                url: '/api/dashboard',
                type: "GET",
                headers: {
                    'Authorization': 'Bearer ' + token
                }, data: {
                    tahun: tahun
                },
                success: function (response) {

                    chartData(response.chart_penjualan,response.chart_profit);

                }
            })
        }
        function chartData(penjualan,profit) {

            if (myChart !== null) {
                myChart.destroy();
                myChart = null;
            }
            const oldCanvas = document.getElementById('myChart2');
            const parent = oldCanvas.parentNode;

            const newCanvas = document.createElement('canvas');
            newCanvas.id = 'myChart2';
            newCanvas.width = oldCanvas.width;
            newCanvas.height = oldCanvas.height;

            parent.replaceChild(newCanvas, oldCanvas);

            const ctx = newCanvas.getContext('2d');

            myChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
                    datasets: [{
                        label: 'Penjualan',
                        data: penjualan,
                        fill: false,
                        backgroundColor: '#6777ef',
                        borderColor: '#6777ef',
                        borderWidth: 2.5,
                        pointBackgroundColor: '#ffffff',
                        pointRadius: 4,
                        cubicInterpolationMode: 'monotone'
                    },{
                         label: 'Profit',
                        data: profit,
                        fill: false,
                               backgroundColor: '#47c363',
                    borderColor: '#47c363',
                        borderWidth: 2.5,
                        pointBackgroundColor: '#ffffff',
                        pointRadius: 4,
                        cubicInterpolationMode: 'monotone'
                }]
                },
                options: {
                    responsive: true,
                    legend: {
                        display: true
                    },
                    tooltips: {
                        callbacks: {
                            label: function (tooltipItem, data) {
 const datasetLabel = data.datasets[tooltipItem.datasetIndex].label;
            const value = tooltipItem.yLabel;

            return datasetLabel + ': Rp ' + rupiah(value);                            }
                        }
                    },
                    scales: {
                        yAxes: [{
                            gridLines: {
                                color: "rgba(0,0,0,0.1)"
                            },
                            ticks: {
                                callback: function (value) {
                                    return 'Rp ' + rupiah(value);
                                }
                            }
                        }],
                        xAxes: [{
                            gridLines: {
                                display: false
                            }
                        }]
                    }
                }
            });
        }

        function showBulan(awal, akhir) {
            const bulan = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'];

            if (awal.getMonth() !== akhir.getMonth()) {
                $(".bulan").html(bulan[awal.getMonth()] + ' - ' + bulan[akhir.getMonth()]);
            } else {
                $(".bulan").html(bulan[awal.getMonth()]);
            }
        }
        function showTahun(data) {
            $(".tahun").html(data.getFullYear())
        }
        $('.btn-filter-1').click(function (e) {
            e.preventDefault();
            tahun = $('#select-tahun').val();


            $('#filter-1').modal('hide');

            let tanggal = $('#input-tanggal').val();
            let tglAwal = null;
            let tglAkhir = null;
            if (tanggal !== 0) {
                tglAwalStr = tanggal.split(' - ')[0];
                let [dayAwal, monthAwal, yearAwal] = tglAwalStr.split('/');
                tglAwal = new Date(yearAwal, monthAwal - 1, dayAwal);


                tglAkhirStr = tanggal.split(' - ')[1];
                let [dayAkhir, monthAkhir, yearAkhir] = tglAkhirStr.split('/');
                tglAkhir = new Date(yearAkhir, monthAkhir - 1, dayAkhir);



            }


            dashboard(tanggal);
            showBulan(tglAwal, tglAkhir);


        })
        $('.btn-filter-2').click(function (e) {
            e.preventDefault();

            $('#filter-2').modal('hide');
            tahun = $('#select-tahun').val();


            showChart(tahun);
            $(".tahun").html(tahun)



        })
</script>
@endpush