@extends('layouts.base_view')
@section('title')
<li class="breadcrumb-item">Reports</li>
<li class="breadcrumb-item active">CORE Store Performance</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>
            <div class="row small">
                <div class="col-md-6">
                    <strong>Bobot Penilaian saat ini (dari m_config_bobot_penilaian):</strong>
                    <table class="table table-xs table-bordered mt-1">
                        <thead><tr><th>Dimensi</th><th>Bobot</th><th>Formula</th></tr></thead>
                        <tbody>
                        @foreach($bobots as $b)
                        <tr>
                            <td>{{ $b->nama }}</td>
                            <td class="text-center">{{ $b->bobot }}%</td>
                            <td class="text-muted">{{ $b->formula_notes }}</td>
                        </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="col-md-6">
                    <strong>Cara hitung skor akhir:</strong>
                    <p class="mt-1">Skor Akhir = Σ (Nilai Dimensi × Bobot / 100)</p>
                    <p class="text-danger"><em>Perlu dibahas: skala nilai per dimensi (0–100?), threshold grade (A/B/C/D), dan apakah ada penalti khusus.</em></p>
                </div>
            </div>
        </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">Bulan</label>
                                <input type="month" id="period_month" class="form-control" value="{{ date('Y-m') }}">
                            </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.store_performance_report__export">
                                    <i class="fa fa-download"></i> Export Excel
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <table id="perf_table" class="table w-100 table-sm table-hover">
                            <thead class="bg-warning">
                                <tr>
                                    <th>No</th>
                                    <th>Store</th>
                                    <th>LSM Completion<br><small>({{ $bobots->firstWhere('kode','LSM_COMPLETION')->bobot ?? 0 }}%)</small></th>
                                    <th>Forecast Accuracy<br><small>({{ $bobots->firstWhere('kode','FORECAST_ACCURACY')->bobot ?? 0 }}%)</small></th>
                                    <th>DOI Compliance<br><small>({{ $bobots->firstWhere('kode','DOI_COMPLIANCE')->bobot ?? 0 }}%)</small></th>
                                    <th>SPB Accuracy<br><small>({{ $bobots->firstWhere('kode','SPB_ACCURACY')->bobot ?? 0 }}%)</small></th>
                                    <th>Skor Akhir</th>
                                    <th>Grade</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

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

    const table = $('#perf_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: link, type: 'POST',
            data: function(d) {
                d._token = '{{ csrf_token() }}';
                d.type = 'list';
                d.period_month = $('#period_month').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-center' },
            { data: 6, className: 'text-center' },
            { data: 7, 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', period_month: $('#period_month').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