@extends('dlayout')

  

@section('content')

<div class="container">

    <div class="row justify-content-center">


    <div class="col-md-12">
        <br><br>
            <div class="card">
            @foreach($user as $user)
            <ul class="list-group">
<!--Mugume","telephone":"256752609935","email":"colindnl@gmail.com",
"email_verified_at":null,"otp":"5799","pin":"0852","District":"Kampala",
"town":"Ntinda","dob":"1986-03-09","balance":"97500","loanlimit":"104819.25",
"totalloan":"uploads\/17876images.jpeg","totalbalance":"0",
"nationalid_front":"empty","nationalid_back":"empty",
"created_at":"2021-07-04T08:57:52.000000Z","updated_at":"2021-08-11T13:
47:31.000000Z"} -->

  <li class="list-group-item active">Profile</li>
  <li class="list-group-item">Names - {{ $user->names }}</li>
  <li class="list-group-item">telephone - {{ $user->telephone }} </li>
  <li class="list-group-item">Email - {{ $user->email }}</li>
  <li class="list-group-item">District - {{ $user->District }} , town - {{ $user->town }}  </li>
  <li class="list-group-item">Date of Birth - {{ $user->dob }}</li>
  <li class="list-group-item">balance - {{ $user->balance }} </li>
  <li class="list-group-item">Names - {{ $user->names }}</li>
  <li class="list-group-item">loanlimit - {{ $user->loanlimit }} </li>
  <li class="list-group-item">Registration on - {{ $user->created_at }} </li>
  <li class="list-group-item">Account Status- {{ $user->totalbalance }}  </li>
    <li class="list-group-item"> Credit Score - 20%  </li>
  <div class="row ">
<div class="col-md-4">
  <img src="https://azima.app/extenal/{{ $user->totalloan  }}" style="width:100%;">
</div>
<div class="col-md-4">
  <img src="https://azima.app/extenal/{{ $user->nationalid_front }}" style="width:100%;">
  </div>
  <div class="col-md-4">
  <img src="https://azima.app/extenal/{{ $user->nationalid_back }}" style="width:100%;">
  </div>

  </div>
  </div>



@if($user->totalbalance =='Approved') 

<a  href="{{ route('decline',['id'=> $user->id]) }}" > 
<button style="width:150px;" type="button" class="btn btn-success" id="btnExport" > DECLINE </button>
</a>

@else

<a  href="{{ route('approveacc',['id'=> $user->id]) }}" > 
<button style="width:150px;" type="button" class="btn btn-success" id="btnExport" >APPROVE </button>
</a>
<a  href="{{ route('decline',['id'=> $user->id]) }}" > 
<button style="width:150px;" type="button" class="btn btn-success" id="btnExport" > DECLINE </button>
</a>

@endif






  <br>
  <br>
</ul>
  @endforeach
</div>
</div>

<br><br>


<!----------------    {{ $locations }}-----------map ------------------->
<div class="col-md-12">
        <br>
     
        <br>
            <div class="card">

<style type="text/css">
        #mapCanvas {
            width: 100%;
            height: 400px;
            float: left;
        }

        #infoPanel {
            float: left;
            margin-left: 10px;
        }

            #infoPanel div {
                margin-bottom: 5px;
            }
    </style>						  
					 					  

	<div id="mapCanvas"></div>
  

  <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyBRsT8V9sgPaWfiW6P7SsVW1L5pXoCHXP8&v=3.exp&libraries=places&region=UG" >
  </script>

    <script type="text/javascript">
 
 /*var locations = [
            ['Raj Ghat', 28.648608, 77.250925, 1],
            ['Purana Qila', 28.618174, 77.242686, 2],
            ['Red Fort', 28.663973, 77.241656, 3],
            ['India Gate', 28.620585, 77.228609, 4],
            ['Jantar Mantar', 28.636219, 77.213846, 5],
            ['Akshardham', 28.622658, 77.277704, 6]

            {"id":26,"userid":"145","latitute":"0.3550686","longitute":"32.6125043","numberoftimes":"0","created_at":"2022-01-20T13:33:48.000000Z","updated_at":"2022-01-20T13:33:48.000000Z"
        ];*/

       var locations = '{{ $locations }}';
       var locationsa =  JSON.parse(locations.replace(/&quot;/ig,'"'));
     

        //var locationsb = json_decode(locationsa , true); 
        console.log( '-------------'+ locationsa[0]['latitute'].toString() );
        console.log( '-------------'+ locations.replace(/&quot;/ig,'"') );

        function initialize() {
            var latLng = new google.maps.LatLng(locationsa[0]['latitute'], locationsa[0]['longitute']);
            var map = new google.maps.Map(document.getElementById('mapCanvas'), {
                zoom: 10,
                center: latLng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            var marker = new google.maps.Marker({
                position: latLng,
                title: 'Point A',
                map: map,
            });

            var infowindow = new google.maps.InfoWindow();
            var marker, i;

            console.log( '-------------'+ locationsa[0]['latitute'].toString() );
            for (i = 0; i < locationsa.length; i++) {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locationsa[i]['latitute'], locationsa[i]['longitute']),
                    map: map,
                    title: locationsa[i]['userid'],
                });
                google.maps.event.addListener(marker, 'click', (function (marker, i) {
                    return function () {
                        infowindow.setContent(locations[i][0]);
                        infowindow.open(map, marker);
                    }
                })(marker, i));
            } 




 
        }

        // Onload handler to fire off the app.
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>

