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

.alert {
    margin-bottom: 0.5rem;
}

</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 PARA VOLUNTÁRIO</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 para Voluntário</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 Rapido --}}
    @include('events.partials.fastaccessevents')


    {{-- mensagem de alerta --}}
    <div class="my-1 mx-2 mb-1">
        @include('flash::message')
    </div>

    
    
    <div class="card my-1 mx-2 mb-2">
    <form method="post" action="{{ route('events.launchscale') }}" class="p-2">
        @csrf
        @method('post')    
        <div class="form-group col-md-3">
            <label>Escolha o Voluntário:</label>  
            <select name="user_id" class="form-control">
                <option value="-1">Selecione ...</option>
                    @foreach ($users as $user)
                        <option value="{{ $user->id }}">
                            {{ $user->name }}
                        </option>
                    @endforeach
                </select>
        </div>
        <div class="form-group col-md-6">
            <a id="event_confirm_button" href="#" class="btn btn-primary btn-sm text-center" 
            onclick="event.preventDefault();this.closest('form').submit();" >
                       Consultar
            </a>
        </div>
    </form> 
    </div>


    @if (isset($events)) 
    <form method="post" action="{{ route('events.launchscaleuser') }}" class="">
        @csrf
        @method('post')   
        <input type="hidden" name="eventos_ids" value="{{ $idsEventos }}">
        <input type="hidden" name="user_id" value="{{ $usersearch->id }}">         
    <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 para <span class="text-bold text-primary">{{$usersearch->firstAndLastName() }} </span>  </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" >
                                            Deseja se inscrever ?
                                    </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">

                                            @php
                                                $status = "nok";

                                                $temRelacionamento = $usersearch->events()
                                                    ->where('events.id', $event->id)
                                                    ->exists();

                                                if ($temRelacionamento) {
                                                    $status = $event->users()->where('user_id', $usersearch->id)->first()->pivot->status;
                                                }
                                            @endphp                                             

                                            @if  (!($event->number_volunteers - $users->count() > 0) && (!$temRelacionamento) ) 

                                                    <span style="font-size: medium;" class="badge badge-danger text-center">ESGOTADA</span> 

                                            @else
                                                <div class="toggle-wrapper">
                                                    <label class="switch">
                                                    <input type="checkbox" id="option_event_chk_{{ $event->id }}" 
                                                    @if($status=="REALIZADA") 
                                                    checked
                                                    @endif   
                                                    name="option_event_chk_{{ $event->id }}" class="hidden-toggle" />
                                                    <div class="slider">
                                                        <div class="button"></div>
                                                    </div>
                                                    </label>
                                                    <div class="description">
                                                    
                                                    </div>
                                                </div>  

                                            @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 --> --}}
            
    </div>
    </form>     
    @endif
   

</x-appadminlte-layout>