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

@section('title', 'Ringkasan Penjualan')

@push('style')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.10.0/dist/css/bootstrap-datepicker.min.css">
<style>
    .datepicker {
        z-index: 1200 !important;
    }

    #summary-row .border {
        padding: 1rem !important;
    }

    #summary-row .border div[style*="font-size:1.3rem"] {
        font-size: 1.3rem;
    }

    @media (max-width: 575.98px) {
        #summary-row .border {
            padding: .65rem !important;
        }

        #summary-row .border div[style*="font-size:1.3rem"] {
            font-size: 1.1rem;
        }
    }

    @media (max-width: 400px) {
        #summary-row .border {
            padding: .35rem !important;
        }

        #summary-row .border div[style*="font-size:1.3rem"] {
            font-size: .98rem;
        }

        #summary-row .border div {
            font-size: .89rem !important;
        }
    }

    .card-body.chart-container {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .chart-responsive-wrap {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: visible;
    }

    #chart-penjualan-harian {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        height: 220px !important;
        background: #fff;
    }

    @media (max-width: 575.98px) {
        #chart-penjualan-harian {
            height: 170px !important;
        }

        .card-body.chart-container {
            padding: .65rem !important;
        }
    }

    @media (max-width: 400px) {
        #chart-penjualan-harian {
            height: 130px !important;
        }

        .card-body.chart-container {
            padding: .35rem !important;
        }
    }

</style>
@endpush

