@extends('layouts.master')
@section('styles')
    <link rel="stylesheet" href="{{ asset('build/assets/libs/toastify-js/src/toastify.css') }}">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
@endsection
@section('content')
    <!-- Page Header -->
    @php
        $breadcrumbs = [
            ['label' => 'Dashboard', 'url' => route('admin.dashboard')],
            ['label' => 'Leaderboard', 'url' => route('admin.leaderboard.config'), 'active' => false],
            ['label' => 'Update', 'url' => '#', 'active' => true],
        ];
    @endphp
    <x-ui.breadcrumb :items="$breadcrumbs" title="" />
    <!-- Page Header Close -->

    <!-- Start::row-1 -->
    <div class="row ">
        <div class="col-xxl-8 col-xl-7">
            <x-ui.card title="Update {{ $leaderboard->name }}">
                @php
                    $reward = json_decode($leaderboard->reward_structure, true);
                    $fixed = $reward['fixed'] ?? ['1' => 1500, '2' => 1250, '3' => 1000];
                    $buckets = $reward['buckets'] ?? [];
                @endphp
                <form id="leaderboardForm" action="{{ route('admin.leaderboard.config.update') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="id" value="{{ $leaderboard->id }}">
                    <textarea name="reward_structure" id="reward_structure" hidden></textarea>
                    <div class="row gy-3">

                        <div class="col-md-6">
                            <x-form.input label="Leaderboard Toolbar Name" value="{{ old('toolbar_name', $leaderboard->toolbar_name) }}" name="toolbar_name" placeholder="Daily" autofocus />
                        </div>

                        <div class="col-md-6">
                            <x-form.input label="Leaderboard Name"  value="{{ old('name', $leaderboard->name) }}" name="name" placeholder="Daily Refer" autofocus />
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Type</label>
                            <select name="type" class="form-select" required>
                                <option value="refer" {{($leaderboard->type=='refer') ? 'selected':'' }}>Refer</option>
                                <option value="streak" {{($leaderboard->type=='streak') ? 'selected':'' }}>Streak</option>
                                <option value="task" {{($leaderboard->type=='task') ? 'selected':'' }}>Task</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Total Prize Pool (coins)</label>
                            <input type="number" name="prize_pool" class="form-control" min="0"
                                value="{{ old('prize_pool', $leaderboard->prize_pool ?? 0) }}">
                        </div>

                        @foreach ($fixed as $rank => $value)
                            <div class="col-md-4">
                                <x-form.input label="Rank {{ $rank }}" type="number" class="fixed-input"
                                    name="fixed[{{ $rank }}]" value="{{ $value }}"
                                    data-rank="{{ $rank }}" autofocus />
                            </div>
                        @endforeach

                        <div class="card border-0 shadow-sm">
                            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                                <span class="fw-semibold">Bucket Rewards</span>
                                <button type="button" class="btn btn-sm btn-outline-primary" id="addBucketBtn">+ Add
                                    Bucket</button>
                            </div>
                            <div class="card-body" id="bucketContainer">
                                @forelse($buckets as $i => $bucket)
                                    <div class="row g-2 align-items-center bucket-item mb-2">
                                        <div class="col-md-3">
                                            <input type="text" class="form-control bucket-range"
                                                placeholder="Range (e.g. 4-10)" value="{{ $bucket['range'] ?? '' }}">
                                        </div>
                                        <div class="col-md-3">
                                            <select class="form-select bucket-type">
                                                <option value="total" {{ isset($bucket['total']) ? 'selected' : '' }}>Total
                                                </option>
                                                <option value="percent" {{ isset($bucket['percent']) ? 'selected' : '' }}>
                                                    Percent</option>
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <input type="number" class="form-control bucket-value" placeholder="Value"
                                                value="{{ $bucket['total'] ?? ($bucket['percent'] ?? '') }}">
                                        </div>
                                        <div class="col-md-2">
                                            <button type="button"
                                                class="btn btn-outline-danger btn-sm removeBucketBtn"><i class="ri-delete-bin-line"></i></button>
                                        </div>
                                    </div>
                                @empty
                                    <p class="text-muted mb-0">No buckets added yet. Click “+ Add Bucket”.</p>
                                @endforelse
                            </div>
                        </div>

                    </div>
        </div>
        </x-ui.card>

        <div class="col-xxl-4 col-xl-5">
            <x-ui.card title="Save &nbsp;<span class='text-danger'>*</span>">
                <x-form.input col="col-xl-12 mt-3" label="Leaderboard Date:"
                tooltip="this should be an end date. On this date leaderboard will be ended and user will get bonus and automatically create a new leaderboard if Auto Renew is ON." type="text" placeholder="Pick an end date"
                class="" value="{{ $leaderboard->end_time }}" name="end_time"  autofocus/>

               <x-form.outline-toggle class="col-xl-6 mt-3" name="auto_renew" label="Auto Create Next Clone Leaderboard (Auto Renew)"
                    tooltip="Auto Create Next Clone Leaderboard (Auto Renew)" :selected="old('auto_renew',$leaderboard->auto_renew)"
                    :required="true" :options="[
                        1 => ['label' => 'Yes'],
                        0 => ['label' => 'No'],
                    ]" />


                <div class="mt-3">
                    <label class="form-label">Max Ranks (templates)</label>
                    <input type="number" name="max_ranks" class="form-control" min="1" value="{{ old('max_ranks', $leaderboard->max_ranks ?? 50) }}">
                    <small class="text-muted">How many rank templates to create (default 50).</small>
                </div>

                <div id="nextPreview" class="mt-3" style="display:@if($leaderboard->auto_renew)block @else none @endif">
                    <div class="card p-2">
                        <div class="small text-muted">Next run (if Auto Renew enabled)</div>
                        <div id="nextStart" class="fw-semibold">{{ $leaderboard->end_time ? \Carbon\Carbon::parse($leaderboard->end_time)->addSecond()->toDateTimeString() : '-' }}</div>
                        <div id="nextEnd" class="text-muted small">(will clone duration)</div>
                    </div>
                </div>

                <button type="button" class="btn btn-outline-info mt-3 px-5" id="btnPreviewBreakdown">💰 Preview Rewards Breakdown</button><br>
                <button type="submit" class="btn btn-primary mt-3 px-5">Save</button>

            </x-ui.card>
        </div>
        </form>
    </div>

    <!-- Breakdown Modal -->
    <div class="modal fade" id="previewBreakdownModal" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Prize Pool Breakdown</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered align-middle text-center">
                        <thead class="table-light">
                            <tr>
                                <th>Rank Range</th>
                                <th>Reward Type</th>
                                <th>Coins / User</th>
                                <th>Total Distributed</th>
                            </tr>
                        </thead>
                        <tbody id="breakdownBody">
                            <!-- JS will populate -->
                        </tbody>
                    </table>

                    <div id="baseRemainingBlock" class="alert alert-light border mt-3 mb-0" style="display:none;">
                        <strong>Base remaining after fixed + total:</strong>
                        <span id="baseRemainingValue">0</span> coins
                    </div>

                    <div class="alert alert-light border mt-3 mb-0">
                        <strong>Total Prize Pool:</strong>
                        <span id="breakdownTotal"></span> coins
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('build/assets/libs/toastify-js/src/toastify.js') }}"></script>
    <!-- Select2 Cdn -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    @vite('resources/assets/js/select2.js')
    <script src="{{asset('build/assets/libs/flatpickr/flatpickr.min.js')}}"></script>

  <script>

