<style>
    .text_percentage{
        font-size: 1.5rem;
        color: #192d4b;
        font-weight: bold;
    }
    .circle-percentage {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: #fbe9e7;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: #e57353;
        font-weight: bold;
        margin: auto;
    }
    .legend {
        display: flex;
        gap: 1.5rem;

        align-items: center;
    }
    .legend-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 6px;
    }
    .dot-incomplete {
        background: #e57353;
    }
    .dot-complete {
        background: #00bfae;
    }
    .card-body{
        padding: 0.5rem;
    }
</style>

<div class="row m-0" style="height: 121px;">
    <div class="card w-100">
        <div class="card-body d-flex align-items-center justify-content-between" style="height: 80px;">
            <div class="col-9">
                <span class="text_percentage">Percentage of Completion</span> <br>
                <small class="text-danger">*เปอร์เซ็นต์ความสำเร็จเคส</small>
                <hr>
                <div class="legend ps-2">
                    <span><span class="legend-dot dot-incomplete"></span> <span style="color:#e57353">Incomplete</span></span>
                    <span><span class="legend-dot dot-complete"></span> <span style="color:#00bfae">Complete</span></span>
                </div>
            </div>
            <div class="col-3 d-flex align-items-center justify-content-end">
                <div class="circle-percentage">{{@$percentage}}%</div>
            </div>
        </div>


    </div>
</div>
