@extends('layouts.admin.base-dashboard')
@section('title', 'Laporan Laba Bersih')

@push('style')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style>
    .chart-legend {
        display: flex;
        gap: 2rem;
        margin-bottom: 1rem;
    }
    .chart-legend span { font-size: 15px; }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <div class="card mb-4">
        <div class="card-header fw-bold bg-primary text-white">
            📈 Laporan Laba Bersih (Net Profit)
        </div>
        <div class="card-body">
            <form id="filter-form" class="mb-3 d-flex flex-wrap align-items-center gap-2">
                <div>
                    <label>Rentang Tanggal:</label>
                    <input type="text" id="daterange" class="form-control" style="min-width:210px" readonly>
                </div>
                <button type="button" id="prev-day" class="btn btn-outline-secondary">&lt; Hari Sebelumnya</button>
                <button type="button" id="next-day" class="btn btn-outline-secondary">Hari Berikutnya &gt;</button>
            </form>
            <div class="chart-legend">
                <span><span style="color:#1abc9c;">■</span> Penjualan</span>
                <span><span style="color:#f39c12;">■</span> HPP</span>
                <span><span style="color:#2ecc71;">■</span> Laba Bersih</span>
            </div>
            <canvas id="netProfitChart" style="max-height:340px"></canvas>
        </div>
    </div>
</div>

<!-- Modal detail transaksi -->
<div class="modal fade" id="detailModal" tabindex="-1">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title">Detail Transaksi <span id="detailDate"></span></h5>
        <button type="button" class="btn-close text-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div id="detailContent">Memuat...</div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('script')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script>
let chart, currentRange;

function fetchChartData(start, end) {
    $.getJSON("{{ url('/reports/net-profit/data') }}", {
        start_date: start, end_date: end
    }, function(data) {
        const labels = data.map(d => d.date);
        const sales = data.map(d => d.sales);
        const hpp = data.map(d => d.hpp);
        const profit = data.map(d => d.profit);

        if (chart) chart.destroy();
        chart = new Chart($('#netProfitChart'), {
            type: 'bar',
            data: {
                labels,
                datasets: [
                    {label: 'Penjualan', data: sales, backgroundColor: '#1abc9c'},
                    {label: 'HPP', data: hpp, backgroundColor: '#f39c12'},
                    {label: 'Laba Bersih', data: profit, backgroundColor: '#2ecc71'}
                ]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {display: false},
                    tooltip: {
                        callbacks: {
                            afterBody: function(ctx) {
                                return "Klik untuk detail transaksi";
                            }
                        }
                    }
                },
                onClick: function(e, elements) {
                    if (!elements.length) return;
                    const idx = elements[0].index;
                    showDetail(labels[idx]);
                },
                scales: {
                    x: {stacked:true},
                    y: {beginAtZero: true}
                }
            }
        });
    });
}

function showDetail(date) {
    $('#detailModal').modal('show');
    $('#detailDate').text(date);
    $('#detailContent').html('Memuat...');
    $.getJSON("{{ url('/reports/net-profit/detail') }}", {date}, function(res) {
        if (res.transactions.length === 0) {
            $('#detailContent').html('<div class="alert alert-warning">Tidak ada transaksi.</div>');
            return;
        }
        let html = '<div class="table-responsive"><table class="table table-bordered">';
        html += '<thead><tr><th>No</th><th>Waktu</th><th>Total</th><th>Items</th></tr></thead><tbody>';
        res.transactions.forEach((trx, i) => {
            html += `<tr>
                <td>${i+1}</td>
                <td>${new Date(trx.created_at).toLocaleTimeString()}</td>
                <td>Rp${trx.total_amount.toLocaleString()}</td>
                <td><ul>`;
            trx.items.forEach(it => {
                html += `<li>${it.product ? it.product.name : '-'} (${it.qty} x Rp${it.price.toLocaleString()})</li>`;
            });
            html += `</ul></td></tr>`;
        });
        html += '</tbody></table></div>';
        $('#detailContent').html(html);
    });
}

$(function(){
    let start = moment().startOf('month'), end = moment().endOf('month');
    $('#daterange').daterangepicker({
        startDate: start,
        endDate: end,
        locale: {format: 'YYYY-MM-DD', applyLabel:'Pilih', cancelLabel:'Batal'}
    }, function(s, e){
        fetchChartData(s.format('YYYY-MM-DD'), e.format('YYYY-MM-DD'));
        currentRange = [s, e];
    });
    // Init pertama
    fetchChartData(start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'));
    currentRange = [start, end];

    $('#prev-day').click(function(){
        let s = currentRange[0].clone().subtract(1, 'days'), e = currentRange[1].clone().subtract(1, 'days');
        $('#daterange').data('daterangepicker').setStartDate(s);
        $('#daterange').data('daterangepicker').setEndDate(e);
        fetchChartData(s.format('YYYY-MM-DD'), e.format('YYYY-MM-DD'));
        currentRange = [s, e];
    });
    $('#next-day').click(function(){
        let s = currentRange[0].clone().add(1, 'days'), e = currentRange[1].clone().add(1, 'days');
        $('#daterange').data('daterangepicker').setStartDate(s);
        $('#daterange').data('daterangepicker').setEndDate(e);
        fetchChartData(s.format('YYYY-MM-DD'), e.format('YYYY-MM-DD'));
        currentRange = [s, e];
    });
});
</script>
@endpush