abrudtkuhl/laracloudpricing

use Livewire\Component;

class PricingCalculator extends Component
{
    // ...

    public function updated($property)
    {
        // Use direct validation for simplicity on update
         $numericProps = [
            'webInstances', 'workerInstances', 'databaseStorageGB',
            'postgresComputeUnits', 'objectStorageGB', 'objectStorageClassAOpsThousands',
            'objectStorageClassBOpsThousands', 'dataTransfer', 'requests',
            'customDomains', 'additionalUsers'
        ];

        if (in_array($property, $numericProps)) {
            $validated = Validator::make(
                [$property => $this->$property],
                [$property => 'numeric|min:0']
            )->validate();

            // Coerce specific integers
             $intProps = ['webInstances', 'workerInstances', 'databaseStorageGB', 'objectStorageGB', 'dataTransfer', 'requests', 'customDomains', 'additionalUsers'];
             if (in_array($property, $intProps)) {
                 $this->$property = max(0, (int)$validated[$property]);
             }
             // Coerce specific floats/decimals
             $floatProps = ['postgresComputeUnits', 'objectStorageClassAOpsThousands', 'objectStorageClassBOpsThousands'];
             if (in_array($property, $floatProps)) {
                $this->$property = max(0, (float)$validated[$property]);
             }
        }

        // Reset dependent values when the plan changes
        if ($property === 'plan') {
            $this->resetUsageToPlanDefaults();
            $this->validateInputsForPlan(); // Keep potential plan specific validation logic
        }

        // Reset database size if type changes
        if ($property === 'databaseType') {
            if ($this->databaseType === 'mysql') {
                $this->mysqlDatabaseSize = $this->pricingService->getMySqlDefaultSizeKey() ?? 'mysql-flex-1c-1g'; // Provide a fallback
            } elseif ($this->databaseType === 'postgres') {
                 $this->postgresComputeUnits = $this->pricingService->getPostgresMinCpu();
            }
        }

         // Reset KV tier if toggled off or default missing
         if (($property === 'includeKv' && !$this->includeKv) || ($property === 'kvTier' && !$this->kvTier)) {
              $this->kvTier = $this->pricingService->getKvDefaultTierKey() ?? '1gb'; // Fallback
         }

         // Reset object storage if toggled off
         if ($property === 'includeObjectStorage' && !$this->includeObjectStorage) {
             $this->objectStorageGB = 10;
             $this->objectStorageClassAOpsThousands = 100;
             $this->objectStorageClassBOpsThousands = 1000;
         }

         // Reset workers if toggled off or default missing
         if (($property === 'includeWorkers' && !$this->includeWorkers) || ($property === 'workerComputeSize' && !$this->workerComputeSize)) {
             $this->workerComputeSize = $this->pricingService->getComputeDefaultSizeKey() ?? 'flex-1c-512m'; // Fallback
             $this->workerInstances = 1;
         }

         // Reset web compute if default missing
         if ($property === 'webComputeSize' && !$this->webComputeSize) {
            $this->webComputeSize = $this->pricingService->getComputeDefaultSizeKey() ?? 'flex-1c-1g'; // Fallback
         }
    }

    // ...

}

// ...

    <!-- Web App Instances -->
    <div class="mb-6">
        <h3 class="text-lg font-medium text-black dark:text-white mb-4">Web App Instances</h3>
        
        <div class="flex flex-col space-y-4">
            <div class="flex justify-between items-center mb-2">
                <label class="text-sm font-medium text-zinc-700 dark:text-zinc-300">
                    Number of Instances
                </label>
                <div class="flex space-x-2 items-center">
                    <button type="button" wire:click="decrementWebInstances" class="inline-flex items-center justify-center w-8 h-8 border border-zinc-300 dark:border-neutral-700 rounded bg-white dark:bg-neutral-800 text-black dark:text-white hover:bg-zinc-50 dark:hover:bg-neutral-700">
                        <span class="sr-only">Decrease</span>
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
                        </svg>
                    </button>
                    <span class="w-10 text-center font-bold text-black dark:text-white">{{ $webInstances }}</span>
                    <button type="button" wire:click="incrementWebInstances" class="inline-flex items-center justify-center w-8 h-8 border border-zinc-300 dark:border-neutral-700 rounded bg-white dark:bg-neutral-800 text-black dark:text-white hover:bg-zinc-50 dark:hover:bg-neutral-700">
                        <span class="sr-only">Increase</span>
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
                        </svg>
                    </button>
                </div>
            </div>
            
            <div class="mb-2">
                <input 
                    type="range" 
                    wire:model.live="webInstances" 
                    min="1" 
                    max="10" 
                    step="1"
                    class="w-full h-2 bg-zinc-200 dark:bg-neutral-700 rounded appearance-none cursor-pointer accent-red-500"
                >
            </div>
            
            <div class="grid grid-cols-3">
                <span class="text-xs text-zinc-500 dark:text-zinc-400">1</span>
                <span class="text-xs text-center text-zinc-500 dark:text-zinc-400">5</span>
                <span class="text-xs text-right text-zinc-500 dark:text-zinc-400">10</span>
            </div>
        </div>
    </div>

// ...