@extends('layouts.admin_layout')

@section('title', 'Due Report')

@section('content')
<div class="container-fluid my-3">
  <div class="d-flex row">
    <div class="col-md-12">
      <div class="card shadow no-b r-0">
        <div class="card-header white d-flex justify-content-between pb-0">
          <h6>Due Reports</h6>
          <div class="form-group">
            <form method="get" action="{{ url('/reports/due-report/export-due') }}" id="export-formss">
              @csrf
              <input type="submit" class="btn btn-sm btn-primary" value="Export to excel">
            </form>
          </div>
        </div>
        <div class="card-body pt-0 pb-3">
          <div class="row">
            <div class="col-xs-10 col-md-12 form-inline">
              <form class="input-daterange input-group" id="date-search" method="POST" action={{ route("reports.due_report") }}>
                @csrf
                {{-- <x-input.date-picker :title="'From'" name="from" id="from" value="{{ $froms != null ? $froms:old('from')}}" /> --}}
                <x-input.date-picker :title="'To'" name="to" id="to" value="{{ $tos != null ? $tos:old('to')}}" />
                @if(Auth::user()->user_type == 'super admin')
                <div>
                  <span class="input-group-addon">Branch</span>
                  <select class="input-sm form-control" name="branch_id" id="branch_id">
                    <option value="">Select branch</option>
                    @foreach($branches as $branch)
                    <option value="{{$branch->id}}" {{ ($branchs == $branch->id) ? 'selected' : ''}}>{{$branch->branch_title}}</option>
                    @endforeach
                  </select>
                </div>
                <div>
                  <span class="input-group-addon">Collector</span>
                  <select class="input-sm form-control user_id" name="user_id">
                    <option value="">Select Collector</option>
                    @foreach ($selectusers as $selectuser)
                    <option value="{{$selectuser->id}}" {{($user_id  == $selectuser->id) ? 'selected':''}}>{{$selectuser->name}}</option>
                    @endforeach
                  </select>
                </div>
                @endif
                @if(Auth::user()->user_type == 'branch admin')
                <div>
                  <span class="input-group-addon">Collector</span>
                  <select class="input-sm form-control user_id" name="user_id">
                    <option value="">Select Collector</option>
                    @foreach($users as $user)
                    <option value="{{$user->id}}" {{ ($user_id == $user->id) ? 'selected' : ''}}>{{$user->name}}</option>
                    @endforeach
                  </select>
                  <input type="hidden" name="branch_id">
                </div>
                @endif
                <div>
                  <span class="input-group-addon">Address</span>
                  <input type="text" id="address" name="address" class="input-sm form-control" value="{{ $address != null ? $address:old('address')}}">
                </div>
                <div>
                  <span class="input-group-addon">Customer</span>
                  <input type="text" id="customer" name="customer" class="input-sm form-control" value="{{ $customer != null ? $customer:old('customer')}}">
                </div>
                <div><input type="submit" value="search" id="dateSearch" class="btn btn-sm btn-primary"></div>
                <div class="mx-auto" style="width: 100px;">
                  <a href="{{route("reports.due_report") }}" class="btn btn-sm btn-danger" role="button">Reset</a>
                </div>
              </form>
            </div>
          </div>
          <br>
          <div class="table-responsive">
            <table class="table table-striped table-hover r-0 data-table">
              <thead>
                <tr class="no-b">
                  <th>SN</th>
                  <th>CUSTOMER NO.</th>
                  <th>NAME</th>
                  <th>ADDRESS</th>
                  <th>MUNICIPALITY</th>
                  <th>WARD</th>
                  <th>BRANCH</th>
                  <th>COLLECTOR NAME </th>
                  <th>RATE</th>
                  <th>PREVIOUS DUE</th>
                  <th>TOTAL DUE AMOUNT</th>
                  <th>LAST BILL DATE</th>
                </tr>
              </thead>
              <tbody>
                @if(count($due_reports)>0)
                @foreach($due_reports as $due_report)
                <tr>
                  <td>{{$loop->iteration}}</td>
                  <td>{{$due_report->customer_number}}</td>
                  <td><a href="{{ route('customer.transaction-history', $due_report->customer_id)}}" class="" title="Customer Statement">{{$due_report->name}}</a></td>
                  <td>{{$due_report->address}}</td>
                  <td>{{$due_report->municipality}}</td>
                  <td>{{$due_report->ward}}</td>
                  <td>{{$due_report->branch}}</td>
                  <td>{{$due_report->collector_name}}</td>
                  <td>{{$due_report->monthly_payable ? $due_report->monthly_payable :0.0}}</td>
                  <td>{{$due_report->due}}</td>
                  <td>{{$due_report->due_amount < 0  ? $due_report->due_amount.' <label for="advance_amount"><button type="button" class="btn btn-sm btn-danger popover-dismiss" data-container="body" data-toggle="popover" data-placement="left" data-content="Negative amount represents customers has advance amount"><i class="icon-info icon-large"></i></button></label>' : $due_report->due_amount}}</td>
                  <td>{{$due_report->last_bill_date}}</td>
                </tr>
                @endforeach

                @else
                <td>
                  <h3> No data found</h3>
                </td>
                @endif
              </tbody>
              <tfoot>
                <tr>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th>Total</th>
                  <th id="rate"></th>
                  <th id="due"></th>
                  <th id="due_amount"></th>
                </tr>
              </tfoot>
            </table>
            {!! $due_reports->appends(Request::except(['page','_token']))->links() !!}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  $(document).ready(function() {
    let current = NepaliFunctions.GetCurrentBsDate();
    const disable = `${current.year}-${current.month}-${current.day}`;
    $('.nepali-datepicker').nepaliDatePicker({
      disableAfter:disable
    });
  })
