@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 Slide</h3>
    </div>
    <form method="post" action="{{ route('billboard.sliders.store') }}" enctype="multipart/form-data" onsubmit="return validateForm()">
    @csrf



          <div class="card">
            <div class="card-body">
              <h4 class="card-title">Add New Slide</h4>
              <p class="card-description">Complete the Details below</p>

              
                  <div class="form-group">
                    <label>Title</label>
                    <input type="text" class="form-control form-control-sm" id="title" name="title"  placeholder="Title" maxlength="45">
                  </div>
                  <div class="form-group">
                    <label>Type</label>
                    <select class="form-control form-control-sm select2" id="type" name = "type" style="width: 100%;" onchange="java_script_:show(this.options[this.selectedIndex].value)">
                      <option value= "">Select Type</option>
                      <option value= "Image">Image</option>
                      <option value= "Video">Video</option>
                    </select>
                  </div>

                  <div class="row" style="display: none;" id="mydiv" name="mydiv">

                    <div class="col-sm-6">
                      <!-- text input -->
                      <div class="form-group">
                        <label>Upload Image</label>
                        <input type="file" class="form-control form-control-sm" id="filename1" name="filename1" style="height:35px" accept=".jpg, .png">

                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="form-group">
                        <label>Duration (Seconds)</label>
                        <input type="number" class="form-control form-control-sm" id="duration" name="duration" value= "0" required>
                      </div>
                    </div>
                  </div>

              <!-- ####################################################################################################### -->



                  <div class="row justify-content-center" id="mydiv2" name="mydiv2" style="display: none;">
                      <div class="col-md-12">
                          <div class="card">

                              <div class="card-body">
                                  <div id="upload-container" class="text-center">
                                      <input type="hidden" class="form-control form-control-sm" id="filename2" name="filename2" >
                                      <button type="button" id="browseFile" class="btn btn-primary">Browse File</button>
                                  </div>
                                  <div  style="display: none" class="progress mt-3" style="height: 25px">
                                      <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%; height: 100%">75%</div>
                                  </div>
                              </div>

                              <div class="card-footer p-4" style="display: none">
                                  <video id="videoPreview" src="" controls style="width: 100%; height: auto"></video>
                              </div>
                          </div>
                      </div>
                  </div>


              <!-- ####################################################################################################### -->                  

                  <div class="form-group" >
                    <label>Validity</label>
                    <select class="form-control form-control-sm select2" id="validity" name = "validity" style="width: 100%;" onchange="java_script_:show2(this.options[this.selectedIndex].value)">
                      <option value= "">Select Validity</option>
                      <option value= "Non-Expiring">Non-Expiring</option>
                      <option value= "Expiring">Expiring</option>
                    </select>

                  </div> 

                  <div class="row" style="display: none;" id="mydate" name="mydate">

                    <div class="col-sm-6">
                      <!-- text input -->
                      <div class="form-group">
                        <label>Start Date</label>
                        <input type="date" class="form-control form-control-sm" id="start" name="start"  >
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="form-group">
                        <label>End Date</label>
                        <input type="date" class="form-control form-control-sm" id="end" name="end"  >
                      </div>
                    </div>
                  </div> 


            </div>
          </div>



        <br><br><br>
        <div class="footerbutton">
            <div class="card-footer">
              <div class="btn-group btn-block">
                <button type = "button" class="btn-sm btn-info" onclick="window.location.href='{{ route('billboard.sliders.index') }}'" style="width: 50%;"><i class="fa fa-arrow-circle-left"></i> Back to List</button>
                <button type = "submit" class="btn-sm btn-success" id="mybtn" style="width: 50%;"><i class="fa fa-paper-plane"></i> Save Slide</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>
    </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 src="{{ asset('mylib/js/resumable.min.js') }}"></script>

<script>
function validateForm() {
  

  if(document.getElementById('title').value == ""){
    alert( 'Please Enter Title to Continue!' );
    return false;
  }
  if(document.getElementById('type').value == ""){
    alert( 'Please Select Type to Continue!' );
    return false;
  }
  if(document.getElementById('type').value == "Image"){
    if(document.getElementById('filename1').value == ""){
      alert( 'Please Select File to Continue!' );
      return false;
    } 
    if(document.getElementById('duration').value == ""){
      alert( 'Please Enter Duration to Continue!' );
      return false;
    }  

  }
  if(document.getElementById('type').value == "Video"){
    if(document.getElementById('filename2').value == ""){
      alert( 'Please Select File to Continue!' );
      return false;
    } 
  }
  if(document.getElementById('validity').value == ""){
    alert( 'Please Select Validity to Continue!' );
    return false;
  } 
  if(document.getElementById('validity').value == "Expiring"){
    if(document.getElementById('start').value == ""){
      alert( 'Please Enter Start Date to Continue!' );
      return false;
    } 
    if(document.getElementById('end').value == ""){
      alert( 'Please Enter End Date to Continue!' );
      return false;
    }  

  }  


  var ok = confirm("Are you sure you want Save Record?");
  if(ok){  
    return true; 
  } else {  
    return false; 
  }
}
</script>


 
<SCRIPT>    
    function show(select_item) {
        if (select_item == "Image") {
            document.getElementById("mydiv").style.display = "";
            document.getElementById("mydiv2").style.display = "none";
        } 
        else{
            document.getElementById("mydiv2").style.display = "";
            document.getElementById("mydiv").style.display = "none";
        }
    }   
</SCRIPT>

<SCRIPT>    
    function show2(select_item) {
        if (select_item == "Expiring") {
            document.getElementById("mydate").style.display = "";
        } 
        else{
            document.getElementById("mydate").style.display = "none";
        }
    }   
</SCRIPT>

<script type="text/javascript">

    let browseFile = $('#browseFile');

    let resumable = new Resumable({
        target: '{{ route('uploadLargeFiles') }}',
        query:{_token:'{{ csrf_token() }}'} ,// CSRF token
        fileType: ['mp4'],
        chunkSize: 10*1024*1024, // default is 1*1024*1024, this should be less than your maximum limit in php.ini
        headers: {
            'Accept' : 'application/json'
        },
        testChunks: false,
        throttleProgressCallbacks: 1,
    });

    resumable.assignBrowse(browseFile[0]);

    resumable.on('fileAdded', function (file) { // trigger when file picked
        showProgress();
        resumable.upload() // to actually start uploading.
    });

    resumable.on('fileProgress', function (file) { // trigger when file progress update
        updateProgress(Math.floor(file.progress() * 100));
    });

    resumable.on('fileSuccess', function (file, response) { // trigger when file upload complete
        response = JSON.parse(response)

        $('#videoPreview').attr('src', response.path);
        $('.card-footer').show();
        document.getElementById("filename2").value = response.filename;

    });

    resumable.on('fileError', function (file, response) { // trigger when there is any error
        alert('file uploading error.')
    });


    let progress = $('.progress');
    function showProgress() {
        progress.find('.progress-bar').css('width', '0%');
        progress.find('.progress-bar').html('0%');
        progress.find('.progress-bar').removeClass('bg-success');
        progress.show();
    }

    function updateProgress(value) {
        progress.find('.progress-bar').css('width', `${value}%`)
        progress.find('.progress-bar').html(`${value}%`)
    }

    function hideProgress() {
        progress.hide();
    }


</script>

@endsection