@extends('layouts.base_view')
@section('title')
<li class="breadcrumb-item">Reports</li>
<li class="breadcrumb-item active">Summary Stock Opname</li>
@endsection
@section('content')
<section class="content">
    <div class="container-fluid">

        {{-- CATATAN SEMENTARA --}}
        <div class="alert alert-warning alert-dismissible">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <h6><i class="icon fas fa-exclamation-triangle"></i> Catatan Formula (Sementara — akan dihapus setelah dikonfirmasi)</h6>
            <ul class="mb-0 small">
                <li><strong>Completion Rate</strong>: Jumlah SO Submitted ÷ Jumlah hari dalam periode × 100. <em>Perlu dibahas: definisi hari kerja vs kalender.</em></li>
                <li><strong>Forecast Accuracy</strong>: 100 − AVG(|forecast − lsm_aktual| ÷ forecast × 100) per store. <em>Perlu dibahas: MAPE vs WMAPE, item scope.</em></li>
                <li><strong>DOI Average</strong>: Rata-rata DOI semua item submitted SO dalam periode.</li>
                <li><strong>Forecast Frequency</strong>: Jumlah upload forecast dalam periode per store.</li>
                <li><strong>Latest Forecast</strong>: Tanggal upload forecast terakhir per store.</li>
            </ul>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <div class="row align-items-end">
                            <div class="col-md-auto">
                                <label class="col-form-label">From</label>
                                <input type="date" id="start_date" class="form-control" value="{{ date('Y-m-01') }}">
                            </div>
                            <div class="col-md-auto">
                                <label class="col-form-label">Until</label>
                                <input type="date" id="end_date" class="form-control" value="{{ date('Y-m-d') }}">
                            </div>
                            <div class="col-md-auto">
                                <button id="btn_search" class="btn btn-outline-info btn-sm">
                                    <i class="fa fa-search"></i> Find
                                </button>
                                <button id="btn_export" class="btn btn-outline-success btn-sm button-cek-permission" data-permission="reports.summary_so_report__export">
                                    <i class="fa fa-download"></i> Export Excel
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <table id="summary_table" class="table w-100 table-sm table-hover">
                            <thead class="bg-warning">
                                <tr>
                                    <th>No</th>
                                    <th>Store</th>
                                    <th>Total SO</th>
                                    <th>Submitted</th>
                                    <th>Completion Rate</th>
                                    <th>DOI Avg</th>
                                    <th>Forecast Accuracy</th>
                                    <th>Forecast Frequency</th>
                                    <th>Latest Forecast</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
$(function() {
    $('body').addClass('sidebar-collapse');
    const link = '{{ route("reports.summary_so_report") }}';

    const table = $('#summary_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: link, type: 'POST',
            data: function(d) {
                d._token = '{{ csrf_token() }}';
                d.type = 'list';
                d.start_date = $('#start_date').val();
                d.end_date = $('#end_date').val();
            }
        },
        columns: [
            { data: 0, orderable: false, searchable: false, className: 'text-center' },
            { data: 1 },
            { data: 2, className: 'text-center' },
            { data: 3, className: 'text-center' },
            { data: 4, className: 'text-center' },
            { data: 5, className: 'text-right' },
            { data: 6, className: 'text-center' },
            { data: 7, className: 'text-center' },
            { data: 8, className: 'text-center' },
        ],
        order: [[0, 'default_']], responsive: true, lengthChange: true, autoWidth: false,
    });

    $('#btn_search').click(function() { table.ajax.reload(); });

    $('#btn_export').click(function() {
        postToNewTab(link, { type: 'excel', start_date: $('#start_date').val(), end_date: $('#end_date').val() });
    });

    function postToNewTab(url, data) {
        const form = document.createElement('form');
        form.method = 'POST'; form.action = url; form.target = '_blank';
        const csrf = document.createElement('input');
        csrf.type = 'hidden'; csrf.name = '_token'; csrf.value = '{{ csrf_token() }}';
        form.appendChild(csrf);
        for (const key in data) {
            const input = document.createElement('input');
            input.type = 'hidden'; input.name = key; input.value = data[key] ?? '';
            form.appendChild(input);
        }
        document.body.appendChild(form); form.submit(); document.body.removeChild(form);
    }
});
</script>
@endsection