@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;
    }
  </style>
  <link rel="stylesheet" href="/css/autocomplete-jquery-ui.css">
  <link rel="stylesheet" href="/theme/plugins/datatables-bs4/css/dataTables.bootstrap4.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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">Cash Count</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">Cash Count</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-md-12">

              <div class="modal-body">
                <div class="row">
                  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="review-content-section" style="border:1px solid rgba(0,0,0,0.1);margin-top:0px;padding:20px 20px 20px 20px;background:rgba(0,0,0,0.05);">
                      <div id="dropzone1" class="pro-ad">
                        <div class="row">
                          <div class="col-md-3">
                            <div class="form-group">
                              <label>Entry Date</label>
                              <div class="input-group">
                                <div class="input-group-prepend">
                                  <span class="input-group-text">
                                    <i class="far fa-calendar-alt"></i>
                                  </span>
                                </div>
                                <input type="text" class="form-control form-control-sm float-right trans-input" id="transdate" name="datemature" value="{{date('Y-m-d')}}" />
                              </div>
                            </div>
                          </div>
                          <div class="col-md-2">
                            <label>-</label>
                            <div class="form-group">
                              <button id="pop-denom-btn" type="button" class="btn btn-sm btn-primary form-control form-control-sm">Populate</button>
                            </div>
                          </div>
                            @if($isresetAllowed == true)
                              <div class="col-md-2">
                                <label>-</label>
                                <div class="form-group">
                                  <button id="reset-denom-btn" type="button" class="btn btn-sm btn-danger form-control form-control-sm">Reset</button>
                                </div>
                              </div>
                            @endif
                        </div>
                        <div class="row">
                          <div class="col-md-12">
                            <div class="row">
                              <div class="col-md-10">
                                <div style="border:1px solid rgba(0,0,0,0.2);background:#fff;padding:20px;">
                                <table id="denominationtable" class="table table-bordered table-hover" style="border:1px solid rgba(0,0,0,0.1);">
                                  <div class="row">
                                    <div class="col-md-4">
                                      <div class="form-group">
                                        <label>Cash In Vault</label>
                                        <div class="input-group">
                                          <div class="input-group-prepend">
                                            <span class="input-group-text">
                                              <i class="fas fa-ruble-sign"></i>
                                            </span>
                                          </div>
                                          <input id="cash-in-vault" type="text" class="form-control form-control-sm" value="0.00"/>
                                        </div>
                                      </div>

                                    </div>
                                    <div class="col-md-4">
                                      <div class="form-group">
                                        <label>Cash Float</label>
                                        <div class="input-group">
                                          <div class="input-group-prepend">
                                            <span class="input-group-text">
                                              <i class="fas fa-ruble-sign"></i>
                                            </span>
                                          </div>
                                          <input id="cash-float" type="text" class="form-control form-control-sm" value="0.00"/>
                                        </div>
                                      </div>

                                    </div>
                                  </div>
                                  <thead style="background:rgba(0,0,0,0.07);">
                                    <tr>
                                      <th>Denomination</th>
                                      <th>Count</th>
                                      <th>Value</th>
                                      <th>Status</th>
                                    </tr>
                                  </thead>
                                  <tbody style="border:1px solid rgba(0,0,0,0.1);">
                                    <tr>
                                      <td>1000</td>
                                      <td><input id="denomination-1000" type="number" class="form-control cash-count" value="0"/></td>
                                      <td><span id="text-denom-1000" class="cash-count-text" style="font-weight:bold;"></span></td>
                                      <td><span id="status100000" class="cash-count-status" style="font-size:0.9em;color:rgba(0,0,0,0.5);"></span></td>
                                    </tr>
                                    <tr>
                                      <td>500</td>
                                      <td><input id="denomination-500" type="number" class="form-control cash-count" value="0"/></td>
                                      <td><span id="text-denom-500" class="cash-count-text" style="font-weight:bold;"></span></td>
                                      <td><span id="status50000" class="cash-count-status" style="font-size:0.9em;color:rgba(0,0,0,0.5);"></span></td>
                                    </tr>
                                    <tr>
                                      <td>200</td>
                                      <td><input id="denomination-200" type="number" class="form-control cash-count" value="0"/></td>
                                      <td><span id="text-denom-200" class="cash-count-text" style="font-weight:bold;"></span></td>
                                      <td><span id="status20000" class="cash-count-status" style="font-size:0.9em;color:rgba(0,0,0,0.5);"></span></td>
                                    </tr>
                                    <tr>
                                      <td>100</td>
                                      <td><input id="denomination-100" type="number" class="form-control cash-count" value="0"/></td>
                                      <td><span id="text-denom-100" class="cash-count-text" style="font-weight:bold;"></span></td>
                                      <td><span id="status10000" class="cash-count-status" style="font-size:0.9em;color:rgba(0,0,0,0.5);"></span></td>
                                    </tr>
                                    <tr>
                                      <td>50</td>
                                      <td><input id="denomination-50" type="number" class="form-control cash-count" value="0"/></td>
                                      <td><span id="text-denom-50" class="cash-count-text" style="font-weight:bold;"></span></td>
                                      <td><span id="status5000" class="cash-count-status" style="font-size:0.9em;color:rgba(0,0,0,0.5);"></span></td>
                                    </tr>
                                    <tr>
                                      <td>20</td>
                                      <td><input id="denomination-20" type="number" class="form-control cash-count" value="0"/></td>
                                      <td><span id="text-denom-20" class="cash-count-text" style="font-weight:bold;"></span></td>
                                      <td><span id="status2000" class="cash-count-status" style="font-size:0.9em;color:rgba(0,0,0,0.5);"></span></td>
                                    </tr>
                                    <tr>
                                      <td>10</td>
                                      <td><input id="denomination-10" type="number" class="form-control cash-count" value="0"/></td>
                                      <td><span id="text-denom-10" class="cash-count-text" style="font-weight:bold;"></span></td>
                                      <td><span id="status1000" class="cash-count-status" style="font-size:0.9em;color:rgba(0,0,0,0.5);"></span></td>
                                    </tr>
                                    <tr>
                                      <td>5</td>
                                      <td><input id="denomination-5" type="number" class="form-control cash-count" value="0"/></td>
                                      <td><span id="text-denom-5" class="cash-count-text" style="font-weight:bold;"></span></td>
                                      <td><span id="status500" class="cash-count-status" style="font-size:0.9em;color:rgba(0,0,0,0.5);"></span></td>
                                    </tr>
                                    <tr>
                                      <td>2</td>
                                      <td><input id="denomination-2" type="number" class="form-control cash-count" value="0"/></td>
                                      <td><span id="text-denom-2" class="cash-count-text" style="font-weight:bold;"></span></td>
                                      <td><span id="status200" class="cash-count-status" style="font-size:0.9em;color:rgba(0,0,0,0.5);"></span></td>
                                    </tr>
                                    <tr>
                                      <td>1</td>
                                      <td><input id="denomination-1" type="number" class="form-control cash-count" value="0"/></td>
                                      <td><span id="text-denom-1" class="cash-count-text" style="font-weight:bold;"></span></td>
                                      <td><span id="status100" class="cash-count-status" style="font-size:0.9em;color:rgba(0,0,0,0.5);"></span></td>
                                    </tr>

                                    <tr>
                                      <td>0.50</td>
                                      <td><input id="denomination-0-50" type="number" class="form-control cash-count" value="0"/></td>
                                      <td><span id="text-denom-0-50" class="cash-count-text" style="font-weight:bold;"></span></td>
                                      <td><span id="status50" class="cash-count-status" style="font-size:0.9em;color:rgba(0,0,0,0.5);"></span></td>
                                    </tr>
                                    <tr>
                                      <td>0.25</td>
                                      <td><input id="denomination-0-25" type="number" class="form-control cash-count" value="0"/></td>
                                      <td><span id="text-denom-0-25" class="cash-count-text" style="font-weight:bold;"></span></td>
                                      <td><span id="status25" class="cash-count-status" style="font-size:0.9em;color:rgba(0,0,0,0.5);"></span></td>
                                    </tr>
                                    <tr>
                                      <td>0.10</td>
                                      <td><input id="denomination-0-10" type="number" class="form-control cash-count" value="0"/></td>
                                      <td><span id="text-denom-0-10" class="cash-count-text" style="font-weight:bold;"></span></td>
                                      <td><span id="status10" class="cash-count-status" style="font-size:0.9em;color:rgba(0,0,0,0.5);"></span></td>
                                    </tr>
                                    <tr>
                                      <td>0.05</td>
                                      <td><input id="denomination-0-05" type="number" class="form-control cash-count" value="0"/></td>
                                      <td><span id="text-denom-0-05" class="cash-count-text" style="font-weight:bold;"></span></td>
                                      <td><span id="status5" class="cash-count-status" style="font-size:0.9em;color:rgba(0,0,0,0.5);"></span></td>
                                    </tr>
                                    <tr>
                                      <td>0.01</td>
                                      <td><input id="denomination-0-01" type="number" class="form-control cash-count" value="0"/></td>
                                      <td><span id="text-denom-0-01" class="cash-count-text" style="font-weight:bold;"></span></td>
                                      <td><span id="status1" class="cash-count-status" style="font-size:0.9em;color:rgba(0,0,0,0.5);"></span></td>
                                    </tr>
                                  </tbody>
                                </table>
                                <hr>
                                <div class="row">
                                  <div class="col-md-2">
                                    <div class="form-group">
                                      <button id="clear-denom-btn" type="button" class="btn btn-sm btn-warning form-control">Clear</button>
                                    </div>
                                  </div>
                                  <div class="col-md-2">
                                    <div class="form-group">
                                      <input type="hidden" id="usercode" name="usercode" value="{{$currrentuser['user']}}" />
                                      <input type="hidden" id="branchcode" name="branchcode" value="{{$currrentuser['branch']}}" />
                                      <button id="add-denom-btn" type="button" class="btn btn-sm btn-info form-control">Add</button>

                                    </div>
                                  </div>
                                  <div class="col-md-2">
                                    <div class="form-group">
                                      <button id="post-denom-btn" type="button" class="btn btn-sm btn-success form-control">Post</button>
                                    </div>
                                  </div>
                                  @if($isresetAllowed == true)
                                    <div class="col-md-2">
                                      <input type="hidden" id="userlevel" name="userlevel" value="{{$currrentuser['level']}}">
                                      <button id="delete-denom-btn" type="button" class="btn btn-sm btn-danger form-control">Delete</button>
                                    </div>
                                  @endif
                                  <div class="col-md-6">
                                    <label style="padding-left:20px;">Total: </label> <span id="denom-total" style="padding-left:10px;font-weight:bold;font-size:1.2em;color:red;">0.00</span>
                                    <form id="denom-add-form"></form>
                                  </div>
                                </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
  </div>
  <!-- Modal -->

