@extends('layouts.app')
@section('title', 'Edit Product')
@section('content')
<div class="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
    <div>
        <h2 class="page-title">Edit Product</h2>
        <p class="page-subtitle">Update product details: {{ $product->name }}</p>
    </div>
    <a href="{{ route('products.index') }}" class="btn-secondary">
        <svg class="w-4 h-4 mr-2" 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 method="POST" action="{{ route('products.update', $product) }}" enctype="multipart/form-data" class="bg-white rounded-2xl border border-gray-100 p-6 lg:p-8 card-elevated dark:bg-dark-card dark:border-dark-border">
    @csrf
    @method('PUT')

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <div class="space-y-5">
            <h3 class="section-title dark:text-dark-text">Product Information</h3>
            <x-form-group label="Product ID" name="product_id_display" :value="$product->product_id" disabled />
            <x-form-group label="Product Name" name="name" :value="old('name', $product->name)" required placeholder="Enter product name" />
            <x-form-group label="Description" name="description" type="textarea" :value="old('description', $product->description)" placeholder="Enter product description (optional)" />
             <!-- <div>
                <label class="form-label dark:text-dark-muted">Product Images <span class="text-xs text-gray-400 dark:text-dark-muted">(Max 6)</span></label>
                @if($product->images && count($product->images) > 0)
                <div class="mb-4">
                    <h4 class="form-label mb-3 dark:text-dark-text">Current Images</h4>
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
                        @foreach($product->image_urls as $index => $url)
                        <div class="relative group rounded-xl overflow-hidden border border-gray-200 dark:border-dark-border">
                            <img src="{{ $url }}" alt="{{ $product->name }}" class="w-full h-24 object-cover">
                            <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-all flex items-center justify-center">
                                <label class="cursor-pointer p-2 rounded-full bg-white/90 hover:bg-white text-red-500 transition-all dark:bg-dark-card/90 dark:hover:bg-dark-card">
                                    <input type="checkbox" name="remove_images[]" value="{{ $index }}" class="sr-only">
                                    <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                </label>
                            </div>
                            <span class="absolute top-1.5 right-1.5 bg-white/90 rounded-full px-1.5 py-0.5 text-xs font-medium text-gray-600 shadow-sm backdrop-blur-sm dark:bg-dark-card/90 dark:text-dark-muted">#{{ $loop->iteration }}</span>
                        </div>
                        @endforeach
                    </div>
                    <p class="mt-2 text-xs text-gray-400 dark:text-dark-muted">Hover over an image and click to mark it for removal.</p>
                </div>
                @endif
                <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-dashed border-gray-200 rounded-2xl hover:border-primary-300 transition-colors duration-200 dark:border-dark-border dark:hover:border-primary-500">
                    <div class="text-center">
                        <svg class="mx-auto h-10 w-10 text-gray-300 dark:text-dark-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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 class="mt-2 text-sm text-gray-500 dark:text-dark-muted">
                            <label for="images" class="cursor-pointer text-primary-600 hover:text-primary-700 font-medium dark:text-primary-400 dark:hover:text-primary-300">Upload images</label>
                            or drag and drop
                        </p>
                        <p class="text-xs text-gray-400 dark:text-dark-muted mt-1">JPG, PNG, GIF, WEBP up to 6 files</p>
                        <input type="file" name="images[]" id="images" multiple accept="image/*" class="hidden">
                    </div>
                </div>
                <div id="imagePreview" class="grid grid-cols-2 sm:grid-cols-3 gap-3 mt-4"></div>
            </div> -->
            <h3 class="section-title dark:text-dark-text">Tax Information</h3>
            
            <x-form-group label="HSN Code" name="hsn_code" :value="old('hsn_code', $product->hsn_code)" placeholder="Enter HSN code" />

            <div>
                <label class="form-label dark:text-dark-muted">GST %</label>
                <div class="mt-1.5 flex flex-wrap gap-2 sm:gap-3">
                    @php $gst = old('gst_percentage', $product->gst_percentage ?? '0'); @endphp
                    <label class="inline-flex items-center gap-2 px-4 py-2 rounded-xl border border-gray-200 dark:border-dark-border cursor-pointer has-[:checked]:bg-primary-50 has-[:checked]:border-primary-300 has-[:checked]:text-primary-700 dark:has-[:checked]:bg-primary-500/10 dark:has-[:checked]:border-primary-500 transition-all">
                        <input type="radio" name="gst_percentage" value="0" class="w-4 h-4 text-primary-600 focus:ring-primary-500" {{ $gst == '0' ? 'checked' : '' }}>
                        <span class="text-sm font-medium">None</span>
                    </label>
                    <label class="inline-flex items-center gap-2 px-4 py-2 rounded-xl border border-gray-200 dark:border-dark-border cursor-pointer has-[:checked]:bg-primary-50 has-[:checked]:border-primary-300 has-[:checked]:text-primary-700 dark:has-[:checked]:bg-primary-500/10 dark:has-[:checked]:border-primary-500 transition-all">
                        <input type="radio" name="gst_percentage" value="5" class="w-4 h-4 text-primary-600 focus:ring-primary-500" {{ $gst == '5' ? 'checked' : '' }}>
                        <span class="text-sm font-medium">5%</span>
                    </label>
                    <label class="inline-flex items-center gap-2 px-4 py-2 rounded-xl border border-gray-200 dark:border-dark-border cursor-pointer has-[:checked]:bg-primary-50 has-[:checked]:border-primary-300 has-[:checked]:text-primary-700 dark:has-[:checked]:bg-primary-500/10 dark:has-[:checked]:border-primary-500 transition-all">
                        <input type="radio" name="gst_percentage" value="12" class="w-4 h-4 text-primary-600 focus:ring-primary-500" {{ $gst == '12' ? 'checked' : '' }}>
                        <span class="text-sm font-medium">12%</span>
                    </label>
                    <label class="inline-flex items-center gap-2 px-4 py-2 rounded-xl border border-gray-200 dark:border-dark-border cursor-pointer has-[:checked]:bg-primary-50 has-[:checked]:border-primary-300 has-[:checked]:text-primary-700 dark:has-[:checked]:bg-primary-500/10 dark:has-[:checked]:border-primary-500 transition-all">
                        <input type="radio" name="gst_percentage" value="18" class="w-4 h-4 text-primary-600 focus:ring-primary-500" {{ $gst == '18' ? 'checked' : '' }}>
                        <span class="text-sm font-medium">18%</span>
                    </label>
                </div>
            </div>

           
        </div>

        <div class="space-y-5">
            <h3 class="section-title dark:text-dark-text">Purchase Information</h3>
            <x-form-group label="Purchase Price" name="purchase_price" type="number" :value="old('purchase_price', $product->purchase_price)" required placeholder="0.00" step="0.01" />
            <x-form-group label="Purchase Information" name="purchase_information" type="textarea" :value="old('purchase_information', $product->purchase_information)" placeholder="Enter purchase information (vendor, terms, notes, etc.)" rows="4" />
        </div>

        <div class="space-y-5">
            <h3 class="section-title dark:text-dark-text">Price Information</h3>
            <x-form-group label="MRP" name="mrp" type="number" :value="old('mrp', $product->mrp)" required placeholder="0.00" step="0.01" />
            <x-form-group label="Distributor Price" name="dealer_price" type="number" :value="old('dealer_price', $product->dealer_price)" required placeholder="0.00" step="0.01" />
            <x-form-group label="Shop Price" name="shop_price" type="number" :value="old('shop_price', $product->shop_price)" required placeholder="0.00" step="0.01" />
            <x-form-group label="Ecom Price" name="ecom_price" type="number" :value="old('ecom_price', $product->ecom_price)" required placeholder="0.00" step="0.01" />
        </div>

        <div class="space-y-5">
            <h3 class="section-title dark:text-dark-text">Inventory Information</h3>
            <x-form-group label="Stock Quantity" name="stock_quantity" type="number" :value="old('stock_quantity', $product->stock_quantity)" required placeholder="0" />
            <x-form-group label="Alert Limit" name="stock_alert_limit" type="number" :value="old('stock_alert_limit', $product->stock_alert_limit)" placeholder="0" />
        </div>

        <div class="space-y-5">
            <h3 class="section-title dark:text-dark-text">Status</h3>
            <div class="flex gap-3 mt-1.5" x-data="{ status: '{{ old('status', $product->status ? 'active' : 'inactive') }}' }">
                <label class="relative flex-1 inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl border border-gray-200 dark:border-dark-border cursor-pointer transition-all"
                       :class="status === 'active' ? 'bg-emerald-50 border-emerald-300 text-emerald-700 dark:bg-emerald-500/10 dark:border-emerald-500' : 'bg-white dark:bg-dark-card text-gray-600 dark:text-dark-muted hover:bg-gray-50 dark:hover:bg-dark-surface'">
                    <input type="radio" name="status" value="active" x-model="status" class="absolute inset-0 opacity-0 w-full h-full cursor-pointer">
                    <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    <span class="text-sm font-medium">Active</span>
                </label>
                <label class="relative flex-1 inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl border border-gray-200 dark:border-dark-border cursor-pointer transition-all"
                       :class="status === 'inactive' ? 'bg-red-50 border-red-300 text-red-700 dark:bg-red-500/10 dark:border-red-500' : 'bg-white dark:bg-dark-card text-gray-600 dark:text-dark-muted hover:bg-gray-50 dark:hover:bg-dark-surface'">
                    <input type="radio" name="status" value="inactive" x-model="status" class="absolute inset-0 opacity-0 w-full h-full cursor-pointer">
                    <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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    <span class="text-sm font-medium">Inactive</span>
                </label>
            </div>
        </div>
    </div>

    <div class="divider dark:border-dark-border"></div>
    <div class="flex items-center justify-end gap-3">
        <a href="{{ route('products.index') }}" class="btn-secondary">Cancel</a>
        <x-button type="submit">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
            Update Product
        </x-button>
    </div>
</form>
@endsection
@push('scripts')
<script>
document.getElementById('images')?.addEventListener('change', function(e) {
    const preview = document.getElementById('imagePreview');
    preview.innerHTML = '';
    const files = Array.from(e.target.files).slice(0, 6);
    files.forEach(file => {
        const reader = new FileReader();
        reader.onload = function(ev) {
            const div = document.createElement('div');
            div.className = 'relative';
            div.innerHTML = `<img src="${ev.target.result}" class="w-full h-24 object-cover rounded-xl border border-gray-200 dark:border-dark-border">`;
            preview.appendChild(div);
        };
        reader.readAsDataURL(file);
    });
    if (e.target.files.length > 6) alert('You can only upload up to 6 images.');
});
</script>
@endpush