@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">Customer 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">Customer</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">
                <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">Save File</button>
                  </div>
                </div>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <div style="display:block;">
                  <table id="customertable" class="table table-bordered table-hover">
                    <thead>
                      <tr>
                        <th>Series No</th>
                        <th>Alert No</th>
                        <th>Entity Name</th>
                        <th>Branch Code</th>
                        <th>Tagging</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();
  var iscon = confirm("Confirm Save");
  if(iscon == true){
    $('#save-cust-file-btn').text("Please Wait..");
    $('#save-cust-file-btn').prop('disabled',true);
    saveFileCustomer();
  }
});
function uploadFileCustomer(){
    var filedata = [];
    var tempdata = "";
    var dataCustFile = new FormData();
    dataCustFile.append('csv', $("#inputFromFileCustomer").get(0).files[0]);
    $.ajax({
        url: '/upload-customer-tag-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);
            parseEntity(data);
        },
        complete:function(e){
            console.log(e);
        }
    });
  }
function saveFileCustomer(){
    var filedata = [];
    var tempdata = "";
    var dataCustFile = new FormData();
    dataCustFile.append('csv', $("#inputFromFileCustomer").get(0).files[0]);
    $.ajax({
        url: '/save-customer-tag-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("Saved");
            console.log(data);
            alert("File Upload Done.");
            $('#save-cust-file-btn').text("Save File");
            $('#save-cust-file-btn').prop('disabled',false);
        },
        complete:function(e){
            console.log(e);
        }
    });
  }
function parseEntity(e){
  dataSet = [];
  for(num in e){
    dataSet.push([
      e[num].series,
      e[num].alertno,
      e[num].custname,
      e[num].branchcode,
      e[num].tagging,
    ]);
  }
  dataTable.destroy();
  dataTable.draw();
  $('#customertable').DataTable({
    "scrollY":"360px",
    keys: true,
    data: dataSet,
    "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
    columns: [
      { title: "Series No" },
      { title: "Alert No" },
      { title: "Entity Name" },
      { title: "Branch Code" },
      { title: "Tagging" }
    ]}),
    dataTable = $('#customertable').DataTable();
}
</script>
@endsection