<div class="page_title row">
    <div class="col-md-7 mb-2">
        <h2>Laporan</h2>
        <p>Penjualan</p>
    </div>

    <div class="col-md-5">
        <div class="input-group">
            <input type="date" class="form-control" id="start_date" value="<?= date('Y-m-d', strtotime('-1 month')) ?>">
            <input type="date" class="form-control" id="end_date" value="<?= date('Y-m-d') ?>">
            <button class="btn btn-primary" onclick="cetak()">
                <i class="fa fa-print"></i>
            </button>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body p-0 pt-4">
        
    </div>
</div>

<div class="modal fade" id="modal_detail">
    <div class="modal-dialog modal-xl modal-dialog-scrollable modal-fullscreen-sm-down">
        <div class="modal-content">
            <div class="modal-header border-0">
                <div>
                    <h5 class="modal-header-title mb-0">
                        <strong>
                            Riwayat
                        </strong>
                    </h5>
                    <small>
                        Detail riwayat penjualan
                    </small>
                </div>
                <a href="javascript:void(0)" 
                    class="btn-close" 
                    data-bs-dismiss="modal"
                ></a>
            </div>
            <div class="modal-body">
                
            </div>
        </div>
    </div>
</div>

<script>
    $(function() {
        load_data(1);
    })

    function load_data(page) {
        $.post({
            url: base_url + 'proses/load_laporan_beli',
            data: {
                active: page,
                start_date: $('#start_date').val(),
                end_date: $('#end_date').val()
            },
            success: data => {
                $('.card-body').html(data);
            }
        })
    }

    function detail_riwayat(id) {
        $.post({
            url: base_url + 'proses/detail_riwayat_beli',
            data: {id:id},
            success: data => {
                $('#modal_detail').modal('show')
                                    .find('.modal-body')
                                    .html(data)
                ;
            }
        })
    }

    function cetak() {
        let start = $('#start_date').val();
        let end   = $('#end_date').val();
        window.open(base_url + 'laporan/pembelian/cetak/' + start + '/' + end)
    }

    $(document).on('change', '#start_date, #end_date', function() {
        load_data(1);
    })
</script>