@extends('admin.layouts.app')

@section('content')
    <div class="max-w-5xl">
        <!-- Header -->
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-white mb-2">Wallet Settings</h1>
            <p class="text-slate-400">Configure how users earn and redeem points.</p>
        </div>

        @if (session('success'))
            <div class="mb-6 bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 px-4 py-3 rounded-xl">
                {{ session('success') }}
            </div>
        @endif

        <form action="{{ route('admin.settings.wallet.update') }}" method="POST">
            @csrf

            <!-- Wallet Configuration -->
            <div class="bg-slate-800/50 backdrop-blur-sm border border-slate-700/50 rounded-2xl p-8 mb-6">
                <h2 class="text-xl font-bold text-white mb-6">Wallet Configuration</h2>
                <p class="text-sm text-slate-400 mb-6">Configure how users earn and redeem points.</p>

                <!-- Enable Wallet System -->
                <div class="mb-6">
                    <label class="flex items-center cursor-pointer">
                        <input type="checkbox" name="wallet_enabled" value="1" 
                            {{ old('wallet_enabled', $settings->wallet_enabled ?? true) ? 'checked' : '' }}
                            class="w-5 h-5 rounded border-slate-600 bg-slate-700 text-blue-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                        <span class="ml-3 text-white font-medium">Enable Wallet System</span>
                    </label>
                    <p class="text-sm text-slate-400 mt-2 ml-8">If disabled, users cannot earn or redeem points.</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Exchange Rate -->
                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-2">
                            Exchange Rate (Points = 1 ₹)
                        </label>
                        <input type="number" step="0.01" name="wallet_exchange_rate" 
                            value="{{ old('wallet_exchange_rate', $settings->wallet_exchange_rate ?? 1) }}"
                            class="w-full px-4 py-2.5 bg-slate-900/50 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        <p class="text-xs text-slate-400 mt-2">How many points make 1 unit of currency. E.g., 100 Points = ₹1.</p>
                    </div>

                    <!-- Minimum Points to Redeem -->
                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-2">
                            Minimum Points to Redeem
                        </label>
                        <input type="number" name="wallet_min_points_redeem" 
                            value="{{ old('wallet_min_points_redeem', $settings->wallet_min_points_redeem ?? 100) }}"
                            class="w-full px-4 py-2.5 bg-slate-900/50 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        <p class="text-xs text-slate-400 mt-2">Users must have at least this many points to start redeeming.</p>
                    </div>
                </div>

                <!-- Earning Rate -->
                <div class="mt-6">
                    <label class="block text-sm font-medium text-slate-300 mb-2">
                        Earning Rate (Points per 100 ₹ spent)
                    </label>
                    <input type="number" step="0.01" name="wallet_earn_rate" 
                        value="{{ old('wallet_earn_rate', $settings->wallet_earn_rate ?? 1) }}"
                        class="w-full px-4 py-2.5 bg-slate-900/50 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    <p class="text-xs text-slate-400 mt-2">How many points a user earns for every 100 units spent. E.g., 10 means 10 points for every ₹100 purchase.</p>
                </div>
            </div>

            <!-- Gift Card Configuration -->
            <div class="bg-slate-800/50 backdrop-blur-sm border border-slate-700/50 rounded-2xl p-8 mb-6">
                <h2 class="text-xl font-bold text-white mb-6">Gift Card Configuration</h2>

                <!-- Enable Gift Card System -->
                <div class="mb-6">
                    <label class="flex items-center cursor-pointer">
                        <input type="checkbox" name="gift_card_enabled" value="1" 
                            {{ old('gift_card_enabled', $settings->gift_card_enabled ?? true) ? 'checked' : '' }}
                            class="w-5 h-5 rounded border-slate-600 bg-slate-700 text-blue-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                        <span class="ml-3 text-white font-medium">Enable Gift Card System</span>
                    </label>
                    <p class="text-sm text-slate-400 mt-2 ml-8">Allow users to create and redeem gift cards.</p>
                </div>

                <!-- Gift Card Validity -->
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">
                        Gift Card Validity (Days)
                    </label>
                    <input type="number" name="gift_card_validity_days" 
                        value="{{ old('gift_card_validity_days', $settings->gift_card_validity_days ?? 365) }}"
                        class="w-full px-4 py-2.5 bg-slate-900/50 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    <p class="text-xs text-slate-400 mt-2">Number of days before a gift card expires.</p>
                </div>
            </div>

            <!-- Save Button -->
            <div class="flex justify-end">
                <button type="submit"
                    class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl transition-colors duration-200 flex items-center gap-2">
                    <i data-lucide="save" class="w-5 h-5"></i>
                    Save Settings
                </button>
            </div>
        </form>
    </div>

    <script>
        lucide.createIcons();
    </script>
@endsection