@extends('Layouts.dash')
@section('seo')
<link rel="shortcut icon" href="{{asset('/images/general/'.$gt->favicon)}}" type="image/x-icon" />
{!! SEO::generate() !!}
@endsection


@section('content')
<!-- App Capsule -->
<div id="appCapsule">

	<!-- Wallet Card -->
	<div class="section wallet-card-section pt-1">
		<div class="wallet-card">
			<!-- Balance -->
			<div class="balance">
				<div class="left">
					<h1 class="total text-center" style="font-size: 1.5em;">Data Recharge</h1>
				</div>
			</div>
			<!-- * Balance -->
			<!-- Wallet Footer -->
			<div class="wallet-footer">
				<div class="card">
					<div class="card-body">
						@include('alert')
						<form action="{{route('buyData')}}" method="post" autocomplete="off" autocorrect="off" validate>
							@csrf

							<div class="form-group boxed">
								<div class="input-wrapper">
									<label class="label" for="">Operating Network</label>
									<select class="form-control custom-select @if($errors->has('network_id')) is-invalid @endif" name="network_id" id="network" onchange="run()" required>
										<option value="0">Choose One</option>
										<option value="mtn">MTN</option>
										<option value="glo">GLO</option>
										<option value="airtel">AIRTEL</option>
										<option value="etisalat">ETISALAT</option>
									</select>
								</div>
								@if($errors->has('network_id'))
								<small style="color:red;">
									{!!  $errors->get('network_id')[0] !!}
								</small>
								@endif
							</div>
							
							<div class="form-group boxed">
								<div class="input-wrapper">
									<label class="label" for="">Available Data Balance</label>
									<input type="text" autocomplete="off" class="form-control" name="amount" placeholder="Available Data Balance" value="{{ Auth::user()->tdata }}" readonly>
									<i class="clear-input">
										<ion-icon name="close-circle"></ion-icon>
									</i>
								</div>
							</div>
							
							<div class="form-group boxed">
								<div class="input-wrapper">
									<label class="label" for="">Data Amount</label>
									<input type="text" autocomplete="off" class="form-control @if($errors->has('amount')) is-invalid @endif" name="amount" placeholder="Data Amount" required>
									<i class="clear-input">
										<ion-icon name="close-circle"></ion-icon>
									</i>
								</div>
								@if($errors->has('amount'))
								<small style="color:red;">
									{!!  $errors->get('amount')[0] !!}
								</small>
								@endif
							</div>

							<div class="form-group boxed" id="mtn" style="display:none;">
								<div class="input-wrapper">
									<label class="label" for="">Data Amount</label>
									<select class="form-control custom-select @if($errors->has('variation_id')) is-invalid @endif" name="variation_id">
										<option value="">Data Amount</option>
										<option value="500">MTN 500mb</option>
										<option value="M1024">MTN 1gb</option>
										<option value="M2024">MTN 2gb</option>
										<option value="3000">MTN 3gb</option>
										<option value="5000">MTN 5gb</option>
									</select>
								</div>
								@if($errors->has('variation_id'))
								<small style="color:red;">
									{!!  $errors->get('variation_id')[0] !!}
								</small>
								@endif
							</div>

							<div class="form-group boxed" id="glo" style="display:none;">
								<div class="input-wrapper">
									<label class="label" for="">Data Amount</label>
									<select class="form-control custom-select @if($errors->has('variation_id')) is-invalid @endif" name="variation_id">
										<option value="">Data Amount</option>
										<option value="glo100x">GLO 1gb</option>
										<option value="glo200x">GLO 1.2gb</option>
										<option value="G500">GLO 1.3gb</option>
										<option value="G1000">GLO 2.9gb</option>
									</select>
								</div>
								@if($errors->has('variation_id'))
								<small style="color:red;">
									{!!  $errors->get('variation_id')[0] !!}
								</small>
								@endif
							</div>

							<div class="form-group boxed" id="airtel" style="display:none;">
								<div class="input-wrapper">
									<label class="label" for="">Data Amount</label>
									<select class="form-control custom-select @if($errors->has('variation_id')) is-invalid @endif" name="variation_id">
										<option value="">Data Amount</option>
										<option value="AIRTEL500MB">AIRTEL 500mb</option>
										<option value="AIRTEL1GB">AIRTEL 1gb</option>
										<option value="airt-1100">AIRTEL 1.5gb</option>
										<option value="airt-1300">AIRTEL 2gb</option>
										<option value="airt-1650">AIRTEL 3gb</option>
										<option value="airt-2200">AIRTEL 4.5gb</option>
										<option value="AIRTEL5GB">AIRTEL 5gb</option>
									</select>
								</div>
								@if($errors->has('variation_id'))
								<small style="color:red;">
									{!!  $errors->get('variation_id')[0] !!}
								</small>
								@endif
							</div>

							<div class="form-group boxed" id="etisalat" style="display:none;">
								<div class="input-wrapper">
									<label class="label" for="">Data Amount</label>
									<select class="form-control custom-select @if($errors->has('variation_id')) is-invalid @endif" name="variation_id">
										<option value="">Data Amount</option>
										<option value="9MOB1000">9MOBILE 1gb</option>
										<option value="9MOB34500">9MOBILE 2.5gb</option>
									</select>
								</div>
								@if($errors->has('variation_id'))
								<small style="color:red;">
									{!!  $errors->get('variation_id')[0] !!}
								</small>
								@endif
							</div>

							<div class="form-group boxed">
								<div class="input-wrapper">
									<label class="label" for="">Phone Number</label>
									<input type="text" autocomplete="off" class="form-control @if($errors->has('phone')) is-invalid @endif" name="phone" placeholder="Phone Number" required>
									<i class="clear-input">
										<ion-icon name="close-circle"></ion-icon>
									</i>
								</div>
								@if($errors->has('phone'))
								<small style="color:red;">
									{!!  $errors->get('phone')[0] !!}
								</small>
								@endif
							</div>

							<br>

							<div class="form-buthton-group transparent">
								<button type="submit" class="btn btn-primary btn-block btn-lg">Recharge</button>
							</div>
						</form>
						<script>
							
							var mtn = document.getElementById("mtn");
							var glo = document.getElementById("glo");
							var airtel = document.getElementById("airtel");
							var etisalat = document.getElementById("etisalat");
							var network = document.getElementById("network");
							
							function run() {
								var option = network.options[network.selectedIndex];
								var rnet = option.value;
								if (rnet === "mtn") {
									mtn.style.display = "block";
									glo.style.display = "none";
									airtel.style.display = "none";
									etisalat.style.display = "none";
								} else if (rnet === "glo") {
									mtn.style.display = "none";
									glo.style.display = "block";
									airtel.style.display = "none";
									etisalat.style.display = "none";
								} else if (rnet === "airtel") {
									mtn.style.display = "none";
									glo.style.display = "none";
									airtel.style.display = "block";
									etisalat.style.display = "none";
								} else if (rnet === "etisalat") {
									mtn.style.display = "none";
									glo.style.display = "none";
									airtel.style.display = "none";
									etisalat.style.display = "block";
								} else {
									mtn.style.display = "none";
									glo.style.display = "none";
									airtel.style.display = "none";
									etisalat.style.display = "none";
								}
							}
							//run();
						</script>

					</div>
				</div>
			</div>
			<!-- * Wallet Footer -->
		</div>
	</div>
	<!-- Wallet Card -->

	<!-- space -->
	<br><br>
	<!-- end space -->

</div>
<!-- * App Capsule -->
@include('Partial.bottom')
@include('Partial.sidebar')

@endsection