@extends('layouts.adminv2')
@section('title', 'Meus Sorteios')
<style>
    .hidden {
        display: none;
    }

    .promo {
        border: solid;
        border-width: thin;
        border-radius: 10px;
        padding: 20px;
    }
</style>
@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Meus Sorteios</h1>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>
<section class="content">
    <div class="container-fluid">
        <div class="row-12 mb-3 d-flex" style="justify-content: space-between;">
            <form method="GET" class="form-inline my-2 my-lg-0 d-flex">
                <input class="form-control mr-sm-2" type="search" name="search" placeholder="Pesquisar"
                    aria-label="Search">
                <button class="btn btn-outline-secondary my-2 my-sm-0 border border-secondary text-dark"
                    type="submit">Buscar</button>
            </form>
            <a href="#addEmployeeModal" class="btn btn-success d-flex align-items-center" data-bs-toggle="modal"
                data-bs-target="#addEmployeeModal"><i class="fas fa-plus"></i></a>
        </div>
        <!-- Main content -->
        <div class="row">
            <div class="col-md-12">

                <div class="d-flex gap-3 flex-wrap">
                    @foreach ($rifas as $key => $product)
                    <div class="card" style="width: 18rem;">
                        <img src="/products/{{ $product->imagem() ? $product->imagem()->name : '' }}"
                            class="card-img-top" alt="...">
                        <div class="card-body d-flex flex-column">
                            <div class="top border-bottom border-dark">
                                <h6 style="font-weight: bolder">{{ $product->name }}</h6>
                            </div>
                            <div class="meio my-2" style="flex: 1">
                                <div class="card-text">{{ $product->status }}</div>
                                <div>{{ $product->price }}</div>
                            </div>
                            <button class="btn btn-sm btn-primary w-100 dropdown-toggle"
                                style="margin-bottom: 0 auto" type="button" data-bs-toggle="dropdown"
                                aria-expanded="false">
                                Ações
                            </button>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" style="cursor: pointer" data-bs-toggle="modal"
                                    data-bs-target="#modal_editar_rifa{{ $product->id }}"><i
                                        class="bi bi-pencil-square"></i>&nbsp;Editar</a>
                                <a class="dropdown-item" href="" style="cursor: pointer"
                                    data-bs-target="#deleteEmployeeModal{{ $product->id }}" data-id="{{ $product->id }}"
                                    data-bs-toggle="modal" data-bs-target="#deleteEmployeeModal{{ $product->id }}"><i
                                        class="bi bi-trash3"></i>&nbsp;Excluir</a>
                                <a class="dropdown-item" href="{{ route('rifa.compras', $product->id) }}"><i
                                        class="fas fa-shopping-bag"></i></i>&nbsp;Compras</a>
                                <a class="dropdown-item" href="{{ route('resumoRifa', $product->id) }}"
                                    target="_blank"><i class="fas fa-list-ol"></i>&nbsp;Ver
                                    Resumo</a>
                                <a class="dropdown-item" href="#"
                                    onclick="copyResumoLink('{{ route('resumoRifa', $product->id) }}')"><i
                                        class="fas fa-link"></i>&nbsp;Copiar Link Resumo</a>
                                <a class="dropdown-item" href="javascript:void(0)" title="Ranking"
                                    onclick="openRanking('{{ $product->id }}')"><i
                                        class="fas fa-award"></i>&nbsp;Ranking</a>
                                <a class="dropdown-item" style="color: green" href="javascript:void(0)" title="Ranking"
                                    onclick="definirGanhador('{{ $product->id }}')"><i
                                        class="fas fa-check"></i>&nbsp;Definir Ganhador</a>
                                <a class="dropdown-item" href="javascript:void(0)" title="Ranking"
                                    onclick="verGanhadores('{{ $product->id }}')"><i
                                        class="fas fa-users"></i>&nbsp;Visualizar Ganhadores</a>

                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>

                <!-- /.card -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
    <!--/. container-fluid -->
</section>