</script>
<script>
  function sumColumn(num) {
    let rows = document.querySelectorAll('table tr td:nth-child(' + num + ')');
    let amount = 0;
    for (let i = 0; i < rows.length; i++) {
      amount += parseFloat(rows[i].textContent.replace(",", ""));
    }
    return amount
  }

  let rate = sumColumn(9)
  let dueColumn = sumColumn(11);
  let due = sumColumn(10)

  document.getElementById("rate").textContent = `${isNaN(rate) ? 0.00:rate.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`;
  document.getElementById("due").textContent = `${isNaN(due) ? 0.00:due.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`;
  document.getElementById("due_amount").textContent = `${isNaN(dueColumn) ? 0.00:dueColumn.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`;
</script>
<script type="text/javascript">
  $(document).ready(function() {
    $('select[name="branch_id"]').on('change', function() {
      var branchId = $(this).val();
      if (branchId) {
        $.ajax({
          url: "{{url('dashboard/ajaxuser')}}/" + branchId,
          type: "GET",
          dataType: "json",
          success: function(data) {


            $('select[name="user_id"]').empty();
            $('select[name="user_id"]').append('<option value="">Select User</option>');
            $.each(data, function(key, value) {
              $('select[name="user_id"]').append('<option value="' + value.id + '">' + value.name + '</option>');
            });


          }
        });
      } else {
        $('select[name="user_id"]').empty();
        $('select[name="user_id"]').append('<option value="">' + 'Select User' + '</option>');
      }
    });
  });
</script>

<style>
  .select2 {
    width: unset !important;
  }

  select {
    width: 150px;
    margin: 10px;
  }

  select:focus {
    min-width: 150px;
    width: auto;
  }
</style>
<script>
  $(document).ready(function() {
    $('.js-example-basic-single').prepend('<option selected></option>').select2({
      placeholder: "Select User",
      allowClear: true,
      width: '100%',
      sorter: data => data.sort((a, b) => a.text.toLowerCase() > b.text.toLowerCase() ? 0 : -1)
    });
  });
</script>
@endsection