@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">Internal Transfer</h1>
			<!--end::Title-->
		</div>
		<!--end::Page title-->
		
	</div>
	<!--end::Container-->
</div>
<!--end::Toolbar-->
@if(\Session::has('error'))
    <div class="alert alert-danger">
      <p>{{\Session::get('error')}}</p>
    </div>
@endif
<!--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>
							@if(count($errors) > 0)
						      <div class="alert alert-danger">
						          <ul>
						              @foreach($errors->all() as $error)
						                  <li>{{$error}}</li>
						              @endforeach
						          </ul>
						      </div>
						    @endif
							<!--begin::Form-->
							<form action="{{ route('InternalTransfer.store') }}" class="form mb-15" method="post" enctype="multipart/form-data" id="kt_contact_form">
								@csrf
								<!--begin::Input group-->
									<div class="row mb-10">
										<p>You are about to request an internal transfer from one of your accounts to the other. Please note that you can transfer funds between your own accounts only. If you transfer funds to the account in a different currency, we will convert these funds to the current market quote. Please enter the transfer amount and select the destination account. Then enter your Octa PIN and submit the request. Internal transfers usually take 1–2 hours to be processed.</p>
									</div>
								<!--end::Input group-->		
								<!--begin::Input group-->
									<div class="row mb-10">
										<div class="col-md-5">
											<h4>From</h4>
											<!--begin::Select2-->
											<select class="form-select mb-2 from_account" name="from_account" data-control="select2" data-hide-search="true" data-placeholder="Select an option" style="border-radius: 20px;">
												<option></option>
												@foreach($Accounts as $row)
													<option value="{{ $row->id }}">
														{{ $row->account_type == 1 ? 'Real' : 'Demo' }}</b>
														&nbsp &nbsp &nbsp 
														{{ $row->platform_id == 1 ? 'MT4' : 'MT5' }} 
														&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
														{{ $row->id }}
														&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
														${{ $row->account_balance }}
													</option>
												@endforeach
													<option value="wallet">Wallet &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp  ${{ $DepositWallet[0] }}</option>
											</select>
											@error('from_account')
						                        <span class="invalid-feedback" role="alert">
						                            <strong>{{ $message }}</strong>
						                        </span>
						                    @enderror
											<!--end::Select2-->
										</div>
										<div class="col-md-1" align="center"></div>
										<div class="col-md-5">
											<h4>To</h4>
											<!--begin::Select2-->
											<select class="form-select mb-2 to_account" name="to_account" data-control="select2" data-hide-search="true" data-placeholder="Select an option" style="border-radius: 20px;">
												<option></option>
												@foreach($Accounts as $row)
													<option value="{{ $row->id }}">
														{{ $row->account_type == 1 ? 'Real' : 'Demo' }}</b>
														&nbsp &nbsp &nbsp 
														{{ $row->platform_id == 1 ? 'MT4' : 'MT5' }} 
														&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
														{{ $row->id }}
														&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
														${{ $row->account_balance }}
													</option>
												@endforeach
													<option value="wallet">Wallet &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp  ${{ $DepositWallet[0] }}</option>
											</select>
											@error('to_account')
						                        <span class="invalid-feedback" role="alert">
						                            <strong>{{ $message }}</strong>
						                        </span>
						                    @enderror
											<!--end::Select2-->
										</div>
									</div>	
								<!--end::Input group-->	
								<!--begin::Menu separator-->
									<div class="separator border-gray-200"></div>

								<!--end::Menu separator-->
								<!--begin::Input group-->
									<div class="row mb-10">
										<div class="col-md-5">
											<h4>Amount From $</h4>
											<input type="text" class="form-control form-control-solid" placeholder="Enter your amount" name="amount_from" id="amount_from" style="border: 1px solid #e2e6f9;" />
											@error('amount_from')
						                        <span class="invalid-feedback" role="alert">
						                            <strong>{{ $message }}</strong>
						                        </span>
						                    @enderror
										</div>
										<div class="col-md-1" align="center">
											<img src="{{ url('/logo/ico-equal.svg') }}" style="padding-top: 40px;" alt="" />
										</div>
										<div class="col-md-5">
											<h4>Amount To $</h4>
											<input type="text" class="form-control form-control-solid" placeholder="Enter your amount" name="amount_to" id="amount_to" style="border: 1px solid #e2e6f9;" />
											@error('amount_to')
						                        <span class="invalid-feedback" role="alert">
						                            <strong>{{ $message }}</strong>
						                        </span>
						                    @enderror
										</div>
									</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">Transfer</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>
<!--end::Container-->

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<script>
	$(document).ready(function () {
		$('#amount_from').on('keyup input', function() {
            
            var amount = $(this).val();
	        let numericValue = parseFloat(amount);

	        if (!isNaN(numericValue)) {
	            var data = numericValue.toFixed(2);
	            $('#amount_to').empty();
	            $('#amount_to').val(data);
	        }
		});

		$('.from_account').on('change', function () {
	        // Get the selected value
	        var selectedValue = $(this).val();

	        // Disable the selected option in the other dropdown
	        $('.to_account').not(this).find('option[value="' + selectedValue + '"]').prop('disabled', true);

	        // Enable all other options in the other dropdown
	        $('.to_account').not(this).find('option').not('[value="' + selectedValue + '"]').prop('disabled', false);
	    });

	    $('.to_account').on('change', function () {
	        // Get the selected value
	        var selectedValue = $(this).val();

	        // Disable the selected option in the other dropdown
	        $('.from_account').not(this).find('option[value="' + selectedValue + '"]').prop('disabled', true);

	        // Enable all other options in the other dropdown
	        $('.from_account').not(this).find('option').not('[value="' + selectedValue + '"]').prop('disabled', false);
	    });
	});
</script>
@endsection