@include('front.include.header')
<div  style="background-image:url({{asset('media/bg_image.png')}})" class="wrapper d-flex align-items-stretch">
    @include('front.include.sidebar')
        @yield('front_content')
        
        <div style="width: 100% !important; margin: 40px" class="row">
            <div class="col-md-9" style="margin: 20px">
                <h2 style="text-align: center; color: #231877;" class="hurme_reg;">MY WALLET</h2>
                <hr><hr>
            </div>
           
            
            <div style="width: 100% !important; margin: 40px" class="row">
             
              <div class="col-md-3">
                  <div style="width: 100%; height: 90%;background: rgba(255, 255, 255, 0); border-radius: 20px; box-shadow:0px 3px 33px 5px rgba(0,0,0,0.56)">
                      <div style="padding: 20px">
                          <h5 style="font-family: hurme_reg; color: #eb3291;text-align: center;">My € account</h5>
                          <h3 style="text-align: center;" class="hurme_reg;"> <span  style="color: green;font-family: hurme_reg !important;">{{$wallets->euro}} € 	&uarr;</span></h3>
                      </div>
                     </div>
              </div>
              <div class="col-md-3">
                  <div style="width: 100%; height: 90%;background: rgba(255, 255, 255, 0); border-radius: 20px; box-shadow:0px 3px 33px 5px rgba(0,0,0,0.56)">
                      <div style="padding: 20px">
                          <h5 style="font-family: hurme_reg; color: #231877;text-align: center;">My $ account</h5>
                          <h3 style="text-align: center;" class="hurme_reg;"> <span  style="color: red;font-family: hurme_reg !important;">{{$wallets->dolar}} $ 	&darr;</span></h3>
                          <div style="display: flex;">
                             
                          </div>
                      </div>
                     </div>
              </div>
              <div class="col-md-3">
                  <div style="width: 100%; height: 90%;background: rgba(255, 255, 255, 0); border-radius: 20px; box-shadow:0px 3px 33px 5px rgba(0,0,0,0.56)">
                      <div style="padding: 20px">
                          <h5 style="font-family: hurme_reg; color: #47C1CA;text-align: center;">My ₺ account</h5>
                          <h3 style="text-align: center;" class="hurme_reg;"> <span  style="color: green;font-family: hurme_reg !important;">{{$wallets->ytl}} ₺ 	&uarr;</span></h3>
                      </div>
                     </div>
              </div>
            
              <div class="col-md-3">
                <div style="width: 100%; height: 90%;background: rgba(255, 255, 255, 0); border-radius: 20px; box-shadow:0px 3px 33px 5px rgba(0,0,0,0.56)">
                    <div style="padding: 20px">
                        <h5 style="font-family: hurme_reg; color: #FDC764;text-align: center;">My gold account</h5>
                        <h3 style="text-align: center;" class="hurme_reg;"> <span  style="color: green;font-family: hurme_reg !important;">{{$wallets->gold}} g 	&uarr;</span></h3>
                    </div>
                   </div>
            </div>
              <div class="col-md-6" >
                <div id="chart"></div>
            </div>
              <div class="col-md-6" >
                <div id="chart2"></div>
            </div>
             
             
         
         </div>
           
       
       </div>
  
    </div>
    @section('front_js')
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script>
var options = {
             colors:['#231877', '#eb3291',],
          series: [{
          name: 'DOLOR',
          data: [1.12,1.09, 1.13, 1.02, 1.02, 1.03,1.03, 1.03],
          
        }, {
          name: 'EURO',
          data: [1, 1, 1, 1, 1, 1, 1]
        }],
          chart: {
          height: 350,
          type: 'area'
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: 'smooth'
        },
        xaxis: {
          type: 'datetime',
          categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
        },
        tooltip: {
          x: {
            format: 'dd/MM/yy HH:mm'
          },
        },
        };
var options2 = {
             colors:['#FDC764', '#47C1CA',],
          series: [{
          name: 'GOLD',
          data: [78, 75, 74, 80, 76, 77, 79],
          
        }, {
          name: 'TL',
          data: [33, 34.5, 34.8, 35, 36.4, 37.04, 37.45]
        }],
          chart: {
          height: 350,
          type: 'area'
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: 'smooth'
        },
        xaxis: {
          type: 'datetime',
          categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
        },
        tooltip: {
          x: {
            format: 'dd/MM/yy HH:mm'
          },
        },
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        var chart2 = new ApexCharts(document.querySelector("#chart2"), options2);
        chart.render();
        chart2.render();
    </script>
    @endsection
    @include('front.include.footer')