@extends('front.layouts.app')

@section('head')
    <!--<link-->
    <!--  rel="stylesheet"-->
    <!--  href="{{ asset('css/style.css') }}"-->
    <!--/>-->
    <style>
    
    
        
        .crypto-box{
            margin-top: 30px;
        }
        
      .trade-box {
        border-radius: 10px;
        background-color: rgba(43, 43, 59, 0.842);
        border: 5px solid white;
        padding: 10px;
      }
      .trade-box .col-sm-12{
          padding: 0px;
      }
      
      .trade-box .col-sm-12 .artim{
          width: 70%;
          font-weight: bold;
          /*float: left;*/
      }
      .trade-box .col-sm-12 .faiz{
          width: 30%;
          font-size: 16px;
          text-align: right;
          vertical-align: baseline;
      }
      
      .trade-box .col-sm-12 .d-flex{
          display: flex;
          flex-wrap: wrap;
          align-items: center;
      }
      
      .artim {
        font-size: 25px;
      }
      .azalma {
        color: white;
        font-size: 15px;
      }
      .name{
          color: rgb(189, 188, 188);
          font-size: 14px;
      }
      .symbol{
          color: white;
          font-weight: bold;
          font-size: 20px;
      }
    </style>
@endsection
@section('content')
    <div class="container-fluid websitrecenter">
        <div class="container-fluid slider">
            <!--slideshow PART-->
            <div class="slideshow">
                <a href="#" class="slideprevious"><span class="glyphicon glyphicon-menu-left"></span></a>
                <a href="#" class="slidenext"><span class="glyphicon glyphicon-menu-right"></span></a>
                <ul class="slideshow_list">
                    <li>
                        <span style="color:#fff;">
                            <h1>{!! trans('front.Trading commodities has <br> never been this easy') !!}</h1>
                            <div>
                                <p><span class="glyphicon glyphicon-ok"></span> @lang('front.Personal account manager')</p>
                                <p><span class="glyphicon glyphicon-ok"></span> @lang('front.Free economic calendar')</p>
                                <p><span class="glyphicon glyphicon-ok"></span> @lang('front.Free technical analysis')</p>
                            </div>
                            <a href="{{ route('open-real-account') }}" class="btn btn-primary">{!! trans('front.OPEN A TRADING ACCOUNT <br> IN A FEW STEPS') !!}</a>
                        </span>
                        <img src="{{ asset('images/slide/slideimg1.jpg') }}" alt=""/>
                    </li>
                    <li>
                        <span style="color:#fff;">
                            <h1>{!! trans ('front.Trade the global markets: <br> currencies, stocks, oil, gas and indices') !!}</h1>
                            <div>
                                <p><span class="glyphicon glyphicon-ok"></span> @lang('front.24/5 online trading')</p>
                                <p><span class="glyphicon glyphicon-ok"></span> @lang('front.Free training materials')</p>
                                <p><span class="glyphicon glyphicon-ok"></span> @lang('front.Live buy & sell prices')</p>
                            </div>
                            <a href="{{ route('open-real-account') }}" class="btn btn-primary">{!! trans('front.OPEN A TRADING ACCOUNT <br> IN A FEW STEPS') !!}</a>
                        </span>
                        <img src="{{ asset('images/slide/slideimg6.png') }}" alt=""/>
                    </li>
                </ul>
                <ul class="manBtn"></ul>
            </div>
            <!--END slideshow PART-->
        </div>
        <section class="numbers">
            <div class="container flex-space-around">
                <div class="number-item">
                    <div class="number-display">0%</div>
                    <div class="number-label">{!! trans ('front.FEES ON<br>DEPOSIT') !!}
                    </div>
                </div>
                <div class="number-item">
                    <div class="number-display">1:100</div>
                    <div class="number-label">{!! trans('front.ACCOUNT<br>LEVERAGE*') !!}
                    </div>
                </div>
                <div class="number-item">
                    <div class="number-display">0.01 <i class="vertical">{!! trans('front.lot') !!}</i></div>
                    <div class="number-label">{!! trans('front.Minimum <br> lot size') !!}</div>
                </div>
                <div class="number-item">
                    <div class="number-display">24/5</div>
                    <div class="number-label">{!! trans('front.CUSTOMER<br>SUPPORT') !!}
                    </div>
                </div>
                <div class="number-item">
                    <div class="number-display">3</div>
                    <div class="number-label">{!! trans('front.TRADING<br>PLATFORMS') !!}
                    </div>
                </div>
            </div>

        </section>
        <section class="container crypto-box">
            
            <div class="trade-box col-sm-4 col-md-3 BTCUSDT">
              <div
                id="newtopcta_popular_pair-BTC_BUSD"
                class=""
              >
                <div class="">
                  <div class="">
                    <div class="">
                      <div
                        data-bn-type="text"
                        class="text-white symbol"
                      ></div>
                    </div>
                    <div class="">
                      <div
                        data-bn-type="text"
                        class="name"
                      ></div>
                    </div>
                  </div>
                </div>
                <div class="col-sm-12">
                  <div class="d-flex">
                    <div data-bn-type="text" class="artim">0</div>
                    <div
                      data-bn-type="text"
                      class=" faiz"
                      style="font-weight: 500"
                    >
                      0
                    </div>
                  </div>
                </div>
        
                <div data-bn-type="text" class="col-12 text-white azalma">0</div>
              </div>
            </div>
            <div class="trade-box col-sm-4 col-md-3 DOGEUSDT">
              <div
                id="newtopcta_popular_pair-BTC_BUSD"
                class=""
              >
                <div class="">
                  <div class="">
                    <div class="">
                      <div
                        data-bn-type="text"
                        class="text-white symbol"
                      ></div>
                    </div>
                    <div class="">
                      <div
                        data-bn-type="text"
                        class="name"
                      ></div>
                    </div>
                  </div>
                </div>
                <div class="col-sm-12">
                  <div class="d-flex">
                    <div data-bn-type="text" class="artim">0</div>
                    <div
                      data-bn-type="text"
                      class=" faiz"
                      style="font-weight: 500"
                    >
                      0
                    </div>
                  </div>
                </div>
        
                <div data-bn-type="text" class="col-12 text-white azalma">0</div>
              </div>
            </div>
            <div class="trade-box col-sm-4 col-md-3 LTCUSDT">
              <div
                id="newtopcta_popular_pair-BTC_BUSD"
                class=""
              >
                <div class="">
                  <div class="">
                    <div class="">
                      <div
                        data-bn-type="text"
                        class="text-white symbol"
                      ></div>
                    </div>
                    <div class="">
                      <div
                        data-bn-type="text"
                        class="name"
                      ></div>
                    </div>
                  </div>
                </div>
                <div class="col-sm-12">
                  <div class="d-flex">
                    <div data-bn-type="text" class="artim">0</div>
                    <div
                      data-bn-type="text"
                      class=" faiz"
                      style="font-weight: 500"
                    >
                      0
                    </div>
                  </div>
                </div>
        
                <div data-bn-type="text" class="col-12 text-white azalma">0</div>
              </div>
            </div>
            <div class="trade-box col-sm-4 col-md-3 ETHUSDT">
              <div
                id="newtopcta_popular_pair-BTC_BUSD"
                class=""
              >
                <div class="">
                  <div class="">
                    <div class="">
                      <div
                        data-bn-type="text"
                        class="text-white symbol"
                      ></div>
                    </div>
                    <div class="">
                      <div
                        data-bn-type="text"
                        class="name"
                      ></div>
                    </div>
                  </div>
                </div>
                <div class="col-sm-12">
                  <div class="d-flex">
                    <div data-bn-type="text" class="artim">0</div>
                    <div
                      data-bn-type="text"
                      class=" faiz"
                      style="font-weight: 500"
                    >
                      0
                    </div>
                  </div>
                </div>
        
                <div data-bn-type="text" class="col-12 text-white azalma">0</div>
              </div>
            </div>
            
        </section>
        <br><br>
        <div class="container text-center">
            {!! trans('front.<strong>Risk Warning:</strong> Trading foreign exchange and/or contracts for differences on margin carries a high level of risk, and may not be suitable for all investors.') !!}
        </div>
        <section class="info">
            <div class="container">
                <h2 class="info-title block-title--grey">@lang('front.Experience The Meta Trader 4 In Forex Trading')</h2>
                <figure class="info-img">
                    <img src="{{ asset('images/ctraderplatform.png') }}" class="img-responsive hidden-xs" alt="">
                    <img src="{{ asset('images/screens-mobile.png') }}" class="visible-xs-block" alt="">
                </figure>
                <div class="row">
                    <div class="col-sm-3 info-item">
                        <div class="info-container">
                            <div class="ctraderdesktop"></div>
                            <h3><a href="{{ route('metatrader-desktop') }}">@lang('front.Desktop')</a></h3>
                            <div class="info-excerpt">
                            @lang('front.MetaTrader4 – a new standard in FX trading. MT4 is the most popular Forex trading platform, offering Direct Market Access brokerage capabilities.')
                            </div>
                            <a href="{{ route('metatrader-desktop') }}"> @lang('front.Read more') </a></div>
                    </div>
                    <div class="col-sm-3 info-item">
                        <div class="info-container">
                            <div class="ctraderweb"></div>
                            <h3><a href="{{ route('metatrader-multi-terminal') }}">@lang('front.Multi Terminal')</a></h3>
                            <div class="info-excerpt">
                            @lang('front.MetaTrader4 Web brings the transparent pricing, lightning-fast speed, and all the features of MetaTrader4 to your browser. Now you can receive the best in FX trading, from any ...')
                            </div>
                            <a href="{{ route('metatrader-multi-terminal') }}"> @lang('front.Read more') </a></div>
                    </div>
                    <div class="col-sm-3 info-item">
                        <div class="info-container">
                            <div class="ctraderandroid"></div>
                            <h3><a href="{{ route('metatrader-mobile') }}">@lang('front.Android')</a></h3>
                            <div class="info-excerpt">
                            @lang('front.Stay connected and manage your trading account while on the move. This portable version of MetaTrader4 can be accessed from any Android device, ...')
                            </div>
                            <a href="{{ route('metatrader-mobile') }}"> @lang('front.Read more')</a></div>
                    </div>
                    <div class="col-sm-3 info-item">
                        <div class="info-container">
                            <div class="ctraderios"></div>
                            <h3><a href="{{ route('metatrader-mobile') }}">@lang('front.iOS')</a></h3>
                            <div class="info-excerpt">
                                @lang('front.MetaTrader4 gives you efficient FX trading as a native app. Enjoy fast execution for FX and commodities and an easy-to-use interface with full balance, margin and P&L ...')
                            </div>
                            <a href="{{ route('metatrader-mobile') }}"> @lang('front.Read more') </a></div>
                    </div>
                </div>
            </div>
        </section>
        <div class="container-fluid">
            <div class="background123">
                <div class="container">
                    <h2>@lang('front.TRADE FX & CFDs ONLINE WITH Hazar Capital Markets')</h2>
                    <p>@lang('front.Hazar Capital Markets provides an efficient and reliable trading environments to its traders of all experience levels. Our traders can take advantage of some of the tight spreads, combined with fixed leverage, and instantaneous execution – all delivered through our world-class trading platforms. Trade forex and CFDs with Hazar Capital Markets and join the world’s biggest and most liquid market.')</p>
                </div>
            </div>
        </div>
        <section class="luxuryproducts">
            <div class="container">
                <h2 class="block-title--main-color"> @lang('front.Select one of our products.')</h2>
                <div class="row">
                    <div class="col-sm-4">
                        <a href="{{ route('forex') }}">
                            <h3 class="productforex">@lang('front.Forex')</h3>
                            <p>@lang('front.Currently Hazar Capital Markets offers its clients 28 currency pairs with plans to add more financial instruments in the future ...') </p>
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                            <i>@lang('front.Read more')</i>
                        </a>
                    </div>
                    <div class="col-sm-4">
                        <a href="{{ route('indices') }}">
                            <h3 class="productindices">@lang('front.Indices')</h3>
                            <p>
                                @lang('front.Trade various indices through our proprietary platforms and the MetaTrader platform. The instruments will be listed on your platforms as the S&P 500, the DJ30 and the Nasdaq 100. Trading indices can offer increased possibilities when you consider the opportunity to hedge and the many correlated opportunities that exist between FX and indices ...')
                            </p>
                            <i>@lang('front.Read more')</i>
                        </a>
                    </div>
                    <div class="col-sm-4">
                        <a href="{{ route('commodities') }}">
                            <h3 class="productcommodities">@lang('front.Commodities')</h3>
                            <p>@lang('front.From Major Commodities such as metals, energy and agriculturals are volatile products influenced by political, economic and environmental factors. Speculate, hedge and diversify your portfolio by trading most popular commodity markets with Hazar Capital Markets ...')</p>
                            <br>
                            <br>
                            <i>@lang('front.Read more')</i>
                        </a>
                    </div>
                </div>
            </div>
        </section>
        <div class="content10">
            <img class="imgleft" src="{{ asset('images/platforms-devices-image.png') }}"
                 alt="Platforms Devices">
            <div class="container">
                <div class="row">
                    <div class="col-sm-3">
                    </div>
                    <div class="col-sm-9">
                        <h3><b> @lang('front.Forex Trading Platforms')</b></h3>
                        <div class="row content10li">
                            <div class="col-sm-6">
                                <li>@lang('front.Use MetaTrader to elevate trading to pro levels')</li>
                                <li>@lang('front.Learn simple coding through MetaTrader’s basic language')</li>
                            </div>
                            <div class="col-sm-6">
                                <li>@lang('front.Trade on smartphone, PC or tablet')</li>
                                <li>@lang('front.Create expert advisors')</li>
                            </div>
                        </div>
                        <br>
                        <div class="row content10grid">
                            <div class="col-md-4">
                                <div>
                                    <div><img src="{{ asset('images/mt4-logo.png') }}" alt=""> <b>@lang('front.MetaTrader4')</b></div>
                                    <br>
                                    <p>@lang('front.MetaTrader 4 is a highly regarded, and one of the most popular trading platform available')</p>
                                    <a href="{{ route('metatrader-desktop') }}" class="btn btn-primary form-control">@lang('front.Download MetaTrader 4')</a>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div>
                                    <div><img src="{{ asset('images/mt4-logo.png') }}" alt=""> {!! trans('front.<b>MetaTrader4</b> mobile') !!}
                                    </div>
                                    <br>
                                    <p>@lang('front.MetaTrader 4 mobile platform surpasses the standards of other mobile apps')</p>
                                    <a href="{{ route('metatrader-mobile') }}" class="btn btn-primary form-control">@lang('front.Download MetaTrader 4 Mobile app')</a>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div>
                                    <div><img src="{{ asset('images/mt4-logo.png') }}" alt=""> {!! trans('front.<b>MetaTrader4</b> Multi Terminal') !!}
                                    </div>
                                    <br>
                                    <p>@lang('front.MetaTrader 4 Multi Terminal is intended for simultaneous management of multiple accounts.')</p>
                                    <a href="{{ route('metatrader-multi-terminal') }}" class="btn btn-primary form-control"> @lang('front.Try MetaTrader 4 Multi Terminal')</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('front.layouts.partials.registernowbgcolor')
    </div>
