@extends('layouts.layout')
@section('content')

<style type="text/css" media="screen">
  h3{
    margin-top: 25px;
  }
  .m15{
    margin : 15px;
  }
  .move{
    cursor:move;
  }
</style>

<div class="container-fluid">
  <h2>Listes de données pour les formulaires</h2>
  <ul class="nav nav-tabs ">
    <li @if(!isset($_GET['tab'])) class="active" @endif @if(isset($_GET['tab']) && $_GET['tab']=='referents') class="active" @endif><a href="#tab_referents" data-toggle="tab">Référents</a></li>
    <li @if(isset($_GET['tab']) && $_GET['tab']=='members') class="active" @endif ><a href="#tab_members" data-toggle="tab">Membres des commissions ou groupes</a></li>
    <li @if(isset($_GET['tab']) && $_GET['tab']=='bacs') class="active" @endif ><a href="#tab_bacs" data-toggle="tab">BAC</a></li>
    <li @if(isset($_GET['tab']) && $_GET['tab']=='grptravailsat') class="active" @endif @if(isset($_GET['tab']) && $_GET['tab']=='grptravailsaf') class="active" @endif ><a href="#tab_grptravail" data-toggle="tab">Groupes de travail</a></li>
    <li @if(isset($_GET['tab']) && $_GET['tab']=='prodc1') class="active" @endif @if(isset($_GET['tab']) && $_GET['tab']=='prodc2') class="active" @endif @if(isset($_GET['tab']) && $_GET['tab']=='prodc3') class="active" @endif @if(isset($_GET['tab']) && $_GET['tab']=='prodc4') class="active" @endif ><a href="#tab_prod" data-toggle="tab">Production</a></li>
    <li @if(isset($_GET['tab']) && $_GET['tab']=='productionc1') class="active" @endif @if(isset($_GET['tab']) && $_GET['tab']=='productionc2') class="active" @endif @if(isset($_GET['tab']) && $_GET['tab']=='productionc3') class="active" @endif @if(isset($_GET['tab']) && $_GET['tab']=='productionc4') class="active" @endif ><a href="#tab_production" data-toggle="tab">Production circuit court</a></li>
  </ul>
  <div class="tab_edit @if(!isset($_GET['tab'])) active @endif @if(isset($_GET['tab']) && $_GET['tab']=='referents') active @endif" id="tab_referents">
    <h3>Référents</h3>
    <legend>Ajouter un référent</legend>
    <form action="/list/referents" method="post">
      @csrf
      <div class="form-group row">
        <div class="col-md-4"><input type="text" class="form-control" name="item"></div>
        <div class="col-md-2"><button type="submit" class="btn btn-primary">Ajouter</button></div>
      </div>
    </form>
    <legend>Référents</legend>
    <ul id="referents" class="list-group">
      @foreach ( $referentsitems  as $referent)
      <li class="list-group-item" data-order="{{ $referent->order }}">{{ $referent->label }} <button type="button" class="btn btn-primary btn-danger pull-right" onclick="destroyItem('referents', '{{ $referent->order }}')">Supprimer</button><button type="button" class="btn btn-primary pull-right move">{{ $referent->order+1 }}</button></li>
      @endforeach
      <button type="button" class="m15 pull-right btn btn-primary" onclick="neword('referents')">Réordonner</button>
    </ul>
  </div>
  <div class="clearfix"></div>
  <div class="tab_edit @if(isset($_GET['tab']) && $_GET['tab']=='members') active @endif" id="tab_members">
    <h3>Membres des commissions ou groupes</h3>
    <legend>Ajouter un membre des commissions ou un groupe</legend>
    <form action="/list/members" method="post">
      @csrf
      <div class="form-group row">
        <div class="col-md-4"><input type="text" class="form-control" name="item"></div>
        <div class="col-md-2"><button type="submit" class="btn btn-primary">Ajouter</button></div>
      </div>
    </form>
    <legend>Membres des commissions ou groupes</legend>
    <ul id="members" class="list-group">
      @foreach ( $membersitems  as $member)
      <li class="list-group-item" data-order="{{ $member->order }}">{{ $member->label }} <button type="button" class="btn btn-primary btn-danger pull-right" onclick="destroyItem('members', '{{ $member->order }}')">Supprimer</button><button type="button" class="btn btn-primary pull-right move">{{ $member->order+1 }}</button></li>
      @endforeach
      <button type="button" class="m15 pull-right btn btn-primary" onclick="neword('members')">Réordonner</button>
    </ul>
  </div>
  <div class="clearfix"></div>
  <div class="tab_edit @if(isset($_GET['tab']) && $_GET['tab']=='bacs') active @endif" id="tab_bacs">
    <h3>BAC</h3>
    <legend>Ajouter un BAC</legend>
    <form action="/list/bacs" method="post">
      @csrf
      <div class="form-group row">
        <div class="col-md-4"><input type="text" class="form-control" name="item"></div>
        <div class="col-md-2"><button type="submit" class="btn btn-primary">Ajouter</button></div>
      </div>
    </form>
    <legend>liste des BAC</legend>
    <ul id="bacs" class="list-group">
      @foreach ( $bacsitems  as $bac)
      <li class="list-group-item" data-order="{{ $bac->order }}">{{ $bac->label }} <button type="button" class="btn btn-primary btn-danger pull-right" onclick="destroyItem('bacs', '{{ $bac->order }}')">Supprimer</button><button type="button" class="btn btn-primary pull-right move">{{ $bac->order+1 }}</button></li>
      @endforeach
      <button type="button" class="m15 pull-right btn btn-primary" onclick="neword('bacs')">Réordonner</button>
    </ul>
  </div>
  <div class="clearfix"></div>
  <div class="tab_edit @if(isset($_GET['tab']) && $_GET['tab']=='grptravailsat') active @endif @if(isset($_GET['tab']) && $_GET['tab']=='grptravailsaf') active @endif" id="tab_grptravail">
    <h3>Groupes de travail</h3>
    <h2>Accompagnement technique</h2>
    <legend>Ajouter un groupe de travail</legend>
    <form action="/list/grptravailsat" method="post">
      @csrf
      <div class="form-group row">
        <div class="col-md-4"><input type="text" class="form-control" name="item"></div>
        <div class="col-md-2"><button type="submit" class="btn btn-primary">Ajouter</button></div>
      </div>
    </form>
    <legend>liste des groupes de travail</legend>
    <ul id="grptravailsat" class="list-group">
      @foreach ( $grptravailsatitems  as $grptravail)
      <li class="list-group-item" data-order="{{ $grptravail->order }}">{{ $grptravail->label }} <button type="button" class="btn btn-primary btn-danger pull-right" onclick="destroyItem('grptravailsat', '{{ $grptravail->order }}')">Supprimer</button><button type="button" class="btn btn-primary pull-right move">{{ $grptravail->order+1 }}</button></li>
      @endforeach
      <button type="button" class="m15 pull-right btn btn-primary" onclick="neword('grptravailsat')">Réordonner</button>
    </ul>
    <div class="clearfix"></div>
    <hr>
    <h2>Accompagnement filière</h2>
    <legend>Ajouter un groupe de travail</legend>
    <form action="/list/grptravailsaf" method="post">
      @csrf
      <div class="form-group row">
        <div class="col-md-4"><input type="text" class="form-control" name="item"></div>
        <div class="col-md-2"><button type="submit" class="btn btn-primary">Ajouter</button></div>
      </div>
    </form>
    <legend>liste des groupes de travail</legend>
    <ul id="grptravailsaf" class="list-group">
      @foreach ( $grptravailsafitems  as $grptravail)
      <li class="list-group-item" data-order="{{ $grptravail->order }}">{{ $grptravail->label }} <button type="button" class="btn btn-primary btn-danger pull-right" onclick="destroyItem('grptravailsaf', '{{ $grptravail->order }}')">Supprimer</button><button type="button" class="btn btn-primary pull-right move">{{ $grptravail->order+1 }}</button></li>
      @endforeach
      <button type="button" class="m15 pull-right btn btn-primary" onclick="neword('grptravailsaf')">Réordonner</button>
    </ul>
  </div>
  



  <div class="clearfix"></div>
  <div class="tab_edit @if(isset($_GET['tab']) && $_GET['tab']=='prodc1') active @endif @if(isset($_GET['tab']) && $_GET['tab']=='prodc2') active @endif @if(isset($_GET['tab']) && $_GET['tab']=='prodc3') active @endif  @if(isset($_GET['tab']) && $_GET['tab']=='prodc4') active @endif" id="tab_prod">
    <h3>Production</h3>
    <legend>Ajouter une production colonne 1</legend>
    <form action="/list/prodc1" method="post">
      @csrf
      <div class="form-group row">
        <div class="col-md-4"><input type="text" class="form-control" name="item"></div>
        <div class="col-md-2"><button type="submit" class="btn btn-primary">Ajouter</button></div>
      </div>
    </form>
    <legend>Production colonne 1</legend>
    <ul id="prodc1" class="list-group">
      @foreach ( $prodc1items  as $prod)
      <li class="list-group-item" data-order="{{ $prod->order }}">{{ $prod->label }} <button type="button" class="btn btn-primary btn-danger pull-right" onclick="destroyItem('prodc1', '{{ $prod->order }}')">Supprimer</button><button type="button" class="btn btn-primary pull-right move">{{ $prod->order+1 }}</button></li>
      @endforeach
      <button type="button" class="m15 pull-right btn btn-primary" onclick="neword('prodc1')">Réordonner</button>
    </ul>
    <div class="clearfix"></div>
    <legend>Ajouter une production colonne 2</legend>
    <form action="/list/prodc2" method="post">
      @csrf
      <div class="form-group row">
        <div class="col-md-4"><input type="text" class="form-control" name="item"></div>
        <div class="col-md-2"><button type="submit" class="btn btn-primary">Ajouter</button></div>
      </div>
    </form>
    <legend>Production colonne 2</legend>
    <ul id="prodc2" class="list-group">
      @foreach ( $prodc2items  as $prod)
      <li class="list-group-item" data-order="{{ $prod->order }}">{{ $prod->label }} <button type="button" class="btn btn-primary btn-danger pull-right" onclick="destroyItem('prodc2', '{{ $prod->order }}')">Supprimer</button><button type="button" class="btn btn-primary pull-right move">{{ $prod->order+1 }}</button></li>
      @endforeach
      <button type="button" class="m15 pull-right btn btn-primary" onclick="neword('prodc2')">Réordonner</button>
    </ul>
    <div class="clearfix"></div>
    <legend>Ajouter une production colonne 3</legend>
    <form action="/list/prodc3" method="post">
      @csrf
      <div class="form-group row">
        <div class="col-md-4"><input type="text" class="form-control" name="item"></div>
        <div class="col-md-2"><button type="submit" class="btn btn-primary">Ajouter</button></div>
      </div>
    </form>
    <legend>Production colonne 3</legend>
    <ul id="prodc3" class="list-group">
      @foreach ( $prodc3items  as $prod)
      <li class="list-group-item" data-order="{{ $prod->order }}">{{ $prod->label }} <button type="button" class="btn btn-primary btn-danger pull-right" onclick="destroyItem('prodc3', '{{ $prod->order }}')">Supprimer</button><button type="button" class="btn btn-primary pull-right move">{{ $prod->order+1 }}</button></li>
      @endforeach
      <button type="button" class="m15 pull-right btn btn-primary" onclick="neword('prodc3')">Réordonner</button>
    </ul>
    <div class="clearfix"></div>
    <legend>Ajouter une production colonne 4</legend>
    <form action="/list/prodc4" method="post">
      @csrf
      <div class="form-group row">
        <div class="col-md-4"><input type="text" class="form-control" name="item"></div>
        <div class="col-md-2"><button type="submit" class="btn btn-primary">Ajouter</button></div>
      </div>
    </form>
    <legend>Production colonne 4</legend>
    <ul id="prodc4" class="list-group">
      @foreach ( $prodc4items  as $prod)
      <li class="list-group-item" data-order="{{ $prod->order }}">{{ $prod->label }} <button type="button" class="btn btn-primary btn-danger pull-right" onclick="destroyItem('prodc4', '{{ $prod->order }}')">Supprimer</button><button type="button" class="btn btn-primary pull-right move">{{ $prod->order+1 }}</button></li>
      @endforeach
      <button type="button" class="m15 pull-right btn btn-primary" onclick="neword('prodc4')">Réordonner</button>
    </ul>
  </div>
  <div class="clearfix"></div>
  <div class="tab_edit @if(isset($_GET['tab']) && $_GET['tab']=='productionc1') active @endif @if(isset($_GET['tab']) && $_GET['tab']=='productionc2') active @endif @if(isset($_GET['tab']) && $_GET['tab']=='productionc3') active @endif @if(isset($_GET['tab']) && $_GET['tab']=='productionc4') active @endif" id="tab_production">
    <h3>Production circuit court</h3>
    <legend>Ajouter une production colonne 1</legend>
    <form action="/list/productionc1" method="post">
      @csrf
      <div class="form-group row">
        <div class="col-md-4"><input type="text" class="form-control" name="item"></div>
        <div class="col-md-2"><button type="submit" class="btn btn-primary">Ajouter</button></div>
      </div>
    </form>
    <legend>Production colonne 1</legend>
    <ul id="productionc1" class="list-group">
      @foreach ( $productionc1items  as $production)
      <li class="list-group-item" data-order="{{ $production->order }}">{{ $production->label }} <button type="button" class="btn btn-primary btn-danger pull-right" onclick="destroyItem('productionc1', '{{ $production->order }}')">Supprimer</button><button type="button" class="btn btn-primary pull-right move">{{ $production->order+1 }}</button></li>
      @endforeach
      <button type="button" class="m15 pull-right btn btn-primary" onclick="neword('productionc1')">Réordonner</button>
    </ul>
    <div class="clearfix"></div>
    <legend>Ajouter une production colonne 2</legend>
    <form action="/list/productionc2" method="post">
      @csrf
      <div class="form-group row">
        <div class="col-md-4"><input type="text" class="form-control" name="item"></div>
        <div class="col-md-2"><button type="submit" class="btn btn-primary">Ajouter</button></div>
      </div>
    </form>
    <legend>Production colonne 2</legend>
    <ul id="productionc2" class="list-group">
      @foreach ( $productionc2items  as $production)
      <li class="list-group-item" data-order="{{ $production->order }}">{{ $production->label }} <button type="button" class="btn btn-primary btn-danger pull-right" onclick="destroyItem('productionc2', '{{ $production->order }}')">Supprimer</button><button type="button" class="btn btn-primary pull-right move">{{ $production->order+1 }}</button></li>
      @endforeach
      <button type="button" class="m15 pull-right btn btn-primary" onclick="neword('productionc2')">Réordonner</button>
    </ul>
    <div class="clearfix"></div>
    <legend>Ajouter une production colonne 3</legend>
    <form action="/list/productionc3" method="post">
      @csrf
      <div class="form-group row">
        <div class="col-md-4"><input type="text" class="form-control" name="item"></div>
        <div class="col-md-2"><button type="submit" class="btn btn-primary">Ajouter</button></div>
      </div>
    </form>
    <legend>Production colonne 3</legend>
    <ul id="productionc3" class="list-group">
      @foreach ( $productionc3items  as $production)
      <li class="list-group-item" data-order="{{ $production->order }}">{{ $production->label }} <button type="button" class="btn btn-primary btn-danger pull-right" onclick="destroyItem('productionc3', '{{ $production->order }}')">Supprimer</button><button type="button" class="btn btn-primary pull-right move">{{ $production->order+1 }}</button></li>
      @endforeach
      <button type="button" class="m15 pull-right btn btn-primary" onclick="neword('productionc3')">Réordonner</button>
    </ul>
    <div class="clearfix"></div>
    <legend>Ajouter une production colonne 4</legend>
    <form action="/list/productionc4" method="post">
      @csrf
      <div class="form-group row">
        <div class="col-md-4"><input type="text" class="form-control" name="item"></div>
        <div class="col-md-2"><button type="submit" class="btn btn-primary">Ajouter</button></div>
      </div>
    </form>
    <legend>Production colonne 4</legend>
    <ul id="productionc4" class="list-group">
      @foreach ( $productionc4items  as $production)
      <li class="list-group-item" data-order="{{ $production->order }}">{{ $production->label }} <button type="button" class="btn btn-primary btn-danger pull-right" onclick="destroyItem('productionc4', '{{ $production->order }}')">Supprimer</button><button type="button" class="btn btn-primary pull-right move">{{ $production->order+1 }}</button></li>
      @endforeach
      <button type="button" class="m15 pull-right btn btn-primary" onclick="neword('productionc4')">Réordonner</button>
    </ul>
  </div>

  {{-- DELETE --}}

  <div  style="display: none" >
    <form id="delete_lists">
      {{ csrf_field() }}
      {{ method_field('DELETE') }}
      <div class="err_del"> 
      </div>
    </form>
  </div>  