@endsection
@section('js')
<script src="/theme/plugins/datatables/jquery.dataTables.js"></script>
<script src="/theme/plugins/datatables-bs4/js/dataTables.bootstrap4.js"></script>

<script src="/theme/dist/js/pages/dashboard.js"></script>
<script src="/theme/dist/js/demo.js"></script>
<script src="/theme/plugins/datatables/jquery.dataTables.js"></script>
<script src="/theme/plugins/datatables-bs4/js/dataTables.bootstrap4.js"></script>

<script>
  $("#transdate").datepicker({
    dateFormat: "yy-mm-dd",
    maxDate: new Date
  });
  var miscDatatable = $('#denominationtable').DataTable({
    "scrollY":"500",
    keys: true,
    draw: true,
    paging:   false,
    info:     false,
    "autoWidth": false,
    "ordering": false,
    "dom": '<"top"i>rt<"bottom"flp><"clear">',
  });

  $('.cash-count').on('change',function(event){
    var denomval = $(this).val();
    var demcount = $(this).attr('id');
    var demcountArr = demcount.split('-');
    var denomvalue = 0;
    var denomtext = demcountArr[1].split('-');
    console.log(demcountArr);
    if(parseFloat(demcountArr[1]) >= 1){
      denomvalue = parseFloat(denomval) * parseFloat(demcountArr[1]);
      denomvalue = parseFloat(denomvalue).toFixed(2);
      $('#text-denom-'+demcountArr[1]).text(denomvalue);
    }
    else {
      denomvalue = parseFloat(denomval) * parseFloat(demcountArr[2]);
      denomvalue = parseFloat(denomvalue / 100).toFixed(2);
      $('#text-denom-'+demcountArr[1]+'-'+demcountArr[2]).text(denomvalue);
    }
    computeDenom();
  });
  function computeDenom(){
    var total = 0;
    var levelArray = $('.cash-count-text').map( function() {
        return $(this).text();
    }).get();
    console.log(levelArray);
    for (num in levelArray){
      if(levelArray[num] != ""){
        total = parseFloat(total) + parseFloat(levelArray[num]);
      }
    }
    total = parseFloat(total) + parseFloat($('#cash-in-vault').val()) + parseFloat($('#cash-float').val());
    $('#denom-total').text(total.toFixed(2));
  }
  function addDenomValues(){
    var denomArray = $('.cash-count').map( function() {
        var thisId = $(this).attr('id');
        if(thisId != "cash-in-vault"){
          thisId = thisId.split('-');
          var thisVal = $(this).val();
          if(parseFloat(thisId[1]) > 0) return thisId[1]+":"+thisVal;
          else return thisId[1]+"."+thisId[2]+":"+thisVal;
        }
    }).get();
    var itemList = '<input type="hidden" name="request" value="branchmisc" />';
    itemList = itemList + '<input type="hidden" name="type" value="denomadd" />';
    itemList = itemList + '<input type="hidden" name="cashinvault" value="'+$('#cash-in-vault').val()+'" />';
    itemList = itemList + '<input type="hidden" name="cashfloat" value="'+$('#cash-float').val()+'" />';
    itemList = itemList + '<input type="hidden" name="branchcode" value="'+$('#branchcode').val()+'" />';
    itemList = itemList + '<input type="hidden" name="usercode" value="'+$('#usercode').val()+'" />';
    itemList = itemList + '<input type="hidden" name="transdate" value="'+$('#transdate').val()+'" />';
    for(num in denomArray){
      itemList = itemList + '<input type="hidden" name="denom[]" value="'+denomArray[num]+'"/>';
    }
    console.log(itemList);
    $('#denom-add-form').html(itemList);
    $.ajax({
        url: '/settings-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: $('#denom-add-form').serialize(),
        success:function(e){
          if(e){
            console.log(e);
            if(e.code == 0){
              getData();
              alert('Cash Added');
            }
          }
        }
    });
  }
  $('#add-denom-btn').on('click',function(){
    addDenomValues();
  });
  $('#pop-denom-btn').on('click',function(){
    getData();
  });
  $('#clear-denom-btn').on('click',function(){
    clearData();
  });
  $('#post-denom-btn').on('click',function(){
    var delr = confirm("Confirm Posting!");
    if (delr == true) {
      postData();
    }
  });
  $('#delete-denom-btn').on('click',function(){
    var delr = confirm("Confirm Delete!");
    if (delr == true) {
      deleteData();
    }

  });
  $('#reset-denom-btn').on('click',function(){
    var delr = confirm("Confirm Reset!");
    if (delr == true) {
      resetData();
    }
  });
  function getData(){
    var itemList = '<input type="hidden" name="request" value="branchmisc" />';
    itemList = itemList + '<input type="hidden" name="type" value="denomget" />';
    itemList = itemList + '<input type="hidden" name="branchcode" value="'+$('#branchcode').val()+'" />';
    itemList = itemList + '<input type="hidden" name="transdate" value="'+$('#transdate').val()+'" />';
    $('#denom-add-form').html(itemList);
    $.ajax({
      url: '/settings-request',
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      type:'POST',
      data: $('#denom-add-form').serialize(),
      success:function(ret){
        if(ret){
          console.log(ret);
          $('.cash-count').val('0');
          $('.cash-count-text').text('');
          $('.cash-count-status').text('');
          var civ = ret.civ;
          var caf = ret.caf;
          var e = ret.denom;
          for(num in e){
            var denArr = e[num].denomination;
            if(denArr < 1){
              denArr = denArr.split('.');
              console.log(denArr);
              console.log(e[num]);
              $('#denomination-'+denArr[0]+'-'+denArr[1]).val(e[num].count);
              $('#text-denom-'+denArr[0]+'-'+denArr[1]).text(parseFloat(e[num].total).toFixed(2));
            }
            else {
              $('#denomination-'+e[num].denomination).val(e[num].count);
              $('#text-denom-'+e[num].denomination).text(parseFloat(e[num].total).toFixed(2));
            }
            $('#status'+parseFloat(e[num].denomination) * 100).text(e[num].status);
          }
          $('#cash-in-vault').val(parseFloat(civ).toFixed(2));
          $('#cash-float').val(parseFloat(caf).toFixed(2));
          computeDenom();
        }
      }
    });
  }
  function clearData(){
    var itemList = '<input type="hidden" name="request" value="branchmisc" />';
    itemList = itemList + '<input type="hidden" name="type" value="denomclear" />';
    itemList = itemList + '<input type="hidden" name="branchcode" value="'+$('#branchcode').val()+'" />';
    itemList = itemList + '<input type="hidden" name="transdate" value="'+$('#transdate').val()+'" />';
    $('#denom-add-form').html(itemList);
    $.ajax({
      url: '/settings-request',
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      type:'POST',
      data: $('#denom-add-form').serialize(),
      success:function(e){
        if(e){
          console.log(e);
          if(e.code == 0){
            alert("Cash Cleared!");
            $('.cash-count').val('0');
            $('.cash-count-text').text('');
            $('.cash-count-status').text('');
            $('#cash-in-vault').val('0.00');
          }

        }
      }
    });
  }
  function postData(){
    var itemList = '<input type="hidden" name="request" value="branchmisc" />';
    itemList = itemList + '<input type="hidden" name="type" value="denompost" />';
    itemList = itemList + '<input type="hidden" name="cashinvault" value="'+$('#cash-in-vault').val()+'" />';
    itemList = itemList + '<input type="hidden" name="branchcode" value="'+$('#branchcode').val()+'" />';
    itemList = itemList + '<input type="hidden" name="transdate" value="'+$('#transdate').val()+'" />';
    $('#denom-add-form').html(itemList);
    $.ajax({
      url: '/settings-request',
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      type:'POST',
      data: $('#denom-add-form').serialize(),
      success:function(e){
        if(e){
          console.log(e);
          if(e.code == 0){
            alert("Cash Posted!");
            getData();
          }
        }
      }
    });
  }
  function deleteData(){
    var itemList = '<input type="hidden" name="request" value="branchmisc" />';
    itemList = itemList + '<input type="hidden" name="type" value="denomdelete" />';
    itemList = itemList + '<input type="hidden" name="branchcode" value="'+$('#branchcode').val()+'" />';
    itemList = itemList + '<input type="hidden" name="transdate" value="'+$('#transdate').val()+'" />';
    $('#denom-add-form').html(itemList);
    $.ajax({
      url: '/settings-request',
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      type:'POST',
      data: $('#denom-add-form').serialize(),
      success:function(e){
        if(e){
          console.log(e);
          getData();
        }
      }
    });
  }
  function resetData(){
    var itemList = '<input type="hidden" name="request" value="branchmisc" />';
    itemList = itemList + '<input type="hidden" name="type" value="denomreset" />';
    itemList = itemList + '<input type="hidden" name="branchcode" value="'+$('#branchcode').val()+'" />';
    itemList = itemList + '<input type="hidden" name="transdate" value="'+$('#transdate').val()+'" />';
    $('#denom-add-form').html(itemList);
    $.ajax({
      url: '/settings-request',
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      type:'POST',
      data: $('#denom-add-form').serialize(),
      success:function(e){
        if(e){
          console.log(e);
          getData();
        }
      }
    });
  }
</script>
<script>
</script>

@endsection