<div>
    {{-- Top Nav --}}
    @include('livewire.top-up-setting.top-nav.top-up-settings')

    <!-- Main Content -->
    <div class="flex flex-col items-center justify-center w-full mt-10 ">

        <!-- Discount Section -->
        <div class="bg-white w-[80%] rounded-md shadow-md p-10 text-center">
            <h2 class="text-2xl font-semibold mb-6">Current Discount: 
                <span class="text-orange-500 font-bold">0%</span>
            </h2>

            <div class="flex items-center justify-center gap-4 mb-8">
                <label class="font-medium">Discount (%):</label>
                <input 
                    type="text" 
                    wire:model="last_name" 
                    class="border rounded px-4 py-2 w-32 text-center" 
                    placeholder="Enter discount" 
                    value="0"
                >
                <button class="bg-orange-500 hover:bg-orange-600 text-white font-medium py-2 px-6 rounded">
                    Submit
                </button>
            </div>

            <!-- Loyalty Card Image -->
            <div class="flex justify-center">
                <img src="/assets/bg_card.png" alt="Loyalty Card">
            </div>
        </div>

    </div>
</div>
