@extends('include.dashboard')


@section('content')

  
  
  
     <div class="nk-content nk-content-fluid">
                        <div class="container-xl wide-lg">
                            <div class="nk-content-body">
                                <div class="buysell  ">
                                    <div class="buysell-nav text-center">
<div class="alert alert-primary">
<div class="alert-cta flex-wrap flex-md-nowrap">
<div class="alert alert-success">
  <strong>My Boss!</strong> Please select the type of {{$card->name}} You want to sell to us and select the card type <b>"Physica Card or Ecode"</b> and upload the front and back image if it is a physical gift card or enter the card details if it is a digital gift card, then click on the confirm button to trade your giftcard. You account will be credited once card has been confirmed on our server. Thank you for choosing {{$basic->sitename}}.
</div></div></div>
                                    </div>
                                    <div class="buysell-title text-center"><h4 class="title">Exchange Giftcard</h4></div>
                                    <div class="buysell-block">

                                       <form role="form" method="POST" action="{{ route('excard') }}" enctype="multipart/form-data">
                                        {{ csrf_field() }}

<script>
function myFunction() {
 var usd = $('#usd').val() ;
 var name = $("#single option:selected").attr('data-name');
 var rate = $("#single option:selected").attr('data-exrate');
 var cur = $("#single option:selected").attr('data-cur');
 var rate2 = usd*rate;
 document.getElementById("exrate").innerHTML = "{{$basic->currency_sym}}"+rate2;
 document.getElementById("rate").innerHTML = "Rate: 1"+cur+" = {{$basic->currency_sym}}"+rate;
 document.getElementById("name").innerHTML = name;
 

 };
</script>


                                            <div class="buysell-field form-group">
                                                <div class="form-label-group"><label class="form-label">Select Giftcard Type</label></div>
                                                
                                         <select required  class="form-control form-control-lg"  id="single" onchange="myFunction()" name="type">
                                        <option data-cur="0" selected> Select Giftcard Type</option>
                                        @foreach($type as $data)
                                        <option data-exrate="{{$data->rate}}" data-name="{{$data->name}}"data-cur="{{$data->currency}}"  value="{{$data->id}}">{{$data->name}} </option>
                                        @endforeach
                                        </select></div>

                                                <div class="dropdown buysell-cc-dropdown">
                                                    <a href="#" class="buysell-cc-choosen dropdown-indicato" >
                                                        <div class="coin-item coin-btc">
                                                            <div class="coin-icon" id="image"><img src="{{asset('giftcards')}}/{{$card->image}}" width="50"
                              ></div>
                                                            <div class="coin-info"><span class="coin-name" id="name">Please Select Card Type</span><span id="rate" class="coin-text"> No Card Type Selected</span></div>
                                                        </div>
                                                    </a>
                                                   
                                                </div>
                                            </div>
                                            
                                            
                                           <br>
                                            <div class="buysell-field form-group">
                                                <div class="form-label-group"><label class="form-label" for="buysell-amount">Amount Of Card</label></div>
                                                <div class="form-control-group">
                                                    <input type="number" id="usd" onkeyup="myFunction()"   class="form-control form-control-lg form-control-number" name="amount"  placeholder=" 0.00" />
                                                     
                                                </div>
                                                <div class="form-note-group"><span class="buysell-min form-note-alt"><a id="exrate"></a></span><span class="buysell-rate form-note-alt"></span></div>








                                                <br>
                                         <script type="text/javascript">

                                            function goDoSomething(identifier){

                                     document.getElementById("type").innerHTML = $(identifier).data('id');
                                     document.getElementById("tocard").value = $(identifier).data('id');
                                    
                                   
                                     document.getElementById("icon2").innerHTML = "<img src='"+$(identifier).data('id2')+"' width='50'>";

                                }
                              </script>

                                                <div class="buysell-field form-group">
                                                <div class="form-label-group"><label class="form-label">Select Type</label></div>

                                                <div class="dropdown buysell-cc-dropdown">
                                                    <a href="#" class="buysell-cc-choosen dropdown-indicator" data-toggle="dropdown">
                                                        <div class="coin-item coin-btc">
                                                            <div class="coin-icon" id="icon2"><em class="icon ni ni-gift"></em></div>
                                                            <div class="coin-info"><span class="coin-name" id="type">Select</span><span class="coin-text">Giftcard Type</span></div>
                                                        </div>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-auto dropdown-menu-mxh">
                                                        <ul class="buysell-cc-list">

                                                         <li class="buysell-cc-item"  onclick="goDoSomething(this);"  data-upload="1"  data-id="Physical" data-id2="{{asset('giftcards')}}/{{$card->image}}">
                                                                <a href="#" class="buysell-cc-opt" data-currency="eth">
                                                                    <div class="coin-item coin-eth">
                                                                        <div class="coin-icon"><div class="coin-icon" id="image"><img src="{{asset('giftcards')}}/{{$card->image}}" width="50"
                              ></div></div>
                                                                        <div class="coin-info"><span class="coin-name">Physical</span><span class="coin-text">Card</span></div>
                                                                    </div>
                                                                </a>
                                                            </li>

                                                             <li class="buysell-cc-item"  onclick="goDoSomething(this);"    data-id="Digital"  data-upload="0" data-id2="{{asset('giftcards')}}/digit.jpg">
                                                                <a href="#" class="buysell-cc-opt" data-currency="eth">
                                                                    <div class="coin-item coin-eth">
                                                                        <div class="coin-icon"><div class="coin-icon" id="image"><img src="{{asset('giftcards')}}/digit.jpg" width="50"
                              ></div></div>
                              <input name="typeofcard" hidden id="tocard">
                              <input name="card" hidden value="{{$card->id}}">
                                                                        <div class="coin-info"><span class="coin-name">&nbsp;&nbsp; Digital</span><span class="coin-text">&nbsp;&nbsp; Card</span></div>
                                                                    </div>
                                                                </a>
                                                            </li>





                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                          <style>

