@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')
    <div id="exchangeModal"
    style=" position: absolute;
    display: none;
  width: 350px;
  height: 400px;
  background-color: #f1f1f1;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;

  /* Ortalamak için */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  ">
  <div onclick="modalClose()"><h5 style="cursor: pointer;">x</h5></div>
  <h4 class="hurme_reg" style="color: #eb3291">Exchange</h4>
  <h5 style="font-family: hurme_reg; color:#231877;">Your € balance {{$wallets->euro}} €</h5>
  <form action="{{route('exchangeActionRoute')}}" method="post">
    @csrf
  <div><span style="font-family: hurme_reg;font-size: 22px;">Total</span></div>
            <input required placeholder="" required name="total" style="width: 100%; padding: 10px;border-radius: 20px;border:2px solid #231877;" type="number">
            <input type="hidden" name="user_id" value="{{auth()->user()->id}}">
            <input id="typeInput" type="hidden" name="type"  value="">
            <input id="yontem" type="hidden" name="yontem"  value="">
            <input id="exchangeValue" type="hidden" name="exchangeValue" value="type" value="">
            <div style="display: flex; justify-content: center; align-items: center; gap: 10px;margin-top: 5px">
                <button id="actionButton"  style="padding: 15px 55px; background-color: #47C1CA;color: #fff; border: none; border-radius: 5px; cursor: pointer;"></button>
              </div>
            </form>        
           
    </div>


       <div style="width: 100% !important; margin: 40px" class="row">
            <div class="col-md-5">
               <div style="width: 100%; height: 70%;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">
                    <h4 style="font-family: hurme_reg; color: rgb(46, 46, 46)">Welcome {{auth()->user()->name}}</h4>
                    <h5 style="color:#eb3291" class="hurme_reg;">Last mount: <span  style="color: green;font-family: hurme_reg !important;">124,12 € 	&uarr;</span></h5>
                    <h5 style="color:#eb3291" class="hurme_reg;">Last mount: <span  style="color: red;font-family: hurme_reg !important;">200,83 ₺ 	&darr;</span></h5>
                    <h5 style="color:#eb3291" class="hurme_reg;">Last mount: <span  style="color: green;font-family: hurme_reg !important;">700,91 $ 	&uarr;</span></h5>
                    <h5 style="color:#eb3291" class="hurme_reg;">Last mount: <span  style="color: green;font-family: hurme_reg !important;">0,3 g 	&uarr;</span></h5>
                    <img style="position: absolute; top: 0;right: 40px; height: 60%;" src="{{asset('media/avatar.png')}}" alt="">
                </div>
               </div>
            </div>
            <div class="col-md-7">
                <div id="chart"></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: #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: #eb3291;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>
                   </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: #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->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: #eb3291;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-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;">
                        <h2 style="text-align: center;" class="hurme_reg;"> <span  style="color: green;font-family: hurme_reg !important;">1 €</span></h2>
                        
                    </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">
                        <h2 style="text-align: center;" class="hurme_reg;"> <span  style="color: green;font-family: hurme_reg !important;" id="dolar">1,02 $</span></h2>
                        <div style="display: flex; justify-content: center; align-items: center; gap: 10px;">
                            <button onclick="buyExchange('dolar')" style="padding: 15px 25px; background-color: #231877; color: #fff; border: none; border-radius: 5px; cursor: pointer;">Buy</button>
                            <button onclick="sellExchange('dolar')" style="padding: 15px 25px; background-color: #eb3291;color: #fff; border: none; border-radius: 5px; cursor: pointer;">Sell</button>
                          </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">
                        <h2 style="text-align: center;" class="hurme_reg;"> <span  style="color: green;font-family: hurme_reg !important;" id="ytl">37,27 ₺</span></h2>
                        <div style="display: flex; justify-content: center; align-items: center; gap: 10px;">
                            <button onclick="buyExchange('ytl')" style="padding: 15px 25px; background-color:  #231877; color: #fff; border: none; border-radius: 5px; cursor: pointer;">Buy</button>
                            <button onclick="sellExchange('ytl')" style="padding: 15px 25px; background-color: #eb3291;color: #fff; border: none; border-radius: 5px; cursor: pointer;">Sell</button>
                          </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">
                        <h2 style="text-align: center;" class="hurme_reg;"> <span  style="color: green;font-family: hurme_reg !important;">1g gold/78,57€ </span></h2>
                        <div style="display: flex; justify-content: center; align-items: center; gap: 10px;">
                            <button onclick="buyExchange('gold')" style="padding: 15px 25px; background-color:  #231877; color: #fff; border: none; border-radius: 5px; cursor: pointer;">Buy</button>
                            <button onclick="sellExchange('gold')" style="padding: 15px 25px; background-color: #eb3291;color: #fff; border: none; border-radius: 5px; cursor: pointer;">Sell</button>
                          </div>
                    </div>
                   </div>
            </div>
       
       </div>
    </div>
    @section('front_js')
    <script>
         function modalClose(){
     document.getElementById('exchangeModal').style.display = "none";
      
        }
         function buyExchange(type){
             document.getElementById('exchangeModal').style.display = "block";
            document.getElementById('actionButton').innerHTML = "Buy"
            document.getElementById('yontem').value = "buy"
            
            if(type == 'dolar'){
               document.getElementById('typeInput').value ="dolar"
               document.getElementById('exchangeValue').value =localStorage.getItem('dolar')
            }else if(type == 'ytl'){
                document.getElementById('exchangeValue').value =localStorage.getItem('ytl')
                document.getElementById('typeInput').value ="ytl"
            }else if(type == "gold"){
                document.getElementById('exchangeValue').value =localStorage.getItem('gold')
                document.getElementById('typeInput').value ="gold"
            }
            console.log(type);
     
        }
         function sellExchange(type){
            document.getElementById('yontem').value = "sell"
            document.getElementById('exchangeModal').style.display = "block";
            document.getElementById('actionButton').innerHTML = "Sell"
            if(type == 'dolar'){
                document.getElementById('exchangeValue').value =localStorage.getItem('dolar')
               document.getElementById('typeInput').value ="dolar"
            }else if(type == 'ytl'){
                document.getElementById('exchangeValue').value =localStorage.getItem('ytl')
                document.getElementById('typeInput').value ="ytl"
            }else if(type == "gold"){
                document.getElementById('exchangeValue').value =localStorage.getItem('gold')
                document.getElementById('typeInput').value ="gold"
            }
                console.log(type);
        }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script>
