@extends('layouts.admin')

@section('title', 'Add Footwear Product')

@section('content')

<div class="max-w-3xl space-y-6">
    <div class="flex items-center gap-2 text-xs text-slate-400 mb-1">
        <a href="{{ route('admin.dashboard') }}" class="hover:text-brand-light">Dashboard</a>
        <span>/</span>
        <a href="{{ route('admin.products.index') }}" class="hover:text-brand-light">Products</a>
        <span>/</span>
        <span class="text-brand-light font-bold">Add New Product</span>
    </div>

    @if($errors->any())
        <div class="bg-rose-950/80 border border-rose-500/30 text-rose-300 text-xs rounded-2xl p-4 space-y-1 shadow-lg">
            @foreach($errors->all() as $error)<div>• {{ $error }}</div>@endforeach
        </div>
    @endif

    <form action="{{ route('admin.products.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6 text-xs"
          x-data="{
              mrp: 4999,
              discountType: 'percentage',
              discountValue: 20,
              get sellingPrice() {
                  if(this.discountType === 'percentage') {
                      return Math.max(0, this.mrp - (this.mrp * this.discountValue / 100)).toFixed(2);
                  }
                  return Math.max(0, this.mrp - this.discountValue).toFixed(2);
              }
          }">
        @csrf

        {{-- ===== Basic info ===== --}}
        <div class="bg-ink-card rounded-3xl border border-white/10 p-6 space-y-4 shadow-xl">
            <h2 class="font-display font-bold text-sm text-white border-b border-white/10 pb-3">1. Basic Information</h2>

            <div>
                <label class="font-bold text-slate-300 block mb-1.5">Product Title / Model Name *</label>
                <input type="text" name="name" value="{{ old('name') }}" required placeholder="e.g. Velocity Air Runner X"
                       class="w-full bg-ink border border-white/15 rounded-xl px-3.5 py-2.5 text-white placeholder-slate-500 focus:ring-2 focus:ring-brand-light focus:outline-none">
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="font-bold text-slate-300 block mb-1.5">Footwear Category *</label>
                    <select name="category_id" required class="w-full bg-ink border border-white/15 rounded-xl px-3.5 py-2.5 text-white focus:ring-2 focus:ring-brand-light focus:outline-none">
                        <option value="">Select category</option>
                        @foreach($categories as $cat)
                            <option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="font-bold text-slate-300 block mb-1.5">Brand / Collection</label>
                    <input type="text" name="brand" value="{{ old('brand') }}" placeholder="e.g. Nova Performance, UrbanFit"
                           class="w-full bg-ink border border-white/15 rounded-xl px-3.5 py-2.5 text-white placeholder-slate-500 focus:ring-2 focus:ring-brand-light focus:outline-none">
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="font-bold text-slate-300 block mb-1.5">SKU / Product Code</label>
                    <input type="text" name="sku" value="{{ old('sku') }}" placeholder="e.g. 2BH-SNK-001"
                           class="w-full bg-ink border border-white/15 rounded-xl px-3.5 py-2.5 text-white placeholder-slate-500 font-mono focus:ring-2 focus:ring-brand-light focus:outline-none">
                </div>
                <div>
                    <label class="font-bold text-slate-300 block mb-1.5">Target Gender</label>
                    <select name="gender" class="w-full bg-ink border border-white/15 rounded-xl px-3.5 py-2.5 text-white focus:ring-2 focus:ring-brand-light focus:outline-none">
                        <option value="">Unisex / General</option>
                        @foreach(['Men','Women','Unisex','Kids'] as $g)
                            <option value="{{ $g }}" {{ old('gender') === $g ? 'selected' : '' }}>{{ $g }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div>
                <label class="font-bold text-slate-300 block mb-1.5">Detailed Description & Features</label>
                <textarea name="description" rows="4" placeholder="Highlight sole cushioning, upper materials, and performance features..."
                          class="w-full bg-ink border border-white/15 rounded-xl px-3.5 py-2.5 text-white placeholder-slate-500 focus:ring-2 focus:ring-brand-light focus:outline-none">{{ old('description') }}</textarea>
            </div>
        </div>

        {{-- ===== Pricing & Discount Calculator ===== --}}
        <div class="bg-ink-card rounded-3xl border border-white/10 p-6 space-y-4 shadow-xl">
            <div class="flex items-center justify-between border-b border-white/10 pb-3">
                <h2 class="font-display font-bold text-sm text-white">2. Pricing, Discount & Taxes</h2>
                <div class="text-right">
                    <span class="text-[10px] text-slate-400">Calculated Selling Price: </span>
                    <span class="font-heading font-black text-sm text-brand-light">₹<span x-text="sellingPrice"></span></span>
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="font-bold text-slate-300 block mb-1.5">Original MRP (₹) *</label>
                    <input type="number" step="0.01" name="original_price" x-model.number="mrp" required 
                           class="w-full bg-ink border border-white/15 rounded-xl px-3.5 py-2.5 text-white focus:ring-2 focus:ring-brand-light focus:outline-none">
                </div>
                <div>
                    <label class="font-bold text-slate-300 block mb-1.5">Stock Quantity in Hub *</label>
                    <input type="number" name="stock" value="{{ old('stock', 25) }}" required 
                           class="w-full bg-ink border border-white/15 rounded-xl px-3.5 py-2.5 text-white focus:ring-2 focus:ring-brand-light focus:outline-none">
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="font-bold text-slate-300 block mb-1.5">Discount Type</label>
                    <select name="discount_type" x-model="discountType" class="w-full bg-ink border border-white/15 rounded-xl px-3.5 py-2.5 text-white focus:ring-2 focus:ring-brand-light focus:outline-none">
                        <option value="percentage">Percentage (%)</option>
                        <option value="flat">Flat Amount (₹)</option>
                    </select>
                </div>
                <div>
                    <label class="font-bold text-slate-300 block mb-1.5">Discount Value *</label>
                    <input type="number" step="0.01" name="discount_value" x-model.number="discountValue" required 
                           class="w-full bg-ink border border-white/15 rounded-xl px-3.5 py-2.5 text-white focus:ring-2 focus:ring-brand-light focus:outline-none">
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="font-bold text-slate-300 block mb-1.5">Tax Type</label>
                    <select name="tax_type" class="w-full bg-ink border border-white/15 rounded-xl px-3.5 py-2.5 text-white focus:ring-2 focus:ring-brand-light focus:outline-none">
                        <option value="percentage">Percentage (%) — GST</option>
                        <option value="flat">Flat Amount (₹)</option>
                    </select>
                </div>
                <div>
                    <label class="font-bold text-slate-300 block mb-1.5">Tax Value (%) *</label>
                    <input type="number" step="0.01" name="tax_value" value="{{ old('tax_value', 18) }}" required 
                           class="w-full bg-ink border border-white/15 rounded-xl px-3.5 py-2.5 text-white focus:ring-2 focus:ring-brand-light focus:outline-none">
                </div>
            </div>
        </div>

        {{-- ===== Sizes & Colors ===== --}}
        <div class="bg-ink-card rounded-3xl border border-white/10 p-6 space-y-4 shadow-xl">
            <h2 class="font-display font-bold text-sm text-white border-b border-white/10 pb-3">3. Sizes & Colors</h2>

            <div>
                <label class="font-bold text-slate-300 block mb-1.5">Available Footwear Sizes</label>
                <input type="text" name="sizes_raw" value="{{ old('sizes_raw', 'UK 7, UK 8, UK 9, UK 10, UK 11') }}" placeholder="UK 6, UK 7, UK 8, UK 9, UK 10"
                       class="w-full bg-ink border border-white/15 rounded-xl px-3.5 py-2.5 text-white placeholder-slate-500 focus:ring-2 focus:ring-brand-light focus:outline-none">
                <p class="text-[11px] text-slate-400 mt-1">Comma-separated sizes (e.g. UK 7, UK 8, UK 9, UK 10)</p>
            </div>

            <div>
                <label class="font-bold text-slate-300 block mb-1.5">Available Colorways</label>
                <input type="text" name="colors_raw" value="{{ old('colors_raw', 'Royal Blue, Electric Cyan, Black') }}" placeholder="Royal Blue, Black, White"
                       class="w-full bg-ink border border-white/15 rounded-xl px-3.5 py-2.5 text-white placeholder-slate-500 focus:ring-2 focus:ring-brand-light focus:outline-none">
                <p class="text-[11px] text-slate-400 mt-1">Comma-separated colors (e.g. Royal Blue, Midnight Black, Ice White)</p>
            </div>
        </div>

        {{-- ===== Product Images ===== --}}
        <div class="bg-ink-card rounded-3xl border border-white/10 p-6 space-y-4 shadow-xl">
            <h2 class="font-display font-bold text-sm text-white border-b border-white/10 pb-3">4. Product Images (Up to 4)</h2>
            <input type="file" name="images[]" accept="image/*" multiple 
                   class="w-full bg-ink border border-white/15 rounded-xl px-3.5 py-2.5 text-xs text-slate-300 file:mr-4 file:py-1 file:px-3 file:rounded-full file:border-0 file:text-xs file:font-semibold file:bg-brand file:text-white hover:file:bg-brand-hover">
            <p class="text-[11px] text-slate-400">First image will be the primary catalog card thumbnail; up to 4 images for the interactive PDP gallery.</p>
        </div>

        {{-- ===== Toggles ===== --}}
        <div class="flex items-center gap-6 p-4 bg-ink-card rounded-2xl border border-white/10">
            <label class="flex items-center gap-2.5 cursor-pointer">
                <input type="checkbox" name="is_featured" value="1" {{ old('is_featured') ? 'checked' : '' }} class="rounded bg-ink border-white/20 text-brand focus:ring-brand">
                <span class="font-semibold text-white">Feature in Homepage Slider</span>
            </label>
            <label class="flex items-center gap-2.5 cursor-pointer">
                <input type="checkbox" name="is_active" value="1" checked class="rounded bg-ink border-white/20 text-brand focus:ring-brand">
                <span class="font-semibold text-white">Active (Visible to Storefront)</span>
            </label>
        </div>

        <button type="submit" class="w-full bg-gradient-to-r from-brand to-brand-hover hover:from-brand-hover hover:to-brand text-white font-bold py-3.5 rounded-full text-xs shadow-glow hover:shadow-glow-lg transition">
            Save & Publish Product
        </button>
    </form>
</div>

@endsection