@extends('layouts.base_view')
@section('title')
<li class="breadcrumb-item">Reports</li>
<li class="breadcrumb-item active">Adjusted Item Report</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>Frekuensi Adjust</strong>: Jumlah SO di mana item ini memiliki spb_suggestion_qty_final ≠ spb_suggestion_qty dalam date range.</li>
                <li><strong>Total Adjust</strong>: SUM(ABS(spb_suggestion_qty_final − spb_suggestion_qty)) dalam date range.</li>
                <li><em>Perlu dibahas: apakah adjust ke atas dan ke bawah diperlakukan sama atau dibedakan.</em></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">
                                <label class="col-form-label">Store</label>
                                <select id="filter_store" class="form-control">
                                    <option value="">-- All Stores --</option>
                                    @foreach($stores as $store)
                                    <option value="{{ $store->id }}">{{ $store->name }}</option>
                                    @endforeach
                                </select>
                            </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.adjusted_item_report__export">
                                    <i class="fa fa-download"></i> Export Excel
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <table id="adjusted_table" class="table w-100 table-sm table-hover">
                            <thead class="bg-warning">
                                <tr>
                                    <th>No</th>
                                    <th>Item Code</th>
                                    <th>Item Name</th>
                                    <th>Group</th>
                                    <th>Store</th>
                                    <th>Frekuensi Adjust</th>
                                    <th>Total Selisih Adjust</th>
                                    <th>Avg Selisih</th>
                                    <th>Last Adjusted Date</th>
                                    <th>Last PIC</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

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

    const table = $('#adjusted_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();
                d.store_id = $('#filter_store').val();
            }
        },
        columns: [
            { data: 0, orderable: false, searchable: false, className: 'text-center' },
            { data: 1 }, { data: 2 }, { data: 3 },
            { data: 4 },
            { data: 5, className: 'text-center' },
            { data: 6, className: 'text-right' },
            { data: 7, className: 'text-right' },
            { data: 8, className: 'text-center' },
            { data: 9 },
        ],
        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(),
            store_id: $('#filter_store').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