@extends('layouts.user')

@section('title')
Redeem Coupon
@endsection

@section('content')

<!-- Start Hero -->
<section class="relative lg:pb-24 pb-16 md:mt-[84px] mt-[70px]">
    <div class="relative md:container container-fluid">
        <div class="relative overflow-hidden md:rounded-md shadow dark:shadow-gray-700 h-52 bg-[url('../../assets/images/hero/pages.html')] bg-center bg-no-repeat bg-cover"
            style="background-image: url('{{ asset('images/profile-1.jpg') }}');"></div>
    </div><!--end container-->

    <div class="container relative mt-16 md:mt-24">
        <div class="md:flex">
            <div class="lg:w-1/4 md:w-1/3 md:px-3">
                <div class="relative -mt-32 md:-mt-48">
                    <div class="p-6 bg-white rounded-md shadow dark:shadow-gray-800 dark:bg-slate-900">
                        <div class="mb-5 text-center profile-pic">
                            <div>
                                <div class="relative mx-auto h-28 w-28">
                                    <img src="{{ asset('images/avatar-1.png') }}" class="rounded-full shadow dark:shadow-gray-800 ring-4 ring-slate-50 dark:ring-slate-800" id="profile-image" alt="">
                                    <label class="absolute inset-0 cursor-pointer" for="pro-img"></label>
                                </div>

                                <div class="mt-4">
                                    <h5 class="text-lg font-semibold">{{ auth()->user()->username }}</h5>
                                    <p class="text-slate-400">{{ auth()->user()->email }}</p>
                                </div>
                            </div>
                        </div>

                        <!-- Side Nav -->
                        <x-side-nav />

                    </div>
                </div>
            </div>

            <div class="mt-6 lg:w-3/4 md:w-2/3 md:px-3 md:mt-0">

                <x-alert />

                <!-- Coupon Redemption Card -->
                <div class="bg-white rounded-md shadow dark:shadow-gray-800 dark:bg-slate-900">
                    <div class="p-6 border-b border-gray-100 dark:border-gray-700">
                        <div class="flex items-center">
                            <svg class="w-6 h-6 mr-3 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
                            </svg>
                            <h5 class="text-xl font-semibold">Redeem Coupon Code</h5>
                        </div>
                    </div>

                    <div class="p-6">
                        <!-- Info Box -->
                        <div class="p-4 mb-6 border-l-4 border-orange-500 rounded-r-lg bg-orange-50 dark:bg-slate-800">
                            <div class="flex">
                                <svg class="w-5 h-5 mt-0.5 mr-3 text-orange-500" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                                </svg>
                                <div>
                                    <h6 class="font-semibold text-slate-800 dark:text-white">How it works</h6>
                                    <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">
                                        Enter your coupon code below to claim your reward. Valid coupons may add funds to your wallet or products to your inventory.
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- Redemption Form -->
                        <form method="POST" action="{{ route('coupon.redeem') }}" class="max-w-xl">
                            @csrf
                            
                            <div class="mb-6">
                                <label for="code" class="block mb-2 text-sm font-medium text-slate-700 dark:text-slate-300">
                                    Coupon Code
                                </label>
                                <div class="relative">
                                    <input
                                        type="text"
                                        name="code"
                                        id="code"
                                        placeholder="Enter code (e.g., ABC-1234-XYZ)"
                                        class="w-full px-4 py-3 text-lg font-semibold tracking-wider uppercase border rounded-lg border-slate-300 dark:border-slate-700 dark:bg-slate-800 dark:text-white focus:border-orange-500 focus:ring-2 focus:ring-orange-200 dark:focus:ring-orange-900"
                                        style="letter-spacing: 0.1em;"
                                        required
                                        maxlength="20"
                                    />
                                    <!--<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">-->
                                    <!--    <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">-->
                                    <!--        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>-->
                                    <!--    </svg>-->
                                    <!--</div>-->
                                </div>
                                @error('code')
                                    <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                                @enderror
                                <p class="mt-2 text-xs text-slate-500 dark:text-slate-400">
                                    <i data-feather="info" class="inline w-3 h-3"></i> Each coupon can only be used once per account
                                </p>
                            </div>

                            <div class="flex gap-3">
                                <button
                                    type="submit"
                                    class="inline-flex items-center px-6 py-3 text-base font-semibold tracking-wide text-center text-white align-middle duration-500 bg-orange-500 rounded-lg hover:bg-orange-600"
                                >
                                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                    </svg>
                                    Redeem Coupon
                                </button>
                                
                                <a href="{{ route('home') }}"
                                    class="inline-flex items-center px-6 py-3 text-base font-semibold tracking-wide text-center align-middle duration-500 border rounded-lg text-slate-600 dark:text-slate-300 border-slate-300 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800"
                                >
                                    Cancel
                                </a>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Benefits Section -->
                <div class="grid grid-cols-1 gap-6 mt-8 md:grid-cols-2">
                    <!-- Balance Coupons -->
                    <div class="p-6 bg-white rounded-lg shadow dark:shadow-gray-800 dark:bg-slate-900">
                        <div class="flex items-center mb-4">
                            <div class="flex items-center justify-center w-12 h-12 mr-4 rounded-full bg-green-100 dark:bg-green-900">
                                <svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z"/>
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clip-rule="evenodd"/>
                                </svg>
                            </div>
                            <div>
                                <h6 class="font-semibold text-slate-800 dark:text-white">Balance Coupons</h6>
                                <p class="text-sm text-slate-500 dark:text-slate-400">Add funds to your wallet</p>
                            </div>
                        </div>
                        <p class="text-sm text-slate-600 dark:text-slate-400">
                            Redeem coupons that add balance directly to your main wallet. Use it for trading, purchasing AI models, or withdraw to your preferred wallet.
                        </p>
                    </div>

                    <!-- Product Coupons -->
                    <div class="p-6 bg-white rounded-lg shadow dark:shadow-gray-800 dark:bg-slate-900">
                        <div class="flex items-center mb-4">
                            <div class="flex items-center justify-center w-12 h-12 mr-4 rounded-full bg-blue-100 dark:bg-blue-900">
                                <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd"/>
                                </svg>
                            </div>
                            <div>
                                <h6 class="font-semibold text-slate-800 dark:text-white">Product Coupons</h6>
                                <p class="text-sm text-slate-500 dark:text-slate-400">Get free products</p>
                            </div>
                        </div>
                        <p class="text-sm text-slate-600 dark:text-slate-400">
                            Receive products directly to your inventory. Products can be sold on the marketplace or used for trading to generate profits.
                        </p>
                    </div>
                </div>

                <!-- Recent Redemptions -->
                @if($redemptions && $redemptions->count() > 0)
                <div class="mt-8 bg-white rounded-md shadow dark:shadow-gray-800 dark:bg-slate-900">
                    <div class="p-6 border-b border-gray-100 dark:border-gray-700">
                        <h5 class="text-lg font-semibold">Your Redemption History</h5>
                    </div>
                    
                    <div class="p-6">
                        <div class="overflow-x-auto">
                            <table class="w-full text-sm text-left text-slate-500 dark:text-slate-400">
                                <thead class="text-xs uppercase bg-slate-50 dark:bg-slate-800 text-slate-700 dark:text-slate-400">
                                    <tr>
                                        <th scope="col" class="px-4 py-3">Coupon Code</th>
                                        <th scope="col" class="px-4 py-3">Type</th>
                                        <th scope="col" class="px-4 py-3">Reward</th>
                                        <th scope="col" class="px-4 py-3">Date</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($redemptions as $redemption)
                                    <tr class="bg-white border-b dark:bg-slate-900 dark:border-slate-700">
                                        <td class="px-4 py-3 font-medium text-slate-900 dark:text-white">
                                            {{ $redemption->coupon->code }}
                                        </td>
                                        <td class="px-4 py-3">
                                            @if($redemption->coupon->type === 'balance')
                                                <span class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded-full dark:bg-green-900 dark:text-green-200">
                                                    Balance
                                                </span>
                                            @else
                                                <span class="px-2 py-1 text-xs font-semibold text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-200">
                                                    Product
                                                </span>
                                            @endif
                                        </td>
                                        <td class="px-4 py-3">
                                            @if($redemption->coupon->type === 'balance')
                                                <span class="font-semibold text-green-600 dark:text-green-400">
                                                    +${{ number_format($redemption->coupon->amount, 2) }} USDT
                                                </span>
                                            @else
                                                <span class="font-semibold">
                                                    {{ $redemption->coupon->product->name ?? 'Product' }} x{{ $redemption->coupon->quantity }}
                                                </span>
                                            @endif
                                        </td>
                                        <td class="px-4 py-3 text-slate-500">
                                            {{ $redemption->redeemed_at->format('M j, Y') }}
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        @if($redemptions->hasPages())
                        <div class="mt-4">
                            {{ $redemptions->links() }}
                        </div>
                        @endif
                    </div>
                </div>
                @endif

                <!-- FAQ Section -->
                <div class="p-6 mt-8 bg-white rounded-lg shadow dark:shadow-gray-800 dark:bg-slate-900">
                    <h5 class="mb-4 text-lg font-semibold">Frequently Asked Questions</h5>
                    
                    <div class="space-y-4">
                        <div>
                            <h6 class="font-semibold text-slate-800 dark:text-white">How many times can I use a coupon?</h6>
                            <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Each coupon can only be redeemed once per account. Once you've used a coupon, it cannot be used again.</p>
                        </div>
                        
                        <div>
                            <h6 class="font-semibold text-slate-800 dark:text-white">What happens when I redeem a balance coupon?</h6>
                            <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">The amount will be instantly added to your main wallet balance. You can use it for trading or withdraw it.</p>
                        </div>
                        
                        <div>
                            <h6 class="font-semibold text-slate-800 dark:text-white">What happens when I redeem a product coupon?</h6>
                            <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">The product(s) will be added to your inventory. You can view them in "My Inventory" section and sell them on the marketplace.</p>
                        </div>

                        <div>
                            <h6 class="font-semibold text-slate-800 dark:text-white">Where can I get coupon codes?</h6>
                            <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Coupons are distributed through promotions, special events, referral rewards, and email campaigns. Follow our social media channels to stay updated.</p>
                        </div>
                    </div>
                </div>

            </div>
        </div><!--end grid-->
    </div><!--end container-->
</section><!--end section-->
<!-- End Hero -->

@endsection