{{-- <div> --}}


    @php
    $raffles = [
    [
    'endTime' => '21-10-2024 06:45:00',
    ],
    ];
    @endphp




    {{-- <div class="flex items-center w-full gap-2 mx-auto justify-evenly"> --}}

        <div class="flex w-full gap-2 mx-auto">

            @foreach ( $raffles as $key => $raffle )

            <div class="flex w-full border-4 border-yellow-600 rounded-lg bg-stone-600 dark:bg-stone-950">


                <div class="w-full bg-stone-600 dark:bg-stone-600">

                    <div class="flex items-center w-full">
                        <x-fas-ticket class="w-8 h-8 text-gray-900" />
                        PRICE
                    </div>

                    <div class="flex items-center w-full">
                        <x-fas-trophy class="w-8 h-8 text-gray-900" />
                        PRIZE
                    </div>

                    <div class="flex items-center w-full">
                        <x-fas-coins class="w-8 h-8 text-gray-900" />
                        COST
                    </div>

                    {{--
                    <div class="flex items-center justify-center w-full mx-auto bg-gray-900 rounded">
                        <div class="flex items-center justify-center w-full p-2 rounded">
                            <div
                                class="flex items-center justify-center w-6/12 p-1 font-mono text-3xl font-semibold border-r-4 border-emerald-600">
                                99999
                            </div>
                            <div class="p-1 font-mono font-semibold text-gray-700 uppercase text-md">
                                of
                            </div>
                            <div
                                class="flex items-center justify-center w-6/12 p-1 font-mono text-3xl font-semibold border-l-4 border-emerald-600">
                                99999
                            </div>
                        </div>
                    </div>
                    --}}


                    {{--<div class="flex flex-col items-center justify-end w-full h-48 mt-4 rounded">--}}
                        {{--<div class="flex items-center justify-center w-full bg-gray-900 rounded">--}}
                            <div class="bg-gray-800 ">
                                <div class="flex w-full gap-2 px-3 rounded-sm">
                                    <div class="font-sans text-3xl font-bold">
                                        {{str_pad($this->daysLeft, 2, '0', STR_PAD_LEFT)}}
                                        <div class="text-xs font-bold text-center uppercase">day</div>
                                    </div>
                                    <div class="flex items-center">:</div>
                                    <div class="font-sans text-3xl font-bold">
                                        {{str_pad($this->hoursLeft, 2, '0', STR_PAD_LEFT)}}
                                        <div class="text-xs font-bold text-center uppercase">hr</div>
                                    </div>
                                    <div class="flex items-center">:</div>
                                    <div class="font-sans text-3xl font-bold">
                                        {{str_pad($this->minutesLeft, 2, '0', STR_PAD_LEFT)}}
                                        <div class="text-xs font-bold text-center uppercase">min</div>
                                    </div>
                                    <div class="flex items-center">:</div>
                                    <div class="font-sans text-3xl font-bold">
                                        {{str_pad($this->secondsLeft, 2, '0', STR_PAD_LEFT)}}
                                        <div class="text-xs font-bold text-center uppercase">sec</div>
                                    </div>
                                </div>
                            </div>
                            {{--
                        </div>--}}
                        {{--</div>--}}




                </div>
            </div>
            @endforeach

        </div>


        {{--
    </div> --}}

    {{--
    <div class="w-3/12 my-40 border-2 border-gray-700 rounded-lg ">
        <div class="flex items-center justify-between w-full p-2">
            <div class="">
                RAFFLE NAME
            </div>
            <div class="">
                <x-fas-ticket class="w-4 h-4" />
            </div>
        </div>

        <div class="flex items-center justify-between w-full p-2">
            <div class="">
                RAFFLE PRIZE
            </div>
            <div class="">
                <x-fas-trophy class="w-4 h-4" />
            </div>
        </div>


        <div class="">
            aaaaa
        </div>
    </div>
    --}}


    {{-- <div class="">
        @if($this->raffleEnded)
        <div class="">
            <x-button class="bg-blue-600">collect</x-button>
        </div>
        @else
        <div class="">
            <x-button class="bg-blue-600" :disabled="true">
                <div class="flex px-3 py-2 bg-gray-800 rounded-sm">
                    <div class="font-sans text-xs">
                        {{str_pad($this->daysLeft, 2, '0', STR_PAD_LEFT)}}:
                    </div>
                    <div class="font-sans text-xs">
                        {{str_pad($this->hoursLeft, 2, '0', STR_PAD_LEFT)}}:
                    </div>
                    <div class="font-sans text-xs">
                        {{str_pad($this->minutesLeft, 2, '0', STR_PAD_LEFT)}}:
                    </div>
                    <div class="font-sans text-xs">
                        {{str_pad($this->secondsLeft, 2, '0', STR_PAD_LEFT)}}
                    </div>
                </div>
            </x-button>
        </div>
        @endif
    </div> --}}


    {{-- @if(!$this->raffleEnded)
    <div class="">
        <div class="">
            <x-button class="bg-blue-600">collect</x-button>
        </div>
        @else
        <div class="">
            <x-button class="bg-blue-600" :disabled="true">
                <div class="font-sans text-xs">
                    {{str_pad($this->daysLeft, 2, '0', STR_PAD_LEFT)}}:
                </div>
                <div class="font-sans text-xs">
                    {{str_pad($this->hoursLeft, 2, '0', STR_PAD_LEFT)}}:
                </div>
                <div class="font-sans text-xs">
                    {{str_pad($this->minutesLeft, 2, '0', STR_PAD_LEFT)}}:
                </div>
                <div class="font-sans text-xs">
                    {{str_pad($this->secondsLeft, 2, '0', STR_PAD_LEFT)}}
                </div>
            </x-button>
        </div>
    </div>
    @endif --}}



    {{-- <script>
        --}}
        {{-- document.addEventListener('DOMContentLoaded', function() {setInterval(() => {@this.call('refreshTimer');}, 1000);});  --}}
    {{--
    </script> --}}

    {{--
</div> --}}

