{{-- Product Information Section --}}
<div class="space-y-6">
   
   {{-- Basic Information --}}
   <div>
      <h3 class="text-base font-semibold text-gray-900 mb-4">Basic Information</h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
         
         {{-- Code --}}
         <div>
            <label for="code" class="block text-xs font-medium text-gray-700 mb-1.5">
               Product Code <span class="text-red-500">*</span>
            </label>
            <input type="text" 
                   id="code"
                   name="code"
                   value="{{ old('code', $product->code ?? '') }}"
                   required
                   class="w-full px-4 py-2.5 text-sm border rounded-lg transition-colors
                          @error('code') 
                             border-red-300 focus:border-red-500 focus:ring-red-200 
                          @else 
                             border-gray-200 focus:border-brand focus:ring-brand/20 
                          @enderror 
                          focus:ring-2 focus:outline-none"
                   placeholder="e.g., PROD001">
            @error('code')
               <p class="mt-1.5 text-xs text-red-600 flex items-center gap-1">
                  <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
                     <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                  </svg>
                  {{ $message }}
               </p>
            @enderror
         </div>

         {{-- Brand --}}
         <div>
            <label for="brand" class="block text-xs font-medium text-gray-700 mb-1.5">
               Brand
            </label>
            <input type="text" 
                   id="brand"
                   name="brand" 
                   value="{{ old('brand', $product->brand ?? '') }}"
                   class="w-full px-4 py-2.5 text-sm border border-gray-200 rounded-lg focus:border-brand focus:ring-2 focus:ring-brand/20 focus:outline-none transition-colors"
                   placeholder="e.g., Telkomsel">
            @error('brand')
               <p class="mt-1.5 text-xs text-red-600 flex items-center gap-1">
                  <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
                     <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                  </svg>
                  {{ $message }}
               </p>
            @enderror
         </div>

         {{-- Product Name --}}
         <div class="sm:col-span-2">
            <label for="product_name" class="block text-xs font-medium text-gray-700 mb-1.5">
               Product Name <span class="text-red-500">*</span>
            </label>
            <input type="text" 
                   id="product_name"
                   name="product_name" 
                   value="{{ old('product_name', $product->product_name ?? '') }}"
                   required
                   class="w-full px-4 py-2.5 text-sm border rounded-lg transition-colors
                          @error('product_name') 
                             border-red-300 focus:border-red-500 focus:ring-red-200 
                          @else 
                             border-gray-200 focus:border-brand focus:ring-brand/20 
                          @enderror 
                          focus:ring-2 focus:outline-none"
                   placeholder="e.g., Pulsa Telkomsel 10.000">
            @error('product_name')
               <p class="mt-1.5 text-xs text-red-600 flex items-center gap-1">
                  <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
                     <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                  </svg>
                  {{ $message }}
               </p>
            @enderror
         </div>

         {{-- Category --}}
         <div>
            <label for="category" class="block text-xs font-medium text-gray-700 mb-1.5">
               Category
            </label>
            <input type="text" 
                   id="category"
                   name="category" 
                   value="{{ old('category', $product->category ?? '') }}"
                   class="w-full px-4 py-2.5 text-sm border border-gray-200 rounded-lg focus:border-brand focus:ring-2 focus:ring-brand/20 focus:outline-none transition-colors"
                   placeholder="e.g., Pulsa">
            @error('category')
               <p class="mt-1.5 text-xs text-red-600 flex items-center gap-1">
                  <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
                     <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                  </svg>
                  {{ $message }}
               </p>
            @enderror
         </div>

         {{-- Type --}}
         <div>
            <label for="type" class="block text-xs font-medium text-gray-700 mb-1.5">
               Type
            </label>
            <input type="text" 
                   id="type"
                   name="type" 
                   value="{{ old('type', $product->type ?? '') }}"
                   class="w-full px-4 py-2.5 text-sm border border-gray-200 rounded-lg focus:border-brand focus:ring-2 focus:ring-brand/20 focus:outline-none transition-colors"
                   placeholder="e.g., Prepaid">
            @error('type')
               <p class="mt-1.5 text-xs text-red-600 flex items-center gap-1">
                  <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
                     <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                  </svg>
                  {{ $message }}
               </p>
            @enderror
         </div>

      </div>
   </div>

   {{-- Divider --}}
   <div class="border-t border-gray-200"></div>

   {{-- Provider Information --}}
   <div>
      <h3 class="text-base font-semibold text-gray-900 mb-4">Provider Information</h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
         
         {{-- Provider Name --}}
         <div class="sm:col-span-2">
            <label for="provider_name" class="block text-xs font-medium text-gray-700 mb-1.5">
               Provider Name
            </label>
            <input type="text" 
                   id="provider_name"
                   name="provider_name" 
                   value="{{ old('provider_name', $product->provider_name ?? '') }}"
                   class="w-full px-4 py-2.5 text-sm border border-gray-200 rounded-lg focus:border-brand focus:ring-2 focus:ring-brand/20 focus:outline-none transition-colors"
                   placeholder="e.g., Digiflazz">
            @error('provider_name')
               <p class="mt-1.5 text-xs text-red-600 flex items-center gap-1">
                  <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
                     <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                  </svg>
                  {{ $message }}
               </p>
            @enderror
         </div>

      </div>
   </div>

   {{-- Divider --}}
   <div class="border-t border-gray-200"></div>

   {{-- Pricing Information --}}
   <div>
      <h3 class="text-base font-semibold text-gray-900 mb-4">Pricing Information</h3>
      <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
         
         {{-- Provider Price --}}
         <div>
            <label for="provider_price" class="block text-xs font-medium text-gray-700 mb-1.5">
               Provider Price
            </label>
            <div class="relative">
               <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-gray-500 text-sm">
                  Rp
               </span>
               <input type="number" 
                      id="provider_price"
                      name="provider_price" 
                      value="{{ old('provider_price', $product->provider_price ?? 0) }}"
                      min="0"
                      step="1"
                      class="w-full pl-12 pr-4 py-2.5 text-sm border border-gray-200 rounded-lg focus:border-brand focus:ring-2 focus:ring-brand/20 focus:outline-none transition-colors"
                      placeholder="0">
            </div>
            @error('provider_price')
               <p class="mt-1.5 text-xs text-red-600 flex items-center gap-1">
                  <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
                     <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                  </svg>
                  {{ $message }}
               </p>
            @enderror
         </div>

         {{-- Profit --}}
         <div>
            <label for="profit" class="block text-xs font-medium text-gray-700 mb-1.5">
               Profit Margin
            </label>
            <div class="relative">
               <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-gray-500 text-sm">
                  Rp
               </span>
               <input type="number" 
                      id="profit"
                      name="profit" 
                      value="{{ old('profit', $product->profit ?? 0) }}"
                      min="0"
                      step="1"
                      class="w-full pl-12 pr-4 py-2.5 text-sm border border-gray-200 rounded-lg focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200 focus:outline-none transition-colors"
                      placeholder="0">
            </div>
            @error('profit')
               <p class="mt-1.5 text-xs text-red-600 flex items-center gap-1">
                  <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
                     <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                  </svg>
                  {{ $message }}
               </p>
            @enderror
         </div>

         {{-- Selling Price --}}
         <div>
            <label for="selling_price" class="block text-xs font-medium text-gray-700 mb-1.5">
               Selling Price <span class="text-red-500">*</span>
            </label>
            <div class="relative">
               <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-gray-500 text-sm">
                  Rp
               </span>
               <input type="number" 
                      id="selling_price"
                      name="selling_price" 
                      value="{{ old('selling_price', $product->selling_price ?? 0) }}"
                      required
                      min="0"
                      step="1"
                      class="w-full pl-12 pr-4 py-2.5 text-sm border rounded-lg font-semibold transition-colors
                             @error('selling_price') 
                                border-red-300 focus:border-red-500 focus:ring-red-200 
                             @else 
                                border-gray-200 focus:border-brand focus:ring-brand/20 
                             @enderror 
                             focus:ring-2 focus:outline-none"
                      placeholder="0">
            </div>
            @error('selling_price')
               <p class="mt-1.5 text-xs text-red-600 flex items-center gap-1">
                  <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
                     <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                  </svg>
                  {{ $message }}
               </p>
            @enderror
         </div>

      </div>

      {{-- Pricing Helper Text --}}
      <div class="mt-3 p-3 bg-blue-50 border border-blue-100 rounded-lg">
         <p class="text-xs text-blue-800 flex items-start gap-2">
            <svg class="w-4 h-4 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
               <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
            </svg>
            <span>
               <strong>Tip:</strong> Selling Price is calculated automatically as Provider Price + Profit. 
               Make sure to set a reasonable profit margin.
            </span>
         </p>
      </div>
   </div>

   {{-- Divider --}}
   <div class="border-t border-gray-200"></div>

   {{-- Additional Information --}}
   <div>
      <h3 class="text-base font-semibold text-gray-900 mb-4">Additional Information</h3>
      <div class="grid grid-cols-1 gap-4">
         
         {{-- Status --}}
         <div class="sm:max-w-xs">
            <label for="status" class="block text-xs font-medium text-gray-700 mb-1.5">
               Status <span class="text-red-500">*</span>
            </label>
            <select id="status"
                    name="status" 
                    required
                    class="w-full px-4 py-2.5 text-sm border border-gray-200 rounded-lg focus:border-brand focus:ring-2 focus:ring-brand/20 focus:outline-none transition-colors bg-white">
               <option value="active" @selected(old('status', $product->status ?? 'active')=='active')>
                  Active
               </option>
               <option value="inactive" @selected(old('status', $product->status ?? '')=='inactive')>
                  Inactive
               </option>
            </select>
            @error('status')
               <p class="mt-1.5 text-xs text-red-600 flex items-center gap-1">
                  <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
                     <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                  </svg>
                  {{ $message }}
               </p>
            @enderror
         </div>

         {{-- Description --}}
         <div>
            <label for="description" class="block text-xs font-medium text-gray-700 mb-1.5">
               Description
            </label>
            <textarea id="description"
                      name="description" 
                      rows="4"
                      class="w-full px-4 py-2.5 text-sm border border-gray-200 rounded-lg focus:border-brand focus:ring-2 focus:ring-brand/20 focus:outline-none transition-colors resize-none"
                      placeholder="Enter product description (optional)">{{ old('description', $product->description ?? '') }}</textarea>
            @error('description')
               <p class="mt-1.5 text-xs text-red-600 flex items-center gap-1">
                  <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
                     <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                  </svg>
                  {{ $message }}
               </p>
            @enderror
         </div>

      </div>
   </div>

</div>

{{-- Auto Calculate Selling Price --}}
<script>
document.addEventListener('DOMContentLoaded', function() {
   const providerPriceInput = document.getElementById('provider_price');
   const profitInput = document.getElementById('profit');
   const sellingPriceInput = document.getElementById('selling_price');

   function calculateSellingPrice() {
      const providerPrice = parseFloat(providerPriceInput.value) || 0;
      const profit = parseFloat(profitInput.value) || 0;
      const sellingPrice = providerPrice + profit;
      sellingPriceInput.value = sellingPrice;
   }

   if (providerPriceInput && profitInput && sellingPriceInput) {
      providerPriceInput.addEventListener('input', calculateSellingPrice);
      profitInput.addEventListener('input', calculateSellingPrice);
   }
});
</script>
