@php
@endphp
@extends('news.main')
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <div class="col-lg-12">
                    <div class="posts">
                        <div class="row">
                            @foreach ($items as $newsItems)
                                @foreach ($newsItems as $subItems)
                                @php
                                    $title = $subItems['title'];
                                    $link = $subItems['link'];
                                    $img = $subItems['img'];
                                    $description = $subItems['description'];
                                @endphp
                                <div class="col-lg-6">
                                    <div class="post_item post_v_med d-flex flex-column align-items-start justify-content-start">
                                        <div class="post_image">
                                            <img class="w-100" src="{{ $img }}" alt="{{ $title }}">
                                        </div>
                                        <div class="post_content">
                                            <div class="post_title"><a href="{{ $link }}">{{ $title }}</a></div>
                                            <div class="post_text">
                                                <p>{!! $description !!}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>                            
                                @endforeach
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <h3>Giá vàng</h3>
                <table class="table table-bordered" id="gold_table">
                    <thead class="thead-dark">
                        <tr>
                            <th><b>Loại vàng</b></th>
                            <th><b>Mua vào</b></th>
                            <th><b>Bán ra</b></th>
                        </tr>
                    </thead>
                    <tbody> </tbody>
                </table>

                <h3>Giá coin</h3>
                <table class="table table-bordered" id="coin_table">
                    <thead class="thead-dark">
                        <tr>
                            <th><b>Tên</b></th>
                            <th><b>Giá USD</b></th>
                            <th><b>Biến động 24h</b></th>
                        </tr>
                    </thead>
                    <tbody> </tbody>
                </table>
            </div>
        </div>
    </div>
    
@endsection
@push('scripts')
<script type="text/javascript">
    $(document).ready(function() {
        var userURL = `<?php echo route("rss2/ajax-get-gold"); ?>`;
        $.get(userURL, function(data) {
            var $xhtml = '';
            for (const [key, value] of Object.entries(data)) {
                $xhtml += `<tr>
                    <td>${value.name}</td>
                    <td>${value.buy}</td>
                    <td>${value.sold}</td>
                    </tr>`;
            }
            $('#gold_table tbody').html($xhtml);
        })
        var userURL = `<?php echo route("rss2/ajax-get-coin"); ?>`;
        $.get(userURL, function(data) {
            var $xhtml = '';
            for (const [key, value] of Object.entries(data)) {
                $xhtml += `<tr>
                    <td>${value.name}</td>
                    <td>${value.price_usd}</td>
                    <td>${value.change_24h}</td>
                    </tr>`;
            }
            $('#coin_table tbody').html($xhtml);
        })
    });
</script>
@endpush