@extends('layouts.app')

@section('content')
<div class="min-h-screen py-8 bg-stone-150">
    <div class="max-w-2xl px-4 mx-auto">
        <!-- Header -->
        <div class="mb-6">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-stone-900">Bakiye Yükle</h1>
                    <p class="mt-1 text-base text-stone-600">{{ $customer->name }} {{ $customer->surname }}</p>
                </div>
                <a href="{{ route('customers.show', $customer->id) }}"
                    class="inline-flex items-center px-4 py-2 text-sm font-medium bg-white border rounded-md shadow-sm border-stone-300 text-stone-700 hover:bg-stone-50">
                    <span class="mr-2 material-symbols-rounded">arrow_back</span>
                    Geri Dön
                </a>
            </div>
        </div>

        <!-- Flash Messages -->
        @if (session('error'))
        <div class="p-4 mb-6 border rounded-md bg-red-50 border-red-300">
            <div class="flex">
                <div class="shrink-0">
                    <svg class="text-red-400 size-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd"
                            d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
                            clip-rule="evenodd" />
                    </svg>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-red-700">{{ session('error') }}</p>
                </div>
            </div>
        </div>
        @endif

        @if ($errors->any())
        <div class="p-4 mb-6 border rounded-md bg-red-50 border-red-300">
            <div class="ml-3">
                <ul class="text-sm text-red-700 list-disc list-inside">
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
        @endif

        <!-- Current Balance Card -->
        <div class="p-6 mb-6 text-white rounded-lg bg-gradient-to-r from-violet-600 to-violet-700">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-violet-100">Mevcut Bakiye</p>
                    <p class="mt-1 text-3xl font-bold">₺{{ number_format($currentBalance, 2) }}</p>
                </div>
                <div class="p-3 flex items-center justify-center rounded-full bg-violet-500/30">
                    <span class="text-4xl text-white material-symbols-rounded">account_balance_wallet</span>
                </div>
            </div>
        </div>

        <!-- Add Credit Form -->
        <div class="p-6 bg-white rounded-lg border border-stone-300">
            <h2 class="mb-6 text-lg font-semibold text-stone-900">Bakiye Yükleme Formu</h2>

            <form method="POST" action="{{ route('customers.add-credit.store', $customer->id) }}">
                @csrf

                <!-- Amount -->
                <div class="mb-5">
                    <label for="amount" class="block mb-2 text-sm font-medium text-stone-700">Yüklenecek Tutar
                        (₺)</label>
                    <input type="number" name="amount" id="amount" min="1" max="50000" step="0.01"
                        value="{{ old('amount') }}" required
                        class="block w-full px-4 py-3 text-lg font-semibold border rounded-md text-stone-900 border-stone-300 placeholder:text-stone-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-violet-600"
                        placeholder="0.00" />
                </div>

                <!-- Most Added Credits -->
                @if(!empty($popularAmounts))
                <div class="mb-6">
                    <label class="block mb-2 text-sm font-medium text-stone-700">Sık Kullanılan Tutarlar</label>
                    <div class="flex flex-wrap gap-2">
                        @foreach($popularAmounts as $amount)
                        <button type="button"
                            class="quick-amount-badge inline-flex items-center rounded-md bg-yellow-50 px-3 py-1.5 text-lg font-medium text-yellow-800 ring-1 ring-inset ring-yellow-600/20 hover:bg-yellow-100 cursor-pointer transition-colors"
                            data-amount="{{ $amount }}">
                            ₺{{ number_format($amount, 0) }}
                        </button>
                        @endforeach
                    </div>
                </div>
                @endif

                <!-- Payment Method -->
                <div class="mb-6">
                    <label class="block mb-3 text-sm font-medium text-stone-700">Ödeme Yöntemi</label>
                    <div class="grid grid-cols-1 gap-y-4 sm:grid-cols-3 sm:gap-x-4">
                        <!-- Nakit -->
                        <label
                            class="group relative flex cursor-pointer rounded-lg border border-stone-300 bg-white p-4 has-[:disabled]:border-stone-400 has-[:disabled]:bg-stone-200 has-[:disabled]:opacity-25 has-[:checked]:outline has-[:focus-visible]:outline has-[:checked]:outline-2 has-[:focus-visible]:outline-[3px] has-[:checked]:-outline-offset-2 has-[:focus-visible]:-outline-offset-1 has-[:checked]:bg-violet-50 has-[:checked]:outline-violet-600 transition-all hover:border-violet-400">
                            <input type="radio" name="payment_method" value="cash" {{ old('payment_method')=='cash'
                                ? 'checked' : '' }} required
                                class="absolute inset-0 appearance-none focus:outline focus:outline-0 hidden" />
                            <div class="flex-1">
                                <span class="block text-base font-medium text-violet-900">Nakit</span>
                                <span class="mt-1 block text-xs text-stone-500">Peşin ödeme</span>
                            </div>
                            <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true"
                                class="invisible size-5 text-violet-600 group-has-[:checked]:visible">
                                <path
                                    d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
                                    clip-rule="evenodd" fill-rule="evenodd" />
                            </svg>
                        </label>

                        <!-- Kart -->
                        <label
                            class="group relative flex cursor-pointer rounded-lg border border-stone-300 bg-white p-4 has-[:disabled]:border-stone-400 has-[:disabled]:bg-stone-200 has-[:disabled]:opacity-25 has-[:checked]:outline has-[:focus-visible]:outline has-[:checked]:outline-2 has-[:focus-visible]:outline-[3px] has-[:checked]:-outline-offset-2 has-[:focus-visible]:-outline-offset-1 has-[:checked]:bg-violet-50 has-[:checked]:outline-violet-600 transition-all hover:border-violet-400">
                            <input type="radio" name="payment_method" value="card" {{ old('payment_method')=='card'
                                ? 'checked' : '' }} required checked
                                class="absolute inset-0 appearance-none focus:outline focus:outline-0 hidden" />
                            <div class="flex-1">
                                <span class="block text-base font-medium text-violet-900">Kart</span>
                                <span class="mt-1 block text-xs text-stone-500">Kredi/Banka kartı</span>
                            </div>
                            <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true"
                                class="invisible size-5 text-violet-600 group-has-[:checked]:visible">
                                <path
                                    d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
                                    clip-rule="evenodd" fill-rule="evenodd" />
                            </svg>
                        </label>

                        <!-- Havale/EFT -->
                        <label
                            class="group relative flex cursor-pointer rounded-lg border border-stone-300 bg-white p-4 has-[:disabled]:border-stone-400 has-[:disabled]:bg-stone-200 has-[:disabled]:opacity-25 has-[:checked]:outline has-[:focus-visible]:outline has-[:checked]:outline-2 has-[:focus-visible]:outline-[3px] has-[:checked]:-outline-offset-2 has-[:focus-visible]:-outline-offset-1 has-[:checked]:bg-violet-50 has-[:checked]:outline-violet-600 transition-all hover:border-violet-400">
                            <input type="radio" name="payment_method" value="transfer" {{
                                old('payment_method')=='transfer' ? 'checked' : '' }} required
                                class="absolute inset-0 appearance-none focus:outline focus:outline-0 hidden" />
                            <div class="flex-1">
                                <span class="block text-base font-medium text-violet-900">Havale/EFT</span>
                                <span class="mt-1 block text-xs text-stone-500">Banka transferi</span>
                            </div>
                            <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true"
                                class="invisible size-5 text-violet-600 group-has-[:checked]:visible">
                                <path
                                    d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
                                    clip-rule="evenodd" fill-rule="evenodd" />
                            </svg>
                        </label>
                    </div>
                </div>

                <!-- Description -->
                <div class="mb-6">
                    <label for="description" class="block mb-2 text-sm font-medium text-stone-700">Açıklama <span
                            class="text-stone-400">(Opsiyonel)</span></label>
                    <textarea name="description" id="description" rows="3" maxlength="500"
                        class="block w-full px-4 py-3 border rounded-md text-stone-900 border-stone-300 placeholder:text-stone-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-violet-600"
                        placeholder="Bakiye yükleme ile ilgili not ekleyin...">{{ old('description') }}</textarea>
                </div>

                <!-- Submit Button -->
                <button type="submit"
                    class="w-full px-6 py-3 text-base font-semibold text-white rounded-md shadow-sm bg-violet-600 hover:bg-violet-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600">
                    BAKİYE YÜKLE
                </button>
            </form>
        </div>
    </div>
</div>

<script>
    // Quick amount badge click handler
    document.addEventListener('DOMContentLoaded', function() {
        const badges = document.querySelectorAll('.quick-amount-badge');
        const amountInput = document.getElementById('amount');

        badges.forEach(function(badge) {
            badge.addEventListener('click', function() {
                const amount = this.getAttribute('data-amount');
                amountInput.value = amount;

                // Optional: Add visual feedback
                amountInput.focus();
                amountInput.classList.add('ring-2', 'ring-yellow-400');
                setTimeout(() => {
                    amountInput.classList.remove('ring-2', 'ring-yellow-400');
                }, 500);
            });
        });
    });
</script>
@endsection