@extends('layouts.appNew')
@section('content')
<!--begin::Toolbar-->
<div class="toolbar py-5 pb-lg-15" id="kt_toolbar">
	<!--begin::Container-->
	<div id="kt_toolbar_container" class="container-xxl d-flex flex-stack flex-wrap">
		<!--begin::Page title-->
		<div class="page-title d-flex flex-column me-3">
			<!--begin::Title-->
			<h1 class="d-flex text-white fw-bold my-1 fs-3">Set up account details</h1>
			<!--end::Title-->
		</div>
		<!--end::Page title-->	
	</div>
	<!--end::Container-->
</div>
<!--end::Toolbar-->
<!--begin::Container-->
<div id="kt_content_container" class="d-flex flex-column-fluid align-items-start container-xxl">
	<!--begin::Post-->
	<div class="content flex-row-fluid" id="kt_content">
		<div class="card mb-5 mb-xxl-8">
			<div class="card-body pt-9 pb-0">
				<!--begin::Details-->
				<div class="d-flex flex-wrap flex-sm-nowrap">
					<!--begin::Info-->
					<div class="flex-grow-1">
						<!--begin::Title-->
						<div>
							<!--begin::Form-->
							@if(count($errors) > 0)
						      <div class="alert alert-danger">
						          <ul>
						              @foreach($errors->all() as $error)
						                  <li>{{$error}}</li>
						              @endforeach
						          </ul>
						      </div>
						    @endif
							<form action="{{ route('account.store') }}" class="form mb-15" method="post" enctype="multipart/form-data" id="kt_contact_form">
								@csrf				
								<!--begin::Input group-->
									<div class="row mb-10" style="width: 400px;">
										<label class="fs-6 fw-semibold mb-2">Account Type<span class="ms-1" data-bs-toggle="tooltip" title="A real account is a trading account where you operate with real funds, and all your profit and loss is real money.">
												<i class="ki-duotone ki-information-5 text-gray-500 fs-6">
													<span class="path1"></span>
													<span class="path2"></span>
													<span class="path3"></span>
												</i>
											</span>
										</label>
										<!--begin::Row-->
										<div class="row row-cols-1 row-cols-md-2 row-cols-lg-1 row-cols-xl-2 g-9" data-kt-buttons="true" data-kt-buttons-target="[data-kt-button='true']">
											<!--begin::Col-->
											<div class="col">
												<!--begin::Option-->
												<label class="btn btn-outline btn-outline-dashed btn-active-light-primary active d-flex text-start p-6" data-kt-button="true">
													<!--begin::Radio-->
													<span class="form-check form-check-custom form-check-solid form-check-sm align-items-start mt-1">
														<input class="form-check-input" type="radio" name="account_type" value="1" checked="checked" />
													</span>
													<!--end::Radio-->
													<!--begin::Info-->
													<span class="ms-5">
														<span class="fs-4 fw-bold text-gray-800 d-block">Real</span>
													</span>
													<!--end::Info-->
												</label>
												<!--end::Option-->
											</div>
											<!--end::Col-->
											<!--begin::Col-->
											<div class="col">
												<!--begin::Option-->
												<label class="btn btn-outline btn-outline-dashed btn-active-light-primary d-flex text-start p-6" data-kt-button="true">
													<!--begin::Radio-->
													<span class="form-check form-check-custom form-check-solid form-check-sm align-items-start mt-1">
														<input class="form-check-input" type="radio" name="account_type" value="2" />
													</span>
													<!--end::Radio-->
													<!--begin::Info-->
													<span class="ms-5">
														<span class="fs-4 fw-bold text-gray-800 d-block">Demo </span>
													</span>
													<!--end::Info-->
												</label>
												<!--end::Option-->
											</div>
											<!--end::Col-->
										</div>
										<!--end::Row-->
									</div>
								<!--end::Input group-->	
								<!--begin::Input group-->
									<div class="row mb-10">
										<label class="fs-6 fw-semibold mb-2">Platform 
											<span class="ms-1" data-bs-toggle="tooltip" title="A software system that allows you to place orders, manage positions, and analyse charts.">
												<i class="ki-duotone ki-information-5 text-gray-500 fs-6">
													<span class="path1"></span>
													<span class="path2"></span>
													<span class="path3"></span>
												</i>
											</span>
										</label>
										<!--begin::Row-->
										<div class="row row-cols-1 row-cols-md-2 row-cols-lg-1 row-cols-xl-2 g-9" data-kt-buttons="true" data-kt-buttons-target="[data-kt-button='true']">
											<!--begin::Col-->
											<div class="col">
												<!--begin::Option-->
												<label class="btn btn-outline btn-outline-dashed btn-active-light-primary active d-flex text-start p-6" data-kt-button="true">
													<!--begin::Radio-->
													<span class="form-check form-check-custom form-check-solid form-check-sm align-items-start mt-1">
														<input class="form-check-input" type="radio" name="platform" value="1" checked="checked" />
													</span>
													<!--end::Radio-->
													<!--begin::Info-->
													<span class="ms-5">
														<span class="fs-4 fw-bold text-gray-800 d-block">MetaTrader<span style="color: orange;">4</span></span>
														<span style="color: black;font-size: 13px;">Spread from......................0.6 pips</span>
														<p style="font-size: 10px;">Floating spread, markup</p>
														<span style="color: black;font-size: 13px;">Instruments..............................74</span>
														<p style="font-size: 10px;">Currencies, indices, metals, energies, crypto</p>
														<span style="color: black;font-size: 13px;">Min deposit..............................$25</span>
														<p style="font-size: 10px;">Favourable: $100</p>
													</span>
													<!--end::Info-->
												</label>
												<!--end::Option-->
											</div>
											<!--end::Col-->
											<!--begin::Col-->
											<div class="col">
												<!--begin::Option-->
												<label class="btn btn-outline btn-outline-dashed btn-active-light-primary active d-flex text-start p-6" data-kt-button="true">
													<!--begin::Radio-->
													<span class="form-check form-check-custom form-check-solid form-check-sm align-items-start mt-1">
														<input class="form-check-input" type="radio" name="platform" value="2" checked="checked" />
													</span>
													<!--end::Radio-->
													<!--begin::Info-->
													<span class="ms-5">
														<span class="fs-4 fw-bold text-gray-800 d-block">MetaTrader<span style="color: orange;">5</span></span>
														<span style="color: black;font-size: 13px;">Spread from......................0.6 pips</span>
														<p style="font-size: 10px;">Floating spread, markup</p>
														<span style="color: black;font-size: 13px;">Instruments..............................230</span>
														<p style="font-size: 10px;">Currencies, indices, metals, energies, crypto, stocks</p>
														<span style="color: black;font-size: 13px;">Min deposit..............................$25</span>
														<p style="font-size: 10px;">Favourable: $100</p>
													</span>
													<!--end::Info-->
												</label>
												<!--end::Option-->
											</div>
											<!--end::Col-->
										</div>
										<!--end::Row-->
									</div>
								<!--end::Input group-->	
								<!--begin::Input group-->
									<div class="row mb-10">
										<label class="fs-6 fw-semibold mb-2">Leverage 
											<span class="ms-1" data-bs-toggle="tooltip" title="Leverage is a virtual loan that we offer you for trading purposes. The leverage you apply affects the margin required for opening an order. For instance, you are about to open a Sell order for EUR/USD for 0.5 lot while the current Bid price is 1.134215. To start with the leverage rate of 1:500, you will need this much money: 100,000 EUR (the price of 1 lot) × 0.5 × 1.134215 / 500 = 113.422. Other symbols may have the other margin requirements. To know the exact amounts, we recommend you use our trading calculator.">
												<i class="ki-duotone ki-information-5 text-gray-500 fs-6">
													<span class="path1"></span>
													<span class="path2"></span>
													<span class="path3"></span>
												</i>
											</span>
										</label>
										<!--begin::Select2-->
										<select class="form-select mb-2" name="leverage" data-control="select2" data-hide-search="true" data-placeholder="Select an option">
											<option></option>
											@foreach($Leverage as $id => $leverage_range)
												<option value="{{ $id }}">{{ $leverage_range }}</option>
											@endforeach
										</select>
										<!--end::Select2-->
									</div>	
								<!--end::Input group-->	
								<!--begin::Submit-->
									<button type="submit" class="btn btn-success" id="kt_contact_submit_button">
										<!--begin::Indicator label-->
										<span class="indicator-label">Create</span>
										<!--end::Indicator label-->
										<!--begin::Indicator progress-->
										<span class="indicator-progress">Please wait... 
										<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
										<!--end::Indicator progress-->
									</button>
									<a href="{{ route('home') }}" class="btn btn-primary me-2">Back</a>
								<!--end::Submit-->
							</form>
							<!--end::Form-->
						</div>
						<!--end::Title-->
					</div>
					<!--end::Info-->
				</div>
				<!--end::Details-->
			</div>
		</div>
	</div>
	<!--end::Post-->
</div>
@endsection