@extends('layouts.app')

@section('content')
        <div class="container">
        <div class="card" >
            <div class="card-body">
                <h1>Incrição avulsa</h1>
                <div class="mb-3 col-12">
                    <h3>Evento: <strong>{{$event[0]->title_event}}</strong></h3>
                </div>
                <hr>
                <div class="col-12 col-md-12">
                    <label for="name" class="col-form-label text-md-end"><strong>Nome Atleta</strong></label>
                    <input id="name" type="text" class="form-control" name="name">
                </div>
                @if ($event[0]->id === 12)

                @else
                    <hr>
                    <div class="col-12 col-md-12">
                        <label for="sicard" class="col-form-label text-md-end"><strong>Sicard</strong></label>
                        <input id="sicard" type="number" class="form-control" name="sicard">
                    </div>
                @endif
                <hr>
                @if ($event[0]->id  === 12)
                    <div class="col-12 col-md-3">
                        <select class="form-select" id="categoria" name="categorie" required>
                            <option value="">Selecione sua categoria</option>
                            <option value="1">Adulto 21</option>
                            <option value="2">Adulto 35</option>
                            <option value="3">Adulto 45</option>
                            <option value="4">Adulto 55</option>
                            <option value="5">Adulto 65</option>
                            <option value="6">Novos - Percurso simplificado para novos atletas</option>
                        </select>
                    </div>
                @else
                    <div class="col-12 col-md-3">
                        <select class="form-select" id="categoria" name="categorie" required>
                            <option value="">Selecione sua categoria</option>
                            <option value="1">Elite (E)</option>
                            <option value="2">Avançado (A)</option>
                            <option value="3">Veteranos (V)</option>
                            <option value="4">Intermediário (B)</option>
                            <option value="5">Novos (N)</option>
                            <option value="6">Grupo Alunos 1</option>
                            <option value="7">Grupo Alunos 2</option>
                        </select>
                    </div>
                @endif
                <br>
                <hr>
                <button class="btn btn-primary" id="btnAddIncritoAvulso">Confirmar Inscrição</button>
                <br>
            </div>
          </div>
    </div>
    <div class="modal fade" id="myModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div id="corpoModal">
                        <h3 style="text-align:center;color:black" id="infoEtapadas">Carregando...</h3>
                        <div style="text-align:center" id="gif">

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

@endsection
@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(function() {
            const btnAddIncritoAvulso = document.querySelector('#btnAddIncritoAvulso');

            btnAddIncritoAvulso.addEventListener('click', (event) => {
                evento = {{$event[0]->id}};
                categoria = $("#categoria").val();
                if(evento == 12){
                    categoria1 = $("#categorie1").val();
                    categoria = categoria + "|" + categoria1;
                }

                name = $("#name").val();
                sicard = $("#sicard").val();

                if(name == ""){
                    alert('O nome não pode esta em branco!');
                    return false;
                }

                if(categoria == 0){
                    alert('A categoria deve ser selecionada!');
                    return false;
                }

                $.ajaxSetup({
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content')
                    }
                });

                $.ajax({
                    url: "https://acores.floripaaventura.com.br/addincritoavulso",
                    type: "POST",
                    data: {
                        id: 1,
                        evento: evento,
                        categoria: categoria,
                        name: name,
                        sicard: sicard
                    },
                    beforeSend: function () { }
                })
                .done(function (listInscritos) {
                    alert('Inscrito avulso adicionado com sucesso!')
                    $("#categoria").val(0);
                    $("#sicard").val("0");
                    $("#name").val("");
                    $("#name").focus();
                })
                .fail(function (jqXHR, textStatus, msg) {
                    lista = `<tr>
                                <th scope="row">0</th>
                                <td>Nenhum inscrito</td>
                                <td>Nenhum inscrito</td>
                                <td>Nenhum inscrito</td>
                                <td>Nenhum inscrito</td>
                                <td>Nenhum inscrito</td>
                            </tr>`
                            $('#myModal').modal('hide');
                });
            });
        });

    </script>
@endsection