@props([
    'iso' => '',
    'value' => [],
    'stats' => [],
    'from' => null,
    'to' => null,
])

<div x-data="{ open: false, loading: false }">

    <div class="relative bg-neutral-800 rounded-2xl p-4 shadow cursor-pointer" @click="open = true">
        <h3 class="text-sm font-bold text-neutral-400 uppercase mb-1">
            {{ config('countries')[$iso]['name'] }}
        </h3>

        <p class="text-2xl font-bold mt-2">
            {{ $value['moneyInvoiced'] }} USD
            @if($value['refundMoney'] > 0)
                <span class="text-red-500">- {{ $value['refundMoney'] }} USD</span>
            @endif
        </p>
        @if ($value['refundMoney'] > 0)
            <p class="text-2xl font-bold">
                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>
                <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="text-xs">compared to yesterday at this time</small>
            </p>
        @endif

        <p class="text-2xl mt-2">
            {{ $value['paid'] }} payments
            @if ($value['refunded'] > 0)
                <span class="text-red-500"> {{ $value['refunded'] }} refunds</span>
            @endif
        </p>

        @if ($from->isToday() && $to->isToday())
            <p>
                <span class="text-sm">{{ $stats['countries'][$iso]['yesterday']['paid'] }}</span>

                <small class="text-xs">payments yesterday at this time.
                    {{ $stats['countries'][$iso]['yesterday']['moneyInvoiced'] }}
                    USD</small>
            </p>
        @endif

        <div class="absolute -top-4 -right-4">
            <x-icon name="flag-country-{{ strtolower($iso) }}" class="size-16 rounded-2xl" />
        </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>