@extends('backend.layouts.app')

@section('content')
<div class="card">
    <div class="card-header">
        <h2>{{ translate('Quiz Reward Schedule') }}</h2>
    </div>
    <div class="card-body">
        <div class="accordion p-3" id="rewardAccordion">
            @php
                $rewardTypes = ['weekly', 'monthly', 'quarterly', 'yearly', 'special_day'];
            @endphp

            @foreach($rewardTypes as $type)
                <div class="accordion-item">
                    <h2 class="accordion-header" id="heading_{{ $type }}">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_{{ $type }}" aria-expanded="false" aria-controls="collapse_{{ $type }}">
                            {{ translate(ucwords(str_replace('_', ' ', $type)) . ' Rewards') }}
                        </button>
                    </h2>
                    <div id="collapse_{{ $type }}" class="accordion-collapse collapse" aria-labelledby="heading_{{ $type }}" data-bs-parent="#rewardAccordion">
                        <div class="accordion-body">
                            <form action="{{ route('quiz.prize.distibute') }}" method="POST">
                                @csrf
                                <div class="row">
                                    <!-- Special day date input -->
                                    {{-- @if($type === 'special_day')
                                        <div class="col-6 mb-3">
                                            <label for="{{ $type }}_date" class="form-label">{{ translate('Special Date') }}</label>
                                            <input type="text" class="form-control special-day-datepicker" id="{{ $type }}_date" name="{{ $type }}_date" placeholder="YYYY-MM-DD" autocomplete="off">
                                        </div>
                                    @endif --}}
                                    <!-- Prize Money -->
                                    <div class="col-6 mb-3">
                                        <label for="{{ $type }}_prize_money" class="form-label">{{ translate('Total Prize Money') }} ({{ currency_symbol() }})</label>
                                        <input type="number" class="form-control" id="{{ $type }}_prize_money" name="{{ $type }}_prize_money" min="0" step="0.01" required>
                                    </div>

                                    <!-- Number of Winners -->
                                    <div class="col-6 mb-3">
                                        <label for="{{ $type }}_number_of_winners" class="form-label">{{ translate('Number of Winners') }}</label>
                                        <select class="form-control rns-selectpicker" name="{{ $type }}_number_of_winners" id="{{ $type }}_number_of_winners" data-live-search="true" required>
                                            <option value="">{{ translate('Please select...') }}</option>
                                            @for($i = 1; $i <= 100; $i++)
                                                <option value="{{ $i }}">{{ $i }}</option>
                                            @endfor
                                        </select>
                                    </div>

                                    <!-- Prize Distribution -->
                                    <div id="{{ $type }}_prizeDistribution" class="col-12">
                                        {{-- Will be dynamically filled --}}
                                    </div>
                                </div>

                                <button type="submit" class="btn btn-outline-warning mt-1 mb-2">{{ translate('Save') }}</button>
                            </form>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>

@include('backend.modals.delete')
@endsection

@section('script')
<script>
    $(document).ready(function () {
        const rewardTypes = ['weekly', 'monthly', 'quarterly', 'yearly', 'special_day'];

        function validateTotalPercentage(type) {
            let total = 0;
            $(`#${type}_prizeDistribution input[name="rank_percent[]"]`).each(function () {
                const val = parseFloat($(this).val());
                if (!isNaN(val)) {
                    total += val;
                }
            });

            $(`#${type}_prizeDistribution #percent-warning`).remove();

            if (total.toFixed(2) != 100.00) {
                $(`#${type}_prizeDistribution`).append(`
                    <div id="percent-warning" class="text-danger mt-2">
                        {{ translate("Total percentage must equal 100%. Current total:") }} ${total.toFixed(2)}%
                    </div>
                `);
                $(`#collapse_${type} button[type="submit"]`).prop('disabled', true);
            } else {
                $(`#collapse_${type} button[type="submit"]`).prop('disabled', false);
            }
        }

        rewardTypes.forEach(function (type) {
            $(`#${type}_number_of_winners`).on('change', function () {
                const numberOfWinners = parseInt($(this).val());
                const container = $(`#${type}_prizeDistribution`);
                container.empty();

                if (numberOfWinners > 0) {
                    // AJAX to get top users
                    $.ajax({
                        url: "{{ route('quiz.reward.getTopUsers') }}",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            type: type,
                            number_of_winners: numberOfWinners
                        },
                        success: function (response) {
                            container.html(response.html); // ✅ Only show server-rendered HTML
                        },
                        error: function () {
                            container.html('<div class="text-danger">{{ translate("Failed to load user data.") }}</div>');
                        }
                    });
                }

            });

            $(document).on('input', `#${type}_prizeDistribution input[name="rank_percent[]"]`, function () {
                validateTotalPercentage(type);
            });
        });

        
    });
</script>
@endsection