@props([
    'iso' => '',
    'value' => [],
    'stats' => [],
    'from' => null,
    'to' => null,
])
<div class="col-xl-4 col-sm-6" x-data="{ open: false, loading: false }">
    <div class="card" @click="open = true">
        <div class="card-body position-relative">
            <h5 class="text-sm font-bold text-neutral-400 uppercase mb-1">
                {{ config('countries')[$iso]['name'] }}
            </h5>
            <hr>
            <h2>
                {{ $value['moneyInvoiced'] }} USD
                @if($value['refundMoney'] > 0)
                    <span class="text-red-500">- {{ $value['refundMoney'] }} USD</span>
                @endif
            </h2>
            @if ($value['refundMoney'] > 0)
                <p class="fs3">
                    Total
                    @if($value['profit'] <= 0)
                        <span class="text-red-500">{{$value['profit']}} USD</span>
                    @else
                        <span class="text-green-500">{{$value['profit']}} USD</span>
                    @endif
                </p>
            @endif
            @if ($from->isToday() && $to->isToday())
                <p class="fs3">
                    <span
                        @class([
                            'text-sm',
                            'text-green-500' => $stats['countries'][$iso]['today']['difference'] > 0,
                            'text-red-500' => $stats['countries'][$iso]['today']['difference'] < 0,
                            'text-neutral-400' =>
                                $stats['countries'][$iso]['today']['difference'] === 0,
                        ])>{{ $stats['countries'][$iso]['today']['difference'] }}%</span>
                    <small class="fs-6">compared to yesterday at this time</small>
                </p>
            @endif
            <h4 class="mt-2">
                {{ $value['paid'] }} payments
                @if ($value['refunded'] > 0)
                    <span class="text-red-500"> {{ $value['refunded'] }} refunds</span>
                @endif
            </h4>
            @if ($from->isToday() && $to->isToday())
                <p class="fs3">
                    <span class="text-sm">{{ $stats['countries'][$iso]['yesterday']['paid'] }}</span>
                    <small class="fs-6">payments yesterday at this time.
                        {{ $stats['countries'][$iso]['yesterday']['moneyInvoiced'] }}
                        USD</small>
                </p>
            @endif
            <div class="position-absolute top-0 end-0 mt-2 me-2">
                <x-icon name="flag-country-{{ strtolower($iso) }}" class="ws-60" />
            </div>
        </div>
    </div>
    <div x-show="open" style="z-index: 10; display:none" class="fixed inset-0 flex items-center justify-center bg-black/75">
        <div class="bg-neutral-900 p-6 rounded-lg shadow-lg" style="max-width: 95vw">
            <h3 class="text-sm font-bold text-neutral-400 uppercase mb-1">
                {{ config('countries')[$iso]['name'] }}
            </h3>
            @if ($value['countryOfPersons']->count() > 0)
                <div style="max-height:80vh; min-width:80vw; overflow-y:auto;">
                    <table class="w-full">
                        <thead>
                            <tr>
                                <th class="text-left">Country</th>
                                <th class="text-left">People</th>
                                <th class="text-left">Amount</th>
                                <th class="text-left">Refunds</th>
                                <th class="text-left">Refunded money</th>
                                <th class="text-left">Profit</th>
                            </tr>
                        </thead>
                        <tbody>
                            @for ($i = 0; $i < $value['countryOfPersons']->count(); $i++)
                                <tr>
                                    <td style="padding-right: 12px;"><span> {{ $value['countryOfPersons'][$i]['country'] }} </span></td>
                                    <td style="padding-right: 12px;"><span class="text-neutral-400">
                                        {{ $value['countryOfPersons'][$i]['total_people'] }} persons
                                    </span></td>
                                    <td><span class="text-neutral-400">
                                        {{ $value['countryOfPersons'][$i]['total_amount'] }} USD
                                    </span></td>
                                    <td><span class="text-neutral-400">
                                        {{ $value['countryOfPersons'][$i]['refunded'] }}
                                    </span></td>
                                    <td><span class="text-neutral-400">
                                        {{ $value['countryOfPersons'][$i]['total_refunds'] }}
                                    </span></td>
                                    <td><span class="text-neutral-400">
                                        {{ $value['countryOfPersons'][$i]['profit'] }}
                                    </span></td>
                                </tr>
                            @endfor
                        </tbody>
                    </table>
                </div>
            @else
                <p class="text-neutral-400">No data available</p>
            @endif
            <!-- Botones dentro del modal -->
            <div class="flex justify-between mt-4">
                <x-button @click="open = false" variant="danger" label="Cerrar"/>
            </div>
        </div>
    </div>
</div>
<script>
</script>