@extends('layouts.admin')

@section('page-title', 'Edit Product')

@section('content')
<div class="royal-card overflow-hidden max-w-4xl">
    <div class="p-6 border-b border-gray-200">
        <h3 class="text-lg font-semibold text-gray-900">Edit Product</h3>
        <p class="text-sm text-gray-500 mt-1">Update product details</p>
    </div>
    <form action="{{ route('admin.products.update', $product) }}" method="POST" class="p-6 space-y-6">
        @csrf
        @method('PUT')
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="input-label">Product Name</label>
                <input type="text" name="name" value="{{ old('name', $product->name) }}" class="input-field @error('name') border-red-500 @enderror" required>
                @error('name') <p class="input-error">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="input-label">SKU</label>
                <input type="text" name="sku" value="{{ old('sku', $product->sku) }}" class="input-field @error('sku') border-red-500 @enderror">
                @error('sku') <p class="input-error">{{ $message }}</p> @enderror
            </div>
        </div>

        <div>
            <label class="input-label">Description</label>
            <textarea name="description" rows="4" class="input-field @error('description') border-red-500 @enderror">{{ old('description', $product->description) }}</textarea>
            @error('description') <p class="input-error">{{ $message }}</p> @enderror
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
                <label class="input-label">Price</label>
                <input type="number" step="0.01" name="price" value="{{ old('price', $product->price) }}" class="input-field @error('price') border-red-500 @enderror" required>
                @error('price') <p class="input-error">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="input-label">Compare Price</label>
                <input type="number" step="0.01" name="compare_price" value="{{ old('compare_price', $product->compare_price) }}" class="input-field">
            </div>
            <div>
                <label class="input-label">Stock Quantity</label>
                <input type="number" name="stock_quantity" value="{{ old('stock_quantity', $product->stock_quantity) }}" class="input-field @error('stock_quantity') border-red-500 @enderror" required>
                @error('stock_quantity') <p class="input-error">{{ $message }}</p> @enderror
            </div>
        </div>

        <div class="border-t border-gray-200 pt-6">
            <h4 class="text-sm font-semibold text-gray-900 mb-4 flex items-center gap-2">
                <svg class="w-5 h-5 text-indigo-600" 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>
                Warehouse Location
            </h4>
            <div class="space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <label class="relative flex items-start gap-3 p-4 border-2 rounded-xl cursor-pointer transition hover:border-indigo-300 has-[:checked]:border-indigo-500 has-[:checked]:bg-indigo-50">
                        <input type="radio" name="warehouse" value="ghana" {{ old('warehouse', $product->warehouse ?? 'ghana') === 'ghana' ? 'checked' : '' }} class="mt-1 w-4 h-4 text-indigo-600">
                        <div>
                            <span class="text-sm font-semibold text-gray-900">🇬🇭 Ghana Warehouse</span>
                            <p class="text-xs text-gray-500 mt-1">Items ship locally, fast delivery</p>
                        </div>
                    </label>
                    <label class="relative flex items-start gap-3 p-4 border-2 rounded-xl cursor-pointer transition hover:border-indigo-300 has-[:checked]:border-indigo-500 has-[:checked]:bg-indigo-50">
                        <input type="radio" name="warehouse" value="china" {{ old('warehouse', $product->warehouse ?? 'ghana') === 'china' ? 'checked' : '' }} class="mt-1 w-4 h-4 text-indigo-600">
                        <div>
                            <span class="text-sm font-semibold text-gray-900">🇨🇳 China Warehouse</span>
                            <p class="text-xs text-gray-500 mt-1">Freight shipping required, longer delivery</p>
                        </div>
                    </label>
                </div>
                <div id="china-freight-days-wrap" class="{{ old('warehouse', $product->warehouse ?? 'ghana') === 'china' ? '' : 'hidden' }}">
                    <label class="input-label">Estimated Freight Days to Ghana</label>
                    <input type="number" name="china_freight_days" value="{{ old('china_freight_days', $product->china_freight_days ?? 21) }}" class="input-field" placeholder="21">
                    <p class="text-xs text-gray-500 mt-1">Number of working days for freight to arrive in Ghana</p>
                </div>
            </div>
        </div>

        <div class="border-t border-gray-200 pt-6">
            <h4 class="text-sm font-semibold text-gray-900 mb-4 flex items-center gap-2">
                <svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>
                Wholesale Pricing
            </h4>
            <div class="space-y-4">
                <div class="flex items-center gap-3">
                    <input type="hidden" name="is_wholesale" value="0">
                    <input type="checkbox" name="is_wholesale" value="1" id="is_wholesale" class="w-4 h-4 text-indigo-600 rounded" {{ old('is_wholesale', $product->is_wholesale) ? 'checked' : '' }}>
                    <label for="is_wholesale" class="text-sm font-medium text-gray-700">Enable Wholesale Pricing</label>
                </div>

                <div id="wholesale-fields" class="space-y-4 {{ old('is_wholesale', $product->is_wholesale) ? '' : 'hidden' }}">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="input-label">Wholesale Price</label>
                            <input type="number" step="0.01" name="wholesale_price" value="{{ old('wholesale_price', $product->wholesale_price) }}" class="input-field" placeholder="Base wholesale price">
                        </div>
                        <div>
                            <label class="input-label">Min Wholesale Quantity</label>
                            <input type="number" name="min_wholesale_quantity" value="{{ old('min_wholesale_quantity', $product->min_wholesale_quantity) }}" class="input-field" placeholder="Minimum qty for wholesale">
                        </div>
                    </div>

                    <div>
                        <label class="input-label">Pricing Tiers (JSON)</label>
                        <textarea name="wholesale_tiers" rows="4" class="input-field font-mono text-sm" placeholder='[{"min_qty": 10, "price": 8.99}, {"min_qty": 50, "price": 7.99}]'>{{ old('wholesale_tiers', is_array($product->wholesale_tiers) ? json_encode($product->wholesale_tiers) : $product->wholesale_tiers) }}</textarea>
                        <p class="text-xs text-gray-500 mt-1">Format: [{"min_qty": 10, "price": 8.99}, ...]</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="border-t border-gray-200 pt-6">
            <h4 class="text-sm font-semibold text-gray-900 mb-4 flex items-center gap-2">
                <svg class="w-5 h-5 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>
                Flash Sale
            </h4>
            <div class="space-y-4">
                <div class="flex items-center gap-3">
                    <input type="hidden" name="is_flash_sale" value="0">
                    <input type="checkbox" name="is_flash_sale" value="1" id="is_flash_sale" class="w-4 h-4 text-orange-600 rounded" {{ old('is_flash_sale', $product->is_flash_sale) ? 'checked' : '' }}>
                    <label for="is_flash_sale" class="text-sm font-medium text-gray-700">Enable Flash Sale</label>
                </div>
                <div id="flash-sale-fields" class="space-y-4 {{ old('is_flash_sale', $product->is_flash_sale) ? '' : 'hidden' }}">
                    <div>
                        <label class="input-label">Flash Sale Price</label>
                        <input type="number" step="0.01" name="flash_sale_price" value="{{ old('flash_sale_price', $product->flash_sale_price) }}" class="input-field" placeholder="Special flash sale price">
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="input-label">Start Date & Time</label>
                            <input type="datetime-local" name="flash_sale_starts_at" value="{{ old('flash_sale_starts_at', $product->flash_sale_starts_at ? $product->flash_sale_starts_at->format('Y-m-d\TH:i') : '') }}" class="input-field">
                        </div>
                        <div>
                            <label class="input-label">End Date & Time</label>
                            <input type="datetime-local" name="flash_sale_ends_at" value="{{ old('flash_sale_ends_at', $product->flash_sale_ends_at ? $product->flash_sale_ends_at->format('Y-m-d\TH:i') : '') }}" class="input-field">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
                <label class="input-label">Category</label>
                <select name="category_id" class="select-field @error('category_id') border-red-500 @enderror" required>
                    <option value="">Select Category</option>
                    @foreach($categories as $category)
                        <option value="{{ $category->id }}" {{ old('category_id', $product->category_id) == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                    @endforeach
                </select>
                @error('category_id') <p class="input-error">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="input-label">Vendor</label>
                <select name="vendor_id" class="select-field">
                    <option value="">Admin Product</option>
                    @foreach($vendors as $vendor)
                        <option value="{{ $vendor->id }}" {{ old('vendor_id', $product->vendor_id) == $vendor->id ? 'selected' : '' }}>{{ $vendor->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="input-label">Status</label>
                <select name="status" class="select-field @error('status') border-red-500 @enderror" required>
                    <option value="draft" {{ old('status', $product->status) == 'draft' ? 'selected' : '' }}>Draft</option>
                    <option value="pending" {{ old('status', $product->status) == 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="published" {{ old('status', $product->status) == 'published' ? 'selected' : '' }}>Published</option>
                    <option value="rejected" {{ old('status', $product->status) == 'rejected' ? 'selected' : '' }}>Rejected</option>
                </select>
                @error('status') <p class="input-error">{{ $message }}</p> @enderror
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="flex items-center gap-3">
                <input type="hidden" name="is_digital" value="0">
                <input type="checkbox" name="is_digital" value="1" id="is_digital" class="w-4 h-4 text-indigo-600 rounded" {{ old('is_digital', $product->is_digital) ? 'checked' : '' }}>
                <label for="is_digital" class="text-sm font-medium text-gray-700">Digital Product</label>
            </div>
            <div>
                <label class="input-label">Product Type</label>
                <select name="type" class="select-field">
                    <option value="">Standard</option>
                    <option value="catalog" {{ old('type', $product->type) == 'catalog' ? 'selected' : '' }}>Catalog</option>
                    <option value="classified" {{ old('type', $product->type) == 'classified' ? 'selected' : '' }}>Classified</option>
                </select>
            </div>
        </div>

        <div class="flex gap-4 pt-4 border-t border-gray-200">
            <button type="submit" class="royal-btn">Update Product</button>
            <a href="{{ route('admin.products.show', $product) }}" class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50">Cancel</a>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const wholesaleCheckbox = document.getElementById('is_wholesale');
    const wholesaleFields = document.getElementById('wholesale-fields');
    if (wholesaleCheckbox && wholesaleFields) {
        wholesaleCheckbox.addEventListener('change', function() {
            wholesaleFields.classList.toggle('hidden', !this.checked);
        });
    }

    const flashSaleCheckbox = document.getElementById('is_flash_sale');
    const flashSaleFields = document.getElementById('flash-sale-fields');
    if (flashSaleCheckbox && flashSaleFields) {
        flashSaleCheckbox.addEventListener('change', function() {
            flashSaleFields.classList.toggle('hidden', !this.checked);
        });
    }

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