@extends('admin.layout')

@section('title', 'Edit Proprietary Product')

@section('content')
<div class="max-w-3xl bg-white rounded-3xl border border-slate-200 p-8 shadow-xs space-y-6">
    <div class="border-b border-slate-100 pb-4 flex items-center justify-between">
        <div>
            <h2 class="font-extrabold text-slate-900 text-base">Edit: {{ $product->prod_name }}</h2>
            <p class="text-xs text-slate-400 mt-0.5">Update details, image, or pack-size pricing</p>
        </div>
        <a href="{{ route('admin.sb-products.index') }}" class="text-xs font-bold text-slate-500 hover:text-slate-900">&larr; Back to Catalog</a>
    </div>

    <form action="{{ route('admin.sb-products.update', ['id' => $product->id]) }}" method="POST" enctype="multipart/form-data" class="space-y-4 text-xs">
        @csrf

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
                <label class="block font-bold text-slate-700 mb-1">Product Code <span class="text-[10px] text-slate-400 font-normal">(Auto-generated if left empty)</span></label>
                <input type="text" name="prod_code" value="{{ $product->prod_code }}" placeholder="Leave empty to auto-generate (e.g. SR-1001)" class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500">
            </div>
            <div>
                <label class="block font-bold text-slate-700 mb-1">Category *</label>
                <select name="category_id" required class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500">
                    @foreach($categories as $cat)
                        <option value="{{ $cat->id }}" {{ $product->category_id == $cat->id ? 'selected' : '' }}>{{ $cat->cat_name }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div>
            <label class="block font-bold text-slate-700 mb-1">Product Name *</label>
            <input type="text" name="prod_name" value="{{ $product->prod_name }}" required class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500">
        </div>

        <div>
            <label class="block font-bold text-slate-700 mb-1">Product Image</label>
            @if($product->prod_img1)
                <div class="w-16 h-16 rounded-xl bg-slate-100 overflow-hidden mb-2">
                    <img src="{{ product_image_url($product->prod_img1) }}" class="w-full h-full object-cover" onerror="this.onerror=null;this.src='{{ asset('img/about.png') }}';">
                </div>
            @endif
            <input type="file" name="prod_img1" class="w-full bg-slate-50 border border-slate-200 rounded-xl p-2.5 text-slate-600 file:mr-4 file:py-1.5 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-semibold file:bg-emerald-50 file:text-emerald-700 hover:file:bg-emerald-100">
        </div>

        <div>
            <label class="block font-bold text-slate-700 mb-1">Description / Indications</label>
            <textarea name="prod_desp" rows="4" class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500">{{ $product->prod_desp }}</textarea>
        </div>

        <div>
            <label class="block font-bold text-slate-700 mb-1">Dosage &amp; Usage Instructions</label>
            <textarea name="features" rows="2" class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500">{{ $product->features }}</textarea>
        </div>

        <button type="submit" class="bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-3.5 px-8 rounded-xl shadow-sm text-xs transition-all">
            Update Product Details
        </button>
    </form>

    <!-- Pack Size Variants Table -->
    @if(isset($variants) && $variants->count() > 0)
        <div class="border-t border-slate-100 pt-6 space-y-3">
            <h4 class="font-bold text-slate-900 text-xs">Available Pack-Size Variants</h4>
            <div class="overflow-x-auto">
                <table class="w-full text-left text-xs">
                    <thead>
                        <tr class="bg-slate-50 text-slate-500">
                            <th class="p-3 font-bold">Pack Size</th>
                            <th class="p-3 font-bold">Unit</th>
                            <th class="p-3 font-bold">Price</th>
                            <th class="p-3 font-bold">Cross Price</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @foreach($variants as $v)
                            <tr>
                                <td class="p-3 font-bold text-slate-900">{{ $v->prod_quantity }}</td>
                                <td class="p-3 text-slate-600">{{ $v->prod_quantity_type }}</td>
                                <td class="p-3 font-bold text-emerald-700">₹{{ number_format((float)$v->prod_price, 2) }}</td>
                                <td class="p-3 text-slate-400 line-through">₹{{ number_format((float)$v->prod_cross_price, 2) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif

</div>
@endsection