{{-- START TABELA MEUS SORTEIOS --}}
<div id="addEmployeeModal" class="modal fade">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header d-flex align-items-center">
                <h4 class="modal-title">Nova Rifa</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <form action="{{ route('addProduct') }}" method="POST" enctype="multipart/form-data">

                    {{ csrf_field() }}
                    <div class="row align-items-center">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Modo de Jogo</label>
                                <select name="modo_de_jogo" class="form-control" required>
                                    <option value="numeros">Números</option>
                                    <option value="fazendinha-completa">Fazendinha - Grupo Completo
                                    </option>
                                    <option value="fazendinha-meio">Fazendinha - Meio Grupo
                                    </option>
                                </select>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Gateway de Pagamento</label>
                                <select name="gateway" class="form-control" required>
                                    <option value="mp">Mercado Pago</option>
                                    <option value="paggue">Paggue</option>
                                    <option value="asaas">ASAAS</option>
                                    <option value="openpix">OpenPix</option>
                                    <option value="ezzepay">EzzePay</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <label for="price">Valor</label>
                            <div class="input-group">
                                <span class="input-group-text" id="basic-addon1">R$:</span>
                                <input type="text" class="form-control" name="price" placeholder="Exemplo: 10,00"
                                    maxlength="6" id="price" required>
                            </div>
                        </div>

                        <div class="col-md-6">

                            <div class="form-group">
                                <label for="exampleInputEmail1">Nome</label>
                                <input type="text" class="form-control" id="name" name="name"
                                    placeholder="Exemplo: Fusca ano 88" required>
                            </div>
                        </div>

                        <div class="col-md-6">

                            <div class="form-group">
                                <label for="exampleInputEmail1">Sub Titulo</label>
                                <input type="text" class="form-control" id="subname" name="subname" required>
                            </div>
                        </div>

                        <div class="row d-flex">
                            {{-- <div class="col-md-6">
                                <label>Qtd de zeros</label>
                                <input type="number" name="qtd_zeros" class="form-control">
                            </div> --}}

                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="exampleFormControlFile1">Até 3 Imagens</label>
                                    <input type="file" class="form-control-file" name="images[]" accept="image/*"
                                        multiple required>
                                </div>
                            </div>
                        </div>


                    </div>

                    <div class="row mt-2 mb-2">
                        <div class="col-md-6">
                            <label>Qtd mínima de compra</label>
                            <input type="number" class="form-control" name="minimo" min="1" max="99999" required>
                        </div>
                        <div class="col-md-6">
                            <label>Qtd máxima de compra</label>
                            <input type="number" class="form-control" name="maximo" min="1" max="99999" required>
                        </div>
                    </div>

                    <div class="row mt-2 mb-2">
                        <div class="col-md-6">
                            <label for="exampleInputEmail1">Quantidade de números</label>
                            <input type="number" class="form-control" name="numbers" min="1" max="3000000"
                                placeholder="Exemplo: 100" required>
                        </div>
                        <div class="col-md-6">
                            <label>Tempo de expiração (min)</label>
                            <input type="number" class="form-control" name="expiracao" min="0" placeholder="Minutos"
                                required>
                        </div>

                    </div>

                    <div class="form-group">
                        <label for="summernote">Descrição do Sorteio</label>
                        <textarea class="form-control summernote" style="width: 100%;" name="description" rows="10"
                            style="min-height: 200px;" required></textarea>
                    </div>
                    <hr>
                    <center>
                        <h4>Prêmios</h4>
                    </center>

                    <div class="row mb-4">
                        <div class="col-md-6 mt-2">
                            <label>1º Prêmio</label>
                            <input type="text" class="form-control" name="premio1" required>
                        </div>

                        <div class="col-md-6 mt-2">
                            <label>2º Prêmio</label>
                            <input type="text" class="form-control" name="premio2">
                        </div>

                        <div class="col-md-6 mt-2">
                            <label>3º Prêmio</label>
                            <input type="text" class="form-control" name="premio3">
                        </div>

                        <div class="col-md-6 mt-2">
                            <label>4º Prêmio</label>
                            <input type="text" class="form-control" name="premio4">
                        </div>

                        <div class="col-md-6 mt-2">
                            <label>5º Prêmio</label>
                            <input type="text" class="form-control" name="premio5">
                        </div>

                        <div class="col-md-6 mt-2">
                            <label>6º Prêmio</label>
                            <input type="text" class="form-control" name="premio6">
                        </div>

                        <div class="col-md-6 mt-2">
                            <label>7º Prêmio</label>
                            <input type="text" class="form-control" name="premio7">
                        </div>

                        <div class="col-md-6 mt-2">
                            <label>8º Prêmio</label>
                            <input type="text" class="form-control" name="premio8">
                        </div>

                        <div class="col-md-6 mt-2">
                            <label>9º Prêmio</label>
                            <input type="text" class="form-control" name="premio9">
                        </div>

                        <div class="col-md-6 mt-2">
                            <label>10º Prêmio</label>
                            <input type="text" class="form-control" name="premio10">
                        </div>
                    </div>

                    <button type="submit" class="criar btn btn-success">Criar</button>

                </form>
            </div>
        </div>
    </div>
