@extends('admin.layout')

@section('content')
<style type="text/css">
  .modal-body {

    padding: 5rem 4rem;

    text-align: center;

}
.modal-footer .btn-primary:hover{
  background: transparent;
  border-color: transparent;
}


.modal-body {

    font-size: 16px;

}



.modal-content {

    min-height: auto;

}



.modal-title {

    padding-left: 0;

}





.modal-body p {

    margin-bottom: 0;

    font-size: 24px;

    font-weight: 600;

}
.ecom-btn-border1{
      min-width: 125px;
          padding: 3px 9px;
}
#example_length{
display: none;
}
/*New css*/
.panel.panel-blue {
    background: #1f328e;
}

.panel {
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
    padding: 13px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    color: #fff;
}

.panel.panel-green {
    background: #4CAF50;
}

.huge small {
    font-size: 28px !important;
    display: block !important;
    color: #fff;
}
.panel.panel-blue i{
    font-family: 'Font Awesome 5 Free' !important;
  }
  .panel i{
    color: #fff;
  }
  .customupload1 {
    background: #1f328e !important;
    border: 1px solid #1f328e !important;
}

.upload_btn_group .btn {
    margin-right: 20px;
    margin-bottom: 15px;
    border-radius: 30px;
    padding: 10px 25px;
    font-size: 14px;
    min-width: 150px;
}

.fileinput-button {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.fileinput-button input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    -ms-filter: 'alpha(opacity=0)';
    direction: ltr;
    cursor: pointer;
    height: 34px!important;
    width: 108px!important;
}

.upload_btn_group .btn i {
    font-size: 14px;
    font-weight: 100 !important;
    margin-right: 2px;
    color: #fff !important;
}

.customupload2 {
    background: #F44336;
    border: 1px solid #F44336!important;
    color: #fff !important;
}

.customupload3 {
    background: #4CAF50;
    border-color: #4CAF50;
}

