@extends('layouts/default')
@section('title')
  Expenses
@stop
@section('commonbuttons')
<a type="button" class="btn btn-primary commonButtons" href="{{ route('getContactDetailList',array('seller_id'=>$seller_id)) }}" style="margin-left:5px;">{{config('app.tabLables')['seller_contacts']}}</a>
<a type="button" class="btn btn-primary commonButtons" href="{{ route('contact\contactus',array('seller_id'=>$seller_id)) }}" style="margin-left:5px;">{{config('app.tabLables')['contact_us']}}</a>
@stop
@section('content')
@include('notifications')
<style type="text/css">
  .table{
    font-size: 14px;
  }
  table.dataTable tbody tr {
    background: none !important;
  }
  table>tbody>tr>td {
    border-top: 1px solid #999999 !important;      
  }
  .popover{min-width: 250px;}    
</style>
<div class="row expenses_main">
  <div class="col-md-12">
    <div id="">
      <section>                    
          <div class="pull-right">                      
            <a class="btn btn-default" href="{{ asset('assets/expenses/Sample.csv') }}">Download Sample CSV</a>
            <button class="btn btn-primary" name="upload_expenses" id="upload_expenses">Upload Expenses</button>
          </div>
          <div>            
              <table class="table" id="tbl_fees">
                  <thead>
                      <tr>
                        <th scope="col" width="10%">Date</th>
                        <th scope="col">Bank Account</th>
                        <th scope="col">Customer</th>
                        <th scope="col">Reference</th>
                        <!-- <th scope="col">Total</th> -->
                        <th scope="col">Expense Account</th>
                        <th scope="col" width="20%">Description</th>
                        <th scope="col">Amount</th>
                        <th scope="col">Status</th>                              
                      </tr>
                  </thead>
                  <tbody>
                      @foreach($feesData as $key => $value)
                        @foreach($value as $k => $v)
                          <tr>                              
                              <td class="td_align">{{date('Y-m-d', strtotime($v['date']))}}</td>
                              <td class="td_align">{{$v['bank_account']}}</td>
                              <td class="td_align">{{$v['customer_id']}}</td>
                              <td class="td_align">{{$v['reference']}}</td>
                              <!-- <td class="td_align">{{$v['total_fees']}}</td> -->
                              <td>{{$v['account']}}</td>
                              <td>{{$v['description']}}</td>
                              <td>{{$v['unit_price']}}</td>
                              <td class="td_align">{{$v['sync_status']}}
                                @if($v['sync_status'] == 'Pending')
                                <a href="#"  data-html="true" data-placement="top" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="{{$v['error']}}"><i class="fa fa-info-circle" aria-hidden="true"></i></a>
                                @endif
                              </td>                              
                          </tr>
                        @endforeach
                      @endforeach
                  </tbody>
              </table>          
          </div>
      </section>
    </div>
  </div>
</div>
<div id="instructionsModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header"  style="padding: 10px !important;">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Instructions</h4>
      </div>
      <div class="modal-body"  style="padding-bottom: 0px;padding-top: 0px; ">
        <h5>There are very important points to remember before using Fees Sync through CSV Upload feature.</h5>
        <form id="form_instruction">         
          <div class="" style="font-size: 13px;">
            <ul>
              <li>Our app will sync Fees as Spend Money entry for each day. e.g. If there are multiple fees on any particular day, then our app will sum up all the entries for that day to create a daily entry.</li>
              <li>You will be asked to choose Bank account, Expense account, Customer and Tax Type. Our app will create a Spend Entry from Bank account to Expense account for the customer as per provided information.</li>
              <li>This process manually uploads fees entries. Once this process upload any fee entries, it can not be reversed. It means the entries created by this process can not be updated or deleted by our app. In case of any wrong entry entered in Xero, it needs to be handled manually directly in Xero by you.</li>
              <li>CSV file requires fields Date, Description and Amount. You can download a sample CSV file from the app.</li>
            </ul>
          </div>
          <input type="checkbox" name="chk_agree" id="chk_agree"> Agree with all conditions?
          <div id="chk_agree_error" class="text-red"></div>
          
       
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>      
        <button type="button" class="btn btn-primary" id="accept">Accept</button>
      </div>
    </div>

  </div>
</div>
<div class="modal fade" id="modal-upload-excel" style="display: none;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"  style="padding: 10px !important;">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Upload Expense CSV File</h4>
      </div>
      <div class="section-upload">
        <!-- <form method="post" id="frm_expense_upload" name="frm_expense_upload" enctype="multipart/form-data" role="form">       -->
            <form action="{{route('upload_expense_file',array('seller_id' => $seller_id))}}" method="post" id="frm_expense_upload" name="frm_expense_upload" enctype="multipart/form-data">      
            <input type="hidden" name="_token" value="{{ csrf_token() }}" />
            <div class="modal-body">              
              <div class="row">                            
                <div class="col-md-12">
                  <div class="form-group col-md-6">
                    <input type="file" name="file" id="file" class="form-control" accept=".csv">
                    <div><span style="color: red;display: hidden;" id="nofileselectederror"></span></div>
                  </div>            
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-primary" id="upload" name="upload">Upload</button>
            </div>
        </form>
      </div>      
    </div>
  </div>
</div>
@stop
@section('moar_scripts')
<script>    
    $(document).ready(function(){
      $('[data-toggle="popover"]').popover()
      $('#tbl_fees').DataTable({
        "searching": false,
        "pageLength": 20,
        "aaSorting": [],
        //"bSort": false,
        "lengthMenu": [ 10, 20, 50, 100 ]
        //'rowsGroup': [0]
        //"ordering": false
      });
      //$(".dataTables_length").addClass('pull-right');
    });
    $(document).on('click','#upload_expenses',function(){
        $("#chk_agree").prop('checked',false);
        $("#instructionsModal").modal('show');        
    });

    $(document).on('click','#accept',function(){
        if($("#chk_agree").prop('checked') == false){
          $("#chk_agree_error").html('Select this Checkbox to continue.');
        } else {
          $("#chk_agree_error").html('');
          $("#instructionsModal").modal('hide');
          $("#modal-upload-excel").modal('show');
        }
    });

    $(document).on('submit','#frm_expense_upload',function(e){
        var file = document.getElementById("file");
        var allowedExtensions = /(\.csv)$/i;
        var filePath = file.value;
        if (file.files.length == 0) {
            e.preventDefault();
            $("#nofileselectederror").html("No files selected");
        } else if(!allowedExtensions.exec(filePath)){        
            e.preventDefault();
            $("#nofileselectederror").html("Invalid file type, Only CSV file allowed.");
            file.value = '';
        } else {
            $("#nofileselectederror").html("");

            /*var data = new FormData();
            $.each(jQuery('#file')[0].files, function(i, file) {
                data.append('file', file);
            });
            $.ajaxSetup({
              headers: {
                   'X-CSRF-TOKEN': '{{ csrf_token() }}'
              }
            });
            startLoading();
            $.ajax({
                type: 'post',
                url: "{{route('upload_expense_file',array('seller_id' => $seller_id))}}", 
                data: data,
                cache: false,
                contentType: false,
                processData: false,
                beforeSend: function () { startLoading(); },
                success:function( data) 
                { 
                    stopLoading();
                    $("#modal-upload-excel").modal('hide');
                    $("#modal-fees-map").modal('show');
                    //$(".section-upload").hide();
                    $(".section-map").html(data);
                    //$(".section-map").show();
                }
            });*/
        }
    });
</script>
@stop