@extends('admin.layouts.app')

@section('title', 'Enrollment Settings')

@section('content')
    <div class="max-w-4xl mx-auto">
        <div class="mb-6 flex justify-between items-center">
            <div>
                <h1 class="text-2xl font-bold text-white tracking-tight">Enrollment Settings</h1>
                <p class="text-slate-400 mt-1">Configure astrologer enrollment fees and requirements.</p>
            </div>
        </div>

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

        <div class="glass-card rounded-2xl p-6 md:p-8">
            <form action="{{ route('admin.settings.enrollment.update') }}" method="POST"
                x-data="{ feeEnabled: {{ $settings->astrologer_enrollment_fee_enabled ? 'true' : 'false' }} }">
                @csrf

                <div class="space-y-8">
                    <div class="border-b border-white/5 pb-8">
                        <h3 class="text-lg font-semibold text-white mb-4">Fee Configuration</h3>

                        <div
                            class="flex items-center justify-between p-4 rounded-xl bg-slate-900/50 border border-white/5 mb-6">
                            <div>
                                <label for="astrologer_enrollment_fee_enabled"
                                    class="font-medium text-white cursor-pointer">Require Enrollment Fee</label>
                                <p class="text-xs text-slate-400 mt-1">If enabled, astrologers must pay a one-time fee to
                                    access their dashboard.</p>
                            </div>
                            <div
                                class="relative inline-block w-12 mr-2 align-middle select-none transition duration-200 ease-in">
                                <input type="checkbox" name="astrologer_enrollment_fee_enabled"
                                    id="astrologer_enrollment_fee_enabled"
                                    class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer transition-transform duration-200 ease-in-out"
                                    :class="{ 'translate-x-full border-blue-500': feeEnabled, 'border-slate-400': !feeEnabled }"
                                    x-model="feeEnabled" {{ $settings->astrologer_enrollment_fee_enabled ? 'checked' : '' }} />
                                <label for="astrologer_enrollment_fee_enabled"
                                    class="toggle-label block overflow-hidden h-6 rounded-full cursor-pointer transition-colors duration-200 ease-in-out"
                                    :class="{ 'bg-blue-500': feeEnabled, 'bg-slate-700': !feeEnabled }"></label>
                            </div>
                        </div>

                        <div x-show="feeEnabled" x-transition class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="astrologer_enrollment_fee_amount"
                                    class="block text-sm font-medium text-slate-300 mb-2">Enrollment Fee Amount (₹)</label>
                                <input type="number" step="0.01" name="astrologer_enrollment_fee_amount"
                                    id="astrologer_enrollment_fee_amount"
                                    value="{{ old('astrologer_enrollment_fee_amount', $settings->astrologer_enrollment_fee_amount) }}"
                                    class="bg-slate-900/50 border border-white/10 text-white text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 transition-all"
                                    placeholder="0.00">
                                <p class="mt-2 text-xs text-slate-500">The amount to charge new astrologers.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex justify-end border-t border-white/5 pt-6 mt-8">
                    <button type="submit"
                        class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-xl transition-all shadow-lg shadow-blue-500/20 flex items-center gap-2">
                        <i data-lucide="save" class="w-4 h-4"></i>
                        Save Settings
                    </button>
                </div>
            </form>
        </div>
    </div>

    <style>
        /* Custom Toggle Switch Styles if not in global CSS */
        .toggle-checkbox {
            top: 0;
            left: 0;
        }

        .toggle-checkbox:checked {
            right: 0;
            border-color: #3b82f6;
        }

        .toggle-checkbox:checked+.toggle-label {
            background-color: #3b82f6;
        }
    </style>
@endsection