@extends('layouts.app')
@section('title', 'Premios')
@section('content')
    <div class="font-dunkin-sans-display sm:px-10 sm:pt-2 pb-4">
        <div class="bg-purple-custom rounded-lg text-white text-center text-lg py-6 md:py-2">
            <h1 class="">PREMIOS</h1>
        </div>
        <div class="rounded-t-2xl sm:rounded-none bg-cream-custom sm:bg-white transform -translate-y-4 sm:translate-y-0">
            <div class="bg-coffee-custom w-64 mx-auto rounded-b-xl mb-4">
                <h2 class="text-white font-bold py-2 text-center">
                    Tus puntos: <span></span> {{ auth()->user()->total_points_format }}
                </h2>
            </div>
            <div class="my-2">
                @include('partials.alerts')
            </div>
            <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 px-2">
                @forelse ($awards as $award)
                    <div class="rounded-3xl shadow-lg border border-gray-100 bg-white-custom relative group">
                        <a class="cursor-pointer h-full flex flex-col {{ $award->auth_user_reached_max_redeem || $award->total_quantity <= 0 ? 'filter brightness-50 md:brightness-100 group-hover:brightness-50' : 'show-modal-award' }}"
                            data-values='@json($award->modalVisibleAttributes())'>
                            <h4 class="text-center font-bold text-coffee-custom">
                                {{ $award->name }}
                            </h4>
                            <img class="mx-auto" src="{{ asset('storage/' . $award->image) }}" alt="picture_award"
                                width="100%">
                            <div
                                class="bg-purple-custom rounded-b-3xl py-auto text-center text-white h-full {{ !auth()->user()->authUserCanRedeemAward($award) ? 'bg-fuchsia cursor-not' : '' }} text-sm sm:test-base flex flex-col">
                                <h3 class="font-bold text-xl">
                                    {{ $award->points_for_redeem_format }} Puntos
                                </h3>
                                <h3>
                                    Unidades disponibles: {{ $award->total_quantity }}
                                </h3>
                            </div>
                        </a>
                        @if ($award->auth_user_reached_max_redeem || $award->total_quantity <= 0)
                            <div
                                class="-translate-x-1/2 -translate-y-1/2 absolute left-1/2 text-white top-1/2 transform z-20 text-xl cursor-pointer text-center block md:hidden group-hover:block">
                                {{ $award->total_quantity <= 0 ? 'AGOTADO' : '' }}
                                {{ $award->auth_user_reached_max_redeem ? 'Premio redimido' : '' }}
                            </div>
                        @endif
                    </div>
                @empty
                    <div class="col-span-3">
                        <div class="card-without-awards text-center">
                            <h1>Por el momento no hay premios disponibles ...</h1>
                        </div>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
    @include('home.partials.modal-redeem-awards')
@endsection

@section('scripts')
    <script type="text/javascript"></script>
@endsection