@extends('layouts.theme_selector')

@section('content')
  <div class="container">
    <div class="row justify-content-center">
      <div class="col col-md">

        <div class="card {{session('theme_card')}}">
          <h5 class="card-header">
            <a href="{{ url()->previous() }}" class="text-decoration-none text-primary mr-2">
              <i class="bi bi-caret-left"></i>
            </a>
            Mantenimiento
          </h5>
          
          <div class="card-body {{session('theme_bg_black')}}">
            <div class="col col-md">
              <p class="lead">Colocar en Mantenimiento la Plataforma deseada:</p>
              <br>

              <table class="table table-striped col-6 col-md-4 mx-auto text-center {{session('theme_table')}}">
                <tbody>
                  @foreach ($plataformas as $plataforma => $estado)
                    @php
                      if ($estado == 0) $is_online = true;
                    @endphp
                    <tr>
                      <td>
                        <span class="h5 text-primary">{{$plataforma}}</span>
                      </td>
                      <td>
                        <div class="form-check form-switch">
                          <input id="{{$plataforma}}_switch" class="form-check-input" type="checkbox" role="switch" {{$is_online ?? 'checked'}}>
                          <label class="form-check-label" for="{{$plataforma}}_switch">Mantenimiento</label>
                        </div>
                      </td>
                    </tr>
                    @push('scripts')
                      <script type="text/javascript">
                        $('#{{$plataforma}}_switch').on('click', function (e) {
                          var isChecked = $(this).is(":checked");
                          // console.log('isChecked: ' + isChecked);
                          goMantenimiento(isChecked, "{{$plataforma}}");
                        });
                      </script>
                    @endpush
                  @endforeach
                </tbody>
              </table>


              <br>

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

        @push('scripts')
          <script type="text/javascript">
            var url = "{{ Route('setMantenimiento') }}";

            function goMantenimiento(flag, platform) {
              $.ajax({
                type: "get",
                url: url+"/"+platform+"/"+flag,
                  headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                  },
                success: function(respuesta) {
                  // alert(respuesta);
                }
              });
            }
          </script>
        @endpush

        @include('layouts.alerts.error')
        @include('layouts.alerts.success')

      </div>
    </div>
  </div>
@endsection