@extends('layouts.adminv2')

@section('content')
<div class="container mt-3" style="max-width:100%;min-height:100%;">
    <div class="col d-flex justify-content-center">
        <h2>Ganhadores</h2>
    </div>



    <form action="{{ route('ganhador.addFoto') }}" method="POST" enctype="multipart/form-data" id="form-foto"
        class="d-none">
        @csrf
        <input type="text" name="idGanhador" id="idGanhador">
        <input type="file" name="foto" id="btnFoto" accept="image/png, image/jpeg">
    </form>
    <div class="d-flex gap-3 flex-wrap">
        @foreach ($ganhadores as $ganhador)
        <div class="card" style="width: 18rem;">
            @if ($ganhador->foto)
            <img src="{{ asset($ganhador->foto) }}" class="card-img-top">
            @else
            <img src="{{ asset('images/sem-foto.jpg') }}" class="card-img-top">
            @endif
            <div class="card-body d-flex flex-column">
                <div class="top border-bottom border-dark">
                    <h6 style="font-weight: bolder">{{ $ganhador->ganhador }}</h6>
                </div>
                <div class="meio my-2" style="flex: 1">
                    <div class="card-text">{{ $ganhador->rifa()->name }}</div>
                </div>
                <button class="btn btn-sm btn-primary w-100" type="button" data-id="{{ $ganhador->id }}"
                    onclick="alterarFoto(this)">
                    <i class="far fa-edit"></i>&nbsp;Alterar Foto
                </button>
            </div>
        </div>
        @endforeach
    </div>
</div>
@endsection

<script src="https://code.jquery.com/jquery-3.7.0.min.js"
    integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script>
    function alterarFoto(el) {
        let idGanhador = el.dataset.id;
        $('#idGanhador').val(idGanhador)
        $('#btnFoto').click();
    }

    $(function(e) {
        document.getElementById("btnFoto").addEventListener("change", function() {
            $('#form-foto').submit()
        });
    })
</script>