@extends('layouts.app')
@section('title', 'Premios')
@section('content')
    <div class="px-2 sm:px-10 pt-2 pb-4">
        <div class="bg-purple-custom rounded-lg">
            <h1 class="py-2 text-white text-center font-bold text-lg">PREMIOS</h1>
        </div>
        <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">
            @forelse ($awards as $award)
                <div class="rounded-3xl shadow-lg border border-gray-100 bg-white-custom">
                    <a class="cursor-pointer h-full flex flex-col {{ $award->auth_user_reached_max_redeem || $award->total_quantity <= 0 ? '' : 'modal-custom' }}"
                        data-slug="redeem-awards-{{ $award['slug'] }}">
                        <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 class="product-sold-out h-full">
                                {{ $award->total_quantity <= 0 ? 'AGOTADO' : '' }}
                            </div>
                        </div>
                    </a>
                    @include('home.partials.modal-redeem-awards', ['award' => $award])
                </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>
@endsection

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