<style>
.tabsisatebu th:nth-child(1), .tabsisatebu td:nth-child(1) {
    position: sticky;
    left: 0;
    background: #FFF;
    z-index: 11;
}

    </style>
<div class="col-12 col-lg-12 mb-3" style="overflow-x: auto;">
        <table class="table table-bordered table-hover table-sm tabsisatebu">
            <thead>
            <tr>
            <th style="font-weight:bold !important;font-size:14px; font-weight:bold; vertical-align: middle;" rowspan="2">Nama Kebun</th>
            <th style="font-weight:bold !important;font-size:12px;text-align:center;background-color: ffbbc1;" colspan="3">RKAP Total</th>

            <th style="font-weight:bold !important;font-size:12px;text-align:center;background-color: b1e9bf;" colspan="3">Realisasi Tertebang<br>(Laporan Timbangan PG)</th>
            
            <th style="font-weight:bold !important;font-size:12px;text-align:center;background-color: ffbbc1;" colspan="3">% Realisasi RKAP Total</th>

            </tr>
            <tr>
            <th style="font-weight:bold !important;font-size:12px;text-align:center;background-color: ffbbc1;z-index:0 !important;">Luas<br>(Ha)</th>
            <th style="font-weight:bold !important;font-size:12px;text-align:center;background-color: ffbbc1;z-index:0 !important;">Ton Tebu<br>(Ha)</th>
            <th style="font-weight:bold !important;font-size:12px;text-align:center;background-color: ffbbc1;z-index:0 !important;">Protas<br>(Ton/Ha)</th>


            <th style="font-weight:bold !important;font-size:12px;text-align:center;background-color: b1e9bf;z-index:0 !important;">Luas<br>(Ha)</th>
            <th style="font-weight:bold !important;font-size:12px;text-align:center;background-color: b1e9bf;z-index:0 !important;">Ton Tebu<br>(Ha)</th>
            <th style="font-weight:bold !important;font-size:12px;text-align:center;background-color: b1e9bf;z-index:0 !important;">Protas<br>(Ton/Ha)</th>



            <th style="font-weight:bold !important;font-size:12px;text-align:center;background-color: ffbbc1;z-index:0 !important;">Luas<br>(Ha)</th>
            <th style="font-weight:bold !important;font-size:12px;text-align:center;background-color: ffbbc1;z-index:0 !important;">Tebu<br>(Ton)</th>
            <th style="font-weight:bold !important;font-size:12px;text-align:center;background-color: ffbbc1;">% Protas</th>


            </tr>
            </thead>
            <tbody>
            @foreach($datasisatebu as $kebun)
            <tr>
                @php 
                    $bold = '';
                @endphp 
                @if(strpos($kebun->nama_kebun, 'TOTAL') !== false)
                    @php 
                        $bold = 'font-weight:bold;';
                    @endphp
                @endif

            <td style="font-size:14px;{{ $bold }}">{{ $kebun->nama_kebun }}</td>
            <td style="text-align: right;background-color:#f8d7da;{{ $bold }}">{{ number_format($kebun->takmar, 2) }}</td>
            <td style="text-align: right;background-color:#f8d7da;{{ $bold }}">{{ number_format($kebun->takmar_tebu, 2) }}</td>
            <td style="text-align: right;background-color:#f8d7da;{{ $bold }}">{{ number_format($kebun->takmar_protas, 1) }}</td>



            <td style="text-align: right;background-color:#d4edda;{{ $bold }}">{{ number_format($kebun->tertebang, 2) }}</td>
            <td style="text-align: right;background-color:#d4edda;{{ $bold }}">{{ number_format($kebun->real_tebu, 2) }}</td>
            <td style="text-align: right;background-color:#d4edda;{{ $bold }}">{{ number_format($kebun->real_protas, 1) }}</td>

            <td style="text-align: right;background-color:#f8d7da;{{ $bold }}">
            <div style="display: flex; align-items: center; justify-content: flex-end;">
                <span>{{ number_format($kebun->persen_luas, 2) }}%</span>
                <div style="width: 50px; height: 10px; margin-left: 10px; background-color: #ccc; border-radius: 5px; overflow: hidden;">
                <div style="width: {{ $kebun->persen_luas }}%; height: 100%; background-color: {{ $kebun->persen_luas < 50 ? '#dc3545' : '#28a745' }};"></div>
                </div>
            </div>
            </td>
            <td style="text-align: right;background-color:#f8d7da;">
            <div style="display: flex; align-items: center; justify-content: flex-end;">
                <span>{{ number_format($kebun->persen_tebu, 2) }}%</span>
                <div style="width: 50px; height: 10px; margin-left: 10px; background-color: #ccc; border-radius: 5px; overflow: hidden;">
                <div style="width: {{ $kebun->persen_tebu }}%; height: 100%; background-color: {{ $kebun->persen_tebu < 50 ? '#dc3545' : '#28a745' }};"></div>
                </div>
            </div>
            </td>
            
                @if($kebun->takmar_protas != 0)
                    @php
                        $percentage = ($kebun->real_protas / $kebun->takmar_protas) * 100;
                        $color = $percentage >= 90 ? '#28a745' : ($percentage >= 70 ? '#ffc107' : '#dc3545');
                        $backgroundColor = $percentage >= 90 ? '#c3e6cb' : ($percentage >= 70 ? '#ffeeba' : '#f5c6cb');
                    @endphp
                    <td style="text-align: right; font-weight:bold;background-color:{{ $backgroundColor }}">{{ number_format($percentage, 1) }}%</td>
                @else
                    <td style="text-align: right; font-weight:bold;background-color:#f5c6cb;">0.0%</td>
                @endif

                

                 
            </tr>
            @endforeach

          
            </tbody>
          
        </table>
    </div>