@extends('layouts.admin')
@section('content')
@parent

<style>
.footerbutton {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 8%;
   margin-bottom: 45px;
   background-color: #fff;
   color: white;
   text-align: center;
}


.listbox-area {
  display: grid;
  grid-gap: 2em;
  grid-template-columns: repeat(2, 1fr);
  padding: 20px;
  border: 1px solid #aaa;
  border-radius: 4px;
  background: #eee;
}

[role="listbox"] {
  margin: 1em 0 0;
  padding: 0;
  min-height: 18em;
  border: 1px solid #aaa;
  background: white;
}

[role="listbox"]#ss_elem_list {
  position: relative;
  max-height: 18em;
  overflow-y: auto;
}

[role="listbox"] + *,
.listbox-label + * {
  margin-top: 1em;
}

[role="group"] {
  margin: 0;
  padding: 0;
}

[role="group"] > [role="presentation"] {
  display: block;
  margin: 0;
  padding: 0 0.5em;
  font-weight: bold;
  line-height: 2;
  background-color: #ccc;
}

[role="option"] {
  position: relative;
  display: block;
  padding: 0 1em 0 1.5em;
  line-height: 1.8em;
}

[role="option"].focused {
  background: #bde4ff;
}

[role="option"][aria-selected="true"]::before {
  position: absolute;
  left: 0.5em;
  content: "✓";
}

button[aria-haspopup="listbox"] {
  position: relative;
  padding: 5px 10px;
  width: 150px;
  border-radius: 0;
  text-align: left;
}

button[aria-haspopup="listbox"]::after {
  position: absolute;
  right: 5px;
  top: 10px;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-top-color: currentColor;
  border-bottom: 0;
  content: "";
}

button[aria-haspopup="listbox"][aria-expanded="true"]::after {
  position: absolute;
  right: 5px;
  top: 10px;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-top: 0;
  border-bottom-color: currentColor;
  content: "";
}

button[aria-haspopup="listbox"] + [role="listbox"] {
  position: absolute;
  margin: 0;
  width: 9.5em;
  max-height: 10em;
  border-top: 0;
  overflow-y: auto;
}

[role="toolbar"] {
  display: flex;
}

[role="toolbar"] > * {
  border: 1px solid #aaa;
  background: #ccc;
}

[role="toolbar"] > [aria-disabled="false"]:focus {
  background-color: #eee;
}

button {
  font-size: inherit;
}

button[aria-disabled="true"] {
  opacity: 0.5;
}

.move-right-btn::after {
  content: " →";
}

.move-left-btn::before {
  content: "← ";
}

.annotate {
  color: #366ed4;
  font-style: italic;
}

.hidden {
  display: none;
}

.offscreen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  font-size: 14px;
  white-space: nowrap;
}
</style>
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>List of Sliders</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="{{ url('/home') }}">Home</a></li>
              <li class="breadcrumb-item active">List of Sliders</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-6">
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">
                  <i class="fas fa-list"></i>
                  List of Sliders
                </h3>
              </div>
                <form method="post" action="{{ route('orders.store') }}" enctype="multipart/form-data" onsubmit="return validateForm()">
                <input type="hidden" class="form-control form-control-sm" id= "_token" name="_token" value="{{ csrf_token() }}">
                <input type="hidden" class="form-control form-control-sm" id="orderlist" name="orderlist" >

                    <div class="card-body" style="display:inline-block;">    

                        <p>Click the Add to Slide Show to Include Slider to the List</p>
                        <div class="listbox-area">
                          <div class="left-area">
                            <span id="ss_imp_l" class="listbox-label">Sliders:</span>
                            <p>
                            <select name="listbox1" id="listbox1" size="15" style="width:300px;">
                                @foreach($sliders as $slider1)      
                                <option value="{{ $slider1->id }}">{{ $slider1->title }}</option>
                                @endforeach

                            </select>
                            </p>                            

                            <div role="toolbar" aria-label="Actions" class="toolbar">
                              <button type="button" id="copy1" onclick="AddList()">Add to Slide Show</button>
                            </div>
                          </div>
                          <div class="right-area">
                            <span id="ss_unimp_2" class="listbox-label">Slider Order List:</span>
                            <p>
                            <select name="listbox2[]" id="listbox2" size="15" style="width:300px;" multiple="multiple">
                                                                @foreach($orders as $order1)  

                                <option value="{{ $order1->sliderid }}">{{ $order1->title }}</option>
                                                                @endforeach                                
                            </select>
                            </p>
                            <div role="toolbar" aria-label="Actions" class="toolbar">
                              <button type="button" id="ex1-up" onclick="listboxMove('listbox2', 'up');">Up</button>
                              <button type="button" id="ex1-down" onclick="listboxMove('listbox2', 'down');">Down</button>
                              <button type="button" id="copy2" onclick="RemoveList()">Remove Slide Show</button>
                            </div>    

                          </div>
                          <div class="offscreen">Last change: <span aria-live="polite" id="ss_live_region"></span></div>
                        </div>

                    </div>  
                        <br><br><br>
                        <div class="footerbutton">
                            <div class="card-footer">
                              <button type="button" class="btn btn-sm btn-info" onclick="window.location.href='{{ route('sliders.index') }}'"><i class="fa fa-arrow-circle-left"></i> Back to List</button>
                              <button type="button" class="btn btn-sm btn-primary" onclick="listboxSelectDeselect('listbox2', true);"><i class="fas fa-save"></i> Save Slide Show</button>

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


            </div>


          </div>









          <!-- /.col -->
        </div>
        <!-- /.row -->
      </div>
      <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->


