@section('css')
<style>
/* Aqui comença o Toggler On/Off */
.toggle-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Texto que decidi adicionar como exemplo */
.toggle-wrapper .description {
  margin-left: 0.5rem;
  font-weight: bold;
  letter-spacing: 0.2rem;
  font-size: 1.0rem;
}

.toggle-wrapper > label {
    margin-bottom: 0rem;
}

/* Esconde o checkbox */
.switch > .hidden-toggle {
  display: none;
}

/* Caixinha onde o botão desliza */
.switch > .slider {
  background: #e0e2db;
  border: 0.1rem solid #bbb;
  cursor: pointer;
  border-radius: 1rem;
  transition: all 300ms ease-in-out;
  width: 5rem;
  height: 2rem;
  position: relative;
  box-shadow: inset -0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.2),
    0 0 1rem rgba(0, 0, 0, 0.1);
}

/* O botão redondinho */
.switch > .slider > .button {
  content: "";
  position: absolute;
  width: 1.4rem;
  height: 1.4rem;
  background: #343a40;
  top: 0.2rem;
  left: 0.2rem;
  transition: all 300ms ease-in-out;
  border-radius: 50%;
  z-index: 2;
  box-shadow: inset -0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.2);
}

/* Texto ON ou OFF (começa off) */
.switch > .slider:after {
  position: absolute;
  top: 50%;
  right: 0.4rem;
  transform: translate(0, -50%);
  font-size: 1.0rem;
  line-height: 1.0rem;
  color: #444;
  font-weight: bold;
  z-index: 1;
  transition: all 300ms ease-in-out;
  content: "NÃO";
}

/* Slider ON */
.switch > .hidden-toggle:checked ~ .slider {
  background: #218838;
  box-shadow: inset 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.2),
    0 0 1rem rgba(50, 0, 150, 0.2);
}

/* Botão ON */
.switch > .hidden-toggle:checked ~ .slider > .button {
  left: 3.2rem;
  box-shadow: inset 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.2);
  background: #e0e2db;
}

/* Texto ON */
.switch > .hidden-toggle:checked ~ .slider:after {
  right: 2.8rem;
  color: #f1f1ff;
  content: "SIM";
}

.registration_button {
    display: flex;
    justify-content: center;
}

</style>
@endsection

@section('scripts')


@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 -->      


      {{-- ACESSO RÁPIDO --}}
      <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.registration') }}"><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">
        
        <form method="post" action="{{ route('events.registrationuser') }}" class="">
            @csrf
            @method('POST') 
            <input type="hidden" name="eventos_ids" value="{{ $idsEventos }}">
            

                <!-- 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 class="text-center" >
                                        @if($events->count() > 0)
                                            Deseja se inscrever ?
                                        @endif
                                    </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>  
                                                            {{ str_contains($event->name, 'Qualquer') ? '---' : $event->date_formatted }}
                                                </div>
                                                <br />
                                                <div class="col-sm-2">  
                                                    <label>Horario de chegada:</label>  
                                                    {{ $event->date_formattedTime }}
                                                </div>     
                                                <br />
                                                <div class="col-sm-2">  
                                                    <label>Dia da semana:</label>  
                                                    {{ str_contains($event->name, 'Qualquer') ? '---' : $event->date_formattedWeek }}
                                                </div> 
                                                <br />

                                                @php
                                                    $users = $event->users()->wherePivot('status', 'REALIZADA')->get();
                                                @endphp 
                                                                                                
                                                <div class="col-sm-3"> 
                                                    <label>Vagas disponíveis:</label>  
                                                    <span id="number_volunteers_available_{{ $event->id }}">{{ $event->number_volunteers - $users->count() }}</span>
                                                </div>     
                                            </div>    
                                        </td>
                                        <td style="width: 20%" class="align-middle text-center">

                                            @if ($event->number_volunteers - $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> --}}

                                                    <div class="toggle-wrapper">
                                                        <label class="switch">
                                                        <input type="checkbox" id="option_event_chk_{{ $event->id }}" name="option_event_chk_{{ $event->id }}" class="hidden-toggle" />
                                                        <div class="slider">
                                                            <div class="button"></div>
                                                        </div>
                                                        </label>
                                                        <div class="description">
                                                        
                                                        </div>
                                                    </div>

                                                @else 
                                                    @php
                                                        $status = $event->users()->where('user_id', Auth::user()->id)->first()->pivot->status;
                                                        $classstatus = "badge-success";
                                                        if ( $status != 'REALIZADA') {
                                                            $classstatus = "badge-danger";
                                                        }
                                                    @endphp 
                                                    <span style="font-size: medium;" class="badge {{ $classstatus }} text-center">{{ $status }}</span>
                                                @endif
                                            @else
                                                <span style="font-size: medium;" class="badge badge-danger text-center">ESGOTADA</span>  
                                            @endif   
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5">Nenhuma inscrição disponível!</td>
                                    </tr>
                                @endforelse

                            </tbody>
                        </table>
                    </div><!-- /.card-body -->
                    <div class="card-footer">
                        <div class="row">
                            <div class="col-sm-10">
                                
                            </div>   
                            <div class="col-sm-2 registration_button">
                                @if($events->count() > 0)
                                    <a id="event_confirm_button" href="#" class="btn btn-success btn-sm text-center" 
                                        onclick="event.preventDefault();this.closest('form').submit();" >
                                            <i class="fas fa-clipboard-list"></i>
                                                    Enviar todas as inscrições
                                    </a>
                                @endif
                            </div>                            
                        </div>                                
                    </div> <!--card-footer -->              
                </div> <!-- /.card -->
            </form>
      
    </div>
   

</x-appadminlte-layout>