@extends('admin.layout')

@section('title', 'Add Proprietary Herbal 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">New Proprietary Medicine</h2>
            <p class="text-xs text-slate-400 mt-0.5">Add Saba Remedies branded health supplement or formulation</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.store') }}" 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" 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 }}">{{ $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" required placeholder="e.g. Hab-e-Suranjan" 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>

        <!-- Initial Pack Size Variant -->
        <div class="p-4 bg-slate-50 rounded-2xl border border-slate-200 space-y-3">
            <h4 class="font-bold text-slate-900 text-xs">Initial Pack-Size Variant Pricing</h4>
            <div class="grid grid-cols-1 sm:grid-cols-4 gap-3">
                <div>
                    <label class="block font-semibold text-slate-600 mb-1">Pack Quantity *</label>
                    <input type="text" name="quantity" required placeholder="e.g. 100" class="w-full bg-white border border-slate-200 rounded-xl p-2.5">
                </div>
                <div>
                    <label class="block font-semibold text-slate-600 mb-1">Unit Type *</label>
                    <select name="quantity_type" class="w-full bg-white border border-slate-200 rounded-xl p-2.5">
                        <option value="gm">gm</option>
                        <option value="ML">ML</option>
                        <option value="Capsules">Capsules</option>
                        <option value="Tabs">Tabs</option>
                        <option value="Pills">Pills</option>
                    </select>
                </div>
                <div>
                    <label class="block font-semibold text-slate-600 mb-1">Selling Price (₹) *</label>
                    <input type="number" step="0.01" name="price" required placeholder="0.00" class="w-full bg-white border border-slate-200 rounded-xl p-2.5">
                </div>
                <div>
                    <label class="block font-semibold text-slate-600 mb-1">MRP Price (₹)</label>
                    <input type="number" step="0.01" name="cross_price" placeholder="0.00" class="w-full bg-white border border-slate-200 rounded-xl p-2.5">
                </div>
            </div>
        </div>

        <div>
            <label class="block font-bold text-slate-700 mb-1">Product Primary Image</label>
            <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="3" placeholder="Health benefits, healing properties..." class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500"></textarea>
        </div>

        <div>
            <label class="block font-bold text-slate-700 mb-1">Dosage &amp; Usage Instructions</label>
            <textarea name="features" rows="2" placeholder="e.g. 1-2 tablets twice daily with warm milk..." class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500"></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">
            Create Proprietary Product
        </button>
    </form>
</div>
@endsection