</div>

{{-- Modal Duplicar Rifa --}}
<div id="duplicar-modal" class="modal fade">
    <div class="modal-dialog modal-dialog-scrollable modal-lg">
        <div class="modal-content">
            <div class="modal-header d-flex align-items-center">
                <h4 class="modal-title">Duplicar Rifa</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">

                <form action="{{ route('duplicarProduct') }}" method="POST" enctype="multipart/form-data">

                    <input type="hidden" name="product" id="id-duplicar">
                    <center>
                        <h3 id="titulo-duplicar"></h3>
                    </center>
                    {{ csrf_field() }}

                    <div class="row mt-4">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Nome</label>
                                <input type="text" class="form-control" id="name" name="name"
                                    placeholder="Exemplo: Fusca ano 88" required>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label for="exampleInputEmail1">Valor</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">R$:</span>
                                </div>
                                <input type="text" class="form-control" name="price" placeholder="Exemplo: 10,00"
                                    maxlength="6" id="price" required>
                            </div>
                        </div>
                    </div>

                    <button type="submit" class="criar btn btn-success">Criar</button>

                </form>
            </div>
        </div>
    </div>
</div>

<script>
    function formatarMoeda() {
                                var elemento = document.getElementById('price');
                                var valor = elemento.value;


                                valor = valor + '';
                                valor = parseInt(valor.replace(/[\D]+/g, ''));
                                valor = valor + '';
                                valor = valor.replace(/([0-9]{2})$/g, ",$1");

                                if (valor.length > 6) {
                                    valor = valor.replace(/([0-9]{3}),([0-9]{2}$)/g, ".$1,$2");
                                }

                                elemento.value = valor;
                                if (valor == 'NaN') elemento.value = '';

                            }
</script>
@include('minhas-rifas.edit-modal')





@include('minhas-rifas.del-modal')


<div class="modal fade" id="modal-ranking" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"
    style="z-index: 9999999;">
    <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
        <div class="modal-content" style="border: none;">
            <div class="modal-header" style="background-color: #fff;">
                <h5 class="modal-title" id="exampleModalLabel" style="color: #000;"><img
                        src="{{ asset('images/treofeu.png') }}" alt=""> Top Compradores</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close" style="color: #000;">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="color: #000">
                <span id="content-modal-ranking"></span>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="modal-definir-ganhador" tabindex="-1" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Definir Ganhador</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <span id="content-modal-definir-ganhador"></span>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="modal-ver-ganhadores" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-body">
                <span id="content-modal-ver-ganhadores"></span>
            </div>
        </div>
    </div>