{{--<div class="countdown-timer">

</div>--}}
{{-- <span wire:stream="timeRemaining">{{ $this->timeRemaining }}</span> --}}

{{-- <div class="">
    <x-inline-input id="secondsLeft" type="text" class="w-full" :disabled="true" wire:stream="secondsLeft"
        wire:model="secondsLeft">
        <x-slot name="prefix">
            <x-slot name="prefixIcon">
                <x-fas-user-circle title="secondsLeft" class="w-6 h-6 text-gray-900" />
            </x-slot>
        </x-slot>
    </x-inline-input>
</div>

<div class="">
    <x-inline-input id="secondsLeft" type="text" class="w-full" :disabled="true" wire:stream="secondsLeft"
        wire:model="secondsLeft">
        <x-slot name="prefix">
            <x-slot name="prefixIcon">
                <x-fas-user-circle title="secondsLeft" class="w-6 h-6 text-gray-900" />
            </x-slot>
        </x-slot>
    </x-inline-input>
</div> --}}





{{-- <div>
    <div class="">
        <x-inline-input id="daysLeft" type="text" class="w-full" :disabled="true" wire:model.poll="daysLeft">
            <x-slot name="prefix">
                <x-slot name="prefixIcon">
                    <x-fas-user-circle title="daysLeft" class="w-6 h-6 text-gray-900" />
                </x-slot>
            </x-slot>
        </x-inline-input>
    </div>


    <div class="">
        <x-inline-input id="hoursLeft" type="text" class="w-full" :disabled="true" wire:model="hoursLeft">
            <x-slot name="prefix">
                <x-slot name="prefixIcon">
                    <x-fas-user-circle title="hoursLeft" class="w-6 h-6 text-gray-900" />
                </x-slot>
            </x-slot>
        </x-inline-input>
    </div>

    <div class="">
        <x-inline-input id="minutesLeft" type="text" class="w-full" :disabled="true" wire:model="minutesLeft">
            <x-slot name="prefix">
                <x-slot name="prefixIcon">
                    <x-fas-user-circle title="minutesLeft" class="w-6 h-6 text-gray-900" />
                </x-slot>
            </x-slot>
        </x-inline-input>
    </div>

    <div class="">
        <x-inline-input id="secondsLeft" type="text" class="w-full" :disabled="true" wire:model="secondsLeft">
            <x-slot name="prefix">
                <x-slot name="prefixIcon">
                    <x-fas-user-circle title="secondsLeft" class="w-6 h-6 text-gray-900" />
                </x-slot>
            </x-slot>
        </x-inline-input>
    </div>
</div> --}}

{{--str_pad($this->seconds, 2, '0', STR_PAD_LEFT)--}}

{{--
<script>
    document.addEventListener('DOMContentLoaded', function() {
                setInterval(() => {
                    @this.call('refreshTimer');
                }, 1000);
            });
</script>
--}}