@endsection


@section('footer')
    <script scr="{{ asset('js/jquery-3.6.0.min.js') }}"></script>
    
    <script>


      setInterval(function () {
        ticker24h("ETHUSDT", "ETHERIUM / U.S. DOLLAR");
        ticker24h("BTCUSDT", "BITCOIN / U.S. DOLLAR");
        ticker24h("DOGEUSDT", "DOGECOIN / U.S. DOLLAR");
        ticker24h("LTCUSDT", "LITECOIN / U.S. DOLLAR");
      }, 1000);

      function ticker24h(symbol, name) {
        $.get(
          "https://api.binance.com/api/v3/ticker/24hr?symbol=" + symbol
        ).done(function (response) {
          //   console.log(response)
          let artim = Math.round(response.askPrice * 100) / 100;
          let azalma = Math.round(response.bidPrice * 100) / 100;
          let son = Math.round(response.lastPrice * 100) / 100;
          // let artim = response.askPrice
          // let azalma = response.bidPrice
          // let son = response.lastPrice

          if (artim > son) {
            $(".crypto-box").find("." + symbol).find(".artim").css("color", "green");
          } else if (artim == son) {
            $(".crypto-box").find("." + symbol).find(".artim").css("color", "white");
          } else {
            $(".crypto-box").find("." + symbol).find(".artim").css("color", "red");
          }

          if (response.priceChangePercent > 0) {
            $(".crypto-box").find("." + symbol).find(".faiz").removeClass("text-danger");
            $(".crypto-box").find("." + symbol).find(".faiz").addClass("text-success");
          } else {
            $(".crypto-box").find("." + symbol).find(".faiz").removeClass("text-success");
            $(".crypto-box").find("." + symbol).find(".faiz").addClass("text-danger");
          }
          $(".crypto-box").find("." + symbol).find(".symbol").html(response.symbol);
          $(".crypto-box").find("." + symbol).find(".name").html(name);
          $(".crypto-box").find("." + symbol)
            .find(".faiz")
            .html(Math.round(response.priceChangePercent * 100) / 100 + "%");
          $(".crypto-box").find("." + symbol)
            .find(".artim")
            .html("$" + artim);
          $(".crypto-box").find("." + symbol)
            .find(".azalma")
            .html("$" + azalma);
        });
      }
    </script>
@endsection