@section('content')
<div class="container-fluid">
    <div class="card">
        <div class="card-header">
            Report Sales
        </div>
        <div class="card-body">
            <div class="row mb-3">
                <div class="col-md-4 mb-2">
                    <input type="text" id="filter-tanggal" class="form-control" autocomplete="off" placeholder="Tanggal" readonly>
                </div>
                <div class="col-md-4 mb-2">
                    <select id="filter-branch" class="form-control">
                        <option value="">Semua Cabang</option>
                        @foreach ($branches as $branch)
                        <option value="{{ $branch->id }}" {{ $branch_id == $branch->id ? 'selected' : '' }}>{{ $branch->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div id="summary-row" class="row mb-4 text-center">
                <div class="col-6 col-md-3">
                    <div class="border rounded p-2">
                        <div style="font-size:1.3rem;font-weight:bold;" id="totalPenjualan">Rp0</div>
                        <div>Penjualan Bersih</div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="border rounded p-2">
                        <div style="font-size:1.3rem;font-weight:bold;" id="totalPengadaan">Rp0</div>
                        <div>Total Pengadaan</div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="border rounded p-2">
                        <div style="font-size:1.3rem;font-weight:bold;" id="labaBersih">Rp0</div>
                        <div>Laba Bersih</div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="border rounded p-2">
                        <div style="font-size:1.3rem;font-weight:bold;" id="avgPenjualan">Rp0</div>
                        <div>Rata-rata Penjualan</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-header fw-bold">Grafik Penjualan per Hari</div>
        <div class="card-body chart-container">
            <div class="chart-responsive-wrap">
                <canvas id="chart-penjualan-harian"></canvas>
            </div>
        </div>
    </div>

    <!-- Modal Detail Penjualan per Hari -->
    <div class="modal fade" id="modalDetailPenjualan" tabindex="-1" role="dialog" aria-labelledby="modalDetailPenjualanLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalDetailPenjualanLabel">Detail Penjualan <span id="modal-tanggal"></span></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Tutup">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <h6>Barbershop Transaction</h6>
                    <div id="detail-barber"></div>
                    <hr>
                    <h6>Transaction (POS Umum)</h6>
                    <div id="detail-pos"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('script')
<script src="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.10.0/dist/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.10.0/dist/locales/bootstrap-datepicker.id.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    let chartPenjualanHarian;
    let tanggalIndexMap = [];

    function formatRupiah(x) {
        x = parseInt(x) || 0;
        return 'Rp' + x.toLocaleString('id-ID');
    }

    function renderSummary(data) {
        $('#totalPenjualan').text(formatRupiah(data.totalPenjualan));
        $('#totalPengadaan').text(formatRupiah(data.totalPengadaan));
        $('#labaBersih').text(formatRupiah(data.labaBersih));
        $('#avgPenjualan').text(formatRupiah(data.avgPenjualan));
    }

    function updateChartHarian(labels, salesByDay, tanggalList) {
        let baseFont = 12;
        let screenWidth = window.innerWidth;
        if (screenWidth <= 400) baseFont = 9;
        else if (screenWidth <= 575) baseFont = 11;
        tanggalIndexMap = tanggalList;
        if (!chartPenjualanHarian) {
            const ctx = document.getElementById('chart-penjualan-harian').getContext('2d');
            chartPenjualanHarian = new Chart(ctx, {
                type: 'bar'
                , data: {
                    labels: labels
                    , datasets: [{
                        label: "Total Penjualan (Rp)"
                        , data: salesByDay
                        , backgroundColor: 'rgba(75, 192, 192, 0.6)'
                        , borderColor: 'rgba(75, 192, 192, 1)'
                        , borderWidth: 1
                        , barPercentage: 0.7
                        , categoryPercentage: 0.9
                    }]
                }
                , options: {
                    responsive: true
                    , maintainAspectRatio: false
                    , plugins: {
                        legend: {
                            display: false
                        }
                    }
                    , scales: {
                        x: {
                            ticks: {
                                font: {
                                    size: baseFont
                                }
                            }
                        }
                        , y: {
                            beginAtZero: true
                            , ticks: {
                                font: {
                                    size: baseFont
                                }
                                , callback: function(value) {
                                    return 'Rp' + value.toLocaleString('id-ID');
                                }
                            }
                        }
                    }
                    , interaction: {
                        mode: 'nearest'
                        , intersect: true
                    }
                    , onClick: chartHarianOnClick
                }
            });
        } else {
            chartPenjualanHarian.data.labels = labels;
            chartPenjualanHarian.data.datasets[0].data = salesByDay;
            chartPenjualanHarian.update();
        }
    }

    function chartHarianOnClick(e, elements) {
        if (!elements.length) return;
        const barIndex = elements[0].index;
        showDetailModalHarian(barIndex);
    }

    function showDetailModalHarian(idx) {
        let tanggal = tanggalIndexMap[idx];
        let branch_id = $('#filter-branch').val();
        $('#modal-tanggal').text(tanggal ? tanggal.split('-').reverse().join('-') : '');
        $('#detail-barber').html('<div class="text-center">Memuat...</div>');
        $('#detail-pos').html('<div class="text-center">Memuat...</div>');
        $('#modalDetailPenjualan').modal('show');
        $.ajax({
            url: '{{ route("reports.sales.detail") }}'
            , data: {
                tanggal: tanggal
                , branch_id: branch_id
            }
            , type: 'GET'
            , success: function(res) {
                // Barbershop Transactions
                if (res.barbershop.length) {
                    let html = `<table class="table table-bordered table-sm">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Waktu</th>
                            <th>Customer</th>
                            <th>Capster</th>
                            <th>Layanan</th>
                            <th>Produk</th>
                            <th>Total</th>
                        </tr>
                    </thead><tbody>`;
                    res.barbershop.forEach((item, idx) => {
                        let layananList = [];
                        let produkList = [];
                        if (item.items && item.items.length) {
                            item.items.forEach((it) => {
                                if (it.service && it.service.name) layananList.push(it.service.name + (it.qty > 1 ? ` x${it.qty}` : ''));
                                if (it.product && it.product.name) produkList.push(it.product.name + (it.qty > 1 ? ` x${it.qty}` : ''));
                            });
                        }
                        html += `<tr>
                        <td>${idx+1}</td>
                        <td>${item.created_at ? item.created_at.substring(11,16) : '-'}</td>
                        <td>${item.customer ? item.customer.name : '-'}</td>
                        <td>${item.capster ? item.capster.name : '-'}</td>
                        <td>${layananList.join('<br>') || '-'}</td>
                        <td>${produkList.join('<br>') || '-'}</td>
                        <td>${formatRupiah(item.total_amount)}</td>
                    </tr>`;
                    });
                    html += '</tbody></table>';
                    $('#detail-barber').html(html);
                } else {
                    $('#detail-barber').html('<div class="text-muted">Tidak ada data.</div>');
                }
                // POS Transactions
                if (res.transaction.length) {
                    let html = `<table class="table table-bordered table-sm">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Waktu</th>
                            <th>Kasir</th>
                            <th>Produk</th>
                            <th>Total</th>
                        </tr>
                    </thead><tbody>`;
                    res.transaction.forEach((item, idx) => {
                        let produkList = [];
                        if (item.items && item.items.length) {
                            item.items.forEach((it) => {
                                if (it.product && it.product.name) produkList.push(it.product.name + (it.qty > 1 ? ` x${it.qty}` : ''));
                            });
                        }
                        html += `<tr>
                        <td>${idx+1}</td>
                        <td>${item.created_at ? item.created_at.substring(11,16) : '-'}</td>
                        <td>${item.user ? item.user.name : '-'}</td>
                        <td>${produkList.join('<br>') || '-'}</td>
                        <td>${formatRupiah(item.total_amount)}</td>
                    </tr>`;
                    });
                    html += '</tbody></table>';
                    $('#detail-pos').html(html);
                } else {
                    $('#detail-pos').html('<div class="text-muted">Tidak ada data.</div>');
                }
            }
            , error: function() {
                $('#detail-barber').html('<div class="text-danger">Gagal memuat data</div>');
                $('#detail-pos').html('<div class="text-danger">Gagal memuat data</div>');
            }
        });
    }

    function loadLaporanHarian() {
        let branch_id = $('#filter-branch').val();
        let tanggal = $('#filter-tanggal').val() || '';
        $.ajax({
            url: '{{ route("reports.sales.data") }}'
            , data: {
                branch_id: branch_id
                , tanggal: tanggal
            }
            , type: 'GET'
            , success: function(res) {
                updateChartHarian(res.labels, res.salesByDay, res.tanggalList);
                renderSummary(res);
            }
        });
    }
    $(document).ready(function() {
        $('#filter-tanggal').datepicker({
            format: 'yyyy-mm-dd'
            , autoclose: true
            , todayHighlight: true
            , orientation: 'bottom auto'
            , language: 'id'
        }).on('changeDate', loadLaporanHarian);

        $('#filter-branch').on('change', loadLaporanHarian);

        // Default tanggal hari ini
        let today = new Date();
        let tgl = today.getFullYear() + '-' +
            ('0' + (today.getMonth() + 1)).slice(-2) + '-' +
            ('0' + today.getDate()).slice(-2);
        $('#filter-tanggal').datepicker('update', tgl);

        loadLaporanHarian();
    });

</script>
@endpush