var options = {
             colors:['#231877', '#E91E63','#FDC764'],
          series: [{
          name: 'DOLAR',
          data: [1.12,1.09, 1.13, 1.02, 1.02, 1.03,1.03, 1.03],
          
        }, {
          name: 'TL',
          data: [33, 34.5, 34.8, 35, 36.4, 37.04, 37.45]
        }, {
          name: 'GOLD',
          data: [78, 75, 74, 80, 76, 77, 79],
        }
        ],
          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);
        chart.render();
    </script>
    <script>
 // API'den veri çekmek için URL
 const url = 'https://api.exchangerate-api.com/v4/latest/EUR'; // Örnek bir döviz kuru API'si

// Fetch kullanarak veri çekme
fetch(url)
  .then(response => response.json()) // JSON formatına dönüştürme
  .then(data => {
    document.getElementById('dolar').innerHTML = data.rates.USD + "$"
    document.getElementById('ytl').innerHTML = data.rates.TRY + "₺"
    localStorage.setItem("dolar", data.rates.USD);
    localStorage.setItem("ytl", data.rates.TRY);
    localStorage.setItem("gold", 78.57);

  
  })
  .catch(error => console.error('Hata:', error)); // Hata durumunda hata mesajı
       
    </script>
    @endsection
    @include('front.include.footer')