@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">Branch Miscellaneous</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">Branch Miscellaneous</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-9">
                            <label>ADD ENTRY</label>
                          </div>
                          <div class="col-md-3">
                            <div class="form-group">
                              <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="transentrydate" name="transdate" value="{{date('Y-m-d')}}">
                              </div>

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



                        <hr>
                        <div class="row">
                          <div class="col-md-12">
                            <div class="row">
                              <div class="col-md-4">
                                <form id="add-branch-misc-form">
                                  <div style="border:1px solid rgba(0,0,0,0.2);background:#fff;padding:20px;">
                                    <div class="form-group">
                                      <label>Transaction Name</label>
                                      <select class="form-control form-control-sm" id="servicename" name="servicename">
                                      </select>
                                      <input style="margin-top:5px;" id="servicedesc" name="servicedesc" type="text" class="form-control form-control-sm" placeholder="(Description)">
                                    </div>
                                    <div class="form-group">
                                      <label>Normal Balance</label>
                                      <select class="form-control form-control-sm" id="normalbal" name="normalbal">
                                        <option value="Cr">Credit</option>
                                        <option value="Dr">Debit</option>
                                      </select>
                                    </div>
                                    <div class="form-group">
                                      <label>Total Amount</label>
                                      <input id="totalamount" name="totalamount" type="text" class="form-control form-control-sm" value="0.00">
                                    </div>
                                    <div class="form-group">
                                      <button id="add-misc-btn" type="button" class="btn btn-sm btn-primary">Add</button>
                                      <button id="clear-misc-btn" type="button" class="btn btn-sm btn-info">Clear</button>
                                    </div>
                                  </div>
                                </form>
                              </div>
                              <div class="col-md-8">
                                <div style="border:1px solid rgba(0,0,0,0.2);background:#fff;padding:20px;">
                                <table id="misctable" class="table table-bordered table-hover">
                                  <thead style="background:rgba(0,0,0,0.07);">
                                    <tr>
                                      <th>Service Code</th>
                                      <th>Service Name</th>
                                      <th>Debit</th>
                                      <th>Credit</th>
                                    </tr>
                                  </thead>
                                  <tbody></tbody>
                                </table>
                                <div class="form-group">
                                  <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="confirm-misc-btn" type="button" class="btn btn-sm btn-success">Confirm</button>
                                  </div>
                                  <!-- <label>Balance: </label> <span style="padding-left:10px;font-weight:bold;" id="balance-value"></span> -->
                                </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Service List</h3>
                <br>
                <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="entrydate" name="entrydate" value="{{date('Y-m-d')}}">
                    </div>

                  </div>
                  <button id="populate-service-btn" type="button" class="btn btn-sm btn-success form-control form-control-sm">Populate</button>
                </div>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <table id="example2" class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <th>Id</th>
                      <th>Service Code</th>
                      <th>Service Name</th>
                      <th>Debit</th>
                      <th>Credit</th>
                      <th>Status</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody></tbody>

                </table>
                <div class="row">
                  <div class="col-md-2">
                    <button id="delete-service-btn" type="button" class="btn btn-sm btn-danger form-control form-control-sm">Delete</button>
                  </div>
                  <div class="col-md-2">
                    <button id="post-service-btn" type="button" class="btn btn-sm btn-info form-control form-control-sm">Post</button>
                  </div>
                </div>
                <form id="change-service-form"></form>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </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>
  $("#entrydate").datepicker({
    dateFormat: "yy-mm-dd",
    maxDate: new Date
  });
  $("#transentrydate").datepicker({
    dateFormat: "yy-mm-dd",
    maxDate: new Date
  });
  var miscDatatable = $('#misctable').DataTable({
    "scrollY":"296px",
    keys: true,
    draw: true,
    paging:   false,
    info:     false,
    "autoWidth": false,
    "ordering": false,
    "dom": '<"top"i>rt<"bottom"flp><"clear">',
  });
  var dataTable = $('#example2').DataTable({
      keys: true,
      draw: true,
      "dom": '<"top"i>rt<"bottom"flp><"clear">',
    });
  var miscData = [];
  $('#add-rates-btn').on('click',function(event){
    event.preventDefault();
    $('#new-branch-error-msg').html('');
    $('#new-branch-success-msg').html('');
    $.ajax({
        url: '/settings-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: $('#add-rates-form').serialize(),
        success:function(e){
          if(e){
            console.log(e);
          }
        }
    });
  });
  function ratesList(){
    $.ajax({
        url: '/settings-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {request: 'branchmisc', type: 'getbranchtxnsetup'},
        success:function(e){
          if(e){
            console.log(e);
            miscData = e;
            $('#servicename').html('');
            var servicedata = '<option value="">--Select Transaction--</option>';
						for(num in e){
              servicedata = servicedata + '<option value="'+e[num].servicecode+':'+e[num].servicename+'">'+e[num].servicename+'</option>';
						}
            $('#servicename').html(servicedata);
          }
        }
    });
  }
  ratesList();
  $('#servicename').on('change',function(){
    var servval = $(this).val();
    servval = servval.split(':');
    console.log(servval);
    for (num in miscData){
      if(miscData[num].servicecode == servval[0]){
        console.log(miscData[num]);
        $('#normalbal').val(miscData[num].normalbalance);
      }
    }
  });
  $('#capital').on('change',function(){computeTotal();});
  $('#servicefee').on('change',function(){computeTotal();});
  $('#handlingfee').on('change',function(){computeTotal();});
  function computeTotal(){
    var capital = $('#capital').val();
    var servicefee = $('#servicefee').val();
    var handlingfee = $('#handlingfee').val();
    var totalamount = parseFloat(capital) + parseFloat(servicefee) + parseFloat(handlingfee);
    $('#totalamount').val(totalamount.toFixed(2));
  }
  $('#add-misc-btn').on('click',function(event){
    event.preventDefault();
    $.ajax({
        url: '/add-branch-misc-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: $('#add-branch-misc-form').serialize(),
        success:function(e){
          if(e){
            console.log(e);
            calculateEntries();
          }
        }
    });
  });
  $('#clear-misc-btn').on('click',function(event){
    clearEntries();
  });
  calculateEntries();
  function calculateEntries(){
    $.ajax({
        url: '/get-branch-misc-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: $('#add-branch-misc-form').serialize(),
        success:function(e){
          if(e){
            console.log(e);
            var dataSet = [];
            var totalDebit = 0;
            var totalCredit = 0;
            for(num in e){
              var debit = 0;
              var credit = 0;
              if(e[num].normalbal == "Dr"){
                debit = parseFloat(e[num].totalamount).toFixed(2);
                totalDebit = parseFloat(totalDebit) + parseFloat(debit);
                credit = "";
              }
              else if(e[num].normalbal == "Cr"){
                credit = parseFloat(e[num].totalamount).toFixed(2);
                totalCredit = parseFloat(totalCredit) + parseFloat(credit);
                debit = "";
              }
							dataSet.push([
                e[num].servicecode,
								'' + e[num].servicename + ' - ' + e[num].servicedesc,
								debit,
								credit,]
							);
						}
            dataSet.push(["","",'<b>'+totalDebit.toFixed(2)+'</b>','<b>'+totalCredit.toFixed(2)+'</b>',""]);
						miscDatatable.destroy();
						miscDatatable.draw();
						$('#misctable').DataTable({
              "scrollY":"296px",
              keys: true,
              draw: true,
              paging:   false,
              info:     false,
              "autoWidth": false,
              "ordering": false,
							data: dataSet,
							"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
							columns: [
                { title: "Service Code" },
								{ title: "Service Name" },
								{ title: "Debit" },
                { title: "Credit" },
							]}),
							miscDatatable = $('#misctable').DataTable();
          }
        }
    });
  }
  function clearEntries(){
    $.ajax({
        url: '/clear-branch-misc-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: $('#add-branch-misc-form').serialize(),
        success:function(e){
          if(e){
            console.log(e);
            calculateEntries();
          }
        }
    });
  }
  $('#confirm-misc-btn').on('click',function(event){
    event.preventDefault();
    $.ajax({
        url: '/add-branch-misc-data',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {usercode: $('#usercode').val(), branchcode: $('#branchcode').val(), transdate: $('#transentrydate').val() },
        success:function(e){
          if(e){
            console.log(e);
            calculateEntries();
            if(e == 0) alert("Transaction Successful");

          }
        }
    });
  });
  $('#populate-service-btn').on('click',function(event){
    event.preventDefault();
    getServiceData();
  });
  $('#post-service-btn').on('click',function(event){
    event.preventDefault();
    postService();
  });
  $('#delete-service-btn').on('click',function(event){
    event.preventDefault();
    deleteService();
  });
  function getServiceData(){
    $.ajax({
        url: '/settings-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {request: 'branchmisc', type: 'get', date: $('#entrydate').val(), branch: $('#branchcode').val()},
        success:function(e){
          if(e){
            console.log(e);
            dataSet = [];
						for(num in e){
              var str = "";
              if(e[num].status == "Posted") str = '<input type="checkbox" id="service:'+e[num].id+'" disabled/>';
              else str = '<input type="checkbox" id="service:'+e[num].id+'" />';
              var debit = "";
              var credit = "";
              if(e[num].normalbalance == "Cr") credit = parseFloat(e[num].amount).toFixed(2);
              else if(e[num].normalbalance == "Dr") debit = parseFloat(e[num].amount).toFixed(2);
							dataSet.push([
								e[num].id,
                e[num].servicecode,
								e[num].servicename + ' - ' + e[num].description,
                debit,
                credit,
                e[num].status,
                str
              ]);
						}
						dataTable.destroy();
						dataTable.draw();
						$('#example2').DataTable({
							"scrollY":"360px",
							keys: true,
							data: dataSet,
							"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
							columns: [
								{ title: "Id" },
								{ title: "Service Code" },
                { title: "Service Name" },
                { title: "Debit" },
                { title: "Credit" },
                { title: "Status" },
                { title: "" },
							]}),
							dataTable = $('#example2').DataTable();
          }
        }
    });
  }
  function postService(){
    var itemList = "";
    $('#change-service-form').html('');
    $(':checkbox:checked').each(function(){
      var itemListId = $(this).attr('id');
      itemListId = itemListId.split(':');
      itemList = itemList + '<input type="hidden" value="'+itemListId[1]+'" name="service[]" />'
    });
    console.log(itemList);
    itemList = itemList + '<input type="hidden" name="branchcode" value="'+$('#branchcode').val()+'"/>';
    itemList = itemList + '<input type="hidden" name="transdate" value="'+$('#entrydate').val()+'"/>';
    itemList = itemList + '<input type="hidden" name="request" value="branchmisc"/>';
    itemList = itemList + '<input type="hidden" name="type" value="post"/>';
    $('#change-service-form').html(itemList);
    $.ajax({
        url: '/settings-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: $('#change-service-form').serialize(),
        success:function(e){
          if(e){
            console.log(e);
            getServiceData();
          }
        }
    });
  }
  function deleteService(){
    var itemList = "";
    $('#change-service-form').html('');
    $(':checkbox:checked').each(function(){
      var itemListId = $(this).attr('id');
      itemListId = itemListId.split(':');
      itemList = itemList + '<input type="hidden" value="'+itemListId[1]+'" name="service[]" />'
    });
    console.log(itemList);
    itemList = itemList + '<input type="hidden" name="branchcode" value="'+$('#branchcode').val()+'"/>';
    itemList = itemList + '<input type="hidden" name="transdate" value="'+$('#entrydate').val()+'"/>';
    itemList = itemList + '<input type="hidden" name="request" value="branchmisc"/>';
    itemList = itemList + '<input type="hidden" name="type" value="delete"/>';
    $('#change-service-form').html(itemList);
    $.ajax({
        url: '/settings-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: $('#change-service-form').serialize(),
        success:function(e){
          if(e){
            console.log(e);
            getServiceData();
          }
        }
    });
  }
</script>
<script>
</script>

@endsection