.buysell-cc-choosen {
    display: block;
    width: 100%;
    border: 1px solid #b6ebcd;
    border-radius: 4px;
    background-color: #b6ebcd;
}

.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, #000, #365240);
    border-color: #ebeef2;
    
}

.form-control {
    display: block;
    font-weight: 400;
    width: 100%;
    color: #1c2b46;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #1ee0ac;
    border-radius: 4px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}    
    
.nk-files-view-grid .nk-file {
    display: block;
    position: relative;
    width: calc(50% - 16px);
    text-align: center;
    padding: .5rem 0.25rem;
    margin: 8px;
    background: #fff;
    border: 1px solid #b6ebcd;
    border-radius: 4px;
} 
    
.bg-primary-dim {
    background-color: #b6ebcd !important;
} 

.alert-primary {
    color: #000;
    background-color: #f5f6fa;
    border-color: #000;
}

.alert-success {
    color: #000;
    background-color: #e4fbf5;
    font-style: italic;
    border-color: #aef4e1;
    font-size: 10px;
    font-family: Georgia, serif;
}

.alert-danger {
    color: #ab3229;
    background-color: #fceae9;
    border-color: #e85347;
    font-style: italic;
    font-size: 10px;
    font-family: Georgia, serif;
}

.form-note {
    font-size: 12px;
    color: #000;
    font-style: italic;
    font-family: Georgia, serif;
    display: block;
}
    
</style>  
                                             
                                                            <div class="form-group">
                                                                <label class="form-label" for="default-06">Giftcard Front View <small>(Physical) </small></label></label>
                                                                <div class="form-control-wrap">
                                                                    <div class="custom-file">
                                                                        <input name='front' accept='image/*' type="file" multiple class="custom-file-input" id="customFile">
                                                                        <label class="custom-file-label" for="customFile">Upload</label>
                                                                    </div>
                                                                </div>
                                                            </div>
                        
                                        <div class='form-label-group'><label class='form-label' for='buysell-amount'>Enter Gift Card Code <small>(Digital)</small></label></div><input type='text'  placeholder='QWERTY*******' class='form-control form-control-lg form-control-number'  name='code' ></div><br>



<div class="buysell-field form-action"><button  type="submit"  class="btn btn-lg  btn-outline btn-primary" >Confirm Trade</button></div>

 </div></div></div></div></div></div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            </div>
                            </div>
                            </div>
                            </div>
                            </div>
                            
                            
                            
                            
                            
                            
                            
      
  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- Select2 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    <script>
      $("#single").select2({
          placeholder: "Select giftcard type",
          allowClear: true
      });
    </script>                      



@stop
