@extends('layouts.backend')
@section('content')
<style media="screen">
  .exchangeContent{
    float: left;
    width: 50%;
    text-align: center;
    height: 600px;
    border-right: 2px solid grey;
    border-left: 2px solid grey;
  }
  .exchangeContent h3{
    margin-bottom: 1px;
  }
  .exleft{
    border-left: none;
  }
  .exright{
    border-right: none;
  }
  .selectBox{
    width: 80%;
    margin: 0 auto;
  }

  .selectBox select{
    width: 100%;
    height: 50px;
    background-color: transparent;
    border-radius: 10px;
  }

  .buttonexchange{
    margin-top: 10px;
    margin-bottom: 5px;
    width: 100%;
    height: 38px;
    float: left;
  }

  .inputExchange{
    width: 80%;
    margin: 0 auto;
  }

  .inputExchange input{
    width: 100%;
    border: none;
    background-color: transparent;
    font-size: 20px;
  }

  .inputExchange input:focus{
    outline: none;
  }
  .linevalue{
    width: 100%;
    height: 2px;
    background-color: grey;
  }
  .shapearrow{
    position: absolute;
    margin: 0 auto;
    left: 45%;
    width: 60px;
    height: 60px;
    top: 100px;
    right: 45%;
    background-color: #132a3a;
    cursor: pointer;
  }
  #shapeleft{
    transition: all 0.2s;
    position: relative;
    top: 4px;
    left: 4px;
  }
  #shaperight{
    transition: all 0.2s;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    position: relative;
    left: 23px;
    bottom: 5px;

  }
  .exchangeview{
    position: absolute;
    width: 90%;
    height: 90px;
    margin: 0 auto;
    left: 0%;
    right: 0%;
    top: 400px;
    background-color: #132a3a;
    padding: 8px 0px;
  }

  .exchangepart{
    float: left;
    width: 45%;
    height: 75px;
  }


  .exchangearrow{
    float: left;
    width: 10%;
    text-align: center;
    height: 75px;
  }
  .exchangearrow img{
    position: relative;
    top: 25%;
  }

  .receivepart{
    float: left;
    width: 45%;
    height: 75px;
  }
  .infoexch{
    float: right;
    text-align: right;
  }
  .imgexcview{
    height: 75px;
    width: 90px;
    float: right;
  }

  .imgexcview img, .imgrecview img{
    height: 50px;
    display: block;
    position: relative;
    top: 15%;
    margin: 0 auto;
  }
  .inforec{
    float: left;
  }
  .imgrecview{
    height: 75px;
    width: 90px;
    float: left;
  }



  #viewright{
    transition: all 0.2s;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    -moz-transform: scaleX(-1);
  }

  #exchange{
    font-size: 25px;
  }
  .exchbutton{
    position: absolute;
    right: 0%;
    left: 0%;
    margin: 0 auto;
    width: 30%;
    text-align: center;
    background-color: #132a3a;
    top: 516px;
  }
  .exchequivalent{
    width: 50%;
    position: absolute;
    left: 10%;
    right: 10%;
    margin: 0 auto;
    top: 590px;
    background-color: #132a3a;
    text-align: center;
  }
  .exchequivalent p{
    margin: 0px;
    margin-top: 5px;
  }

/*TEST*/
.select-sim {
width:100%;
height:50px;
line-height:22px;
vertical-align:middle;
position:relative;
border-radius: 10px;
background:transparent;
border:1px solid #ccc;
overflow:hidden;
}

.select-sim::after {
content:"▼";
font-size:0.8em;
font-family:arial;
position:absolute;
top:50%;
right:5px;
transform:translate(0, -50%);
}

.select-sim:hover::after {
content:"";
}

.select-sim:hover {
overflow:visible;
}

.select-sim:hover .options .option label {
display:inline-block;
}

.select-sim:hover .options {
background:white;
color: black;
border-radius: 10px;
border:1px solid #ccc;
position:absolute;
top:50px;
left:-1px;
width:100%;
height:fit-content;
max-height: 150px;
overflow-y:scroll;
}

.options::-webkit-scrollbar {
    display: none;
}


.select-sim .options .option {
overflow:hidden;
cursor: pointer;
}

.select-sim:hover .options .option {
overflow:hidden;
}

.select-sim .options .option img {
vertical-align:middle;
float:left;
padding: 8px;
}

.select-sim .options .option label {
display:none;
height: 50px;
margin: 0px;
}

.select-sim .options .option input {
width:0;
height:0;
overflow:hidden;
margin:0;
padding:0;
float:left;
display:inline-block;
/* "hack" para que funcione en Firefox */
position: absolute;
left: -10000px;
}

