@extends('country.app')
{{-- @section('title', $title)
@section('type', 'article')
@section('description', $description)
@section('keywords', $keywordsText)
@section('article_tage') --}}
@section('content')
    <div class="container text-center my-4">
        <div class="head-home d-inline-flex pt-3 px-2 gap-3 justify-content-center align-items-center mt-3"  data-bs-toggle="modal" data-bs-target="#countriesModal">
            <img src="{{ url('flags/1x1/' . $countryInfo->flag) }}" class="rounded-5" width="56" height="56"
                alt="">
            <p class="fw-bold h1">{{ $countryInfo->name }}</p>
            <span class="iconLarge-gAjG6CuD" aria-hidden="true" role="img"><svg xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 28 28" width="28" height="28">
                    <path fill="currentColor"
                        d="m.271 11.698 4.458-5.396L14 13.96l9.271-7.658 4.458 5.396L14 23.04.271 11.698z"></path>
                </svg></span>
        </div>
        <p class="text-center">
        <div class="font-1 text-end font-lg-5 spinner-grow text-light calculator-spinner silver"></div>
        <h1 class="h6 d-inline">{{ __('country.currency_gold_screen', ['country' => $countryInfo->name]) }}</h1>
        </p>
    </div>

    <div class="container-xxl my-4">
        <div class="row my-4">
            {{-- currencies rates --}}
            <div class="col-12 col-md-12 col-lg-7 col-xl-8 mb-3">
                <section id="ratesInBanks">
                    <h2 class="fs-5 text-start tableHeadLine mb-1">
                        <span class="start-head mx-1 bg-danger"></span> {{ __('country.currency_prices_today', ['country' => $countryInfo->name]) }}
                    </h2>
                    <div class="table-responsive">
                        <table id="currncies" class="table banklive-rate-table text-center">
                            <thead>
                                <tr>
                                    <th class="text-start" style="width:30%;">{{ __('country.currency_column') }}</th>
                                    <th class="text-center">{{ __('country.price_in_currency', ['currency' => $countryInfo->currency->shortName]) }}</th>
                                    <th class="text-end d-lg-none d-xl-table-cell">{{ __('country.change') }}</th>
                                    <th class="text-end" style="width:17%;">{{ __('country.change_percentage') }}</th>
                                    <th class="text-end" style="width: 18%;">{{ __('country.update') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($ratesBoxes as $key => $rate)
                                    @if (!isset($rate['rates']))
                                        @continue
                                    @endif
                                    <tr>
                                        <td class="text-start">
                                            {{-- <a href="https://banklive.net/exchange-rate-USD-to-EGP-today"> --}}
                                            <img loading="lazy" width="30" height="30" alt="{{ $rate['cur_code'] }}"
                                                data-src="/assets/img/loader.png" src="{{ $rate['flag'] }}">
                                            <h3 class="currencyName">{{ $rate['currency'] }}</h3>
                                            {{-- </a> --}}
                                        </td>
                                        <td class="text-center price">
                                            <span class="bankRate">

                                                {{ $rate['rates']['current_price'] }}
                                            </span>
                                        </td>
                                        <td class="d-lg-none d-xl-table-cell text-end price {{ $rate['rates']['change_status'] }}">
                                            <span class="bankRate">
                                                {{ $rate['rates']['change_amount'] }}
                                            </span>
                                        </td>
                                        <td class="text-end price {{ $rate['rates']['change_status'] }}">
                                            <span class="bankRate">
                                                {{ $rate['rates']['change_percent'] }}%
                                            </span>
                                        </td>
                                        <td class="text-end price">
                                            {{ \Carbon\Carbon::parse($rate['updated_at'])->diffForHumans() }}
                                            {{-- منذ 1 دقيقة --}}
                                            {{-- {{ \Carbon\Carbon::parse($rate['rates']['updated_at'])->format('d-m-Y H:i:s') }} --}}
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </section>
            </div>
            <div class="col-12 col-md-12 col-lg-5 col-xl-4">
                <div class="row">
                    <div class="col-12 mb-3">
                        {{-- gold price country --}}
                        <div class="col-12">
                            <div id="gold-section" class="mb-lg-0 mb-3">
                                <h2 class="fs-5 text-start tableHeadLine mb-1">
                                    <span class="start-head mx-1 bg-gold"></span>
                                    {{ __('country.gold_prices_in_country', ['country' => $countryInfo->name]) }}
                                </h2>
                                <div class="table-responsive">
                                    <table class="table banklive-rate-table align-middle mb-0">
                                        <thead class="table-header">
                                            <tr>
                                                <th scope="col">{{ __('country.type') }}</th>
                                                <th class="text-center">{{ __('country.price_in_currency', ['currency' => $countryInfo->currency->shortName]) }}</th>
                                                <th class="text-end">{{ __('country.change_percentage') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($goldRates as $gold)
                                                {{-- @dd($goldRates) --}}
                                                <tr>
                                                    <td class="text-start">
                                                        {{-- <a href="https://banklive.net/exchange-rate-USD-to-EGP-today"> --}}
                                                        <img loading="lazy" width="30" height="30"
                                                            alt=">{{ $gold->goldType->slug }}"
                                                            data-src="/assets/img/loader.png" src="gold.svg">
                                                        <h3 class="currencyName">{{ $gold->goldType->name }}</h3>
                                                        {{-- </a> --}}
                                                    </td>
                                                    <td class="text-center price">
                                                        <span class="bankRate">
                                                            {{ priceFormat($gold->price) }}
                                                        </span>
                                                    </td>
                                                    {{-- <td class="text-end price {{ $gold->change_status }}">
                                        <span class="bankRate ltr">
                                            {{ priceFormat($gold->change_amount) }}
                                        </span>
                                    </td> --}}
                                                    <td class="text-end price {{ $gold->change_status }}">
                                                        <span class="bankRate">
                                                            {{ number_format($gold->change_percent, 3, '.', ',') }}%
                                                        </span>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 mb-3">
                        @include('partials.__calculator_egy_market_general', 
                        [   'marketCountry' => true,
                            'toCurrency' => $ratesBoxes[0]['cur_code'], 
                            'baseCurrency' => $countryInfo->currency->cur_code
                        ])
                    </div>
                </div>
            </div>
        </div>

        <div class="row my-4">
            <div class="col-12 col-lg-6">
                {{-- gold price global --}}
                <div id="gold-section" class="mb-lg-0 mb-3">
                    <h2 class="fs-5 text-start tableHeadLine mb-1">
                        <span class="start-head mx-1 bg-danger"></span>
                        {{ __('country.gold_prices_global') }}
                    </h2>
                    <div class="table-responsive">
                        <table class="table banklive-rate-table align-middle mb-0">
                            <thead class="table-header">
                                <tr>
                                    <th scope="col">{{ __('country.type') }}</th>
                                    <th class="text-center">{{ __('country.price_in_usd') }}</th>
                                    <th class="text-end">{{ __('country.change_percentage') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($goldGlobalRates as $gold)
                                    {{-- @dd($gold) --}}
                                    <tr>
                                        <td class="text-start">
                                            {{-- <a href="https://banklive.net/exchange-rate-USD-to-EGP-today"> --}}
                                            <img loading="lazy" width="30" height="30"
                                                alt=">{{ $gold->goldType->slug }}" data-src="/assets/img/loader.png"
                                                src="gold.svg">
                                            <h3 class="currencyName">{{ $gold->goldType->name }}</span>
                                            {{-- </a> --}}
                                        </td>
                                        <td class="text-center price">
                                            <span class="bankRate ltr">
                                                ${{ $gold->price }}
                                            </span>
                                        </td>
                                        {{-- <td class="text-end price {{ $gold->change_status }}">
                                        <span class="bankRate ltr">
                                            {{ number_format($gold->change_amount,2,'.',',') }}
                                        </span>
                                    </td> --}}
                                        <td class="text-end price {{ $gold->change_status }}">
                                            <span class="bankRate ltr">
                                                {{ number_format($gold->change_percent, 3, '.', ',') }}%
                                            </span>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-6">
                {{-- gold chart --}}
                <section class="market-rate">
                    <h2 class="fs-5 text-start tableHeadLine">
                        <span class="start-head bg-gold"></span> {{ __('country.gold_price_index_global') }}
                    </h2>
                    <div class="tradingview-widget-container"
                        style="box-shadow: 0 8px 16px 0 rgb(10 14 29 / 2%), 0 8px 64px 0 rgb(119 119 119 / 8%);border-radius: 5px;">
                        <div class="tradingview-widget-container__widget"></div>
                        <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/"
                                rel="noopener nofollow" target="_blank"><span class="blue-text">Track all markets on
                                    TradingView</span></a></div>
                        <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-symbol-overview.js"
                            async>
                            {
                                "symbols": [
                                    [
                                        "OANDA:XAUUSD|1M"
                                    ]
                                ],
                                "chartOnly": false,
                                "width": "100%",
                                "height": 400,
                                "locale": "{{ __('main.chart_locale') }}",
                                "colorTheme": "light",
                                "autosize": false,
                                "showVolume": false,
                                "showMA": false,
                                "hideDateRanges": false,
                                "hideMarketStatus": false,
                                "hideSymbolLogo": false,
                                "scalePosition": "right",
                                "scaleMode": "Normal",
                                "fontFamily": "-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif",
                                "fontSize": "10",
                                "noTimeScale": false,
                                "valuesTracking": "1",
                                "changeMode": "price-and-percent",
                                "chartType": "area",
                                "maLineColor": "#2962FF",
                                "maLineWidth": 1,
                                "maLength": 9,
                                "gridLineColor": "rgba(242, 54, 69, 0.06)",
                                "backgroundColor": "rgba(255, 255, 255, 1)",
                                "lineWidth": 2,
                                "lineType": 0,
                                "dateRanges": [
                                    "1d|1",
                                    "1m|30",
                                    "3m|60",
                                    "12m|1D",
                                    "60m|1W",
                                    "all|1M"
                                ],
                                "timeHoursFormat": "12-hours"
                            }
                        </script>
                    </div>
                </section>
            </div>
        </div>

        <div class="row my-4">
            <div class="col-12 col-lg-4 mb-3">
                {{-- silver price country --}}
                <div id="silver-section">
                    <h2 class="fs-5 text-start tableHeadLine mb-1">
                        <span class="start-head mx-1 silver"></span>
                        {{ __('country.silver_prices_in_country', ['country' => $countryInfo->name]) }}
                    </h2>
                    <div class="table-responsive">
                        <table class="table banklive-rate-table align-middle mb-0">
                            <thead class="table-header">
                                <tr>
                                    <th scope="col">{{ __('country.type') }}</th>
                                    <th class="text-center">{{ __('country.price_in_currency', ['currency' => $countryInfo->currency->shortName]) }}</th>
                                    <th class="text-end">{{ __('country.change_percentage') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($silverRates as $silver)
                                    {{-- @dd($gold) --}}
                                    <tr>
                                        <td class="text-start">
                                            {{-- <a href="https://banklive.net/exchange-rate-USD-to-EGP-today"> --}}
                                            <img loading="lazy" width="30" height="30"
                                                alt=">{{ $silver->silverType->slug }}" data-src="/assets/img/loader.png"
                                                src="silver.svg">
                                            <h3 class="currencyName">{{ $silver->silverType->shortName }}</h3>
                                            {{-- </a> --}}
                                        </td>
                                        <td class="text-center price">
                                            <span class="bankRate ltr">
                                                {{ $silver->price }}
                                            </span>
                                        </td>
                                        {{-- <td class="text-end price {{ $silver->change_status }}">
                                        <span class="bankRate ltr">
                                            {{ number_format($silver->change_amount,2,'.',',') }}
                                        </span>
                                    </td> --}}
                                        <td class="text-end price {{ $silver->change_status }}">
                                            <span class="bankRate ltr">
                                                {{ number_format($silver->change_percent, 3, '.', ',') }}%
                                            </span>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-4 mb-3">
                {{-- silver price country --}}
                <div id="silver-section">
                    <h2 class="fs-5 text-start tableHeadLine mb-1">
                        <span class="start-head mx-1 silver"></span>
                        {{ __('country.silver_prices_global') }}
                    </h2>
                    <div class="table-responsive">
                        <table class="table banklive-rate-table align-middle mb-0">
                            <thead class="table-header">
                                <tr>
                                    <th scope="col">{{ __('country.type') }}</th>
                                    <th class="text-center">{{ __('country.price_in_usd') }}</th>
                                    <th class="text-end">{{ __('country.change_percentage') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($silverGlobalRates as $silver)
                                    {{-- @dd($gold) --}}
                                    <tr>
                                        <td class="text-start">
                                            {{-- <a href="https://banklive.net/exchange-rate-USD-to-EGP-today"> --}}
                                            <img loading="lazy" width="30" height="30"
                                                alt=">{{ $silver->silverType->slug }}" data-src="/assets/img/loader.png"
                                                src="silver.svg">
                                            <h3 class="currencyName">{{ $silver->silverType->shortName }}</h3>
                                            {{-- </a> --}}
                                        </td>
                                        <td class="text-center price">
                                            <span class="bankRate ltr">
                                                ${{ $silver->price }}
                                            </span>
                                        </td>
                                        {{-- <td class="text-end price {{ $silver->change_status }}">
                                        <span class="bankRate ltr">
                                            {{ number_format($silver->change_amount,2,'.',',') }}
                                        </span>
                                    </td> --}}
                                        <td class="text-end price {{ $silver->change_status }}">
                                            <span class="bankRate ltr">
                                                {{ number_format($silver->change_percent, 3, '.', ',') }}%
                                            </span>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-4 mb-3">
                {{-- silver chart  --}}
                <h2 class="fs-5 text-start tableHeadLine">
                    <span class="start-head" style="background: silver;"></span> {{ __('country.silver_price_index_global') }}
                </h2>
                <div class="tradingview-widget-container"
                    style="box-shadow: 0 8px 16px 0 rgb(10 14 29 / 2%), 0 8px 64px 0 rgb(119 119 119 / 8%);border-radius: 5px;">
                    <div class="tradingview-widget-container__widget"></div>
                    <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/"
                            rel="noopener nofollow" target="_blank"><span class="blue-text">Track all markets on
                                TradingView</span></a></div>
                    <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-symbol-overview.js"
                        async>
                        {
                            "symbols": [
                                [
                                    "OANDA:XAGUSD|1M"
                                ]
                            ],
                            "chartOnly": false,
                            "width": "100%",
                            "height": 400,
                            "locale": "{{ __('main.chart_locale') }}",
                            "colorTheme": "light",
                            "autosize": false,
                            "showVolume": false,
                            "showMA": false,
                            "hideDateRanges": false,
                            "hideMarketStatus": false,
                            "hideSymbolLogo": false,
                            "scalePosition": "right",
                            "scaleMode": "Normal",
                            "fontFamily": "-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif",
                            "fontSize": "10",
                            "noTimeScale": false,
                            "valuesTracking": "1",
                            "changeMode": "price-and-percent",
                            "chartType": "area",
                            "maLineColor": "#2962FF",
                            "maLineWidth": 1,
                            "maLength": 9,
                            "gridLineColor": "rgba(242, 54, 69, 0.06)",
                            "backgroundColor": "rgba(255, 255, 255, 1)",
                            "lineWidth": 2,
                            "lineType": 0,
                            "dateRanges": [
                                "1d|1",
                                "1m|30",
                                "3m|60",
                                "12m|1D",
                                "60m|1W",
                                "all|1M"
                            ],
                            "timeHoursFormat": "12-hours"
                        }
                    </script>
                </div>
            </div>
        </div>
    </div><!-- end of container-->
    <!-- Supported Countries Section -->
    <div class="p-5 mt-2 rounded" id="countriesSupport">
        <h2 class="fs-4 text-center mb-3 pb-3">{{ __('country.follow_prices_in_country') }}</h2>
            <div class="row justify-content-center countriesSupport">
                @foreach (\App\Models\Countries::all() as $key => $country)
                    {{-- @if($key >= 50)
                      @break
                    @endif  --}}
                    <div class=" py-2 px-1 d-flex align-items-center justify-content-center row m-0" style="width:80px">
                        <a title="{{ __('country.currency_gold_prices_country', ['country' => $country->name]) }}" target="_blank" href="{{ countryUrl($country) }}" class="col-12 p-0" style="color:inherit;">
                            <div class="col-12 px-0 py-2 d-flex align-items-center justify-content-center row" style="border:1px solid #e4e4f3;border-radius:15px;">
                                <img src="{{ url('flags/1x1/' . $country->flag) }}" style="width:40px" class="rounded-circle p-0">
                                <div class="col-12 p-0 text-center font-1 text-truncate">
                                {{ $country->name }}
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
            {{-- <div class="text-center mt-4">
            <button class="btn btn-danger btn-sm px-4 py-2 shadow" data-bs-toggle="modal" data-bs-target="#countriesModal">
              <i class="fas fa-globe"></i> عرض جميع الدول
            </button>
    </div> --}}
    </div>
    {{-- <div class="p-5 mt-5 rounded" id="countriesSupport"> --}}
        {{-- <h2 class="fs-4 text-center mb-5 pb-3">{{ __('country.follow_prices_in_country') }}</h2> --}}
        {{-- <div class="row justify-content-center"> --}}
            {{-- @foreach (\App\Models\Countries::all() as $country)
                <div class="col-4 col-md-2 col-sm-3 col-lg-1 mb-4 text-center">
                    <a target="_blank" href="{{ countryUrl($country) }}"
                        class="d-block text-decoration-none text-dark country-link">
                        <div class="currency-item mx-auto mb-2">
                            <img src="{{ url('flags/1x1/' . $country->flag) }}" alt="{{ $country->name }}"
                                class="flag-img img-fluid rounded-circle">
                        </div>
                        <span class="d-block">{{ $country->name }}</span>
                    </a>
                </div>
            @endforeach --}}
            {{-- <ul class="list-unstyled row justify-content-center countriesSupport">
                @foreach (\App\Models\Countries::all() as $country)
                    <li class="col-12 col-md-6 col-lg-3 mb-2 text-center">
                        <a target="_blank" href="{{ countryUrl($country) }}"
                           class="head-home d-flex align-items-center text-decoration-none text-dark p-2 rounded shadow-sm"
                           style="border: 1px solid #75b2ff">
                            <img src="{{ url('flags/1x1/' . $country->flag) }}" alt="{{ $country->name }}"
                                 class="flag-img img-fluid rounded-circle me-2" style="width: 30px; height: 30px;">
                            <h3 class="title">
                                {{ __('country.currency_gold_prices_country', ['country' => $country->name]) }}
                            </h3>
                        </a>
                    </li>
                @endforeach
            </ul> --}}
        {{-- </div> --}}
    {{-- </div> --}}
@endsection