<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mobile Recharge</title>

    <!-- Font Icon -->
    <link rel="stylesheet" href="fonts/material-icon/css/material-design-iconic-font.min.css">

    <!-- Main css -->
    <link rel="stylesheet" href="css/style.css">
    <style>
        section.signup {
            margin-top: -5%;
        }
        .container1 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  background-color: #bf7a6b;
  background-image: -webkit-linear-gradient(bottom left, #bf7a6b 0%, #e6d8a7 100%);
  background-image: linear-gradient(to top right,#bf7a6b 0%, #e6d8a7 100%);
}

.file-upload-wrapper {
  position: relative;
  width: 100%;
  height: 60px;
}
.file-upload-wrapper:after {
  content: attr(data-text);
  font-size: 18px;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  padding: 10px 15px;
  display: block;
  width: calc(100% - 40px);
  pointer-events: none;
  z-index: 20;
  height: 40px;
  line-height: 40px;
  color: #999;
  border-radius: 5px 10px 10px 5px;
  font-weight: 300;
}

.file-upload-wrapper:hover:before {
  background: #4292dc;
}
.file-upload-wrapper {
    position: relative;
    width: 100%;
    height: 60px;
    margin-bottom: 27px;
}
.file-upload-wrapper input {
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99;
    height: 60px;
    margin: 0;
    padding: 0;
    display: block;
    cursor: pointer;
    width: 100%;
}
.container1 {
    position: inherit;
}
.container1 {
    position: inherit;
    height: 26px;
    margin-top: 36px;
    border-radius: 20px;
}
.file-upload-wrapper {
    position: relative;
    width: 100%;
    height: 60px;
}
.wrapper {
  padding: 4em;
  padding-bottom: 0;
}

.currency-selector {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding-left: 0.5rem;
  border: 0;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1024' height='640'><path d='M1017 68L541 626q-11 12-26 12t-26-12L13 68Q-3 49 6 24.5T39 0h952q24 0 33 24.5t-7 43.5z'></path></svg>") 90%/12px 6px no-repeat;
  font-family: inherit;
  color: inherit;
}

.currency-amount {
  text-align: right;
}

.currency-addon {
  width: 6em;
  text-align: left;
  position: relative;
} 
.wrapper {
    padding: 4em;
    padding-bottom: 0;
    margin-top: -61px;
    margin-left: -61px;
    width: 131%;
}
.input-group-addon.currency-symbol,.input-group-addon.currency-addon     {
    background-color: #0018b2;
    color: white;
}
.form-submit {
    background-color: #0018b2;
    color: white;
}
.file-upload-wrapper:before {
    content: "Upload";
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    height: 60px;
    background: #0018b2;
    color: #fff;
    font-weight: 700;
    z-index: 25;
    font-size: 16px;
    line-height: 60px;
    padding: 0 15px;
    text-transform: uppercase;
    pointer-events: none;
    border-radius: 0 5px 5px 0;
    margin-top: -2px;
    margin-right: -2px;
}
.container {
    width: 1140px;
    max-width: 100%;
    margin-top: 37px;
}
.signup {
    margin-bottom: -40px;
}
input#Logout {
    margin-top: 80px;
    margin-left: 20px;
}
.main {
    background: #f8f8f8;
    padding: 133px 0;
}
.currency-selector {
    position: absolute;
    left: 0;
    top: 0;
    width: 62%;
    height: 100%;
    padding-left: 0.5rem;
    border: 0;
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1024' height='640'><path d='M1017 68L541 626q-11 12-26 12t-26-12L13 68Q-3 49 6 24.5T39 0h952q24 0 33 24.5t-7 43.5z'></path></svg>) 90%/12px 6px no-repeat;
    font-family: inherit;
    color: inherit;
    margin-left: 41px;
}
.input-group-addon.currency-addon {
    margin-left: 62%;
}
option.__web-inspector-hide-shortcut__ {
    background-color: white;
    color: black;
}
a#Logout {
    margin-left: 92%;
}

    </style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
</head>
<body>

<div class="form-group form-button"><a name="Logout" id="Logout" href="logout.php" value="Log Out">Logout</a>                       
                    </div>
    <div class="main">
   

        <!-- Sign up form -->
        <section class="signup">
            <div class="container">
                <div class="signup-content">
                    <div class="signup-form">
                    
                        <h2 class="form-title">Recharge</h2>
                        <form method="POST" class="register-form" id="register-form">
                            <div class="form-group">
                                <!-- <label for="name"><i class="zmdi zmdi-account material-icons-name"></i></label> -->
                                <div class="">
                                <div class="file-upload-wrapper" data-text="Select your file!">
                                <input name="file-upload-field" type="file" class="file-upload-field" value="" name="spreadsheet">
                                </div>
                            </div>
                            </div>
                            <div class="form-group">
                            <div class="wrapper">
                            <label class="sr-only" for="inlineFormInputGroup">Amount</label>
                            <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                            <div class="input-group-addon currency-symbol">د.إ</div>
                            <select name="cars" class="currency-selector">
                                <option data-symbol="د.إ" data-placeholder="5.00">Click To Select Amount</option>
                                <option data-symbol="د.إ" data-placeholder="5.00">5.00 AED</option>
                                <option data-symbol="د.إ" data-placeholder="5.00">10.00 AED</option>
                                <option data-symbol="د.إ" data-placeholder="5.00">15.00 AED</option>
                                <option data-symbol="د.إ" data-placeholder="5.00">20.00 AED</option>
                                <option data-symbol="د.إ" data-placeholder="5.00">25.00 AED</option>     
                            </select>
                            <!-- <input type="text" class="form-control currency-amount" id="inlineFormInputGroup" placeholder="0.00" size="8"> -->
                            <div class="input-group-addon currency-addon">AED
                             
                            </div>
                            </div>

</div>


                            </div>
                            <div class="form-group form-button">
                                <input type="submit" name="signup" id="signup" class="form-submit" value="Register"/>
                            </div>
                        </form>
                    </div>
                    <div class="signup-image">
                        <figure><img src="images/signup-image.jpg" alt="sing up image"></figure>
                    </div>
                </div>
            </div>
        </section>


    </div>

    <!-- JS -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="js/main.js"></script>
    <script>
        function updateSymbol(e) {
  var selected = $(".currency-selector option:selected");
  $(".currency-symbol").text(selected.data("symbol"));
  $(".currency-amount").prop("placeholder", selected.data("placeholder"));
  $('.currency-addon-fixed').text(selected.text());
}

$(".currency-selector").on("change", updateSymbol);

updateSymbol();
    $("form").on("change", ".file-upload-field", function(){ 
        $(this).parent(".file-upload-wrapper").attr("data-text", $(this).val().replace(/.*(\/|\\)/, '') );
    });
</script>
</body><!-- This templates was made by Colorlib (https://colorlib.com) -->
</html>