@extends('admin.layouts.app')

@section('title', 'Create Discount')

@section('content')
    <div class="max-w-4xl mx-auto space-y-6">
        <div class="flex items-center gap-4 mb-8">
            <a href="{{ route('admin.discounts.index') }}"
                class="p-2 bg-slate-800 border border-slate-700 rounded-xl text-slate-400 hover:text-white transition-all">
                <i data-lucide="arrow-left" class="w-5 h-5"></i>
            </a>
            <div>
                <h1 class="text-3xl font-bold text-white tracking-tight">Create Discount</h1>
                <p class="text-slate-400 mt-1">Define new promotional rules and automatic benefits.</p>
            </div>
        </div>

        @if ($errors->any())
            <div class="bg-rose-500/10 border border-rose-500/20 text-rose-400 p-4 rounded-xl">
                <h4 class="text-sm font-bold uppercase tracking-widest mb-2 flex items-center gap-2">
                    <i data-lucide="alert-circle" class="w-4 h-4"></i>
                    Validation Errors
                </h4>
                <ul class="list-disc pl-5 text-sm space-y-1">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('admin.discounts.store') }}" method="POST" class="space-y-6"
            x-data="{ type: 'percentage', apply_to: 'products' }">
            @csrf

            <div class="glass-card rounded-3xl p-8 border border-white/5 space-y-8">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div>
                        <label
                            class="form-label text-slate-400 text-[10px] uppercase font-bold tracking-widest mb-3">Promotion
                            Name</label>
                        <input type="text" name="name" value="{{ old('name') }}" required
                            class="w-full bg-slate-800 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white focus:ring-2 focus:ring-blue-500 outline-none">
                    </div>

                    <div>
                        <label
                            class="form-label text-slate-400 text-[10px] uppercase font-bold tracking-widest mb-3">Discount
                            Type</label>
                        <select name="type" x-model="type"
                            class="w-full bg-slate-800 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white focus:ring-2 focus:ring-blue-500 outline-none">
                            <option value="percentage">Percentage (%)</option>
                            <option value="fixed">Fixed Amount (₹)</option>
                            <option value="buy_x_get_y">Buy X Get Y Free</option>
                        </select>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div x-show="type !== 'buy_x_get_y'">
                        <label class="form-label text-slate-400 text-[10px] uppercase font-bold tracking-widest mb-3"
                            x-text="type === 'percentage' ? 'Percentage Value (%)' : 'Discount Amount (₹)'">Value</label>
                        <input type="number" step="0.01" name="value" value="{{ old('value') }}"
                            class="w-full bg-slate-800 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white focus:ring-2 focus:ring-blue-500 outline-none">
                    </div>

                    <div x-show="type === 'buy_x_get_y'" class="col-span-1 md:col-span-2 grid grid-cols-2 gap-8">
                        <div>
                            <label
                                class="form-label text-slate-400 text-[10px] uppercase font-bold tracking-widest mb-3">Buy
                                Quantity (X)</label>
                            <input type="number" name="buy_x" value="{{ old('buy_x') }}"
                                class="w-full bg-slate-800 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white focus:ring-2 focus:ring-blue-500 outline-none">
                        </div>
                        <div>
                            <label
                                class="form-label text-slate-400 text-[10px] uppercase font-bold tracking-widest mb-3">Get
                                Free Quantity (Y)</label>
                            <input type="number" name="get_y" value="{{ old('get_y') }}"
                                class="w-full bg-slate-800 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white focus:ring-2 focus:ring-blue-500 outline-none">
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div>
                        <label class="form-label text-slate-400 text-[10px] uppercase font-bold tracking-widest mb-3">Valid
                            From</label>
                        <input type="datetime-local" name="valid_from" value="{{ old('valid_from') }}"
                            class="w-full bg-slate-800 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white focus:ring-2 focus:ring-blue-500 outline-none">
                    </div>

                    <div>
                        <label class="form-label text-slate-400 text-[10px] uppercase font-bold tracking-widest mb-3">Valid
                            Until</label>
                        <input type="datetime-local" name="valid_until" value="{{ old('valid_until') }}"
                            class="w-full bg-slate-800 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white focus:ring-2 focus:ring-blue-500 outline-none">
                    </div>
                </div>

                <div>
                    <label
                        class="form-label text-slate-400 text-[10px] uppercase font-bold tracking-widest mb-4">Applicability</label>
                    <div class="flex gap-6 p-4 bg-slate-800/50 rounded-2xl border border-white/5">
                        <label class="flex items-center gap-3 cursor-pointer group">
                            <input type="radio" name="apply_to" value="products" x-model="apply_to"
                                class="w-4 h-4 text-blue-600 bg-slate-900 border-slate-700 focus:ring-0">
                            <span
                                class="text-sm font-medium text-slate-400 group-hover:text-white transition-colors">Specific
                                Products</span>
                        </label>
                        <label class="flex items-center gap-3 cursor-pointer group">
                            <input type="radio" name="apply_to" value="categories" x-model="apply_to"
                                class="w-4 h-4 text-blue-600 bg-slate-900 border-slate-700 focus:ring-0">
                            <span
                                class="text-sm font-medium text-slate-400 group-hover:text-white transition-colors">Specific
                                Categories</span>
                        </label>
                    </div>

                    <div class="mt-6 animate-in fade-in duration-300">
                        <div x-show="apply_to === 'products'">
                            <p class="text-[10px] text-slate-500 italic mb-2">Note: Select multiple by holding Ctrl/Cmd</p>
                            <select name="products[]" multiple
                                class="w-full h-64 bg-slate-800 border border-slate-700 rounded-2xl px-4 py-4 text-sm text-slate-300 focus:ring-2 focus:ring-blue-500 outline-none no-scrollbar">
                                @foreach($products as $product)
                                    <option value="{{ $product->id }}" class="py-2 px-2 rounded-lg hover:bg-slate-700">
                                        {{ $product->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div x-show="apply_to === 'categories'">
                            <p class="text-[10px] text-slate-500 italic mb-2">Note: Select multiple by holding Ctrl/Cmd</p>
                            <select name="categories[]" multiple
                                class="w-full h-64 bg-slate-800 border border-slate-700 rounded-2xl px-4 py-4 text-sm text-slate-300 focus:ring-2 focus:ring-blue-500 outline-none no-scrollbar">
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}" class="py-2 px-2 rounded-lg hover:bg-slate-700">
                                        {{ $category->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex items-center justify-end gap-4 pb-12">
                <a href="{{ route('admin.discounts.index') }}"
                    class="px-6 py-3 rounded-2xl border border-slate-700 text-slate-400 text-sm font-bold hover:bg-slate-800 transition-all">
                    Cancel
                </a>
                <button type="submit"
                    class="px-8 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl shadow-lg shadow-blue-500/20 transition-all font-bold">
                    Create Discount
                </button>
            </div>
        </form>
    </div>
@endsection