<!-- jQuery -->
<script src="{{ asset('admin/plugins/jquery/jquery.min.js') }}"></script> 
<!-- Bootstrap 4 -->
<script src="{{ asset('admin/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<!-- overlayScrollbars -->
<script src="{{ asset('admin/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js') }}"></script>


<link rel="stylesheet" type="text/css" href="{{ asset('admin/mylib/css/jquery.dataTables.css') }}"> 
<link rel="stylesheet" type="text/css" href="{{ asset('admin/mylib/css/buttons.dataTables.min.css') }}"> 

<script type="text/javascript" language="javascript" src="{{ asset('admin/mylib/js/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('admin/mylib/js/dataTables.buttons.min.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('admin/mylib/js/jszip.min.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('admin/mylib/js/pdfmake.min.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('admin/mylib/js/vfs_fonts.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('admin/mylib/js/buttons.html5.min.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('admin/mylib/js/buttons.colVis.min.js') }}"></script> 

<!-- AdminLTE App -->
<script src="{{ asset('admin/dist/js/adminlte.min.js') }}"></script>

<!-- AdminLTE for demo purposes -->
<script src="{{ asset('admin/dist/js/demo.js') }}"></script>

<script>
$(document).ready(function(){
    loadData();

});
</script>   
<script>
function AddList() {
   let data1 = document.getElementById('listbox1').value;
   let data2 = document.getElementById("listbox1").options[document.getElementById("listbox1").selectedIndex].text;
   //document.getElementById("listbox2").options.add(data2); 
   listbox2.add(new Option(data2, data1));
}
</script>

<script>
function RemoveList() {
  /*
   let data1 = document.getElementById('listbox2').value;

   let data2 = document.getElementById("listbox2").options[document.getElementById("listbox2").selectedIndex].text;
   alert(data2);
   //document.getElementById("listbox2").options.add(data2); 
   listbox2.remove(new Option(data2, data1));
  */

var i;
for(i=listbox2.options.length-1;i>=0;i--)
{
if(listbox2.options[i].selected)
listbox2.remove(i);
}



}
</script>


<script>
    function listboxMove(listID, direction) {
      var listbox = document.getElementById(listID);
      var selIndex = listbox.selectedIndex;
      if (-1 == selIndex) {
        alert("Please select an option to move.");
        return;
      }
      var increment = -1;
      if (direction == 'up')
        increment = -1;
      else
        increment = 1;
      if ((selIndex + increment) < 0 ||
        (selIndex + increment) > (listbox.options.length - 1)) {
        return;
      }
      var selValue = listbox.options[selIndex].value;
      var selText = listbox.options[selIndex].text;
      listbox.options[selIndex].value = listbox.options[selIndex + increment].value
      listbox.options[selIndex].text = listbox.options[selIndex + increment].text
      listbox.options[selIndex + increment].value = selValue;
      listbox.options[selIndex + increment].text = selText;
      listbox.selectedIndex = selIndex + increment;
    }
</script>




  <script>

    function listboxSelectDeselect(listbox2, isSelect) {
      var listbox = document.getElementById(listbox2);
      var arrlist = [];
      //alert(document.getElementById(listbox2).value);
      for (var count = 0; count < listbox.options.length; count++) {
        listbox.options[count].selected = isSelect;
        arrlist.push(listbox.options[count].value);
      }

      //alert(arrlist);
      document.getElementById('orderlist').value = arrlist;
      var ok = confirm("Are you sure you want to save this Order?");
      if(ok){
          $.ajax({
              url: "{{ route('orders.store') }}",
              data: {
                  _token:"{{csrf_token()}}",
                  orderlist: $('#orderlist').val()
                  //listbox2:arrlist
              },
              type: "POST",

              success: function(data){
              
              data = $.trim(data);

              window.location.href = "{{ route('home') }}";     
              //document.getElementById('adjcode').value = "";
              //document.getElementById('adjtype').value = "";
              //$('#employee-grid').DataTable().destroy();
              fill_datatable();
                  if(data === "SUCCESS"){
                      alert("Form has been submitted!");
                      location.reload(true);
                      //window.location.reload();
                  } //else{alert(data);}
              }
          });
      }
    }
  </script>


@endsection