@extends('layouts.admin')

@section('title', 'Edit 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">Edit {{ $product->name }}</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.update', $product) }}" method="POST" enctype="multipart/form-data" class="space-y-6 text-xs"
          x-data="{
              mrp: {{ (float)$product->original_price }},
              discountType: '{{ $product->discount_type }}',
              discountValue: {{ (float)$product->discount_value }},
              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
        @method('PUT')

        {{-- ===== 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', $product->name) }}" required 
                       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">
                        @foreach($categories as $cat)
                            <option value="{{ $cat->id }}" {{ old('category_id', $product->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', $product->brand) }}" 
                           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', $product->sku) }}" 
                           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', $product->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" 
                          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', $product->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', $product->stock) }}" 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" {{ old('tax_type', $product->tax_type) === 'percentage' ? 'selected' : '' }}>Percentage (%) — GST</option>
                        <option value="flat" {{ old('tax_type', $product->tax_type) === 'flat' ? 'selected' : '' }}>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', $product->tax_value) }}" 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', implode(', ', $product->sizes ?? [])) }}" 
                       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', implode(', ', $product->colors ?? [])) }}" 
                       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</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 ({{ $product->images->count() }}/4)</h2>

            @if($product->images->isNotEmpty())
                <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                    @foreach($product->images as $img)
                        <div class="relative rounded-2xl bg-ink border border-white/15 overflow-hidden p-1.5 {{ $img->is_primary ? 'ring-2 ring-brand-light' : '' }}">
                            <div class="aspect-square rounded-xl overflow-hidden mb-1.5 bg-slate-900">
                                <img src="{{ $img->url }}" class="w-full h-full object-cover">
                            </div>
                            <div class="flex items-center justify-between text-[10px] text-slate-300 px-1">
                                <label class="flex items-center gap-1 cursor-pointer">
                                    <input type="radio" name="primary_image_id" value="{{ $img->id }}" {{ $img->is_primary ? 'checked' : '' }}> Primary
                                </label>
                                <label class="flex items-center gap-1 text-rose-400 cursor-pointer">
                                    <input type="checkbox" name="remove_images[]" value="{{ $img->id }}"> Del
                                </label>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif

            @if($product->images->count() < 4)
                <div class="pt-2">
                    <label class="font-bold text-slate-300 block mb-1.5">Add More Photos (up to {{ 4 - $product->images->count() }} more)</label>
                    <input type="file" name="images[]" accept="image/*" multiple 
                           class="w-full bg-ink border border-white/15 rounded-xl px-3.5 py-2 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">
                </div>
            @endif
        </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', $product->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" {{ old('is_active', $product->is_active) ? '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">
            Update & Save Changes
        </button>
    </form>
</div>

@endsection