@extends('dashboard.layouts.master')
@section('title', 'Ranking Change Rules | Admin Panel')

@push('after-styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" type="text/css" />
<style>
    .rules-card {
        background: #fff;
        border: 1px solid #e8e8e8;
        border-radius: 6px;
        padding: 20px;
        margin-bottom: 20px;
    }
    .rules-card h4 {
        margin: 0 0 5px 0;
        font-size: 16px;
        font-weight: 700;
    }
    .rules-card p.info {
        font-size: 12px;
        color: #999;
        margin-bottom: 20px;
    }
    .weight-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px solid #f0f0f0;
    }
    .weight-row:last-child { border-bottom: none; }
    .weight-row .factor-name {
        font-weight: 600;
        font-size: 14px;
        flex: 1;
    }
    .weight-row .factor-id {
        color: #aaa;
        font-size: 11px;
        margin-right: 15px;
    }
    .weight-row input.weight-input {
        width: 100px;
        text-align: center;
        font-weight: 600;
    }
    .note-area {
        margin-top: 15px;
    }
    .change-badge-up   { color: #155724; background: #d4edda; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }
    .change-badge-down { color: #721c24; background: #f8d7da; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }
</style>
@endpush

@section('content')
@if(Helper::canAccessModule('ranking_change_rules'))
<div class="padding website-label">
    <div id="success_file_popup" style="margin-bottom:10px;"></div>

    <div class="box">
        <div class="box-header">
            <div class="box-header-left">
                <h3 class="d-block">Ranking Change Rules</h3>
                <small class="d-inline-block">
                    <a href="{{ route('adminHome') }}">{{ __('backend.dashboard') }}</a> /
                    <span>Master Management / Ranking Change Rules</span>
                </small>
            </div>
        </div>

        <div class="box-body">

            {{-- Section 1: Current Ranking Weights --}}
            <div class="rules-card">
                <h4><i class="fa fa-sliders"></i> Current Ranking Weights</h4>
                <p class="info">
                    Adjust the weight (0.0000 – 1.0000) for each ranking factor.
                    Changes apply system-wide and are logged automatically. They do <strong>not</strong> retroactively affect past reports.
                </p>

                <form id="weights-form">
                    @csrf
                    @forelse($rules as $rule)
                        <div class="weight-row">
                            <span class="factor-id">#{{ $rule->id }}</span>
                            <span class="factor-name">{{ $rule->factor_name }}</span>
                            <span style="margin-right:8px; color:#888; font-size:12px;">
                                @if($rule->is_active)
                                    <i class="fa fa-check-circle text-success"></i> Active
                                @else
                                    <i class="fa fa-times-circle text-danger"></i> Inactive
                                @endif
                            </span>
                            <input type="number" step="0.0001" min="0" max="1"
                                   name="rules[{{ $rule->id }}]"
                                   value="{{ $rule->weight }}"
                                   class="form-control weight-input">
                        </div>
                    @empty
                        <p class="text-muted text-center">No ranking rules found. Please add rules first in the database.</p>
                    @endforelse

                    @if(count($rules) > 0 && Helper::checkPermission('ranking_change_rules', 'edit'))
                    <div class="note-area">
                        <label>Change Notes (optional)</label>
                        <textarea name="notes" class="form-control" rows="2" placeholder="Reason for weight change…"></textarea>
                    </div>

                    <div class="m-t text-right">
                        <button type="submit" class="btn btn-primary" id="btn-save-weights">
                            <i class="fa fa-save"></i> Save &amp; Update Weights
                        </button>
                    </div>
                    @endif
                </form>
            </div>

            {{-- Section 2: Change History --}}
            <div class="rules-card">
                <h4><i class="fa fa-history"></i> Weight Change History</h4>
                <p class="info">All past ranking weight changes are logged below for compliance and audit purposes.</p>

                <div class="table-responsive table_data">
                    <table class="table table-bordered m-a-0" id="changeHistoryTable">
                        <thead class="dker">
                            <tr>
                                <th>Date &amp; Time</th>
                                <th>Factor</th>
                                <th>Previous Weight</th>
                                <th>New Weight</th>
                                <th>Changed By</th>
                                <th>Notes</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>
@else
<input type="hidden" value="{{ route('adminHome') }}" id="redirect_url">
<script>window.location.replace(document.getElementById('redirect_url').value);</script>
@endif
@endsection

@push('after-scripts')
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script>
    $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

    // DataTable for change history
    var historyTable = $('#changeHistoryTable').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        ordering: true,
        ajax: {
            url: "{{ route('ranking-change-rules.anyData') }}",
            type: 'POST',
            dataSrc: 'aaData'
        },
        columns: [
            { data: 'date',            name: 'date' },
            { data: 'factor_name',     name: 'factor_name' },
            { data: 'previous_weight', name: 'previous_weight' },
            { data: 'new_weight',      name: 'new_weight' },
            { data: 'changed_by',      name: 'changed_by', orderable: false },
            { data: 'notes',           name: 'notes', orderable: false },
        ],
        order: [[0, 'desc']],
    });

    // Save weights via AJAX
    $('#weights-form').on('submit', function(e) {
        e.preventDefault();

        var btn = $('#btn-save-weights');
        btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Saving…');

        $.ajax({
            url: "{{ route('ranking-change-rules.updateWeights') }}",
            type: 'POST',
            data: $(this).serialize(),
            success: function(data) {
                btn.prop('disabled', false).html('<i class="fa fa-save"></i> Save & Update Weights');
                if (data.success) {
                    showMsg('alert-success', data.msg);
                    historyTable.ajax.reload(null, false);
                } else {
                    showMsg('alert-danger', data.msg || 'Something went wrong.');
                }
            },
            error: function() {
                btn.prop('disabled', false).html('<i class="fa fa-save"></i> Save & Update Weights');
                showMsg('alert-danger', 'Request failed. Please try again.');
            }
        });
    });

    function showMsg(cls, msg) {
        $('#success_file_popup').html(
            '<div class="alert ' + cls + ' m-b-0"><button type="button" class="close" data-dismiss="alert">&times;</button>' + msg + '</div>'
        );
        setTimeout(function() { $('#success_file_popup').empty(); }, 5000);
    }
</script>
@endpush