@extends('layouts.app')

@section('content')

<div class="header" style="padding:20px;">
<h5 style="font-weight: 600;"><i class="fas fa-dollar-sign"></i> Currency</h5>
</div>
<div class="row">
	<div class="col-sm-6 mt-3">
		<div class="card">
			<div class="card-header"><div class="currency-flag currency-flag-{{str_replace(' ', '', strtolower($currency->code))}}"></div> {{$currency->name}} <span class="badge badge-info badge-sm">{{$currency->code}}</span></div>
			<div class="card-body">
            <div class="row">
            	<div class="third">
            		<span class="currency-title">BUYING</span>
            		<span class="currency-value">{{number_format($currency->buying,2)}}</span>
            	</div>
            	<div class="third">
            		<span class="currency-title">SELLING</span>
            		<span class="currency-value">{{number_format($currency->selling,2)}}</span>
            	</div>
            	<div class="third">
            		<span class="currency-title">MEAN</span>
            		<span class="currency-value">{{number_format($currency->mean,2)}}</span>
            	</div>
            </div>
			<form action="{{url('/')}}/currency/{{$currency->id}}" method="POST">
							{{csrf_field()}}
							<input type="hidden" name="_method" value="DELETE">
						<div class="btn-group">
							<a href="{{url('/')}}/currency/{{$currency->id}}/edit" class="btn btn-sm btn-warning"><i class="fa fa-edit"></i> Edit</a>
                             @if(Auth::user()->role=='Administrator' || Auth::user()->role=='Rates Admin')
							<button type="submit" class="btn btn-sm btn-danger"><i class="fa fa-trash"></i></button>
                            @endif
						</div>
						</form>
			</div>
		</div>

		<div class="card mt-3 mb-3">
			<div class="card-header"><h5>Exchange rate trends</h5></div>
			<div class="card-body">
				<canvas id="myChart" width="500" height="300"></canvas>
			</div>
		</div>
		
	</div>

	<div class="col-sm-6 mt-3">
		<a href="{{url('/')}}/exchangeRate/create/{{$currency->id}}" class="btn btn-sm btn-success"><i class="fa fa-plus"></i> Add exchange rate</a>
		<table class="table table-condensed mt-3">
			<thead>
				<tr>
					<td>Date</td>
					<td>Buying</td>
					<td>Selling</td>
					<td>Mean</td>
					<td>User</td>
					<td></td>
				</tr>
			</thead>
			<tbody>
				@foreach($exchangeRates as $rate)
				<tr>
					<td>{{date_format(date_create($rate->created_at),'dS M Y h:ia')}}</td>
					<td>{{number_format($rate->buying,2)}}</td>
					<td>{{number_format($rate->selling,2)}}</td>
					<td>{{number_format($rate->mean,2)}}</td>
					<td>{{$rate->user->name}}</td>
					<td> <form action="{{url('/')}}/exchangeRate/{{$rate->id}}" method="POST">
							{{csrf_field()}}
							<input type="hidden" name="_method" value="DELETE">
						<div class="btn-group">
							<a href="{{url('/')}}/exchangeRate/{{$rate->id}}/edit" class="btn btn-sm btn-warning"><i class="fa fa-edit"></i></a>
                            @if(Auth::user()->role=='Administrator')
							<button type="submit" class="btn btn-sm btn-danger"><i class="fa fa-trash"></i></button>
                            @endif
						</div>
						</form></td>
				</tr>
				@endforeach
			</tbody>
		</table>
		{{$exchangeRates->links()}}
	</div>
</div>
@endsection

@section('scripts')

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var buyingRates= new Array();
var i=0;
@foreach($chartRates as $rate)
buyingRates[i]=;
i++;
@endforeach

var sellingRates= new Array();
var i=0;
@foreach($chartRates as $rate)
sellingRates[i]=;
i++;
@endforeach


var labels=new Array();
var i=0;

@foreach($chartRates as $rate)
labels[i]="06th Sep";
i++;
@endforeach

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: labels,
        datasets: [{
            label: 'Buying',
            data:buyingRates,
            fill: false,
            backgroundColor: [
                'rgba(255,255,255,1)',
            ],
            borderColor: [
                'rgba(0, 153, 204, 1)',
            ],
            borderWidth: 1
        },
			{
            label: 'Selling',
            data:sellingRates,
            fill: false,
            backgroundColor: [
                'rgba(255,255,255,1)',
            ],
            borderColor: [
                'rgba(251, 111, 31, 1)',
            ],
            borderWidth: 1
        }
        ]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        },

        plugins: {
          labels: false
          /*labels: {
            render: 'percentage',
            position: 'border',
            fontColor: '#000',
            showZero: false
          }*/
  },
  scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Dates'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Value'
                        }
                    }]
                }

    }
});
</script>
@endsection