.h2.sub-header {
    font-size: 19px;
    margin-top: 13px;
}
/*checkbox*/
[type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after {
    top: -2px;
    left: 3px;
    font-size: 17px;
}
[type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before {
    width: 15px;
    height: 15px;
    border-radius: 2px;
}
[type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label {
    padding-left: 19px;
    font-size: 13px;
}
.form-control {
    display: block;

    width: 100%;

    height: calc(2.25rem + 2px);

    padding: .375rem .75rem;

    font-size: 1rem;

    line-height: 1.5;

    color: #495057;

    background-color: #fff;

    background-clip: padding-box;

    border: 1px solid #ced4da;

    border-radius: .25rem;

    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;

}
.bg-red {
    display: inline-block;
    font-weight: 400;
    background: #f55793 !important;
    text-align: center;
    white-space: nowrap;
    font-size: 12px !important;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s;
}
.bg-beauty-green {
    background: #4CAF50 !important;
}
.badge i {
    color: #fff;
}
.ecom-btn {
    background: #36d8ff;
    color: #fff;
    border: none;
    display: inline-block;
    padding: 10px 40px;
    border-radius: 40px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.8s;
    font-size: 16px;
    min-width: 160px;
}

.ecom-btn:hover {
    opacity: 0.8;
    color: #fff;
}

.ecom-btn:focus {
    outline: none;
    text-decoration: none;
    color: #fff;
}
.custompanelBody {
    border: 1px solid #d6d6d696;
    padding: 25px;
    margin-bottom: 40px;
    padding-top: 40px;
}
.container-custom01{
  max-width: 1900px;
  width: 100%;
  padding-left: 2%;
  padding-right: 2%;
}

.panel-yellow {
    background: #f0ad4e;
}
span.btn.btn-success.customupload1.fileinput-button {
    background: #36bea6!important;
    border-color: #36bea6!important;
}

button.btn.btn-primary.customupload2 {
    background: #7460ee!important;
    border-color: #7460ee!important;
}


button.btn.btn-warning.customupload3 {
    background: #ffbc34!important;
    border-color: #ffbc34!important;
}
.remark {
    font-size: 12px;
}
.table > thead > tr > th {
    font-size: 14px !important;
    }

.table > tbody > tr > td {
    font-size: 12px;
}

.table td input{
  font-size: 12px!important;
}

</style>

<div class="content-wrapper">


  <!-- Main content -->

  <section class="content">

    <!-- Info boxes -->



    <!-- /.row -->

<div class="container-custom01">

    <div class="row">

      <div class="col-md-12">


            <div class="row">

              <div class="col-xs-12">

         @if (count($errors) > 0)

            @if($errors->any())

            <div class="alert alert-success alert-dismissible" role="alert">

              <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>

              {{$errors->first()}}

            </div>

            @endif

          @endif

              </div>

            </div>
  <div class="custompanelBody">
            <div class="row">
    <div class="col-md-6">
        <div class="panel panel-yellow">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-xs-2 col-md-2">
                        <h1><i class="fa fa-calculator"></i></h1></div>
                    <div class="col-xs-10 col-md-10 text-right">
                        <div class="huge"><small style="font-size:60%"></small></div>
                        <div>PHP Memory Usage</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="panel panel-green">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-xs-2 col-md-2">
                        <h1><i class="fa fa-hdd-o"></i></h1></div>
                    <div class="col-xs-10 col-md-10 text-right">
                        <div class="huge"><small style="font-size:60%"></small></div>
                        <div>Disk Space Usage</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Upload Section -->
<div class="row">
<div class="card">
    <div class="card-body">
        <div class="row">
            <div class="col-lg-12 col-md-12">
                <div class="h2 sub-header">File Upload</div>
                <form action="saveuploadfile" enctype="multipart/form-data" method="post" accept-charset="utf-8" name="uploadform" id="uploadform">

                    <div class="row">
                        <div class="col-lg-12 col-md-12 upload_btn_group">
                          <span class="btn btn-success customupload1 fileinput-button"><i class="fa fa-plus"></i> <span>Add Files</span>
                            <input type="file" name="files_gallery" id="files" multiple="" required="" accept=".jpg, .jpeg, .png, .gif, .pdf, .doc, .docx, .odt, .txt, .odg, .odp, .ods, .zip, .rar, .psv, .xls, .xlsx, .ppt, .pptx, .mp3, .wav, .mp4, .wma, .flv, .avi, .mov, .m4v, .wmv, .m3u, .pls">
                            </span>
                            <button type="submit" class="btn btn-primary customupload2"><i class="fa fa-upload"></i> <span>Upload</span></button>
                            <button type="reset" class="btn btn-warning customupload3" id="reset"><i class="fa fa-ban"></i> <span>Cancel</span></button><pre id="filelist" style="display:none;"></pre></div>
                    </div>
                </form>
                <div class="remark"><em>Only files (jpg, jpeg, png, gif, pdf, doc, docx, odt, txt, odg, odp, ods, zip, rar, psv, xls, xlsx, ppt, pptx, mp3, wav, mp4, wma, flv, avi, mov, m4v, wmv, m3u, pls) are allowed. Image size is not over 1900px on width or height.</em></div>
            </div>
        </div>
    </div>
</div>
</div>
</div>

<!-- End -->
            <div class="row">

              <div class="col-xs-12">

<form name="frm-example" id="frm-example" method="POST" action="deleteuploadfile">
<table id="example" class="display table table-bordered table-hover table-striped contact_forms_tbl" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th width="8%"><input type="checkbox" name="check" id="selectall"  >
                 <label for="selectall"></label> </th>
         <th width="15%">Thumbnail</th>
         <th width="52%">File Name</th>
         <th width="15%">Upload Date/Time</th>
         <th width="10%">Download</th>
      </tr>
   </thead>

   <tbody>

               </tbody>
</table>

<hr>

<input class="ecom-btn" type="submit" value="Submit">
<!-- <p><button>Submit</button></p> -->

<!-- <p><b>Form data:</b></p>
<div id="example-console-form"></div> -->
</form>





              </div>

            </div>

          </div>

          <!-- /.box-body -->

        </div>

        <!-- /.box -->

      </div>

      <!-- /.col -->

    </div>

    <!-- /.row -->



       <!-- deletepagesModal -->

  <div class="modal " id="manufacturerModal" tabindex="-1" role="dialog" aria-labelledby="deleteManufacturerModalLabel">

    <div class="modal-dialog" role="document">

    <div class="modal-content">

      {!! Form::open(array('url' =>'admin/deletebeautyPages', 'name'=>'deleteManufacturer', 'id'=>'deleteManufacturer', 'method'=>'post', 'class' => 'form-horizontal', 'enctype'=>'multipart/form-data')) !!}

          {!! Form::hidden('action',  'delete', array('class'=>'form-control')) !!}

          {!! Form::hidden('pages_id',  '', array('class'=>'form-control', 'id'=>'manufacturers_id')) !!}

      <div class="modal-body">
      <center><img style="width: 60px; padding-bottom: 20px;" src="resources/views/outlets/common/images/cancel.svg" alt=""></center>

        <p>Are you sure you want to delete this Page?</p>

      </div>

      <div class="modal-footer">

      <button type="button" class="btn btn-default" data-dismiss="modal"><img src="/resources/views/outlets/common/images/cancel.svg" alt=""></button>

      <button type="submit" class="btn btn-primary"> <img src="/resources/views/outlets/common/images/verified.svg" alt=""></button>

      </div>

      {!! Form::close() !!}

    </div>





    <!-- /.row -->
</div>
</div>
    <!-------clone pages model----->

 <div class="modal " id="clonepagesModal" tabindex="-1" role="dialog" aria-labelledby="deleteManufacturerModalLabel">

    <div class="modal-dialog" role="document">

    <div class="modal-content">

      {!! Form::open(array('url' =>'admin/clonebeautyPages', 'name'=>'deleteManufacturer1', 'id'=>'deleteManufacturer1', 'method'=>'post', 'class' => 'form-horizontal', 'enctype'=>'multipart/form-data')) !!}

          {!! Form::hidden('action',  'delete', array('class'=>'form-control')) !!}

          {!! Form::hidden('clone_pages_id',  '', array('class'=>'form-control', 'id'=>'clonesPageid')) !!}

      <div class="modal-body">
      <center><img style="width: 60px; padding-bottom: 20px;" src="/resources/views/outlets/common/images/cancel.svg" alt=""></center>

        <p>Are you sure you want to clone this Page?</p>

      </div>

      <div class="modal-footer">

      <button type="button" class="btn btn-default" data-dismiss="modal"><img src="/resources/views/outlets/common/images/cancel.svg" alt=""></button>

      <button type="submit" class="btn btn-primary"> <img src="/resources/views/outlets/common/images/verified.svg" alt=""></button>

      </div>

      {!! Form::close() !!}

    </div>





    <!-- /.row -->
</div>
</div>

  </section>

  <!-- /.content -->

</div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
 <!--  <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> -->
 <!--   <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script> -->
<script type="text/javascript">

</script>
<SCRIPT language="javascript">
$(function(){

  // add multiple select / deselect functionality
  $("#selectall").click(function () {
      $('.case').attr('checked', this.checked);
  });

  // if all checkbox are selected, check the selectall checkbox
  // and viceversa
  $(".case").click(function(){

    if($(".case").length == $(".case:checked").length) {
      $("#selectall").attr("checked", "checked");
    } else {
      $("#selectall").removeAttr("checked");
    }

  });
});
</SCRIPT>
<script type="text/javascript">

  var bootstrap4 = jQuery.noConflict( true );
 bootstrap4(document).ready(function (){
   var table = bootstrap4('#example').DataTable();

   // Handle form submission event
   bootstrap4('#frm-example').on('submit', function(e){
      var form = this;

      // Encode a set of form elements from all pages as an array of names and values
      var params = table.bootstrap4('input,select,textarea').serializeArray();

      // Iterate over all form elements
      bootstrap4.each(params, function(){
         // If element doesn't exist in DOM
         if(!bootstrap4.contains(document, form[this.name])){
            // Create a hidden element
            bootstrap4(form).append(
               bootstrap4('<input>')
                  .attr('type', 'hidden')
                  .attr('name', this.name)
                  .val(this.value)
            );
         }
      });

      // FOR DEMONSTRATION ONLY
      // The code below is not needed in production

      // Output form data to a console
      bootstrap4('#example-console-form').text(bootstrap4(form).serialize());

      // Remove added elements
      bootstrap4('input[type="hidden"]', form).remove();

      // Prevent actual form submission
      e.preventDefault();
   });
});
</script>
<script type="text/javascript">
document.getElementById( 'files').addEventListener( 'change', function ( e) {
    var list=document.getElementById( 'filelist');
    list.innerHTML='';
    for ( var i=0;
    i < this.files.length;
    i++) {
        list.innerHTML +=( i + 1) + '. ' + this.files[ i].name + '\n';
    }
    if ( list.innerHTML=='') list.style.display='none';
    else list.style.display='block';
}

);
document.getElementById( 'reset').addEventListener( 'click', function ( e) {
    var list=document.getElementById( 'filelist');
    list.innerHTML='';
    list.style.display='none';
}

);
var fl=document.getElementById( 'files');
fl.onchange=function ( e) {
    var exts=this.value.substring( this.value.lastIndexOf( '.') + 1).toLowerCase();
    var ext=exts.toLowerCase();
    switch ( ext) {
        case 'jpg': case 'jpeg': case 'png': case 'gif': case 'pdf': case 'doc': case 'docx': case 'odt': case 'txt': case 'odg': case 'odp': case 'ods': case 'zip': case 'rar': case 'psv': case 'xls': case 'xlsx': case 'ppt': case 'pptx': case 'mp3': case 'wav': case 'mp4': case 'wma': case 'flv': case 'avi': case 'mov': case 'm4v': case 'wmv': case 'm3u': case 'pls': break;
        default: alert( '');
        this.value='';
        var list=document.getElementById( 'filelist');
        list.innerHTML='';
        list.style.display='none';
    }
}

;
</script>

@endsection