@extends('admin.layouts.app')

@section('title', 'Add Recharge Package')

@section('content')
    <div class="max-w-4xl">
        <div class="flex items-center gap-4 mb-8">
            <a href="{{ route('admin.recharge-packages.index') }}"
                class="w-10 h-10 rounded-xl bg-slate-800 flex items-center justify-center text-slate-400 hover:text-white transition-colors">
                <i data-lucide="arrow-left" class="w-5 h-5"></i>
            </a>
            <h1 class="text-2xl font-bold text-white">Add Recharge Package</h1>
        </div>

        <form action="{{ route('admin.recharge-packages.store') }}" method="POST">
            @csrf

            <div class="space-y-6">
                <div class="glass-card rounded-2xl p-8">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Amount -->
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Recharge Amount (₹)</label>
                            <input type="number" name="amount" value="{{ old('amount') }}" step="0.01" required
                                class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all @error('amount') border-red-500 @enderror">
                            @error('amount')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Talktime -->
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Talktime (Minutes)</label>
                            <input type="number" name="talktime" value="{{ old('talktime') }}" required
                                class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all @error('talktime') border-red-500 @enderror">
                            @error('talktime')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Validity -->
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Validity (Months)</label>
                            <input type="number" name="validity_months" value="{{ old('validity_months', 0) }}" required
                                class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all @error('validity_months') border-red-500 @enderror">
                            @error('validity_months')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Status -->
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Status</label>
                            <select name="status"
                                class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                                <option value="active" {{ old('status') == 'active' ? 'selected' : '' }}>Active</option>
                                <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Features -->
                <div class="glass-card rounded-2xl p-8"
                    x-data="{ is_cashback: {{ old('is_cashback') ? 'true' : 'false' }}, is_taxable: {{ old('is_taxable') ? 'true' : 'false' }} }">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <!-- Cashback -->
                        <div class="space-y-4">
                            <label class="flex items-center gap-3 cursor-pointer group">
                                <div class="relative">
                                    <input type="checkbox" name="is_cashback" value="1" x-model="is_cashback"
                                        class="sr-only peer">
                                    <div
                                        class="w-11 h-6 bg-slate-700 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600">
                                    </div>
                                </div>
                                <span
                                    class="text-sm font-medium text-slate-300 group-hover:text-white transition-colors">Enable
                                    Cashback</span>
                            </label>

                            <div x-show="is_cashback" x-transition>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Cashback Amount (₹)</label>
                                <input type="number" name="cashback_amount" value="{{ old('cashback_amount', 0) }}"
                                    step="0.01"
                                    class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                                @error('cashback_amount')
                                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <!-- Tax -->
                        <div class="space-y-4">
                            <label class="flex items-center gap-3 cursor-pointer group">
                                <div class="relative">
                                    <input type="checkbox" name="is_taxable" value="1" x-model="is_taxable"
                                        class="sr-only peer">
                                    <div
                                        class="w-11 h-6 bg-slate-700 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600">
                                    </div>
                                </div>
                                <span
                                    class="text-sm font-medium text-slate-300 group-hover:text-white transition-colors">Tax
                                    Applicable</span>
                            </label>

                            <div x-show="is_taxable" x-transition>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Tax Percentage (%)</label>
                                <input type="number" name="tax_percentage" value="{{ old('tax_percentage', 0) }}"
                                    step="0.01"
                                    class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                                @error('tax_percentage')
                                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex items-center gap-4">
                    <button type="submit"
                        class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 rounded-xl shadow-lg shadow-blue-500/20 transition-all">
                        Save Package
                    </button>
                    <button type="submit" name="save_and_new" value="1"
                        class="flex-1 bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-4 rounded-xl shadow-lg shadow-emerald-500/20 transition-all">
                        Save & Add Another
                    </button>
                    <a href="{{ route('admin.recharge-packages.index') }}"
                        class="px-8 py-4 rounded-xl border border-slate-700 text-slate-300 font-bold hover:bg-slate-800 transition-all text-center">Cancel</a>
                </div>
            </div>
        </form>
    </div>
@endsection