@extends('layouts.admin')

@section('page-title', 'Add New Product')

@push('styles')
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

*{font-family:'Inter',system-ui,-apple-system,sans-serif}
.product-page{display:flex;flex-direction:column;gap:24px}

/* Header */
.page-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.page-header-left{display:flex;align-items:center;gap:14px}
.page-header-icon{width:44px;height:44px;border-radius:12px;background:#f0fdf4;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.page-header-icon svg{width:22px;height:22px;color:#059669}
.page-title{font-size:22px;font-weight:700;color:#0f172a;letter-spacing:-.02em}
.page-subtitle{font-size:13px;color:#64748b;margin-top:1px}
.btn-back{display:flex;align-items:center;gap:6px;padding:9px 18px;border-radius:10px;border:1px solid #e2e8f0;background:#fff;font-size:13px;font-weight:500;color:#475569;text-decoration:none;transition:all .15s;cursor:pointer}
.btn-back:hover{background:#f8fafc;border-color:#cbd5e1;color:#334155}
.btn-back svg{width:15px;height:15px}

/* Tabs */
.tabs-bar{background:#fff;border:1px solid #e2e8f0;border-radius:14px;overflow:hidden}
.tabs-nav{display:flex;gap:0;padding:6px 8px;border-bottom:1px solid #f1f5f9;overflow-x:auto;scrollbar-width:none}
.tabs-nav::-webkit-scrollbar{display:none}
.tab-btn{padding:8px 16px;border-radius:8px;font-size:13px;font-weight:500;color:#64748b;white-space:nowrap;transition:all .15s;border:none;background:none;cursor:pointer;flex-shrink:0}
.tab-btn:hover{color:#334155;background:#f8fafc}
.tab-btn.active{color:#6366f1;background:#eef2ff;font-weight:600}

/* Grid */
.product-grid{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start}

/* Cards */
.p-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;overflow:hidden}
.p-card-head{padding:18px 22px;border-bottom:1px solid #f1f5f9}
.p-card-title{font-size:15px;font-weight:600;color:#0f172a;letter-spacing:-.01em}
.p-card-body{padding:20px 22px}

/* Form */
.form-group{margin-bottom:18px}
.form-group:last-child{margin-bottom:0}
.form-label{display:block;font-size:12px;font-weight:600;color:#374151;margin-bottom:6px;letter-spacing:.02em;text-transform:uppercase}
.form-label .req{color:#ef4444;margin-left:2px}
.form-input{width:100%;padding:10px 14px;border:1px solid #e2e8f0;border-radius:10px;font-size:14px;color:#0f172a;background:#fff;transition:all .15s;outline:none}
.form-input:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.1)}
.form-input::placeholder{color:#9ca3af}
.form-input.error{border-color:#ef4444}
.form-error{font-size:12px;color:#ef4444;margin-top:4px}
.form-hint{font-size:12px;color:#94a3b8;margin-top:4px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
textarea.form-input{resize:vertical}
select.form-input{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}

/* Toggle */
.toggle-row{display:flex;align-items:center;gap:10px;padding:10px 0}
.toggle-switch{position:relative;width:42px;height:24px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;inset:0;background:#e2e8f0;border-radius:99px;transition:.2s}
.toggle-slider::before{content:'';position:absolute;width:18px;height:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.toggle-switch input:checked+.toggle-slider{background:#6366f1}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(18px)}
.toggle-label{font-size:13px;color:#374151;font-weight:500}

/* Upload */
.upload-zone{border:2px dashed #e2e8f0;border-radius:12px;padding:32px 20px;text-align:center;transition:all .15s;cursor:pointer}
.upload-zone:hover{border-color:#6366f1;background:#fafbff}
.upload-zone svg{width:36px;height:36px;color:#cbd5e1;margin:0 auto 10px}
.upload-zone p{font-size:13px;color:#64748b;font-weight:500}
.upload-zone small{font-size:11px;color:#94a3b8;display:block;margin-top:3px}
.upload-zone input{display:none}

/* Section divider */
.section-divider{border:none;border-top:1px solid #f1f5f9;margin:24px 0}
.section-head{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.section-head svg{width:18px;height:18px;color:#6366f1}
.section-title{font-size:14px;font-weight:600;color:#0f172a}

/* Warehouse cards */
.warehouse-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.warehouse-card{position:relative;border:2px solid #e2e8f0;border-radius:12px;padding:16px;cursor:pointer;transition:all .15s}
.warehouse-card:hover{border-color:#a5b4fc}
.warehouse-card:has(input:checked){border-color:#6366f1;background:#f5f3ff}
.warehouse-card input{position:absolute;opacity:0;pointer-events:none}
.wc-flag{font-size:24px;margin-bottom:6px}
.wc-title{font-size:13px;font-weight:600;color:#0f172a}
.wc-desc{font-size:11px;color:#64748b;margin-top:2px}

/* Sidebar cards */
.sidebar-card{position:sticky;top:96px}

/* Buttons */
.btn-primary{width:100%;padding:11px 20px;border-radius:10px;background:#6366f1;color:#fff;font-size:14px;font-weight:600;border:none;cursor:pointer;transition:all .15s;text-align:center}
.btn-primary:hover{background:#4f46e5;box-shadow:0 4px 12px rgba(99,102,241,.3)}
.btn-secondary{width:100%;padding:11px 20px;border-radius:10px;background:#fff;color:#475569;font-size:14px;font-weight:500;border:1px solid #e2e8f0;cursor:pointer;transition:all .15s;text-align:center}
.btn-secondary:hover{background:#f8fafc;border-color:#cbd5e1}
.btn-group{display:flex;flex-direction:column;gap:10px}

/* Chip */
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;font-size:11px;font-weight:500}
.chip-green{background:#f0fdf4;color:#166534}
.chip-amber{background:#fffbeb;color:#92400e}

/* Input group */
.input-group{display:flex;gap:8px}
.input-group .form-input{flex:1}
.input-group-btn{padding:10px 14px;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc;color:#64748b;cursor:pointer;transition:all .15s;display:flex;align-items:center}
.input-group-btn:hover{background:#f1f5f9;color:#374151}

/* Status select */
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.status-dot-draft{background:#9ca3af}
.status-dot-pending{background:#eab308}
.status-dot-published{background:#22c55e}
.status-dot-rejected{background:#ef4444}

@media(max-width:1023px){
    .product-grid{grid-template-columns:1fr}
    .sidebar-card{position:static}
    .form-row{grid-template-columns:1fr}
    .warehouse-options{grid-template-columns:1fr}
}
</style>
@endpush

@section('content')
<div class="product-page">

    {{-- Page Header --}}
    <div class="page-header">
        <div class="page-header-left">
            <div class="page-header-icon">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
            </div>
            <div>
                <div class="page-title">Add New Product</div>
                <div class="page-subtitle">Create a product listing with full details</div>
            </div>
        </div>
        <a href="{{ route('admin.products.index') }}" class="btn-back">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
            Back to Products
        </a>
    </div>

    <form action="{{ route('admin.products.store') }}" method="POST" enctype="multipart/form-data">
        @csrf

        {{-- Tabs --}}
        <div class="tabs-bar">
            <nav class="tabs-nav" id="product-tabs">
                <button type="button" data-tab="product-info" class="tab-btn active">Product Info</button>
                <button type="button" data-tab="images-videos" class="tab-btn">Images & Video</button>
                <button type="button" data-tab="price-stock" class="tab-btn">Price & Stock</button>
                <button type="button" data-tab="description" class="tab-btn">Description</button>
                <button type="button" data-tab="shipping" class="tab-btn">Shipping</button>
                <button type="button" data-tab="others" class="tab-btn">Options</button>
                <button type="button" data-tab="seo" class="tab-btn">SEO</button>
            </nav>
        </div>

        <div class="product-grid">
            <div class="space-y-6">

                {{-- Product Info --}}
                <div id="tab-product-info" class="tab-content p-card">
                    <div class="p-card-head"><div class="p-card-title">Product Information</div></div>
                    <div class="p-card-body">
                        <div class="form-group">
                            <label class="form-label">Product Name <span class="req">*</span></label>
                            <input type="text" name="name" value="{{ old('name') }}" class="form-input @error('name') error @enderror" placeholder="Enter product name" required>
                            @error('name') <p class="form-error">{{ $message }}</p> @enderror
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">Category <span class="req">*</span></label>
                                <select name="category_id" class="form-input @error('category_id') error @enderror" required>
                                    <option value="">Select Category</option>
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                                    @endforeach
                                </select>
                                @error('category_id') <p class="form-error">{{ $message }}</p> @enderror
                            </div>
                            <div class="form-group">
                                <label class="form-label">Brand</label>
                                <input type="text" name="brand" value="{{ old('brand') }}" class="form-input" placeholder="Brand name">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">Unit</label>
                                <input type="text" name="unit" value="{{ old('unit', 'pc') }}" class="form-input" placeholder="e.g. kg, pc, box">
                            </div>
                            <div class="form-group">
                                <label class="form-label">Min Order Qty</label>
                                <input type="number" name="min_order_qty" value="{{ old('min_order_qty', 1) }}" class="form-input" min="1">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Barcode</label>
                            <div class="input-group">
                                <input type="text" name="barcode" value="{{ old('barcode') }}" class="form-input" placeholder="Enter barcode">
                                <button type="button" class="input-group-btn" title="Generate barcode">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                                </button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Tags</label>
                            <input type="text" name="tags" value="{{ old('tags') }}" class="form-input" placeholder="Comma separated tags">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Slug</label>
                            <input type="text" name="slug" value="{{ old('slug') }}" class="form-input" placeholder="product-url-slug">
                        </div>
                        <div class="toggle-row">
                            <label class="toggle-switch">
                                <input type="hidden" name="is_digital" value="0">
                                <input type="checkbox" name="is_digital" value="1" id="is_digital" {{ old('is_digital') ? 'checked' : '' }}>
                                <span class="toggle-slider"></span>
                            </label>
                            <span class="toggle-label">Digital Product (no shipping required)</span>
                        </div>
                    </div>
                </div>

                {{-- Images & Video --}}
                <div id="tab-images-videos" class="tab-content p-card hidden">
                    <div class="p-card-head"><div class="p-card-title">Images & Video</div></div>
                    <div class="p-card-body">
                        <div class="form-group">
                            <label class="form-label">Thumbnail</label>
                            <label class="upload-zone">
                                <input type="file" name="thumbnail" accept="image/*" id="thumbnail-input">
                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                <p>Click to upload thumbnail</p>
                                <small>PNG, JPG up to 2MB · 210×205px recommended</small>
                            </label>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Gallery Images</label>
                            <label class="upload-zone">
                                <input type="file" name="images[]" accept="image/*" multiple id="gallery-input">
                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                <p>Upload gallery images</p>
                                <small>Multiple files allowed · 320×320px recommended</small>
                            </label>
                        </div>
                        <hr class="section-divider">
                        <div class="form-group">
                            <label class="form-label">Video Provider</label>
                            <select name="video_provider" class="form-input">
                                <option value="">None</option>
                                <option value="youtube">YouTube</option>
                                <option value="vimeo">Vimeo</option>
                                <option value="mp4">MP4 Upload</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Video URL</label>
                            <input type="url" name="video_url" value="{{ old('video_url') }}" class="form-input" placeholder="https://youtube.com/watch?v=...">
                        </div>
                    </div>
                </div>

                {{-- Price & Stock --}}
                <div id="tab-price-stock" class="tab-content p-card hidden">
                    <div class="p-card-head"><div class="p-card-title">Pricing & Inventory</div></div>
                    <div class="p-card-body">
                        <div class="form-group">
                            <label class="form-label">Unit Price <span class="req">*</span></label>
                            <input type="number" step="0.01" name="price" value="{{ old('price') }}" class="form-input @error('price') error @enderror" placeholder="0.00" required>
                            @error('price') <p class="form-error">{{ $message }}</p> @enderror
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">Compare Price</label>
                                <input type="number" step="0.01" name="compare_price" value="{{ old('compare_price') }}" class="form-input" placeholder="Original price">
                            </div>
                            <div class="form-group">
                                <label class="form-label">SKU</label>
                                <div class="input-group">
                                    <input type="text" name="sku" value="{{ old('sku') }}" class="form-input @error('sku') error @enderror" placeholder="Product SKU">
                                    <button type="button" class="input-group-btn">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                                    </button>
                                </div>
                                @error('sku') <p class="form-error">{{ $message }}</p> @enderror
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">Stock Qty <span class="req">*</span></label>
                                <input type="number" name="stock_quantity" value="{{ old('stock_quantity', 0) }}" class="form-input @error('stock_quantity') error @enderror" required>
                                @error('stock_quantity') <p class="form-error">{{ $message }}</p> @enderror
                            </div>
                            <div class="form-group">
                                <label class="form-label">Low Stock Alert</label>
                                <input type="number" name="low_stock_threshold" value="{{ old('low_stock_threshold', 5) }}" class="form-input" placeholder="Alert below this">
                            </div>
                        </div>

                        <hr class="section-divider">

                        <div class="section-head">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                            <span class="section-title">Warehouse</span>
                        </div>
                        <div class="warehouse-options">
                            <label class="warehouse-card">
                                <input type="radio" name="warehouse" value="ghana" checked>
                                <div class="wc-flag">🇬🇭</div>
                                <div class="wc-title">Ghana</div>
                                <div class="wc-desc">Local shipping · Fast delivery</div>
                            </label>
                            <label class="warehouse-card">
                                <input type="radio" name="warehouse" value="china">
                                <div class="wc-flag">🇨🇳</div>
                                <div class="wc-title">China</div>
                                <div class="wc-desc">Freight required · ~21 days</div>
                            </label>
                        </div>
                        <div id="china-freight-days-wrap" class="hidden" style="margin-top:12px">
                            <div class="form-group">
                                <label class="form-label">Freight Days to Ghana</label>
                                <input type="number" name="china_freight_days" value="{{ old('china_freight_days', 21) }}" class="form-input" placeholder="21">
                                <p class="form-hint">Working days for freight to arrive in Ghana</p>
                            </div>
                        </div>

                        <hr class="section-divider">

                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">Discount Type</label>
                                <select name="discount_type" class="form-input">
                                    <option value="">None</option>
                                    <option value="flat">Flat Amount</option>
                                    <option value="percentage">Percentage</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Discount Value</label>
                                <input type="number" step="0.01" name="discount" value="{{ old('discount') }}" class="form-input" placeholder="0.00">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Tax</label>
                            <select name="tax_id" class="form-input">
                                <option value="">No Tax</option>
                                <option value="1">GST (18%)</option>
                                <option value="2">VAT (15%)</option>
                            </select>
                        </div>

                        <hr class="section-divider">

                        <div class="section-head">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color:#d97706"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                            <span class="section-title">Wholesale</span>
                        </div>
                        <div class="toggle-row">
                            <label class="toggle-switch">
                                <input type="hidden" name="is_wholesale" value="0">
                                <input type="checkbox" name="is_wholesale" value="1" id="is_wholesale" {{ old('is_wholesale') ? 'checked' : '' }}>
                                <span class="toggle-slider"></span>
                            </label>
                            <span class="toggle-label">Enable wholesale pricing</span>
                        </div>
                        <div id="wholesale-fields" class="space-y-4 {{ old('is_wholesale') ? '' : 'hidden' }}">
                            <div class="form-row">
                                <div class="form-group">
                                    <label class="form-label">Wholesale Price</label>
                                    <input type="number" step="0.01" name="wholesale_price" value="{{ old('wholesale_price') }}" class="form-input" placeholder="Base wholesale price">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Min Wholesale Qty</label>
                                    <input type="number" name="min_wholesale_quantity" value="{{ old('min_wholesale_quantity', 10) }}" class="form-input" placeholder="10">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Pricing Tiers (JSON)</label>
                                <textarea name="wholesale_tiers" rows="3" class="form-input" style="font-family:'JetBrains Mono',monospace;font-size:12px" placeholder='[{"min_qty":10,"price":8.99},{"min_qty":50,"price":7.99}]'>{{ old('wholesale_tiers') }}</textarea>
                                <p class="form-hint">Array of {min_qty, price} objects</p>
                            </div>
                        </div>

                        <hr class="section-divider">

                        <div class="section-head">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color:#ea580c"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z"/></svg>
                            <span class="section-title">Flash Sale</span>
                        </div>
                        <div class="toggle-row">
                            <label class="toggle-switch">
                                <input type="hidden" name="is_flash_sale" value="0">
                                <input type="checkbox" name="is_flash_sale" value="1" id="is_flash_sale" {{ old('is_flash_sale') ? 'checked' : '' }}>
                                <span class="toggle-slider"></span>
                            </label>
                            <span class="toggle-label">Enable flash sale</span>
                        </div>
                        <div id="flash-sale-fields" class="space-y-4 {{ old('is_flash_sale') ? '' : 'hidden' }}">
                            <div class="form-group">
                                <label class="form-label">Flash Sale Price</label>
                                <input type="number" step="0.01" name="flash_sale_price" value="{{ old('flash_sale_price') }}" class="form-input" placeholder="Special price">
                            </div>
                            <div class="form-row">
                                <div class="form-group">
                                    <label class="form-label">Start</label>
                                    <input type="datetime-local" name="flash_sale_starts_at" value="{{ old('flash_sale_starts_at') }}" class="form-input">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">End</label>
                                    <input type="datetime-local" name="flash_sale_ends_at" value="{{ old('flash_sale_ends_at') }}" class="form-input">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Description --}}
                <div id="tab-description" class="tab-content p-card hidden">
                    <div class="p-card-head"><div class="p-card-title">Description & Specs</div></div>
                    <div class="p-card-body">
                        <div class="form-group">
                            <label class="form-label">Short Description</label>
                            <textarea name="short_description" rows="3" class="form-input" placeholder="Brief product summary (max 200 chars)">{{ old('short_description') }}</textarea>
                            <p class="form-hint"><span id="char-count">200</span> characters remaining</p>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Full Description</label>
                            <textarea name="description" rows="10" class="form-input" placeholder="Detailed product description">{{ old('description') }}</textarea>
                        </div>
                        <div class="form-group">
                            <label class="form-label">PDF Specification</label>
                            <label class="upload-zone">
                                <input type="file" name="pdf_spec" accept=".pdf" id="pdf-input">
                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                                <p>Upload PDF spec</p>
                                <small>PDF only</small>
                            </label>
                        </div>
                    </div>
                </div>

                {{-- Shipping --}}
                <div id="tab-shipping" class="tab-content p-card hidden">
                    <div class="p-card-head"><div class="p-card-title">Shipping</div></div>
                    <div class="p-card-body">
                        <div class="toggle-row">
                            <label class="toggle-switch">
                                <input type="hidden" name="cash_on_delivery" value="0">
                                <input type="checkbox" name="cash_on_delivery" value="1" id="cod" {{ old('cash_on_delivery') ? 'checked' : '' }}>
                                <span class="toggle-slider"></span>
                            </label>
                            <span class="toggle-label">Cash on Delivery</span>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Shipping Days</label>
                            <input type="number" name="shipping_days" value="{{ old('shipping_days', 3) }}" class="form-input" placeholder="Days to deliver">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Weight (kg)</label>
                            <input type="number" step="0.01" name="weight" value="{{ old('weight') }}" class="form-input" placeholder="0.00">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Dimensions (L × W × H cm)</label>
                            <div class="form-row" style="grid-template-columns:1fr 1fr 1fr">
                                <input type="number" step="0.1" name="length" value="{{ old('length') }}" class="form-input" placeholder="Length">
                                <input type="number" step="0.1" name="width" value="{{ old('width') }}" class="form-input" placeholder="Width">
                                <input type="number" step="0.1" name="height" value="{{ old('height') }}" class="form-input" placeholder="Height">
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Options --}}
                <div id="tab-others" class="tab-content p-card hidden">
                    <div class="p-card-head"><div class="p-card-title">Product Options</div></div>
                    <div class="p-card-body">
                        <div class="toggle-row">
                            <label class="toggle-switch">
                                <input type="hidden" name="is_refundable" value="0">
                                <input type="checkbox" name="is_refundable" value="1" id="refundable" {{ old('is_refundable') ? 'checked' : '' }}>
                                <span class="toggle-slider"></span>
                            </label>
                            <span class="toggle-label">Refundable Product</span>
                        </div>
                        <div class="toggle-row">
                            <label class="toggle-switch">
                                <input type="hidden" name="is_featured" value="0">
                                <input type="checkbox" name="is_featured" value="1" id="featured" {{ old('is_featured') ? 'checked' : '' }}>
                                <span class="toggle-slider"></span>
                            </label>
                            <span class="toggle-label">Featured Product</span>
                        </div>
                        <div class="toggle-row">
                            <label class="toggle-switch">
                                <input type="hidden" name="is_todays_deal" value="0">
                                <input type="checkbox" name="is_todays_deal" value="1" id="todays_deal" {{ old('is_todays_deal') ? 'checked' : '' }}>
                                <span class="toggle-slider"></span>
                            </label>
                            <span class="toggle-label">Today's Deal</span>
                        </div>
                        <div class="form-group" style="margin-top:12px">
                            <label class="form-label">Assign Vendor</label>
                            <select name="vendor_id" class="form-input">
                                <option value="">Admin Product</option>
                                @foreach($vendors as $vendor)
                                    <option value="{{ $vendor->id }}" {{ old('vendor_id') == $vendor->id ? 'selected' : '' }}>{{ $vendor->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Product Type</label>
                            <select name="type" class="form-input">
                                <option value="">Standard</option>
                                <option value="catalog" {{ old('type') == 'catalog' ? 'selected' : '' }}>Catalog</option>
                                <option value="classified" {{ old('type') == 'classified' ? 'selected' : '' }}>Classified</option>
                            </select>
                        </div>
                    </div>
                </div>

                {{-- SEO --}}
                <div id="tab-seo" class="tab-content p-card hidden">
                    <div class="p-card-head"><div class="p-card-title">SEO Settings</div></div>
                    <div class="p-card-body">
                        <div class="form-group">
                            <label class="form-label">Meta Title</label>
                            <input type="text" name="meta_title" value="{{ old('meta_title') }}" class="form-input" placeholder="SEO title">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Meta Description</label>
                            <textarea name="meta_description" rows="4" class="form-input" placeholder="SEO description">{{ old('meta_description') }}</textarea>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Meta Keywords</label>
                            <input type="text" name="meta_keywords" value="{{ old('meta_keywords') }}" class="form-input" placeholder="keyword1, keyword2">
                        </div>
                        <div class="form-group">
                            <label class="form-label">OG Image</label>
                            <label class="upload-zone">
                                <input type="file" name="og_image" accept="image/*" id="og-image-input">
                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                <p>Upload OG image</p>
                                <small>1200×630px recommended</small>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Sidebar --}}
            <div class="space-y-6">
                <div class="p-card sidebar-card">
                    <div class="p-card-head"><div class="p-card-title">Status</div></div>
                    <div class="p-card-body">
                        <div class="form-group">
                            <label class="form-label">Product Status</label>
                            <select name="status" class="form-input @error('status') error @enderror" required>
                                <option value="draft" {{ old('status') == 'draft' ? 'selected' : '' }}>Draft</option>
                                <option value="pending" {{ old('status') == 'pending' ? 'selected' : '' }}>Pending Review</option>
                                <option value="published" {{ old('status') == 'published' ? 'selected' : '' }}>Published</option>
                                <option value="rejected" {{ old('status') == 'rejected' ? 'selected' : '' }}>Rejected</option>
                            </select>
                            @error('status') <p class="form-error">{{ $message }}</p> @enderror
                        </div>
                    </div>
                </div>

                <div class="p-card sidebar-card">
                    <div class="p-card-head"><div class="p-card-title">Actions</div></div>
                    <div class="p-card-body">
                        <div class="btn-group">
                            <button type="submit" name="action" value="publish" class="btn-primary">Save & Publish</button>
                            <button type="submit" name="action" value="draft" class="btn-secondary">Save as Draft</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const tabs = document.querySelectorAll('.tab-btn');
    const contents = document.querySelectorAll('.tab-content');

    tabs.forEach(tab => {
        tab.addEventListener('click', function() {
            const target = this.dataset.tab;
            tabs.forEach(t => t.classList.remove('active'));
            this.classList.add('active');
            contents.forEach(c => c.classList.add('hidden'));
            document.getElementById('tab-' + target).classList.remove('hidden');
        });
    });

    const shortDesc = document.querySelector('textarea[name="short_description"]');
    const charCount = document.getElementById('char-count');
    if (shortDesc && charCount) {
        shortDesc.addEventListener('input', function() {
            charCount.textContent = Math.max(0, 200 - this.value.length);
        });
    }

    function toggle(el, targetId) {
        const target = document.getElementById(targetId);
        if (target) el.addEventListener('change', function() { target.classList.toggle('hidden', !this.checked); });
    }
    toggle(document.getElementById('is_wholesale'), 'wholesale-fields');
    toggle(document.getElementById('is_flash_sale'), 'flash-sale-fields');

    const chinaWrap = document.getElementById('china-freight-days-wrap');
    if (chinaWrap) {
        document.querySelectorAll('input[name="warehouse"]').forEach(r => {
            r.addEventListener('change', function() {
                chinaWrap.classList.toggle('hidden', this.value !== 'china');
            });
        });
        if (document.querySelector('input[name="warehouse"]:checked')?.value === 'china') chinaWrap.classList.remove('hidden');
    }
});
</script>
@endpush
@endsection