@extends('layouts.customer')

@section('content')
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-8">Airtime & Data</h1>

    {{-- Tab Navigation --}}
    <div class="flex bg-gray-100 rounded-lg p-1 mb-6">
        <button onclick="switchTab('airtime')" id="tab-airtime" class="flex-1 py-2.5 text-sm font-medium rounded-md bg-white shadow-sm text-[#0D6B58] transition">
            Airtime
        </button>
        <button onclick="switchTab('data')" id="tab-data" class="flex-1 py-2.5 text-sm font-medium rounded-md text-gray-500 hover:text-gray-700 transition">
            Data
        </button>
    </div>

    @if($errors->any())
    <div class="bg-rose-50 border border-rose-200 rounded-xl p-4 mb-6">
        @foreach($errors->all() as $error)
        <p class="text-sm text-rose-700">{{ $error }}</p>
        @endforeach
    </div>
    @endif

    {{-- Airtime Tab --}}
    <div id="airtime-tab">
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <form method="POST" action="{{ route('customer.airtime.purchase') }}">
                @csrf
                @method('POST')
                <input type="hidden" name="type" value="airtime">

                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Provider</label>
                        <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                            @foreach($providers ?? ['MTN', 'AT&T', 'Verizon', 'T-Mobile'] as $provider)
                            <label class="cursor-pointer">
                                <input type="radio" name="provider" value="{{ $provider }}" class="peer hidden" required>
                                <div class="p-3 border border-gray-200 rounded-lg text-center peer-checked:border-[#0D6B58] peer-checked:bg-[#0D6B58]/5 transition hover:border-gray-300">
                                    <p class="text-sm font-medium text-gray-700">{{ $provider }}</p>
                                </div>
                            </label>
                            @endforeach
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
                        <input type="tel" name="phone_number" value="{{ old('phone_number') }}" placeholder="Enter phone number" class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" required>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Amount</label>
                        <div class="flex flex-wrap gap-2 mb-2">
                            @foreach([5, 10, 25, 50, 100] as $amt)
                            <button type="button" onclick="document.getElementById('airtime-amount').value='{{ $amt }}'; this.classList.add('bg-[#0D6B58]', 'text-white'); this.classList.remove('bg-gray-100', 'text-gray-700')" class="amount-btn px-4 py-2 text-sm font-medium bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition">
                                ${{ $amt }}
                            </button>
                            @endforeach
                        </div>
                        <div class="relative">
                            <span class="absolute left-3 top-2.5 text-gray-500 text-sm">$</span>
                            <input type="number" name="amount" id="airtime-amount" value="{{ old('amount') }}" step="0.01" min="1" placeholder="0.00" class="w-full pl-7 pr-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" required>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Pay From</label>
                        <select name="account_id" class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" required>
                            <option value="">Select account</option>
                            @foreach($accounts as $account)
                            <option value="{{ $account->id }}" {{ old('account_id') == $account->id ? 'selected' : '' }}>
                                {{ ucfirst($account->type) }} (****{{ substr($account->account_number, -4) }}) - ${{ number_format($account->balance, 2) }}
                            </option>
                            @endforeach
                        </select>
                    </div>

                    <button type="submit" class="w-full py-2.5 bg-[#0D6B58] text-white text-sm font-semibold rounded-lg hover:bg-[#0A5A49] transition">
                        Buy Airtime
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- Data Tab --}}
    <div id="data-tab" class="hidden">
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <form method="POST" action="{{ route('customer.airtime.purchase') }}">
                @csrf
                @method('POST')
                <input type="hidden" name="type" value="data">

                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Provider</label>
                        <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                            @foreach($providers ?? ['MTN', 'AT&T', 'Verizon', 'T-Mobile'] as $provider)
                            <label class="cursor-pointer">
                                <input type="radio" name="provider" value="{{ $provider }}" class="peer hidden" required>
                                <div class="p-3 border border-gray-200 rounded-lg text-center peer-checked:border-[#0D6B58] peer-checked:bg-[#0D6B58]/5 transition hover:border-gray-300">
                                    <p class="text-sm font-medium text-gray-700">{{ $provider }}</p>
                                </div>
                            </label>
                            @endforeach
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
                        <input type="tel" name="phone_number" value="{{ old('phone_number') }}" placeholder="Enter phone number" class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" required>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Data Plan</label>
                        <select name="plan_id" class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" required>
                            <option value="">Select plan</option>
                            @foreach($dataPlans ?? [] as $plan)
                            <option value="{{ $plan->id }}" data-price="{{ $plan->price }}">
                                {{ $plan->name }} - {{ $plan->data_size }} ({{ $plan->duration }}) - ${{ number_format($plan->price, 2) }}
                            </option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Pay From</label>
                        <select name="account_id" class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" required>
                            <option value="">Select account</option>
                            @foreach($accounts as $account)
                            <option value="{{ $account->id }}" {{ old('account_id') == $account->id ? 'selected' : '' }}>
                                {{ ucfirst($account->type) }} (****{{ substr($account->account_number, -4) }}) - ${{ number_format($account->balance, 2) }}
                            </option>
                            @endforeach
                        </select>
                    </div>

                    <button type="submit" class="w-full py-2.5 bg-[#0D6B58] text-white text-sm font-semibold rounded-lg hover:bg-[#0A5A49] transition">
                        Buy Data
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- History --}}
    <div class="mt-8">
        <button onclick="document.getElementById('history-section').classList.toggle('hidden')" class="text-sm text-[#0D6B58] hover:underline font-medium">
            Toggle Purchase History
        </button>
        <div id="history-section" class="hidden mt-4">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100">
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead>
                            <tr class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                <th class="px-6 py-3">Date</th>
                                <th class="px-6 py-3">Type</th>
                                <th class="px-6 py-3">Provider</th>
                                <th class="px-6 py-3">Phone</th>
                                <th class="px-6 py-3">Amount</th>
                                <th class="px-6 py-3">Status</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-50">
                            @forelse($airtimeHistory ?? [] as $history)
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 text-sm text-gray-500">{{ $history->created_at->format('M d, Y') }}</td>
                                <td class="px-6 py-4 text-sm text-gray-700 capitalize">{{ $history->type }}</td>
                                <td class="px-6 py-4 text-sm text-gray-700">{{ $history->provider }}</td>
                                <td class="px-6 py-4 text-sm text-gray-700">{{ $history->phone_number }}</td>
                                <td class="px-6 py-4 text-sm font-semibold text-gray-900">${{ number_format($history->amount, 2) }}</td>
                                <td class="px-6 py-4">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                        @if($history->status === 'successful') bg-emerald-100 text-emerald-700
                                        @elseif($history->status === 'pending') bg-amber-100 text-amber-700
                                        @else bg-rose-100 text-rose-700 @endif">
                                        {{ ucfirst($history->status) }}
                                    </span>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="px-6 py-8 text-center text-sm text-gray-500">No purchase history</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>

<script>
function switchTab(tab) {
    document.getElementById('airtime-tab').classList.toggle('hidden', tab !== 'airtime');
    document.getElementById('data-tab').classList.toggle('hidden', tab !== 'data');
    document.getElementById('tab-airtime').className = tab === 'airtime'
        ? 'flex-1 py-2.5 text-sm font-medium rounded-md bg-white shadow-sm text-[#0D6B58] transition'
        : 'flex-1 py-2.5 text-sm font-medium rounded-md text-gray-500 hover:text-gray-700 transition';
    document.getElementById('tab-data').className = tab === 'data'
        ? 'flex-1 py-2.5 text-sm font-medium rounded-md bg-white shadow-sm text-[#0D6B58] transition'
        : 'flex-1 py-2.5 text-sm font-medium rounded-md text-gray-500 hover:text-gray-700 transition';
}
</script>
@endsection