.select-sim .options .option input:checked + label {
display:block;
width:100%;
}

.select-sim:hover .options .option input + label {
display:block;
}

.select-sim:hover .options .option input:checked + label {
background:#2b89ca;
color: white;
}
.select-sim:hover .options .option label:hover{
  background:#2b89ca;
  color: white;
}


.info{
  text-align: left;
  float: left;
  height: 50px;
  padding: 5px 0px;
}
.info p{
  margin: 0px;
}
/*END TEST*/

</style>
    <div class="col-sm-12">
      <div class="panel panel-alternative">
        <div class="panel-header text-center">
          <h3>Fast Way Exchange</h3>
        </div>
        <div class="panel-body">
          <div class="shapearrow">
            <img src="{{ url('/') }}/img/icons/arrow.svg" id="shapeleft" width="32" alt="" height="auto">
            <img src="{{ url('/') }}/img/icons/arrow.svg" id="shaperight" width="32" alt="" height="auto">
          </div>
          <div class="exchangeview">
            <div class="exchangepart">
              <div class="imgexcview">

              </div>
              <div class="infoexch">
                <p>You are exchanging</p>
                <h5><span id="viewexch">0.00 </span></h5>
                <p><span id="viewfexch">$0.00</span></p>
              </div>
            </div>
            <div class="exchangearrow">
              <img src="{{ url('/') }}/img/icons/arrow.svg" id="viewright" width="32" alt="" height="auto">
            </div>
            <div class="receivepart">
              <div class="imgrecview">

              </div>
              <div class="inforec">
                <p>You will receive</p>
                <h5><span id="viewrec">0.00 </span></h5>
                <p><span id="viewfrec">$0.00</span></p>
              </div>
            </div>
          </div>
          <div class="exchbutton">
            <button type="button" name="exchange" id="exchange" class="btn btn-alternative btn-alternative-success">EXCHANGE</button>
          </div>
          <div class="exchequivalent">
            <p>1 BTC = 17.5239154 ETH</p>
          </div>
          <div class="exchangeContent exleft">
            <h3>EXCHANGE</h3>
            <div class="selectBox">
              <div class="select-sim">
                <div class="options" id="optionsexc">
                </div>
              </div>
            </div>
            <div class="buttonexchange">
              <button type="button" name="all" id="all" class="btn btn-alternative">ALL</button>
              <button type="button" name="half" id="half" class="btn btn-alternative">HALF</button>
              <button type="button" name="min" id="min" class="btn btn-alternative">MIN</button>
            </div>
            <div class="inputExchange">
              <input type="text" name="cryptovalueexc" id="cryptovalueexc" class="cryptovalue" value="0.00">
              <div class="linevalue">
              </div>
              <input type="text" name="fiatvalueexc" id="fiatvalueexc" class="fiatvalue" value="0.00">
            </div>
          </div>
          <div class="exchangeContent exright">
            <h3>RECEIVE</h3>
            <div class="selectBox">
              <div class="select-sim">
                <div class="options" id="optionsrec">
                </div>
              </div>
            </div>
            <div class="buttonexchange">
            </div>
            <div class="inputExchange">
              <input type="text" name="cryptovaluerec" id="cryptovaluerec" class="cryptovalue" value="0.00">
              <div class="linevalue">
              </div>
              <input type="text" name="fiatvaluerec" id="fiatvaluerec" class="fiatvalue" value="0.00">
            </div>
          </div>
        </div>
        <div class="panel-footer">

        </div>
      </div>
    </div>
    <div class="modal fade" id="currencyMod" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content modal-alternative">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>

  </div>
  <div class="modal fade" id="currencyAlertMod" role="dialog">
  <div class="modal-dialog modal-sm">

    <!-- Modal content-->
    <div class="modal-content modal-alternative content-alert">
        <div class="alert" style="margin: 0px;">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <p class="text-alert"></p>
        </div>
    </div>

  </div>

  </div>
  <script src="{{ url('/') }}/js/jquery.min.js"></script>
  <script type="text/javascript">
    function sleep(milliseconds) {
      var start = new Date().getTime();
      for (var i = 0; i < 1e7; i++) {
        if ((new Date().getTime() - start) > milliseconds){
          break;
        }
      }
    }

    $('.shapearrow').mouseenter(function(){
      i = 0;
      do {
        $('#shapeleft').animate({'left': '0px'}, 'fast').delay(300).animate({'left': '4px'}, 'fast').delay(300);
        $('#shaperight').animate({'left': '27px'}, 'fast').delay(300).animate({'left': '23px'}, 'fast').delay(300);
        i++;
      } while (i < 3);


    })
  </script>
@endsection