@section('css')
@endsection

@section('scripts')

<script>
var event_id = '';    
    function registrar(event,user,cultname) {
        
        $("#nomeculto").val(cultname);
        $("#modal-default").modal();

        event_id = event;            
        // console.log(event_id);
        // event_confirm_menssage_
    }
</script>

<script>
    function registrarusuario() {
        // console.log('registrarusuario');

            $.ajax({
                url: '{{ route('events.reguser') }}', // A rota definida em web.php
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}', // Necessário para CSRF Protection
                    user_id: {{ Auth::user()->id }},
                    event_id: event_id
                },
                success: function(response) {
                    // Sucesso na requisição
                    if (response.registrado) {
                        // console.log("#event_confirm_menssage_"+ event_id);
                        $("#event_confirm_menssage_"+ event_id).text('REALIZADA');
                        $("#event_confirm_menssage_"+ event_id).removeClass('badge-primary');
                        $("#event_confirm_menssage_"+ event_id).addClass('badge-success');
                        $('#modal-default').hide(); 
                        $("#event_confirm_button_"+ event_id).remove();
                        var valor = parseInt($("#number_volunteers_available_"+ event_id).text());
                        var novoValor = valor - 1;
                        $("#number_volunteers_available_"+ event_id).text(novoValor);
                    } else if (response.lotado) {
                        $("#event_confirm_menssage_"+ event_id).text('ESGOTADA');
                        $("#event_confirm_menssage_"+ event_id).removeClass('badge-primary');
                        $("#event_confirm_menssage_"+ event_id).addClass('badge-danger');
                        $('#modal-default').hide(); 
                        $("#event_confirm_button_"+ event_id).remove();                        

                    } else {
                        alert('Usuário não registrado.');
                    }
                },
                error: function(xhr, status, error) {
                    // Caso ocorra algum erro
                    
                    alert('Erro: ' + xhr.responseText);
                }
            });
    }
    </script>

@endsection


<x-appadminlte-layout>

    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">REALIZAR INSCRICAO</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ url('/principal') }}">Principal</a></li>
                        <li class="breadcrumb-item active">Realziar Inscricao</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->


    <div class="modal fade" id="modal-default">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">Realizar Incrição.</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
                <p>Deseja se inscrever para este culto?</p>
                <input type="text"    
                class="form-control" name="nomeculto"
                id="nomeculto" value="emaail" readonly
                autocomplete class="mt-1 block w-full" >                
            </div>
            <div class="modal-footer justify-content-between">
              <button type="button" class="btn btn-danger" data-dismiss="modal">Não</button>
              <button type="button" class="btn btn-success" data-dismiss="modal" onclick="event.preventDefault();registrarusuario();">Sim</button>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
      <!-- /.modal -->      



      <div class="card my-1 mx-2 mb-2">
        <div class="card-header">
            <h3 class="card-title">ACESSO RÁPIDO</h3>
        </div> <!-- /.card-header -->
        <div class="card-body">
            <a class="btn btn-app" href="{{ route('events.reguser') }}"><i class="fas fa-clipboard-list"></i>
                Realizar Inscrição</a>
            <a class="btn btn-app text-wrap" href="{{ route('events.myregistrations') }}"><i class="fas fa-clipboard-check"></i>
                Minhas Inscrições</a>
        </div>
        <!-- /.card-body -->
        </div>


    <div class="card my-1 mx-2 mb-2">

        <!-- Default box -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Inscrições Disponíveis</h3>

                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
                        <i class="fas fa-minus"></i>
                    </button>
                    <button type="button" class="btn btn-tool" data-card-widget="remove" title="Remove">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            <div class="card-body p-0">
                <table class="table table-striped table-responsive">
                    <thead>
                        <tr>
                            <th >
                                Culto
                            </th>
                            <th >
                                Situação da inscrição
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($events as $event)
                            <tr>
                                <td style="width: 80%">
                                    <div class="row">
                                    <div class="col-sm-3">    
                                    <label>
                                        <a class="font-weight-bold">
                                            {{ $event->name }}
                                        </a>
                                    </label>
                                    </div>
                                    <br />
                                    <div class="col-sm-2">  
                                        <label>Data:</label>  
                                                    {{ $event->date_formatted }}
                                    </div>
                                    <br />
                                    <div class="col-sm-1">  
                                        <label>Inicio:</label>  
                                         {{ $event->date_formattedTime }}
                                    </div>     
                                    <br />
                                    <div class="col-sm-2">  
                                        <label>Dia da semana:</label>  
                                        {{ $event->date_formattedWeek }}
                                    </div> 
                                    <br />
                                    <div class="col-sm-2"> 
                                        <label>Vagas disponíveis:</label>  
                                         <span id="number_volunteers_available_{{ $event->id }}">{{ $event->number_volunteers - $event->users->count() }}</span> de  
                                         {{ $event->number_volunteers }}
                                    </div>     
                                    <br />
                                    <br />
                                    <div class="col-sm-2">
                                    @if ($event->number_volunteers - $event->users->count() > 0)
                                        @if (!$event->users->contains(Auth::user()))    
                                            <a id="event_confirm_button_{{ $event->id }}" href="#" class="btn btn-success btn-sm text-center" 
                                            onclick="event.preventDefault();registrar({{ $event->id }},{{ Auth::user()->id }},'{{ $event->name }}');" >
                                                <i class="fas fa-clipboard-list"></i>
                                                        Realizar Inscrição
                                            </a>
                                        @endif
                                    @endif        
                                    </div>
                                </div>    
                                </td>
                                <td style="width: 20%" class="align-middle">
                                        @if ($event->users->contains(Auth::user()))
                                            <span class="badge badge-success text-center">REALIZADA</span>        
                                        @else
                                            @if ($event->number_volunteers - $event->users->count() <= 0)
                                                <span class="badge badge-danger text-center">ESGOTADA</span>
                                            @else
                                                <span id="event_confirm_menssage_{{ $event->id }}" class="badge badge-primary text-center">DISPONÍVEL</span>        
                                            @endif
                                        @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5">Nenhum culto cadastrado!</td>
                            </tr>
                        @endforelse

                    </tbody>
                </table>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>

</x-appadminlte-layout>