@props([
    'calculator' => null,
    'cols' => [
        'bank' => 'Banque',
        'product' => 'Produit',
        'type' => 'Type de crédit',
    ],
    'resultCol' => 'Résultat',
    'resultType' => 'float',
    'results' => [],
])

@if($results)
<table class="table table-bordered table-responsive">
    <thead>
        <tr>
            @foreach($cols as $key => $col)
                <th scope="col" @class(['text-center' => $key === 'bank'])>{{ $col }}</th>
            @endforeach
            @if($calculator === 'loanAmountCalculator')
            <th scope="col">Curseurs</th>
            @endif
            @if($resultCol)
                <th scope="col">{{ $resultCol }}</th>
            @endif
        </tr>
    </thead>
    <tbody class="bg-white">
        @foreach($this->results as $index => $result)
            <tr>
                @foreach($cols as $key => $col)
                    @continue(!  data_get($result, $key))
                    <td @class(['text-center' => $key === 'bank'])>
                        @if($key === 'bank')
                        <div x-data="tooltip" title="{{ data_get($result, 'bank') }}">
                            <img 
                                src="{{ asset(data_get($result, 'bank_img', '#')) }}" 
                                alt="{{ data_get($result, 'bank') }}"
                                style="height: 40px"/>
                            @else
                                {{ data_get($result, $key) }}
                            @endif
                        </div>
                    </td>
                @endforeach
                @if($calculator === 'loanAmountCalculator')
                <td>
                    <div
                        x-data="{
                            duration: null,
                        }"
                        x-init="duration = {{ $this->results[$index]['item']['simulation']['duration'] }}"
                    >
                        <div class="form-control-wrap">
                            <div>@lang('Duration') <span class="ml-2 bold" x-text="duration"></span> mois</div>
                            <input
                                x-on:change="Livewire.emit('updateSimulationAndCalculate', {{ $index }}, 'duration', $event.target.value)"
                                x-model="duration"
                                class="w-full"
                                type="range" 
                                min="36"
                                max="300"
                                step="12">
                        </div>
                    </div>
                </td>
                @endif
                @if($resultCol)
                    @if($resultType === 'float')
                        <td class="bold nowrap">@cf(data_get($result, 'result'))</td>
                    @else
                        <td class="bold nowrap">{{ data_get($result, 'result') }}</td>
                    @endif
                @endif
            </tr>
        @endforeach
    </tbody>
</table>
@endif