@extends('app')
@section('title')أسعار العملات مقابل الجنيه المصري في السوق العالمي@endsection
@section('type'){{ 'article' }}@endsection
@section('description')أسعار العملات مقابل الجنيه المصري في السوق العالمي@endsection
@section('article')
<meta property="article:tag" content="أسعار العملات مقابل الجنيه المصري في السوق العالمي" />
@endsection
@section('content')
@section('css')
<style>
</style>
@endsection
<div class="col-xs-12 block">
    <h1 class="block-header">
        أسعار العملات مقابل الجنيه المصري في السوق العالمي
    </h1>
    <p class="block-description" style="padding: 10px">أسعار العملات مقابل الجنيه المصري في السوق العالمي</p>
    <div class="block-content">
        <div class="row">
          <div class="col-xs-12">
          <table id="banksTadble" class="table table-hover table-banks-prices egyption-banks">
              <thead>
                  <tr>
                      <th class="text-{{ __('main.align') }}">العمله</th>
                      <th class="text-{{ __('main.align') }}">السعر بالجنيه المصري</th>
                      <th class="text-{{ __('main.align') }}">آخر تحديث</th>
                  </tr>
              </thead>
            <tbody>
                    @foreach( $currencies as $currency )
                    <tr id="currency_id_{{ $currency->cur_id }}" data-updated-at="{{ $currency->cur_last_update }}">
                        <td><img width="15" src="{{ url($currency->smallflag) }}" alt="{{ $currency->name }}"> {{ $currency->cur_code }} | {{ $currency->name }}</td>
                        <td class="text-right statusColor {{ $currency['globalmarket'][0]['change_status'] }}">
                            <span class="icon"><i class="fas fa-arrow-{{ $currency['globalmarket'][0]['change_status'] }}"></i></span> 
                            <span class="price">{{ rounded($currency['globalmarket'][0]['current_price']) }} </span>
                            {{ __('main.egCurr') }}
                            </td>
                        <td class="time-change">{{ \Carbon\Carbon::createFromTimestamp($currency->cur_last_update)->diffForHumans() }}</td>
                    </tr>
                    @endforeach
                  </tbody>
            </table>
            </div><!-- end of col-xs-12 -->
        </div>
    </div>
</div>
@endsection


@section('js')
<script src="https://js.pusher.com/7.2/pusher.min.js"></script>
<script>

    // Enable pusher logging - don't include this in production
    Pusher.logToConsole = true;

    var pusher = new Pusher('9c5c7424b3354df2bae9', {
      cluster: 'eu'
    });

    var channel = pusher.subscribe('realtime-rates');
    channel.bind('egp', function(data) {
        

        $('#currency_id_' + data.currency_id + ' .price').html(data.currency_price);
        $('#currency_id_' + data.currency_id + ' .statusColor').removeClass('up');
        $('#currency_id_' + data.currency_id + ' .statusColor').removeClass('down');
        $('#currency_id_' + data.currency_id + ' .statusColor').addClass(data.change_status);
        $('#currency_id_' + data.currency_id + ' .icon').html(data.change_status_icon);
        $('#currency_id_' + data.currency_id + ' .time-change').html('{{ \Carbon\Carbon::now()->diffForHumans() }}');
        

        

    });
  </script>

@endsection