@extends('layouts.admin_layout')

@section('content')

<main class="h-full pb-16 overflow-y-auto">
    <div class="container px-6 mx-auto grid">
        <h2 class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200">
            Create <span class="text-blue-500">New Coupon</span>
        </h2>

        <x-alert/>

        <div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
            <form method="POST" action="{{ route('admin.coupons.store') }}">
                @csrf

                <!-- Coupon Type -->
                <label class="block mt-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">Coupon Type *</span>
                    <select
                        name="type"
                        id="couponType"
                        class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-blue-400 focus:outline-none dark:text-gray-300 form-select"
                        required
                        onchange="toggleCouponFields()"
                    >
                        <option value="">Select Type</option>
                        <option value="balance">Balance (Add funds to user bal)</option>
                        <option value="product">Product (Add product to inventory)</option>
                    </select>
                    @error('type')
                        <span class="text-xs text-red-600 dark:text-red-400">{{ $message }}</span>
                    @enderror
                </label>

                <!-- Balance Amount (shown when type is balance) -->
                <div id="balanceField" style="display: none;">
                    <label class="block mt-4 text-sm">
                        <span class="text-gray-700 dark:text-gray-400">Balance Amount (USDT) *</span>
                        <input
                            type="number"
                            name="amount"
                            step="0.01"
                            min="0"
                            placeholder="0.00"
                            class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-blue-400 focus:outline-none dark:text-gray-300 form-input"
                        />
                        @error('amount')
                            <span class="text-xs text-red-600 dark:text-red-400">{{ $message }}</span>
                        @enderror
                    </label>
                </div>

                <!-- Product Selection (shown when type is product) -->
                <div id="productFields" style="display: none;">
                    <label class="block mt-4 text-sm">
                        <span class="text-gray-700 dark:text-gray-400">Select Product *</span>
                        <select
                            name="product_id"
                            class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-blue-400 focus:outline-none dark:text-gray-300 form-select"
                        >
                            <option value="">Choose a product</option>
                            @foreach($products as $product)
                                <option value="{{ $product->id }}">
                                    {{ $product->name }} (USD {{ number_format($product->value, 2) }})
                                </option>
                            @endforeach
                        </select>
                        @error('product_id')
                            <span class="text-xs text-red-600 dark:text-red-400">{{ $message }}</span>
                        @enderror
                    </label>

                    <label class="block mt-4 text-sm">
                        <span class="text-gray-700 dark:text-gray-400">Quantity *</span>
                        <input
                            type="number"
                            name="quantity"
                            min="1"
                            value="1"
                            class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-blue-400 focus:outline-none dark:text-gray-300 form-input"
                        />
                        @error('quantity')
                            <span class="text-xs text-red-600 dark:text-red-400">{{ $message }}</span>
                        @enderror
                    </label>
                </div>

                <!-- Description -->
                <label class="block mt-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">Description</span>
                    <textarea
                        name="description"
                        rows="3"
                        placeholder="Optional description for internal reference"
                        class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-blue-400 focus:outline-none dark:text-gray-300 form-textarea"
                    >{{ old('description') }}</textarea>
                    @error('description')
                        <span class="text-xs text-red-600 dark:text-red-400">{{ $message }}</span>
                    @enderror
                </label>

                <!-- Expiration Date -->
                <label class="block mt-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">Expiration Date</span>
                    <input
                        type="datetime-local"
                        name="expires_at"
                        class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-blue-400 focus:outline-none dark:text-gray-300 form-input"
                    />
                    <span class="text-xs text-gray-600 dark:text-gray-400">Leave empty for no expiration</span>
                    @error('expires_at')
                        <span class="text-xs text-red-600 dark:text-red-400">{{ $message }}</span>
                    @enderror
                </label>

                <!-- Max Uses -->
                <label class="block mt-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">Maximum Uses *</span>
                    <input
                        type="number"
                        name="max_uses"
                        min="1"
                        value="1"
                        class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-blue-400 focus:outline-none dark:text-gray-300 form-input"
                        required
                    />
                    <span class="text-xs text-gray-600 dark:text-gray-400">How many times this coupon can be used in total</span>
                    @error('max_uses')
                        <span class="text-xs text-red-600 dark:text-red-400">{{ $message }}</span>
                    @enderror
                </label>

                <!-- Generate Count -->
                <label class="block mt-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">Number of Coupons to Generate *</span>
                    <input
                        type="number"
                        name="generate_count"
                        min="1"
                        max="100"
                        value="1"
                        class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-blue-400 focus:outline-none dark:text-gray-300 form-input"
                        required
                    />
                    <span class="text-xs text-gray-600 dark:text-gray-400">Generate multiple coupons with the same settings (max 100)</span>
                    @error('generate_count')
                        <span class="text-xs text-red-600 dark:text-red-400">{{ $message }}</span>
                    @enderror
                </label>

                <!-- Submit Buttons -->
                <div class="flex mt-6 space-x-2">
                    <button
                        type="submit"
                        class="px-5 py-3 font-medium leading-5 text-white transition-colors duration-150 bg-blue-600 border border-transparent hover:bg-blue-700 focus:outline-none"
                        style="color: #fff;"
                    >
                        Create Coupon
                    </button>
                    
                    <a href="{{ route('admin.coupons') }}"
                        class="px-5 py-3 font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 hover:bg-gray-100 focus:outline-none dark:bg-gray-800 dark:text-gray-300"
                    >
                        Cancel
                    </a>
                </div>
            </form>
        </div>
    </div>
</main>

<script>
function toggleCouponFields() {
    const type = document.getElementById('couponType').value;
    const balanceField = document.getElementById('balanceField');
    const productFields = document.getElementById('productFields');
    
    if (type === 'balance') {
        balanceField.style.display = 'block';
        productFields.style.display = 'none';
    } else if (type === 'product') {
        balanceField.style.display = 'none';
        productFields.style.display = 'block';
    } else {
        balanceField.style.display = 'none';
        productFields.style.display = 'none';
    }
}
</script>

@endsection