<script lang="ts">
    import type { Banque, Derived } from '../calcul'
    import { getContext } from 'svelte'
    const s: Derived = getContext('simulation')
    const b: Banque = s.banque
    let annuel = $state(true)
    const banque = b.resultat
</script>

<div class="p-10" style="min-height: calc(100vh - 180px);">
    <h1 class="my-8 text-4xl font-bold">
        Tous <span class="text-primary">les recoins</span> de votre emprunt.
    </h1>
    <div class="flex gap-1 mt-10">
        <input
            class="checkbox checkbox-sm checkbox-primary"
            type="checkbox"
            role="switch"
            id="annuel"
            bind:checked={annuel} />
        <label class="form-check-label" for="annuel"
            >Présentation annuelle</label>
    </div>

    {#if annuel}
        <div class="my-3">
            <table class="table table-zebra inline-block banque w-auto">
                <thead>
                    <tr>
                        <th>Année</th>
                        <th>Capital restant dû</th>
                        <th>Principal</th>
                        <th>Intérêts</th>
                    </tr>
                </thead>
                <tbody>
                    {#each $banque.remboursementAnnuel as r, periode (periode)}
                        <tr>
                            <td>{periode}</td>
                            <td>{$banque.crdAnnuel[periode].toFixed(0)}</td>
                            <td>{r.toFixed(0)}</td>
                            <td
                                >{$banque.interetsAnnuels[periode].toFixed(
                                    0
                                )}</td>
                        </tr>
                    {/each}
                </tbody>
            </table>
        </div>
    {:else}
        <div class="my-3">
            <table class="table table-zebra inline-block w-auto">
                <thead>
                    <tr>
                        <th>Mois</th>
                        <th>Capital restant dû</th>
                        <th>Principal</th>
                        <th>Intérêts</th>
                    </tr>
                </thead>
                <tbody>
                    {#each $banque.remboursement as r, periode (periode)}
                        <tr>
                            <td>{periode}</td>
                            <td>{$banque.crd[periode].toFixed(0)}</td>
                            <td>{r.toFixed(0)}</td>
                            <td
                                >{#if periode > 0}
                                    {$banque.interets[periode].toFixed(0)}
                                {/if}
                            </td>
                        </tr>
                    {/each}
                </tbody>
            </table>
        </div>
    {/if}
</div>

<style>
    table {
        font-size: 90%;
    }
    th {
        font-size: 1rem;
        font-weight: bold;
    }
    td {
        padding: 5px 5px;
        padding: 5px 7px 5px 10px;
        text-align: end;
        border: none;
    }
</style>
