@extends($activeTemplate . 'layouts.master')

@section('content')
    <div class="flex justify-center">
        <div class="w-full max-w-2xl">
            <form action="{{ route('user.airtime.apply') }}" method="POST">
                @csrf

                <div class="bg-white border border-primary-100 rounded-2xl shadow-soft overflow-hidden topup-card">

                    {{-- Balance Banner --}}
                    <div class="bg-gradient-to-br from-primary-900 via-primary-800 to-primary-700 px-6 py-5 text-center relative overflow-hidden">
                        <div class="absolute -top-6 -right-6 w-24 h-24 rounded-full bg-white/5"></div>
                        <div class="absolute -bottom-4 -left-4 w-16 h-16 rounded-full bg-white/5"></div>
                        <div class="relative z-10 inline-flex items-center justify-center w-11 h-11 rounded-full bg-white/10 mb-2">
                            <i data-lucide="smartphone" class="h-5 w-5 text-white"></i>
                        </div>
                        <p class="relative z-10 text-primary-200 text-xs font-semibold uppercase tracking-widest mb-1">@lang('Current Balance')</p>
                        <h3 class="relative z-10 text-white font-extrabold text-xl">
                            {{ showAmount(auth()->user()->balance) }} {{ __($general->cur_text) }}
                        </h3>
                        <div class="relative z-10 w-10 h-1 bg-secondary-500 rounded-full mx-auto mt-3"></div>
                    </div>

                    {{-- Form Body --}}
                    <div class="p-6 flex flex-col gap-5">

                        {{-- Country --}}
                        <div class="flex flex-col gap-1">
                            <label class="text-sm font-semibold text-primary-800">@lang('Country')</label>
                            <select name="country_id"
                                    required
                                    class="w-full px-4 py-2.5 rounded-xl border border-primary-200 bg-primary-50/40 text-primary-900 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition">
                                <option value="" selected disabled>@lang('Select One')</option>
                                @foreach ($countries as $country)
                                    <option value="{{ $country->id }}"
                                            data-calling_codes="{{ json_encode($country->calling_codes) }}"
                                            @selected(old('country_id') == $country->id)>
                                        {{ __($country->name) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Operator (shown dynamically) --}}
                        <div class="operatorDiv hidden flex-col gap-1">
                            <label class="text-sm font-semibold text-primary-800">@lang('Operator') <span class="text-rose-500">*</span></label>
                            <div class="operator-wrapper"></div>
                        </div>

                        {{-- Mobile Number --}}
                        <div class="flex flex-col gap-1">
                            <label class="text-sm font-semibold text-primary-800">@lang('Mobile Number')</label>
                            <div class="input--group flex items-center rounded-xl border border-primary-200 overflow-hidden focus-within:ring-2 focus-within:ring-primary-500 transition">
                                <span class="input--group-text shrink-0 px-3 bg-primary-50 border-r border-primary-200">
                                    <select name="calling_code"
                                            class="form--control bg-transparent text-primary-800 text-sm focus:outline-none p-0 h-auto">
                                    </select>
                                </span>
                                <input type="tel"
                                       name="mobile_number"
                                       value="{{ old('mobile_number') }}"
                                       required
                                       class="mobileNumber flex-1 px-4 py-2.5 bg-primary-50/40 text-primary-900 text-sm focus:outline-none placeholder-primary-300">
                                <div class="input--group-border"></div>
                            </div>
                        </div>

                        {{-- Amount (free input — shown dynamically) --}}
                        <div class="amount-wrapper hidden flex-col gap-1">
                            <label class="text-sm font-semibold text-primary-800">
                                @lang('Amount')
                                <span class="topupLimit text-primary-500 text-xs font-normal hidden ml-1"></span>
                            </label>
                            <div class="flex items-center rounded-xl border border-primary-200 overflow-hidden focus-within:ring-2 focus-within:ring-primary-500 transition">
                                <input type="number"
                                       step="any"
                                       name="amount"
                                       value="{{ old('amount') }}"
                                       required
                                       class="amount flex-1 px-4 py-2.5 bg-primary-50/40 text-primary-900 text-sm focus:outline-none placeholder-primary-300">
                                <span class="px-4 py-2.5 bg-primary-900 text-white text-sm font-semibold shrink-0">
                                    {{ __($general->cur_text) }}
                                </span>
                            </div>
                        </div>

                        {{-- Fixed Amounts (shown dynamically) --}}
                        <div class="fixed-amounts-wrapper hidden flex-col gap-1">
                            <label class="text-sm font-semibold text-primary-800">@lang('Amount')</label>
                            <div class="fixed-amount-input-wrapper"></div>
                        </div>

                        {{-- OTP Field --}}
                        @include($activeTemplate . 'partials.otp_field')

                        {{-- Suggested Amounts (shown dynamically) --}}
                        <div class="suggested-amounts-wrapper hidden flex-col gap-1">
                            <label class="text-sm font-semibold text-primary-800">@lang('Suggested Amounts')</label>
                            <div class="suggested-amounts flex flex-wrap gap-2"></div>
                        </div>

                        {{-- Submit --}}
                        <button type="submit"
                                class="w-full inline-flex items-center justify-center gap-2 px-6 py-3 bg-primary-800 hover:bg-primary-700 active:bg-primary-900 text-white font-semibold text-sm rounded-xl shadow-soft transition-colors duration-200">
                            <i data-lucide="zap" class="h-4 w-4"></i>
                            @lang('Top Up')
                        </button>

                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@include('partials.operator_modal')
@include('partials.top_up')