Rule-One-Stock-Calculator/resources/views/livewire/margin-of-safety-calculator.blade.php

<div>
    <div class="container py-5">
    <div class="row mb-4">
        <div class="col">
            <div class="card shadow border-0 bg-success text-white">
                <div class="card-header bg-dark text-white">
                    <h5 class="mb-0">EPS & Growth Inputs</h5>
                </div>
                <div class="card-body">
                    <form wire:submit.prevent="calculate">
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="currentEPS" class="form-label">Current EPS</label>
                                <input type="number" step="any" wire:model="currentEPS" class="form-control" id="currentEPS">
                            </div>
                            <div class="col-md-4">
                                <label for="growthRate" class="form-label">Future Growth Rate (%)</label>
                                <input type="number" step="any" wire:model="growthRate" class="form-control" id="growthRate">
                            </div>
                            <div class="col-md-4">
                                <label for="futurePE" class="form-label">Future PE</label>
                                <input type="number" step="any" wire:model="futurePE" class="form-control" id="futurePE">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="minReturn" class="form-label">Minimum Acceptable Rate of Return (%)</label>
                                <input type="number" step="any" wire:model="minReturn" class="form-control" id="minReturn">
                            </div>
                            <div class="col-md-6">
                                <label for="readonlyYears" class="form-label">Number of Years</label>
                                <input type="number" wire:model="years" class="form-control" id="readonlyYears" readonly>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-light">Calculate</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col">
            <div class="card shadow border-0 bg-info text-dark">
                <div class="card-header bg-dark text-white">
                    <h5 class="mb-0">Calculated Results</h5>
                </div>
                <div class="card-body">
                    <p><strong>Sticker Price:</strong> ${{ number_format($stickerPrice, 2) }}</p>
                    <p><strong>Margin of Safety:</strong> ${{ number_format($marginOfSafety, 2) }}</p>
                </div>
            </div>
        </div>
    </div>
    </div>
</div>