</div>
<!-- /.col-->
</div>
<!-- ./row -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"
    integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script>
    function openRanking(id) {
                    //$('#content-modal-ranking').html('')
                    $.ajax({
                        url: "{{ route('ranking.admin') }}",
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            _token: "{{ csrf_token()}}",
                            "id": id
                        },
                        success: function(response) {
                            console.log(response);
                            if (response.html) {
                                $('#content-modal-ranking').html(response.html)
                                $('#modal-ranking').modal('show')
                            }
                        },
                        error: function(error) {

                        }
                    })
                }

                document.getElementById("input-add-foto").addEventListener("change", function(el) {
                    $('#form-foto').submit();
                });

                function addFoto(el) {
                    $('#rifa-id').val(el.dataset.id)
                    $('#input-add-foto').click()
                }

                function excluirFoto(el) {
                    if (el.dataset.qtd <= 1) {
                        alert('A rifa precisa de pelo menos 1 foto, adicione outra antes de exlcuir!')
                        return;
                    }

                    const data = {
                        id: el.dataset.id
                    }

                    var id = el.dataset.id;
                    var url = '{{ route('excluirFoto') }}'
                    
                    Swal.fire({
                        title: 'Tem certeza que deseja excluir a foto ?',
                        html: `<input type="hidden" id="id" class="swal2-input" value="` + id + `">`,
                        inputAttributes: {
                            autocapitalize: 'off'
                        },
                        backdrop: true,
                        showCancelButton: true,
                        confirmButtonText: 'Excluir',
                        cancelButtonText: 'Cancelar',
                        showLoaderOnConfirm: true,
                        preConfirm: (id) => {
                            return fetch(url, {
                                    headers: {
                                        "Content-Type": "application/json",
                                        "Accept": "application/json",
                                        "X-Requested-With": "XMLHttpRequest",
                                        "X-CSRF-Token": $('meta[name="csrf-token"]').attr('content')
                                    },
                                    method: 'POST',
                                    dataType: 'json',
                                    body: JSON.stringify(data)
                                })
                                .then(response => {
                                    if (!response.ok) {
                                        throw new Error(response.statusText)
                                    }
                                    return response.json()
                                })
                                .catch(error => {
                                    Swal.showValidationMessage(
                                        `Request failed: ${error}`
                                    )
                                })
                        },
                        allowOutsideClick: () => !Swal.isLoading()
                    }).then((result) => {
                        if (result.value.success) {
                            Swal.fire({
                                title: `Foto excluida com sucesso`,
                                icon: 'success',
                            }).then(() => {
                                $(`#foto-${id}`).remove();
                            })
                        } else {
                            Swal.fire({
                                title: `Erro ao excluir tente novamente`,
                                text: 'Erro: ' + result.value.error,
                                icon: 'error',
                            })
                        }
                    })
                }

                function definirGanhador(id) {
                    $('#content-modal-definir-ganhador').html('')
                    $.ajax({
                        url: "{{ route('definirGanhador') }}",
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            _token: "{{ csrf_token()}}",
                            "id": id
                        },
                        success: function(response) {
                            if (response.html) {
                                $('#content-modal-definir-ganhador').html(response.html)
                                $('#modal-definir-ganhador').modal('show');
                            }
                        },
                        error: function(error) {

                        }
                    })
                }

                function verGanhadores(id) {
                    $('#content-modal-ver-ganhadores').html('')
                    $.ajax({
                        url: "{{ route('verGanhadores') }}",
                        type: 'POST',
                        dataType: 'json',
                        headers: {
                            'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
                        },
                        data: {
                            _token: "{{ csrf_token()}}",
                            "id": id
                        },
                        success: function(response) {
                            if (response.html) {
                                $('#content-modal-ver-ganhadores').html(response.html)
                                $('#modal-ver-ganhadores').modal('show');
                            }
                        },
                        error: function(error) {

                        }
                    })
                }

                function formatarMoeda() {
                    var elemento = document.getElementById('price');
                    var valor = elemento.value;


                    valor = valor + '';
                    valor = parseInt(valor.replace(/[\D]+/g, ''));
                    valor = valor + '';
                    valor = valor.replace(/([0-9]{2})$/g, ",$1");

                    if (valor.length > 6) {
                        valor = valor.replace(/([0-9]{3}),([0-9]{2}$)/g, ".$1,$2");
                    }

                    elemento.value = valor;
                    if (valor == 'NaN') elemento.value = '';

                }

                function copyResumoLink(link) {
                    const element = document.querySelector('#copy-link');
                    const storage = document.createElement('textarea');
                    storage.value = link;
                    element.appendChild(storage);

                    // Copy the text in the fake `textarea` and remove the `textarea`
                    storage.select();
                    storage.setSelectionRange(0, 99999);
                    document.execCommand('copy');
                    element.removeChild(storage);

                    alert("LINK para resumo copiado com sucesso.");
                }

                function duplicar(el) {
                    var id = el.dataset.id;
                    var name = el.dataset.name
                    $('#id-duplicar').val(id);
                    $('#titulo-duplicar').text(`Copiando dados da rifa: ${name}`);

                    $('#duplicar-modal').modal('show')
                }
</script>

@if (session()->has('sorteio'))
<script>
    $(function(e) {
                        verGanhadores('{{ session('sorteio') }}')
                    })
</script>
@endif



@endsection