@extends('layouts.admin')

@section('styles')
<link rel="stylesheet" href="{{asset('plugins/slim-select/slimselect.min.css') }}">
@endsection

@section('content')
<div class="container-fluid">
   <div class="row">
      <div class="col">
         <div class="card">
            <div class="card-body">
               <h4 class="card-title text-uppercase">ACTIVIDAD: {{$actividad->nombre}}</h4>
               <ul class="nav nav-pills mb-3 justify-content-end">
                  <li class="nav-item"><a href="#navpills2-1" class="nav-link active show" data-toggle="tab" aria-expanded="false">DATOS</a>
                  </li>
                  <li class="nav-item"><a href="#navpills2-2" class="nav-link" data-toggle="tab" aria-expanded="false">ACTUALIZAR</a>
                  </li>

                  <li class="nav-item"><a href="#navpills2-3" class="nav-link" data-toggle="tab" aria-expanded="false">PAGOS MASIVOS</a>
                  </li>
               </ul>
               <div class="tab-content br-n pn">

                  <div id="navpills2-1" class="tab-pane active show">
                     <div class="row align-items-center">
                        <div class="col-sm-6 col-md-8 col-xl-10">
                           <p class="card-text text-uppercase">GRADO: <b>{{$actividad->grado}}</b> </p>
                           <p class="card-text text-uppercase">SECCION: <b>{{$actividad->seccion}}</b> </p>

                           <p class="card-text">DESCCIPCION DE ACTIVIDAD:</p>
                           @php
                           echo $actividad->descripcion;
                           @endphp

                           <p class="card-text">COSTO: <b>Q. {{number_format($actividad->costo, 2)}}</b> </p>

                           <p class="card-text">FECHA DE REALIZACION: <b> {{$actividad->fecha}}</b> </p>


                           <p class="card-text">ULTIMA FECHA DE ACTUALIZACION: <b>{{$actividad->updated_at}}</b> </p>
                        </div>
                        <div class="col-sm-6 col-md-4 col-xl-2">
                           <img src="images/big/card-4.png" alt="" class="img-fluid thumbnail m-r-15">
                        </div>
                     </div>
                  </div>

                  <div id="navpills2-2" class="tab-pane ">
                     <div class="row align-items-center ">
                        <div class="col">
                           <form action="{{route('actividad.update', ['id' => $actividad->id])}}" method="post">
                              @csrf
                              @method('put')
                              @include('admin.actividades.forms.formupdate')

                              <button type="submit" class="btn btn-warning"><i class="fa fa-refresh" aria-hidden="true"></i> ACTUALIZAR</button>
                           </form>
                        </div>
                     </div>
                  </div>

                  <div id="navpills2-3" class="tab-pane ">
                     <div class="row align-items-center ">
                        <div class="col">
                           <form action="{{route('actividad.store_pago_masivo',  $actividad->id )}}" method="post">
                              @csrf


                              <div class="col-md-6" id="permissions-select">
                                 <select name="estudiante_id[]" id="permissions" multiple>
                                    @foreach ($estudiantes as $permission)
                                    <option value="{{ $permission->id }}">
                                       {{$permission->nombre}}
                                    </option>
                                    @endforeach
                                 </select>
                                 <a href="#" id="permission-select-all" class="btn btn-link">select all</a>
                                 <a href="#" id="permission-deselect-all" class="btn btn-link">deselect all</a>

                              </div>




                              <div class="form-group">
                                 <label for="">VALOR</label>
                                 <input type="text" class="form-control" name="valor" value="{{$actividad->costo}}">
                              </div>

                              <button type="submit" class="btn btn-warning"><i class="fa fa-refresh" aria-hidden="true"></i> ASIGNAR</button>
                           </form>
                        </div>
                     </div>
                  </div>



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


@section('scripts')

<script src="{{asset('plugins/slim-select/slimselect.min.js') }}">
</script>

<script>
   new SlimSelect({
      select: '#select',
      placeholder: 'Select Permissions',
      deselectLabel: '<span>&times;</span>',
      hideSelectedOption: true,
      selectAll: true,

   });
 


   var permission_select = new SlimSelect({
      select: '#permissions-select select',
      //showSearch: false,
      placeholder: 'Select Permissions',
      deselectLabel: '<span>&times;</span>',
      hideSelectedOption: true,
   })

   $('#permissions-select #permission-select-all').click(function() {
      var options = [];
      $('#permissions-select select option').each(function() {
         options.push($(this).attr('value'));
      });

      permission_select.set(options);
   })

   $('#permissions-select #permission-deselect-all').click(function() {
        permission_select.set([]);
    })

</script>

<script src="{{ asset('plugins/ckeditor/ckeditor.js')  }}"></script>
<script>
   CKEDITOR.replace('editor1');
</script>
@endsection