@extends('layouts.admin')

@section('title', 'MLM Settings - ' . $appName . ' Admin')

@section('content')
<div class="max-w-2xl space-y-6">
    <div>
        <h1 class="text-2xl font-bold text-slate-900 dark:text-white">MLM Compensation Rules</h1>
        <p class="text-xs text-slate-500 dark:text-slate-400">Configure global binary pairing amounts, safety net flushout rules, and payout policies.</p>
    </div>

    <div class="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-xs p-6 transition-colors"
         x-data="{
             unilevelLevels: {{ json_encode($unilevelLevels ?? [['level' => 1, 'amount' => 10], ['level' => 2, 'amount' => 10], ['level' => 3, 'amount' => 10]]) }},
             addLevel() {
                 const next = this.unilevelLevels.length + 1;
                 this.unilevelLevels.push({ level: next, amount: 10 });
             },
             removeLevel(idx) {
                 if (this.unilevelLevels.length > 1) {
                     this.unilevelLevels.splice(idx, 1);
                     this.unilevelLevels.forEach((item, i) => item.level = i + 1);
                 }
             }
         }">
        <form method="POST" action="{{ route('admin.settings.update') }}" class="space-y-4">
            @csrf

            <div>
                <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Platform Name</label>
                <input type="text" name="app_name" value="{{ $settings['app_name'] ?? $appName }}"
                    class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl text-xs text-slate-900 dark:text-white focus:ring-1 focus:ring-sky-600">
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Pairing Bonus (₱ per Match)</label>
                    <input type="number" name="pairing_bonus" value="{{ $settings['pairing_bonus'] ?? 500 }}"
                        class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl text-xs font-bold text-sky-600 dark:text-sky-400 focus:ring-1 focus:ring-sky-600">
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Daily Safety Net (Max Pairs/Day)</label>
                    <input type="number" name="safety_net_daily_pairs" value="{{ $settings['safety_net_daily_pairs'] ?? 10 }}"
                        class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl text-xs font-bold text-amber-600 dark:text-amber-400 focus:ring-1 focus:ring-sky-600">
                </div>
            </div>

            <!-- Dynamic Matrix & Legs Configuration -->
            <div class="pt-2 border-t border-slate-200 dark:border-slate-800">
                <h3 class="text-xs font-bold uppercase tracking-wider text-sky-600 dark:text-sky-400 mb-2">Matrix & Legs Configuration</h3>
                <p class="text-[11px] text-slate-500 dark:text-slate-400 mb-3">Dynamically control matrix width (legs per node) and level qualification rules.</p>
                
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Matrix Legs per Node (Direct Width)</label>
                        <input type="number" name="matrix_legs" min="2" max="10" value="{{ $settings['matrix_legs'] ?? 2 }}"
                            class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl text-xs font-bold text-sky-600 dark:text-sky-400 focus:ring-1 focus:ring-sky-600"
                            placeholder="e.g. 2 for Binary">
                        <span class="text-[10px] text-slate-400">2 = Normal Binary (Left & Right legs)</span>
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Pairing Activation (Taong Kailangan: 2 o 4)</label>
                        <input type="number" name="pairing_required_downlines" min="2" max="10" value="{{ $settings['pairing_required_downlines'] ?? 4 }}"
                            class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl text-xs font-bold text-emerald-600 dark:text-emerald-400 focus:ring-1 focus:ring-sky-600"
                            placeholder="2 o 4">
                        <span class="text-[10px] text-slate-400 block mt-0.5">
                            &bull; <strong>2</strong> = Level 1 pa lang (2 tao) may pairing na.<br>
                            &bull; <strong>4</strong> = Level 2 muna (4 na tao sa Level 2) bago mag-pair.
                        </span>
                    </div>
                </div>
            </div>

            <!-- Dynamic Unilevel Leveling Plan -->
            <div class="pt-3 border-t border-slate-200 dark:border-slate-800 space-y-3">
                <div class="flex items-center justify-between">
                    <div>
                        <h3 class="text-xs font-bold uppercase tracking-wider text-emerald-600 dark:text-emerald-400">Dynamic Unilevel Leveling Plan</h3>
                        <p class="text-[11px] text-slate-500 dark:text-slate-400">Mag-add ng kahit anong level at itakda kung magkano ang aakyat na bonus (₱) bawat level.</p>
                    </div>
                    <button type="button" @click="addLevel()"
                            class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-emerald-50 hover:bg-emerald-100 text-emerald-700 dark:bg-emerald-950/60 dark:hover:bg-emerald-900/60 dark:text-emerald-300 border border-emerald-300 dark:border-emerald-800 rounded-xl text-xs font-bold transition shadow-xs">
                        <i data-lucide="plus-circle" class="w-3.5 h-3.5"></i>
                        <span>+ Add Level</span>
                    </button>
                </div>

                <div class="space-y-2.5 bg-slate-50/70 dark:bg-slate-950/50 p-3.5 rounded-2xl border border-slate-200 dark:border-slate-800">
                    <template x-for="(item, index) in unilevelLevels" :key="index">
                        <div class="flex items-center gap-3 bg-white dark:bg-slate-900 p-2.5 rounded-xl border border-slate-200 dark:border-slate-800 shadow-xs">
                            <span class="w-24 px-2.5 py-1 text-center rounded-lg bg-emerald-100 dark:bg-emerald-950/80 text-emerald-800 dark:text-emerald-300 text-xs font-black uppercase tracking-wider shrink-0"
                                  x-text="'Level ' + item.level">
                            </span>
                            <input type="hidden" :name="'unilevel_levels[' + index + '][level]'" :value="item.level">
                            
                            <div class="flex-1 flex items-center gap-2">
                                <span class="text-xs font-bold text-slate-400">₱</span>
                                <input type="number" step="0.5" min="0" :name="'unilevel_levels[' + index + '][amount]'" x-model="item.amount"
                                       class="w-full px-3 py-1.5 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg text-xs font-bold text-slate-900 dark:text-white focus:ring-1 focus:ring-emerald-500"
                                       placeholder="Amount in Pesos (e.g. 10)">
                            </div>

                            <button type="button" @click="removeLevel(index)"
                                    class="p-1.5 text-slate-400 hover:text-rose-600 dark:hover:text-rose-400 rounded-lg hover:bg-rose-50 dark:hover:bg-rose-950/30 transition shrink-0"
                                    title="Remove this level">
                                <i data-lucide="trash-2" class="w-4 h-4"></i>
                            </button>
                        </div>
                    </template>
                </div>
                <span class="text-[10px] text-slate-400 block">
                    Halimbawa: Kapag ang Level 1 ay ₱10, sa oras na pumasok ang downline sa Level 1, aakyat agad ang ₱10.00 sa account ng upline.
                </span>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Minimum Encashment (₱)</label>
                    <input type="number" name="min_withdrawal" value="{{ $settings['min_withdrawal'] ?? 500 }}"
                        class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl text-xs font-bold text-slate-900 dark:text-white focus:ring-1 focus:ring-sky-600">
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Withdrawal Fee (₱)</label>
                    <input type="number" name="withdrawal_fee" value="{{ $settings['withdrawal_fee'] ?? 50 }}"
                        class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl text-xs font-bold text-slate-900 dark:text-white focus:ring-1 focus:ring-sky-600">
                </div>
            </div>

            <button type="submit" class="w-full py-3 bg-sky-600 hover:bg-sky-700 text-white rounded-xl text-xs font-bold shadow transition">
                Save MLM Settings
            </button>
        </form>
    </div>
</div>
@endsection