package corporate_mcudetail

import "cpone/component/customtextfield"
import "cpone/models"

templ TabKeuanganScreen(
    tableID string,
    paginationID string,
    totalcardcomponent templ.Component,
    tableandpagination templ.Component,
) {
    <div class="container-fluid">
        @customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "tableID",
            Name: "tableID",
            Type: "hidden",
            Value: tableID,
        })
        @customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "paginationID",
            Name: "paginationID",
            Type: "hidden",
            Value: paginationID,
        })
        <div class="d-flex justify-content-center py-10">
            <h2 class="title text-black" style="margin-bottom: 0">Keuangan</h2>
        </div>
        <div id="loading-parent" class="rounded">
            @totalcardcomponent
            @tableandpagination
            <div id="loading-child" class="rounded bg-transparent">
                <div id="loading-spinner" class="spinner-border text-primary d-none" style="width: 3rem; height: 3rem;" role="status">
                    <span class="sr-only">Loading....</span>
                </div>
            </div>
        </div>
        <div id="loadingcontent"></div>
    </div>
}

templ KeuanganCard(
    totalOrder string,
    totalTagihan string,
    totalPelunasan string,
    totalHutang string,
) {
    <div class="row">
        <div class="col-3">
            <div class="card bg-primary-transparent shadow p-4">
                <div class="d-flex flex-column">
                    <h3>Order</h3>
                    <h1 class="font-weight-bolder ml-auto mt-4">{ totalOrder }</h1>
                </div>
            </div>
        </div>
        <div class="col-3">
            <div class="card bg-warning-transparent shadow p-4">
                <div class="d-flex flex-column">
                    <h3>Tagihan</h3>
                    <h1 class="font-weight-bolder ml-auto mt-4">{ totalTagihan }</h1>
                </div>
            </div>
        </div>
        <div class="col-3">
            <div class="card bg-success-transparent shadow p-4">
                <div class="d-flex flex-column">
                    <h3>Pelunasan</h3>
                    <h1 class="font-weight-bolder ml-auto mt-4">{ totalPelunasan }</h1>
                </div>
            </div>
        </div>
        <div class="col-3">
            <div class="card bg-danger-transparent shadow p-4">
                <div class="d-flex flex-column">
                    <h3>Hutang</h3>
                    <h1 class="font-weight-bolder ml-auto mt-4">{ totalHutang }</h1>
                </div>
            </div>
        </div>        
    </div>
}