@extends('layouts.check')

<link rel="manifest" href="/manifest.json">
<script type="text/javascript" src="sw.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css" />

@if ($errors->any())
    @foreach ($errors->all() as $error)
        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content" style="border: none;">
                    <div class="modal-header" style="background-color: #020f1e;color: #fff;">
                        <h5 class="modal-title" id="exampleModalLabel"><i class="bi bi-info-circle"></i> Aviso</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                            style="color: #fff;">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" style="background-color: #020f1e;color: #fff;">
                        <div style="text-align: center;">{{ $error }}</div>
                    </div>
                    <div class="modal-footer" style="background-color: #020f1e;color: #fff;">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $('#exampleModal').modal({
                show: true
            });
        </script>
    @endforeach
@endif

<style>
    .payment-hero {
        background: linear-gradient(to bottom, #16a34a 50%, #f3f4f6 50%);
    }
</style>

@section('content')
    <section class="relative payment-hero min-h-screen">
        <div class="container mx-auto">
            <a href="/sorteio/{{ $rifaDestaque->slug }}">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="w-6 h-6 text-white">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"></path>
                </svg>

            </a>
        </div>
        <div class="max-w-[600px] mx-auto">
            <div class="flex flex-col items-center pt-14">

                <h1 id="title-checkout" class="text-white font-medium text-xl px-4 py-5 text-center md:text-3xl md:mb-10">
                    ✅ Sucesso! Sua compra foi concluída com êxito. Boa Sorte!!!
                </h1>

                <div class="bg-white shadow-lg rounded-lg p-6 mx-4 md:w-full mx-auto space-y-10 mb-5">
                    <div class="w-full flex items-start">
                        <div class="hidden md:w-1/3 md:block">
                            <img src="/products/{{ $rifaDestaque->imagem()->name }}" alt="Imagem do sorteio">
                        </div>
                        <div class="w-full md:w-2/3 pl-3 ">
                            <div class="flex flex-col text-gray-900 space-y-1 text-sm">
                                <div class="flex justify-between">
                                    <span class="font-bold">Sorteio:</span>
                                    <span>{{ $rifaDestaque->name }}</span>
                                </div>

                                <div class="flex justify-between">
                                    <span class="font-bold">Quantidade:</span>
                                    <span>{{ count($participante->numbers()) }} cotas</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="font-bold">Valor por cota:</span>
                                    <span>R$ {{ $rifaDestaque->price }}</span>
                                </div>

                                <div class="flex justify-between">
                                    <span class="font-bold flex items-center justify-between w-full">

                                        <span class="mr-3">Cotas:</span>

                                        <span class="ml-3 flex">
                                            <small id='my-cotas' class="text-gray-500">
                                                {!! $cotas !!}
                                            </small>
                                        </span>
                                    </span>

                                </div>

                            </div>
                        </div>
                    </div>
                    <div id='retorno' class="flex flex-wrap">
                        <a href="/sorteio/{{ $rifaDestaque->slug }}"
                            class="flex justify-center item-center bg-green-500 px-6 py-3 rounded-lg text-white mr-4 hover:bg-green-600 w-full mb-2 md:w-5/12">
                            Voltar ao sorteio
                        </a>
                        @if (env('COMPROVANTE'))
                            <a href="{{ route('comprovanteRifaPDF', $participante->id) }}"
                                class="flex justify-center item-center bg-green-500 px-6 py-3 rounded-lg text-white mr-4 hover:bg-green-600 w-full mb-2 md:w-5/12">
                                Baixar Comprovante
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection