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

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

.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 5%;
   margin-bottom: 0px;
   background-color: #fff;
   color: white;
   text-align: center;
}

.table-responsive,
.dataTables_scrollBody {
    overflow: visible !important;
}
 
.table-responsive-disabled .dataTables_scrollBody {
    overflow: hidden !important;
}



</style>

<div class="main-panel">
  <div class="content-wrapper">
    <div class="page-header">
      <h3 class="page-title">Create New Program</h3>
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item active" aria-current="page">Billboard</li>
          <li class="breadcrumb-item"><a href="{{ route('admin.roles.index') }}">List of Programs</a></li>
          <li class="breadcrumb-item active" aria-current="page"> Create New Program </li>
        </ol>
      </nav>
    </div>
    <form method="post" action="{{ route('billboard.programs.store') }}" enctype="multipart/form-data" onsubmit="return validateForm()">
    @csrf
    <input type="hidden" class="form-control form-control-sm" id="orderlist" name="orderlist" >
    <div class="row">

        <div class="col-md-3 grid-margin stretch-card">
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">Add New Program</h4>
              <p class="card-description">Complete the Details below</p>

                <div class="form-group">
                  <label for="exampleInputUsername1">Program Name</label>
                  <input type="text" class="form-control" id="programname" name="programname" placeholder="Program Name" style="height:30px" />
                </div>

            </div>
          </div>
        </div>
        <div class="col-md-9 grid-margin stretch-card">
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">List of Sliders</h4>

                <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" style="display:inline-block;">
                      <div class="left-area" style="display:inline-block;">
                        <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" style="display:inline-block;"> 
                        <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">
                            
                        </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>

                </div>

            </div>
          </div>
        </div>
        <br><br><br>
        <div class="footerbutton">
            <div class="card-footer">
              <button type = "button" class="btn-sm btn-info" onclick="window.location.href='{{ route('billboard.programs.index') }}'"><i class="fa fa-arrow-circle-left"></i> Back to List</button>
              <button type = "button" class="btn-sm btn-success" id="mybtn" onclick="listboxSelectDeselect('listbox2', true);"><i class="fa fa-paper-plane"></i> Save New Program</button>
            </div>
        </div> 

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

  <footer class="footer">
    <div class="d-sm-flex justify-content-center justify-content-sm-between">
      <span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © St Joseph Drug 2021</span>
      <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"><a href="https://www.stjosephdrug.com/" target="_blank">Digital Signage</a> <small>- Powered by JiwonSoft</small></span>
    </div>
  </footer>
  <!-- partial -->
</div>



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

<script src="{{ asset('plusadmin/vendors/js/vendor.bundle.base.js') }}"></script>
<!-- endinject -->

    <script src="{{ asset('plusadmin/vendors/select2/select2.min.js') }}"></script>

<!-- Plugin js for this page -->
<script src="{{ asset('plusadmin/vendors/jquery-bar-rating/jquery.barrating.min.js') }}"></script>
<script src="{{ asset('plusadmin/vendors/chart.js/Chart.min.js') }}"></script>
<script src="{{ asset('plusadmin/vendors/flot/jquery.flot.js') }}"></script>
<script src="{{ asset('plusadmin/vendors/flot/jquery.flot.resize.js') }}"></script>
<script src="{{ asset('plusadmin/vendors/flot/jquery.flot.categories.js') }}"></script>
<script src="{{ asset('plusadmin/vendors/flot/jquery.flot.fillbetween.js') }}"></script>
<script src="{{ asset('plusadmin/vendors/flot/jquery.flot.stack.js') }}"></script>
<!-- End plugin js for this page -->
<!-- inject:js -->
<script src="{{ asset('plusadmin/js/off-canvas.js') }}"></script>
<script src="{{ asset('plusadmin/js/hoverable-collapse.js') }}"></script>
<script src="{{ asset('plusadmin/js/misc.js') }}"></script>
<script src="{{ asset('plusadmin/js/settings.js') }}"></script>
<script src="{{ asset('plusadmin/js/todolist.js') }}"></script>
<!-- endinject -->
<!-- Custom js for this page -->
<script src="{{ asset('plusadmin/js/dashboard.js') }}"></script>

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


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

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

<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/dataTables.rowReorder.min.js') }}"></script> 
<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/dataTables.responsive.min.js') }}"></script> 

<script src="{{ asset('plusadmin/js/select2.js') }}"></script>



<script>
function validateForm() {
  

  if(document.getElementById('programname').value == ""){
    alert( 'Please Enter Program Name to Continue!' );
    return false;
  }

  var ok = confirm("Are you sure you want to Save Program?");
  if(ok){  
    document.getElementById("mybtn").disabled = true;
    return true; 
  } else {  
    return false; 
  }
}
</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;
      if(document.getElementById('programname').value == "" ){
         alert("Please Enter Program Name to Continue!");
      } else {


        var ok = confirm("Are you sure you want to save this Program?");
        if(ok){
            $.ajax({
                url: "{{ route('billboard.programs.store') }}",
                data: {
                    _token:"{{csrf_token()}}",
                    orderlist: $('#orderlist').val(),
                    programname: $('#programname').val()
                    //listbox2:arrlist
                },
                type: "POST",

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

                window.location.href = "{{ route('billboard.programs.index') }}";     
                //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