@extends('layout.master')
@section('pageTitle')
  <title>Pawnshop Management System</title>
@endsection
@section('metaCSRF')
  <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection
@section('contents')
    <style>
    label {
      font-size:0.9em !important;
    }
    .pac-container {
      z-index: 99999999 !important;
    }
    .ui-front {
      z-index: 9999 !important;
    }
    .modal { overflow: auto !important; }
  </style>
  <link rel="stylesheet" href="/css/autocomplete-jquery-ui.css">
  <link rel="stylesheet" href="/theme/plugins/datatables-bs4/css/dataTables.bootstrap4.css">
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">Compliance (File Upload)</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Compliance</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->
    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <!-- Small boxes (Stat box) -->
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-header">
                @if($isresetAllowed == true)
                  <div class="row">
                    <div class="col-md-6">
                        <input type="file" name="csv" id="inputFromFileCustomer" class="form-control"/>
                    </div>
                    <div class="col-md-2">
                      <button type="button" style="width:100%;margin-top:5px;"class="btn btn-primary btn-sm float-center" id="upload-cust-file-btn">Upload File</button>
                    </div>
                    <div class="col-md-2">
                      <button type="button" style="width:100%;margin-top:5px;"class="btn btn-success btn-sm float-center" id="save-cust-file-btn">View File</button>
                    </div>
                  </div>
                @else
                  <div class="row">
                    <div class="col-md-2">
                      <button type="button" style="width:100%;margin-top:5px;"class="btn btn-success btn-sm float-center" id="get-cust-file-btn">View Files</button>
                    </div>
                  </div>
                @endif
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <div style="display:block;">
                  <table id="customertable" class="table table-bordered table-hover">
                    <thead>
                      <tr>
                        <th>Filename</th>
                        <th>View</th>
                      </tr>
                    </thead>
                    <tbody>
                    </tbody>
                  </table>
                </div>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>
      </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
  </div>
@endsection
@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="/theme/plugins/datatables/jquery.dataTables.js"></script>
<script src="/theme/plugins/datatables-bs4/js/dataTables.bootstrap4.js"></script>
<!-- bootstrap datepicker -->
<!-- AdminLTE App -->
<script>
  var dataTable = $('#customertable').DataTable({
      keys: true,
      draw: true,
      "dom": '<"top"i>rt<"bottom"flp><"clear">',
    });
</script>
<script>
$('#upload-cust-file-btn').on('click',function(event){
  event.preventDefault();
  uploadFileCustomer();
});
$('#save-cust-file-btn').on('click',function(event){
  event.preventDefault();
  getFileCustomer();
});
$('#get-cust-file-btn').on('click',function(event){
  event.preventDefault();
  getFileCustomerBranch();
});
$(document).on('click','.remove-file',function(event){
  event.preventDefault();
  var iscon = confirm("Confirm Remove");
  if(iscon == true){
    removeDataFile($(this).attr('id'));
  }
});
function uploadFileCustomer(){
    var filedata = [];
    var tempdata = "";
    var dataCustFile = new FormData();
    dataCustFile.append('csv', $("#inputFromFileCustomer").get(0).files[0]);
    $.ajax({
        url: '/upload-compliance-file',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        method: 'POST',
        data: dataCustFile,
        processData: false,
        contentType: false,
        cache:false,
        enctype: 'multipart/form-data',
        error:function(err){
          console.error(err);
        },
        success:function(data){
            console.log(data);
            getFileCustomer();
        },
        complete:function(e){
            console.log(e);
        }
    });
  }
function getFileCustomer(){
    $.ajax({
        url: '/get-compliance-file',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        method: 'POST',
        success:function(data){
            console.log(data);
            parseEntity(data);
        }
    });
}
function getFileCustomerBranch(){
  $.ajax({
      url: '/get-compliance-file',
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      type:'POST',
      method: 'POST',
      success:function(data){
          console.log(data);
          parseEntityBranch(data);
      }
  });
}
function removeDataFile(dateFile){
    $.ajax({
        url: '/delete-compliance-file',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        method: 'POST',
        data: { filename: dateFile},
        success:function(data){
            console.log(data);
            getFileCustomer();
        }
    });
  }
function parseEntity(e){
  dataSet = [];
  for(num in e){
    dataSet.push([
      e[num],
      '<a href="http://pms.tambunting.net/FileUpload/'+e[num]+'" target="_blank">View File</a>'+
       '<a href="" id="'+e[num]+'" style="padding-left:10px;color:red;"class="remove-file">Remove File</a>',
    ]);
  }
  dataTable.destroy();
  dataTable.draw();
  $('#customertable').DataTable({
    "scrollY":"360px",
    keys: true,
    data: dataSet,
    "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
    columns: [
      { title: "Filename" },
      { title: "View" }
    ]}),
    dataTable = $('#customertable').DataTable();
}
function parseEntityBranch(e){
  dataSet = [];
  for(num in e){
    dataSet.push([
      e[num],
      '<a href="http://pms.tambunting.net/FileUpload/'+e[num]+'" target="_blank">View File</a>',
    ]);
  }
  dataTable.destroy();
  dataTable.draw();
  $('#customertable').DataTable({
    "scrollY":"360px",
    keys: true,
    data: dataSet,
    "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
    columns: [
      { title: "Filename" },
      { title: "View" }
    ]}),
    dataTable = $('#customertable').DataTable();
}
</script>
@endsection