@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;
}
</style>
<div class="container" >
  <div class="row justify-content-center">
    <div class="col-md-8">
      <!-- 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>Edit Slider</h1>
              </div>
              <div class="col-sm-12">
                <ol class="breadcrumb float-sm-right">
                  <li class="breadcrumb-item"><a href="{{ url('/home') }}">Home</a></li>
                  <li class="breadcrumb-item"><a href="{{ route('sliders.index') }}">List of Sliders</a></li>
                  <li class="breadcrumb-item">Edit Slider</li>
                </ol>
              </div>
            </div>
          </div><!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">
          <div class="container-fluid">
            <div class="row">
              <div class="col-12">


            <!-- /.card -->
            <div class="card card-primary card-outline">
              <div class="card-header">
                <h3 class="card-title">
                  <i class="fas fa-edit"></i>
                  Edit Slider
                </h3>
              </div>


              <form method="post" action="{{ route('sliders.update', $sliders->id) }}" enctype="multipart/form-data">
              @csrf
              @method('PUT') 
              <div class="card-body" >


                    <section class="content">
                      <div class="container-fluid">
                        <div class="row">
                          <!-- left column -->

                              <!-- right column -->
                              <div class="col-md-12">

                                <!-- Horizontal Form -->
                                <div class="card card-info">
                                  <div class="card-header">
                                    <h3 class="card-title">Slider Information</h3>
                                  </div>
                                  <!-- /.card-header -->
                                  <!-- form start -->
                                  
                                        <div class="card-body">
                                          <div class="form-group">
                                            <label>Title</label>
                                            <input type="text" class="form-control form-control-sm" id="title" name="title"  placeholder="Title" maxlength="45" value="{{ $sliders->title }}">
                                          </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= "{{ $sliders->type }}">{{ $sliders->type }}</option>
                                              <option value= "Image">Image</option>
                                              <option value= "Video">Video</option>
                                            </select>
                                          </div>
                                          @if($sliders->type == "Image")
                                            <div class="row"  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="{{ $sliders->duration }}" >
                                                </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>


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



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

                                              <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" style="display: none;">
                                                <div class="form-group">
                                                  <label>Duration (Seconds)</label>
                                                  <input type="number" class="form-control form-control-sm" id="duration" name="duration" value="{{ $sliders->duration }}" >
                                                </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>


<!-- ####################################################################################################### -->
                                          @endif       


                                        @if($sliders->type == "Image")
                                        <img src="{{ asset('storage/banners/'. $sliders->filename) }}"  alt="" width="620" height="320"  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-bgparallax="5" data-no-retina>
                                        @else
                                            <center>
                                            <video width="400" controls>
                                              <source src="{{ asset('storage/banners/'. $sliders->filename) }}" type="video/mp4">

                                              Your browser does not support HTML video.
                                            </video>
                                            </center>
                                        @endif


                                          @if($sliders->validity == "Expiring")
                                          <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= "{{ $sliders->validity }}">{{ $sliders->validity }}</option>
                                              <option value= "Non-Expiring">Non-Expiring</option>
                                              <option value= "Expiring">Expiring</option>
                                            </select>

                                          </div> 

                                          <div class="row" 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" value="{{ $sliders->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" value="{{ $sliders->end }}"  >
                                              </div>
                                            </div>
                                          </div>
                                          @else
                                          <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= "{{ $sliders->validity }}">{{ $sliders->validity }}</option>
                                              <option value= "Non-Expiring">Non-Expiring</option>
                                              <option value= "Expiring">Expiring</option>
                                            </select>

                                          </div> 

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

                                            <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" value="{{ $sliders->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" value="{{ $sliders->end }}"  >
                                              </div>
                                            </div>
                                          </div>
                                          @endif

                                        
                                        

                                        </div>
                                        <!-- /.card-body -->
           
                                    <!-- /.card-footer -->
                        
                                </div>
                                <!-- /.card -->

                              </div>
                              <!--/.col (right) -->                          

                        </div>
                      </div>
                
                    </section>        


              </div>


            </div>
            <!-- /.card -->
            <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="submit" class="btn btn-sm btn-primary"><i class="fas fa-save"></i> Save Slider</button>
                </div>
            </div> 
            </form>


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





      </div>
      <!-- /.content-wrapper -->
    </section>
  </div>
</div>


<!-- 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>

<!-- PAGE PLUGINS -->
<!-- jQuery Mapael 
<script src="{{ asset('plugins/jquery-mousewheel/jquery.mousewheel.js') }}"></script>
<script src="{{ asset('plugins/raphael/raphael.min.js') }}"></script>
<script src="{{ asset('plugins/jquery-mapael/jquery.mapael.min.js') }}"></script>
<script src="{{ asset('plugins/jquery-mapael/maps/usa_states.min.js') }}"></script> -->
<!-- ChartJS 
<script src="{{ asset('plugins/chart.js/Chart.min.js') }}"></script> -->



<!-- DataTables  & Plugins 

<script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-buttons/js/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ asset('plugins/jszip/jszip.min.js') }}"></script>
<script src="{{ asset('plugins/pdfmake/pdfmake.min.js') }}"></script>
<script src="{{ asset('plugins/pdfmake/vfs_fonts.js') }}"></script>
<script src="{{ asset('plugins/datatables-buttons/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-buttons/js/buttons.print.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-buttons/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 src="{{ asset('admin/mylib/js/resumable.min.js') }}"></script>
 
<script>
$(document).ready(function(){
        if (document.getElementById("type").value() == "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 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