document.addEventListener('DOMContentLoaded', function() {
    // ---------- flatpickr ----------
    try {
        flatpickr("#end_time", {
            altInput: true,
            altFormat: "F j, Y",
            dateFormat: "Y-m-d",
            disableMobile: true
        });
    } catch (e) {
        console.warn('flatpickr init failed', e);
    }

    const autoRenewEl = document.getElementById('autoRenew');
    if (autoRenewEl) {
        autoRenewEl.addEventListener('change', function() {
            const nextPreview = document.getElementById('nextPreview');
            if (nextPreview) nextPreview.style.display = this.checked ? 'block' : 'none';
        });
    }

    function createBucketRowHtml() {
        return `
        <div class="row g-2 align-items-center bucket-item mb-2">
            <div class="col-md-3">
                <input type="text" class="form-control bucket-range" placeholder="Range (e.g. 11-20)">
            </div>
            <div class="col-md-3">
                <select class="form-select bucket-type">
                    <option value="total">Total</option>
                    <option value="percent">Percent</option>
                </select>
            </div>
            <div class="col-md-3">
                <input type="number" class="form-control bucket-value" placeholder="Value">
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-outline-danger btn-sm removeBucketBtn">🗑</button>
            </div>
        </div>`;
    }

    function qs(sel) { return document.querySelector(sel); }
    function qsa(sel) { return Array.from(document.querySelectorAll(sel)); }

    // ---------- ADD BUCKET (attach to button) ----------
    const addBucketBtn = qs('#addBucketBtn');
    const bucketContainer = qs('#bucketContainer');

    if (addBucketBtn && bucketContainer) {
        addBucketBtn.addEventListener('click', function (e) {
            e.preventDefault();
            bucketContainer.insertAdjacentHTML('beforeend', createBucketRowHtml());
            const items = bucketContainer.querySelectorAll('.bucket-item');
            const newItem = items[items.length - 1];
            if (newItem) {
                const rangeInput = newItem.querySelector('.bucket-range');
                if (rangeInput) rangeInput.focus();
            }
        });
    } else {
        console.warn('Add bucket button or container not found', !!addBucketBtn, !!bucketContainer);
    }

    document.body.addEventListener('click', function(e) {
        const target = e.target;
        if (!target) return;
        if (target.classList && target.classList.contains('removeBucketBtn')) {
            e.preventDefault();
            const row = target.closest('.bucket-item');
            if (row) row.remove();
        }
    });

const previewBtn = document.querySelector('#btnPreviewBreakdown');
if (previewBtn) {
  previewBtn.addEventListener('click', function () {
    const pool = parseInt((document.querySelector('[name="prize_pool"]') || {}).value || 0, 10);
    if (!pool || isNaN(pool)) return alert("Please enter a valid prize pool first.");

    const breakdownBody = document.getElementById('breakdownBody');
    breakdownBody.innerHTML = '';

 
    const fixedInputs = Array.from(document.querySelectorAll('.fixed-input'));
    let fixedSum = 0;
    fixedInputs.forEach(el => {
      const rank = el.dataset.rank || '';
      const val = parseInt(el.value || 0, 10) || 0;
      if (val > 0) {
        fixedSum += val;
        const row = `
          <tr>
            <td>Rank ${rank}</td>
            <td><span class="badge bg-success">Fixed</span></td>
            <td>${val}</td>
            <td>${val}</td>
          </tr>`;
        breakdownBody.insertAdjacentHTML('beforeend', row);
      }
    });

   
    const bucketNodes = Array.from(document.querySelectorAll('.bucket-item'));

    let totalBucketsSum = 0;
    bucketNodes.forEach(row => {
      const type = (row.querySelector('.bucket-type') || {}).value;
      const val = parseInt((row.querySelector('.bucket-value') || {}).value || 0, 10) || 0;
      if (type === 'total') totalBucketsSum += val;
    });

    bucketNodes.forEach(row => {
      const range = (row.querySelector('.bucket-range') || {}).value.trim();
      const type = (row.querySelector('.bucket-type') || {}).value;
      const val = parseInt((row.querySelector('.bucket-value') || {}).value || 0, 10) || 0;
      if (!range) return;
      if (type === 'total') {
        const parts = range.split('-').map(n => parseInt(n.trim()));
        const from = parts[0] || 0; const to = parts[1] || from;
        const count = (to - from + 1) || 1;
        const total = val;
        const perUser = Math.floor(total / count);
        const rowHtml = `
          <tr>
            <td>${range}</td>
            <td><span class="badge bg-warning text-dark">total</span></td>
            <td>${perUser}</td>
            <td>${total}</td>
          </tr>`;
        breakdownBody.insertAdjacentHTML('beforeend', rowHtml);
      }
    });

    let baseRemaining = pool - fixedSum - totalBucketsSum;
    if (baseRemaining < 0) baseRemaining = 0;

    const baseBlock = document.getElementById('baseRemainingBlock');
    const baseValue = document.getElementById('baseRemainingValue');
    if (baseBlock && baseValue) {
      baseValue.innerText = baseRemaining.toLocaleString();
      baseBlock.style.display = 'block';
    }

    const percentBuckets = [];
    bucketNodes.forEach(row => {
      const range = (row.querySelector('.bucket-range') || {}).value.trim();
      const type = (row.querySelector('.bucket-type') || {}).value;
      const rawVal = (row.querySelector('.bucket-value') || {}).value;
      const val = parseInt(rawVal || 0, 10) || 0;
      if (!range) return;
      if (type === 'percent') {
        percentBuckets.push({ range, percent: val });
      }
    });

    console.log('Preview - pool', pool, 'fixedSum', fixedSum, 'totalBucketsSum', totalBucketsSum, 'baseRemaining', baseRemaining, 'percentBuckets', percentBuckets);

    let currentRemaining = baseRemaining;
    let percentDistributed = 0;

    percentBuckets.forEach(pb => {
      const parts = pb.range.split('-').map(n => parseInt(n.trim()));
      const from = parts[0] || 0; const to = parts[1] || from;
      const count = (to - from + 1) || 1;

      const pct = Number(pb.percent) || 0;
      const pctClamped = Math.max(0, pct);

      const bucketTotal = Math.floor((pctClamped / 100) * currentRemaining);
      const perUser = Math.floor(bucketTotal / count);

      const formula = `${currentRemaining.toLocaleString()} × ${pctClamped}% = ${bucketTotal.toLocaleString()}`;

      const rowHtml = `
        <tr>
          <td>${pb.range}</td>
          <td><span class="badge bg-warning text-dark">percent</span></td>
          <td>
            ${perUser}
            <div class="small text-muted mt-1">${formula}</div>
          </td>
          <td>${bucketTotal}</td>
        </tr>`;
      breakdownBody.insertAdjacentHTML('beforeend', rowHtml);

      percentDistributed += bucketTotal;
      currentRemaining = Math.max(0, currentRemaining - bucketTotal);
    });

    // --- finalize display ---
    const distributed = fixedSum + totalBucketsSum + percentDistributed;
    const diff = pool - distributed;
    const color = diff === 0 ? 'success' : (diff > 0 ? 'primary' : 'danger');
    const footer = `
      <tr class="table-${color}">
        <td colspan="3"><strong>Remaining Difference</strong></td>
        <td>${diff}</td>
      </tr>`;
    breakdownBody.insertAdjacentHTML('beforeend', footer);

    document.getElementById('breakdownTotal').innerText = pool.toLocaleString();
    new bootstrap.Modal(document.getElementById('previewBreakdownModal')).show();
  });
}

    (function attachFormSubmit() {
        const form = qs('#leaderboardForm');
        if (!form) {
            console.error('leaderboardForm not found!');
            return;
        }

        form.addEventListener('submit', function (e) {
            e.preventDefault();

            // fixed
            const fixedInputs = qsa('.fixed-input');
            const fixed = {};
            fixedInputs.forEach(function (inp) {
                const rank = inp.dataset.rank || inp.name.replace(/[^0-9]/g, '');
                fixed[rank] = parseInt(inp.value || 0, 10) || 0;
            });

            // buckets
            const buckets = [];
            qsa('.bucket-item').forEach(row => {
                const range = (row.querySelector('.bucket-range') || {}).value || '';
                if (!range) return;
                const type = (row.querySelector('.bucket-type') || {}).value || 'total';
                const val = parseInt((row.querySelector('.bucket-value') || {}).value || 0, 10) || 0;
                const obj = { range: range };
                if (type === 'total') obj.total = val;
                else obj.percent = val;
                buckets.push(obj);
            });

            const structure = { fixed: fixed, buckets: buckets };
            const jsonArea = qs('#reward_structure');
            if (jsonArea) jsonArea.value = JSON.stringify(structure);

            // const autoRenew = document.getElementById('autoRenew');
            // if (autoRenew && autoRenew.checked) {
            //     let input = document.querySelector('input[name="auto_renew"]');
            //     if (!input) {
            //         input = document.createElement('input');
            //         input.type = 'hidden';
            //         input.name = 'auto_renew';
            //         input.value = '1';
            //         form.appendChild(input);
            //     } else {
            //         input.value = '1';
            //     }
            // } else {
            //     let input = document.querySelector('input[name="auto_renew"]');
            //     if (!input) {
            //         input = document.createElement('input');
            //         input.type = 'hidden';
            //         input.name = 'auto_renew';
            //         input.value = '0';
            //         form.appendChild(input);
            //     } else {
            //         input.value = '0';
            //     }
            // }
            form.submit();
        });
    })();

</script>
@endsection