</div>



<script>
  var containerreferents = document.getElementById('referents');
  var rowsreferents = containerreferents.children;
  var nodeListForEach = function (array, callback, scope) {
    for (var i = 0; i < array.length; i++) {
      callback.call(scope, i, array[i]);
    }
  };
  var sortableTable = dragula([containerreferents]);
  sortableTable.on('dragend', function() {
    nodeListForEach(rowsreferents, function (index, row) {
      row.lastElementChild.textContent = index + 1;
      row.dataset.rowPosition = index + 1;
    });
  });


  var containermembers = document.getElementById('members');
  var rowsmembers = containermembers.children;
  var nodeListForEach = function (array, callback, scope) {
    for (var i = 0; i < array.length; i++) {
      callback.call(scope, i, array[i]);
    }
  };
  var sortableTable = dragula([containermembers]);
  sortableTable.on('dragend', function() {
    nodeListForEach(rowsmembers, function (index, row) {
      row.lastElementChild.textContent = index + 1;
      row.dataset.rowPosition = index + 1;
    });
  });

  var container = document.getElementById('bacs');
  var rows = container.children;
  var nodeListForEach = function (array, callback, scope) {
    for (var i = 0; i < array.length; i++) {
      callback.call(scope, i, array[i]);
    }
  };
  var sortableTable = dragula([container]);
  sortableTable.on('dragend', function() {
    nodeListForEach(rows, function (index, row) {
      row.lastElementChild.textContent = index + 1;
      row.dataset.rowPosition = index + 1;
    });
  });

  var containergrptravailsat = document.getElementById('grptravailsat');
  var rowsgrptravailsat = containergrptravailsat.children;
  var nodeListForEach = function (array, callback, scope) {
    for (var i = 0; i < array.length; i++) {
      callback.call(scope, i, array[i]);
    }
  };
  var sortableTable = dragula([containergrptravailsat]);
  sortableTable.on('dragend', function() {
    nodeListForEach(rowsgrptravailsat, function (index, row) {
      row.lastElementChild.textContent = index + 1;
      row.dataset.rowPosition = index + 1;
    });
  });

  var containergrptravailsaf = document.getElementById('grptravailsaf');
  var rowsgrptravailsaf = containergrptravailsaf.children;
  var nodeListForEach = function (array, callback, scope) {
    for (var i = 0; i < array.length; i++) {
      callback.call(scope, i, array[i]);
    }
  };
  var sortableTable = dragula([containergrptravailsaf]);
  sortableTable.on('dragend', function() {
    nodeListForEach(rowsgrptravailsaf, function (index, row) {
      row.lastElementChild.textContent = index + 1;
      row.dataset.rowPosition = index + 1;
    });
  });

  var containerproductionc1 = document.getElementById('productionc1');
  var rowsproductionc1 = containerproductionc1.children;
  var nodeListForEach = function (array, callback, scope) {
    for (var i = 0; i < array.length; i++) {
      callback.call(scope, i, array[i]);
    }
  };
  var sortableTable = dragula([containerproductionc1]);
  sortableTable.on('dragend', function() {
    nodeListForEach(rowsproductionc1, function (index, row) {
      row.lastElementChild.textContent = index + 1;
      row.dataset.rowPosition = index + 1;
    });
  });

  var containerproductionc2 = document.getElementById('productionc2');
  var rowsproductionc2 = containerproductionc2.children;
  var nodeListForEach = function (array, callback, scope) {
    for (var i = 0; i < array.length; i++) {
      callback.call(scope, i, array[i]);
    }
  };
  var sortableTable = dragula([containerproductionc2]);
  sortableTable.on('dragend', function() {
    nodeListForEach(rowsproductionc2, function (index, row) {
      row.lastElementChild.textContent = index + 1;
      row.dataset.rowPosition = index + 1;
    });
  });

  var containerproductionc3 = document.getElementById('productionc3');
  var rowsproductionc3 = containerproductionc3.children;
  var nodeListForEach = function (array, callback, scope) {
    for (var i = 0; i < array.length; i++) {
      callback.call(scope, i, array[i]);
    }
  };
  var sortableTable = dragula([containerproductionc3]);
  sortableTable.on('dragend', function() {
    nodeListForEach(rowsproductionc3, function (index, row) {
      row.lastElementChild.textContent = index + 1;
      row.dataset.rowPosition = index + 1;
    });
  });

  var containerproductionc4 = document.getElementById('productionc4');
  var rowsproductionc4 = containerproductionc4.children;
  var nodeListForEach = function (array, callback, scope) {
    for (var i = 0; i < array.length; i++) {
      callback.call(scope, i, array[i]);
    }
  };
  var sortableTable = dragula([containerproductionc4]);
  sortableTable.on('dragend', function() {
    nodeListForEach(rowsproductionc4, function (index, row) {
      row.lastElementChild.textContent = index + 1;
      row.dataset.rowPosition = index + 1;
    });
  });

  var containerprodc1 = document.getElementById('prodc1');
  var rowsprodc1 = containerprodc1.children;
  var nodeListForEach = function (array, callback, scope) {
    for (var i = 0; i < array.length; i++) {
      callback.call(scope, i, array[i]);
    }
  };
  var sortableTable = dragula([containerprodc1]);
  sortableTable.on('dragend', function() {
    nodeListForEach(rowsprodc1, function (index, row) {
      row.lastElementChild.textContent = index + 1;
      row.dataset.rowPosition = index + 1;
    });
  });

  var containerprodc2 = document.getElementById('prodc2');
  var rowsprodc2 = containerprodc2.children;
  var nodeListForEach = function (array, callback, scope) {
    for (var i = 0; i < array.length; i++) {
      callback.call(scope, i, array[i]);
    }
  };
  var sortableTable = dragula([containerprodc2]);
  sortableTable.on('dragend', function() {
    nodeListForEach(rowsprodc2, function (index, row) {
      row.lastElementChild.textContent = index + 1;
      row.dataset.rowPosition = index + 1;
    });
  });

  var containerprodc3 = document.getElementById('prodc3');
  var rowsprodc3 = containerprodc3.children;
  var nodeListForEach = function (array, callback, scope) {
    for (var i = 0; i < array.length; i++) {
      callback.call(scope, i, array[i]);
    }
  };
  var sortableTable = dragula([containerprodc3]);
  sortableTable.on('dragend', function() {
    nodeListForEach(rowsprodc3, function (index, row) {
      row.lastElementChild.textContent = index + 1;
      row.dataset.rowPosition = index + 1;
    });
  });

  var containerprodc4 = document.getElementById('productionc4');
  var rowsprodc4 = containerprodc4.children;
  var nodeListForEach = function (array, callback, scope) {
    for (var i = 0; i < array.length; i++) {
      callback.call(scope, i, array[i]);
    }
  };
  var sortableTable = dragula([containerprodc4]);
  sortableTable.on('dragend', function() {
    nodeListForEach(rowsprodc4, function (index, row) {
      row.lastElementChild.textContent = index + 1;
      row.dataset.rowPosition = index + 1;
    });
  });




  function neword(name){
    var positions=[];
    childs=$("#"+name).find('li');
    reord=true;
    if (childs.length) {
      childs.each(function(index, el) {
        positions[el.dataset.order]=el.dataset.rowPosition-1;
        if (!el.dataset.rowPosition) { reord=false;}
      });
      if(reord){
        $.ajax({
         headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
         url: '/list/order/'+name,
         type: 'POST',
         data: {'order': positions},
       })
        .done(function() {
          window.location = "/lists?tab="+name;
        })
        .fail(function() {
         window.location.reload();
       });
      }  
    } 
  }

  function destroyItem(name, order){
    var url = '/list/'+name+'/'+order;
    var form = $('#delete_lists');
    $.ajax({
      type: "DELETE",
      url: url,
      data: form.serialize(),
    }).done(function(data){
      window.location = "/lists?tab="+name;
    }).fail(function(data) {
      window.location.reload();
    });
  }
</script>
@endsection