<!---------------------------map ------------------->

</div>

</div>


        <div class="col-md-12">
        <br><br>
            <div class="card">

                <div class="card-header"> Loans </div>
                <button style="width:150px;" type="button" class="btn btn-success" id="btnExport" onclick="exportReportToExcel(this)">EXPORT REPORT</button>
<script>
function exportReportToExcel() {
  let table = document.getElementsByTagName("table"); // you can use document.getElementById('tableId') as well by providing id to the table tag
  TableToExcel.convert(table[0], { // html code may contain multiple tables so here we are refering to 1st table tag
    name: 'loans.xlsx', // fileName you could use any name
    sheet: {
      name: 'Sheet 1' // sheetName
    }
  });
}
</script>








<table class="table table-hover">
  <thead>
    <tr>
    <th scope="col">Loan_Id</th>
      <th scope="col">Loan Descri</th>
      <th scope="col">Loan Amount</th>
      <th scope="col">Interest </th>
      <th scope="col">Interest Amount </th>
      <th scope="col">Amount to be Paid</th>
      <th scope="col">Amount Paid</th>
      <th scope="col">Amount Remaining</th>
      <th scope="col">Loan Status</th>
      <th scope="col">Date Taken</th>
      <th scope="col">Date for payment</th>
    </tr>
  </thead>
  <tbody>




  @foreach($loans as $user)


  @if ($user->interest== "15%")
  <tr>
      <td>  {{ $user->id }}</td>
      <td>  {{ $user->names }}</td>
      <td>  {{ ($user->amount_requested)/1.15 }}</td>
      <td>  {{ $user->interest }}</td>
      <td>  {{ ($user->amount_requested)-(($user->amount_requested)/1.15) }}</td>
      <td>  {{ $user->totaltobepaid }}</td>
      <td>  {{ $user->amount_paid }}</td>
      <td>  {{ $user->amount_remaining }}</td>
      <td>  {{ $user->loan_status }}</td>
      <td>  {{ $user->date_taken }}</td>
      <td>  {{ $user->dateforpayment }}</td>

      <td> 
      @if ($user->loan_status== "pending")  
      <a  href="{{ route('posttransaction', ['userid' => $userid, 'loanid' => $user->id]) }}" > 
          <button type="button" class="btn btn-success"> post transaction</button></a></td>
        @else
        @endif
    </tr>
@else
<tr>
      <td>  {{ $user->id }}</td>
      <td>  {{ $user->names }}</td>
      <td>  {{ ($user->amount_requested) }}</td>
      <td>  {{ $user->interest }}</td>
      <td>  {{ ($user->totaltobepaid)-($user->amount_requested) }}</td>
      <td>  {{ $user->totaltobepaid }}</td>
      <td>  {{ $user->amount_paid }}</td>
      <td>  {{ $user->amount_remaining }}</td>
      <td>  {{ $user->loan_status }}</td>
      <td>  {{ $user->date_taken }}</td>
      <td>  {{ $user->dateforpayment }}</td>
      <td> 
        
      @if ($user->loan_status== "pending")  
      <a  href="{{ route('posttransaction', ['userid' => $userid, 'loanid' => $user->id]) }}" > 
         <button type="button" class="btn btn-success"> post transaction</button></a></td>
        @else
        @endif
</td>

    </tr>
@endif

@endforeach







  </tbody>
</table>


                </div>
            </div>










<div class="col-md-12">
<br><br>
<div class="card">


<div class="card-header"> Transactions </div>
                <button style="width:150px;" type="button" class="btn btn-success" id="btnExport" onclick="exportReportToExcel(this)">EXPORT REPORT</button>
<script>
function exportReportToExcel() {
  let table = document.getElementsByTagName("table"); // you can use document.getElementById('tableId') as well by providing id to the table tag
  TableToExcel.convert(table[0], { // html code may contain multiple tables so here we are refering to 1st table tag
    name: 'transactions.xlsx', // fileName you could use any name
    sheet: {
      name: 'Sheet 1' // sheetName
    }
  });
}
</script>
   

<table class="table table-hover">
  <thead>
    <tr>
    <th scope="col">system_id</th>
      <th scope="col">Transaction id</th>
      <th scope="col">User name</th>
      <th scope="col">telephone number</th>
      <th scope="col">names</th>
      <th scope="col">amount</th>
      <th scope="col">description</th>
      <th scope="col">transaction type</th>
      <th scope="col">date</th>
    </tr>
  </thead>
  <tbody>

@foreach($transactions as $tran)
  <tr>
      <td>  {{ $tran->id }}</td>
      <td>  {{ $tran->transaction_id }}</td>
      <td>  {{ $tran->user_id }}</td>
      <td>  {{ $tran->telephone_no }}</td>
      <td>  {{ $tran->names }}</td>
      <td>  {{ $tran->amount }}</td>
      <td>  {{ $tran->description }}</td>
      <td>  {{ $tran->transaction_type }}</td>
      <td>  {{ $tran->created_at }}</td>
    </tr>
@endforeach
    



  
  </tbody>
</table>







<div>
</div>



        </div>

    </div>

</div>

@endsection