@layout('content.master')
@section('content')
    <div class="container">
        <section>
            <div class="row">
                <div class="col-12">



                    <h1 class="mb-5">Solar Etragsrechner</h1>
                    <p class="fs-5">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aperiam asperiores
                        consectetur dicta eaque et eveniet ex illo ipsa iste maiores maxime, modi optio perferendis,
                        quaerat quisquam, sapiente vitae voluptas!
                    </p>
                    <br>
                    <br>
                </div>

                <div class="row">
                    <div class="col-12 col-lg-7">
                        <div class="card shadow-lg">
                            <div class="card-header" style="background-color: #546c8a; color: white;">
                                <h5>Ihre Angaben zu Ihrer Anlage</h5>
                            </div>
                            <div class="card-body">
                                <form>
                                    <h5 class="mt-3 mb-3">Angaben zu Ihrer Anlage</h5>
                                    <div class="mb-3">
                                        <label for="exampleInputEmail1" class="form-label">Standort</label>
                                        <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="92714 Pleystein">
                                        <div id="emailHelp" class="form-text">Geben Sie die Adresse Ihrer Solaranlage an</div>
                                    </div>

                                    <div class="mb-3">
                                        <label for="exampleInputEmail1" class="form-label">Installierte Leistung</label>
                                        <input type="number" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="600 Watt">
                                    </div>

                                    <div class="mb-3">
                                        <label for="exampleInputEmail1" class="form-label">Azimut</label>
                                        <input type="number" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="90°">
                                    </div>

                                    <div class="mb-3">
                                        <label for="exampleInputEmail1" class="form-label">Installierte Leistung</label>
                                        <input type="number" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="600 Watt">
                                    </div>

                                    <div class="mb-3">
                                        <label for="exampleInputEmail1" class="form-label">Strompreis</label>
                                        <input type="number" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="0,30" step="0.01" min="0">
                                    </div>

                                    <div class="mb-3">
                                        <label for="exampleInputEmail1" class="form-label">Investition Solaranlage</label>
                                        <input type="number" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="5000" step="1" min="0">
                                    </div>

                                    <div class="mb-3">
                                        <label for="exampleInputEmail1" class="form-label">Stromverbrauch im Jahr</label>
                                        <input type="number" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="2500" step="1" min="0">
                                    </div>



                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 col-lg-4 offset-lg-1">
                        <div class="card shadow-lg">
                            <div class="card-header" style="background-color: #546c8a; color: white;">
                                <h5>Ergebnis</h5>
                            </div>
                            <div class="card-body">
                                <table class="table">
                                    <thead>
                                    <tr>

                                        <th scope="col">Metrik</th>
                                        <th scope="col">Wert</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    <tr>

                                        <td>Jährliche Stromproduktion :</td>
                                        <td>700 kWh</td>
                                    </tr>

                                    <tr>

                                        <td>Jährliche Einsparungen :</td>
                                        <td>145,33 €</td>
                                    </tr>

                                    <tr>

                                        <td>Amortisation:</td>
                                        <td>4,5 Jahre</td>
                                    </tr>

                                    <tr>

                                        <td>Autarkie:</td>
                                        <td>20 %</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@stop