@extends('layout.administrator.index')
@section('title', 'Accounts')

@section('style')
   <style media="screen">
   .select2-selection--multiple{
      overflow: auto;
      height: auto !important;
      max-height: 350px;
   }
   </style>
@endsection

@section('content')
   <div class="content-wrapper">
      <section class="content-header">
         {{-- <h1>Components</h1> --}}
         <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('administrator.dashboard')}}"><i class="fa fa-dashboard"></i> Inicio</a></li>
            <li class="breadcrumb-item active"><a href="{{route('administrator.accounts.index')}}"><i class="fa fa-dashboard"></i> Accounts</a></li>
            <li class="breadcrumb-item active">Components</li>
         </ol>
      </section>

      <section class="content">
         @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
               {{session('success')}}
               <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
               </button>
            </div>
         @endif
         @if(session('danger'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
               {{session('danger')}}
               <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
               </button>
            </div>
         @endif
         <div class="row">
            <div class="col-lg-12">
               <div class="box">
                  <div class="box-header with-border">
                     <div class="row align-items-center">
                        <div class="col-4">
                           <h4 class="box-title">Components</h4>
                        </div>
                        <div class="col-4 text-center">
                           <h4 class="box-title font-weight-bold">{{$fleets->name}}</h4>
                        </div>
                        <div class="col-4">
                           <div class="box-controls pull-right">
                              <div class="box-header-actions">
                                 <button type="button" class="btn btn-sm btn-info pointer" id="idSelectAllComponents"><i class="fa fa-square-o" aria-hidden="true"></i> Seleccionar todo</button>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="box-body">
                     <form action="{{route('administrator.accounts.components.assign')}}" method="post">
                        @csrf
                        <input type="hidden" name="fleet_id" value="{{$fleets->id}}">
                        <div class="row">
                           <div class="col-md-12">
                              <div class="form-group">
                                 <select class="form-control select2" id="idComponents" name="components[]" multiple>
                                    @foreach ($components as $key => $component)
                                       @if (in_array($component->id, $selectedComponents))
                                          <option value="{{$component->id}}" selected>{{$component->name}}</option>
                                       @else
                                          <option value="{{$component->id}}">{{$component->name}}</option>
                                       @endif
                                    @endforeach
                                 </select>
                              </div>
                           </div>
                        </div>
                        <div class="row">
                           <div class="col">
                              <button type="submit" class="btn btn-sm btn-info pointer"><i class="fa fa-save"></i> Asignar</button>
                           </div>
                        </div>
                     </form>
                  </div>
               </div>
            </div>
         </div>
      </section>
   </div>
@endsection

@section('js')
   <script src="{{asset('assets/administrator/js/accounts/select2.js')}}"></script>
   <script type="text/javascript">
   $(document).ready(function() {
      $('.select2').select2({
         placeholder: "Selecciona una opción",
         language: {
            noResults: function(params) {
               return "No se encontraron resultados";
            }
         }
      });
   });

   window.onload = function(e){
      var select = <br />
<b>Notice</b>:  Undefined variable: selectedComponents in <b>D:\laragon2\www\Terpel\resources\views\system\administrator\accounts\assignComponents.blade.php</b> on line <b>110</b><br />
null;
      // $.each(select, function(y, component) {
      //    $('#idComponents').val(component.component_id).trigger('change');
      // });
   }
   </script>
   <script type="text/javascript">
   $('#idSelectAllComponents').on("click", function(e) {
      var lengthV = $('#idComponents > option').length;
      if (lengthV > 0) {
         var select = $(this).data("select");
         if (!select) {
            //False
            $("#idComponents > option").prop("selected", true);
            $("#idComponents").trigger("change");
            $(this).data("select", true);
            $(this).html('<i class="fa fa-square" aria-hidden="true"></i> Deseleccionar todo');
         } else {
            //True
            $("#idComponents > option").prop("selected", false);
            $("#idComponents").trigger("change");
            $(this).data("select", false);
            $(this).html('<i class="fa fa-square-o" aria-hidden="true"></i> Seleccionar todo');
         }
      }
   });

   $('#idComponents').on('select2:select', function(e) {
      var lengthOption = $('#idComponents > option').length;
      var lengthSelected = $('#idComponents > option:selected').length;
      if (parseInt(lengthOption) == parseInt(lengthSelected)) {
         $('#idSelectAllComponents').data("select", true);
         $('#idSelectAllComponents').html('<i class="fa fa-square" aria-hidden="true"></i> Deseleccionar todo');
      }
   });

   $('#idComponents').on('select2:unselect', function(e) {
      $('#idSelectAllComponents').data("select", false);
      $('#idSelectAllComponents').html('<i class="fa fa-square-o" aria-hidden="true"></i> Seleccionar todo');
   });
   </script>
@endsection