@props([
    'title' => '',
    'rows' => [],
    'customerIds' => [],
])
<table class="table table-sm table-borderless m-0 mb-3">
    <thead>
    <tr class="bg-gray-300 fw-bold">
        <td colspan="4" class="text-center border-gray-400 border-bottom">{{ $title }} </td>
    </tr>
    <tr class="bg-gray-300 fw-bold">
        <td class="text-center" style="width: 15%">{{ __('validation.attributes.code') }}</td>
        <td class="text-center" style="width: 50%">{{ __('validation.attributes.name') }}</td>
        <td class="text-center" style="width: 25%">{{ __('validation.attributes.amount') }}</td>
        <td class="text-center" style="width: 10%">%</td>
    </tr>
    </thead>
    <tbody>
    @php
        $totalAmount = $totalRate = 0;
    @endphp
    @forelse($rows as $row)
        @php
            $totalAmount += $row->amount;
            $totalRate += $row->rate;
            $hasTransaction = in_array($row->customer_id, $customerIds);
        @endphp
        <tr class="{{ $loop->even ? 'bg-gray-100' : '' }} {{ !$hasTransaction ? 'text-primary' : '' }}">
            <td>{{ $row->customer_code }}</td>
            <td>{{ $row->customer_name }}</td>
            <td class="text-end">{{ $row->amount}}</td>
            <td class="text-center">{{ $row->rate }}</td>
        </tr>
    @empty
        <tr>
            <td colspan="4">{{ __('messages.data.not-found') }}</td>
        </tr>
    @endforelse
    </tbody>
    <tfoot>
    <tr class="bg-gray-300 fw-bold border-gray-400 border-bottom">
        <td colspan="2">Total</td>
        <td class="text-end">{{ $totalAmount }}</td>
        <td class="text-center">{{ $totalRate  }}</td>
    </tr>
    </tfoot>
</table>