@extends('layouts.client_template')
@section('content')
<aside class="page_content_wrapper">
	<div class="page_content_inner">
        @include('layouts.client_assign_manager')
        <h2 class="page_title">My Wallet</h2>
		<div class="flash-message">
			@foreach (['danger', 'warning', 'success', 'info'] as $msg)
			@if(Session::has('alert-' . $msg))
			<div class="alert alert-{{ $msg }} alert-dismissible fade show" role="alert">
				<strong>{{ ucfirst(($msg == 'danger') ? "Error" : $msg) }}!</strong> {{ Session::get('alert-' . $msg) }}
				<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
			</div>
			@endif
			@endforeach
		</div>
        <div class="regulation_wrapper">
			<div class="regulation_title">
				<h4>@lang('translate.wallet_history_report')</h4>
				<a href="{{ url()->previous() }}" class="back_button"><img src="{{ asset('/newdesign/images/back.svg') }}" alt=""></a>
			</div>
			<div class="position_top_filter_wrapper">
				<form class="customdatefilter" role="form" method="GET" action="{{ url('/client/wallet/mywallet') }}">
					<div class="row gx-2">
						<div class="col-lg-3 col-md-3 col-sm-4 col-6">
							<div class="form-group">
								<label class="form-label mb-0">@lang('translate.from') :</label>
								<input type="text" class="form-control" name="fromdate" id="fromdate" value="@if(isset($_GET['fromdate'])) {{ date('Y-m-d',strtotime($_GET['fromdate'])) }} @else {{ date('Y-m-d',strtotime('-30 day')) }} @endif" placeholder="From date" readonly />
							</div>
						</div>
						<div class="col-lg-3 col-md-3 col-sm-4 col-6">
							<div class="form-group">
								<label class="form-label mb-0">@lang('translate.to') :</label>
								<input type="text" class="form-control" name="todate" id="todate" value="@if(isset($_GET['todate'])) {{ date('Y-m-d',strtotime($_GET['todate'])) }} @else {{ date('Y-m-d') }} @endif" placeholder="To date" readonly />
							</div>
						</div>
						<div class="col-lg-3 col-md-3 col-sm-4 col-12">
							<div class="form-group">
								<button type="submit" id="dateSearch" class="btn btn-sm btn-primary">@lang('translate.search')</button>
							</div>
						</div>
					</div>
				</form>
			</div>
			<hr class="mb-0">
			<div class="easy_table_wrap">
				@if(count($wallethistorylists) > 0)
				<div class="table-responsive">
					<table class="table">
						<thead>
							<tr>
								<th>@lang('translate.date')</th>
								<th>@lang('translate.id')</th>
								<th>@lang('translate.method')</th>
								<th>@lang('translate.to_deposit')</th>
								<th>@lang('translate.amount')</th>
								<th>@lang('translate.note')</th>
							</tr>
						</thead>
						<tbody>
							@foreach($wallethistorylists as $wallethistory)
							<tr>
								<th>{{ date('M d Y',strtotime($wallethistory->created_at)) }}</th>
								<td>#{{ $wallethistory->id }}</td>
								<td>{{ $wallethistory->method }}</td>
								<td>{{ $wallethistory->todeposit }}</td>
								<td>{{ $wallethistory->amount }}</td>
								<td>{{ $wallethistory->note }}</td>
							</tr>
							@endforeach
						</tbody>
					</table>
				</div>
				@if(count($wallethistorylists) > 0)
				<div class="pagination_Wrapper d-flex flex-wrap align-items-center justify-content-between mb-3 px-4">
					<p class="m0 text_12">Showing {{ $wallethistorylists->firstItem() }} to {{ $wallethistorylists->lastItem() }} of {{ $wallethistorylists->total() }} entries</p>
					<ul class="d-flex align-items-center">
						@if($wallethistorylists->onFirstPage())
						<li class="disabled" aria-disabled="true">
							<button class="btn_transparent">
								<img src="{{ asset('/newdesign/images/left-arrow.svg') }}" alt="" />
							</button>
						</li>
						@else
						<li>
							<a href="{{ $wallethistorylists->previousPageUrl() }}" class="btn_transparent">
								<img src="{{ asset('/newdesign/images/left-arrow.svg') }}" alt="" />
							</a>
						</li>
						@endif
						<li class="disabled mx10">
							{{ $wallethistorylists->currentPage() }} of {{ $wallethistorylists->lastPage() }}
						</li>
						@if ($wallethistorylists->hasMorePages())
						<li class="mx10">
							<a href="{{ $wallethistorylists->nextPageUrl() }}" class="btn_transparent">
								<img src="{{ asset('/newdesign/images/right-arrow.svg') }}" alt="" />
							</a>
						</li>
						@else
						<li class="disabled" aria-disabled="true">
							<button class="btn_transparent">
								<img src="{{ asset('/newdesign/images/right-arrow.svg') }}" alt="" />
							</button>
						</li>
						@endif
					</ul>
				</div>
				@endif
				@else
				<div class="nodata_found">
					<div class="nodata_found-start">
						<div class="nodata_found_icon">
							<img src="{{ asset('/newdesign/images/transaction-empty.svg') }}" alt="" />
						</div>
						<div class="nodata_found_text">
							<h5>No transactions yet!</h5>
						</div>
					</div>
				</div>
				@endif
			</div>
		</div>
	</div>
</aside>
<aside class="right_content_wrapper">
	@include('layouts.client_assign_manager_right')
	<div class="bank_account_wrap bg_white_box mb-2">
        <h3 class="mb15">Wallet Balance</h3>
        <div class="trasaction_type_wrap">
			<div class="row g-3">
				<div class="col-sm-12">
					<div class="bg_grey_box text-center">
						<div class="img_wrap"> <img src="{{ asset('/newdesign/images/icon-wallet.svg') }}" alt=""> </div>
						<h5 class="text_extra_light m-0">Wallet Balance</h5>
						<h4>${{ round(auth::user()->wallet_balance) }}</h4>
					</div>
				</div>
				
			</div>
		</div>
	</div>
	<div class="right_sidebar transaction_wrap bg_white_box">
        <h3 class="mb15">Wallet To MT5 Transfer</h3>
        <form role="form" method="post" action="{{ url('/client/wallet/wallettomt5store') }}">
		@csrf
			<div class="walletTransfer">
				<div class="row gx-2">
					<div class="col-md-6 col-12">
						<div class="form_group mb-2">
							<select name="mtaccount" class="form-select @error('mtaccount') is-invalid @enderror" id="mtaccount">
								<option value="">Select Account *</option>
								@foreach($mt5accountlists as $mt5account)
									<option value="{{ $mt5account->mt5id }}">{{ $mt5account->mt5id }}</option>
								@endforeach
							</select>
							@error('mtaccount')
							<div class="invalid-feedback">
								<small>{{ $message }}</small>
							</div>
							@enderror
						</div>
					</div>
					<div class="col-md-6 col-12">
						<div class="form_group mb-2">
							<input type="text" name="transfer_amount" class="form-control @error('transfer_amount') is-invalid @enderror" id="transfer_amount" value="{{ old('transfer_amount') }}" placeholder="@lang('translate.amount')*" />
							@error('transfer_amount')
							<div class="invalid-feedback">
								<small>{{ $message }}</small>
							</div>
							@enderror
						</div>
					</div>
				</div>
				<div class="row gx-2">
					<div class="col-md-6 col-12">
						<div class="form_group mb-2">
							<input type="text" name="client_note" class="form-control @error('client_note') is-invalid @enderror" id="client_note" value="{{ old('client_note') }}" placeholder="@lang('translate.note')*" />
							@error('client_note')
							<div class="invalid-feedback">
								<small>{{ $message }}</small>
							</div>
							@enderror
						</div>
					</div>
					<div class="col-md-6 col-12">
						<div class="position-relative">
							<button class="btn_icon_black btn-sm w-100" id="submitFormButton" type="submit" onclick="this.disabled=true;this.value='Sending, please wait...';this.form.submit();">Submit <img src="{{ asset('/newdesign/images/right.svg') }}" class="ml10 mr0" alt=""></button>
						</div>
					</div>
				</div>
			</div>
		</form>
		<hr/>
		<h3 class="mb15">MT5 To Wallet Transfer</h3>
        <form role="form" method="post" action="{{ url('/client/wallet/mt5towalletstore') }}">
		@csrf
			<div class="walletTransfer">
				<div class="row gx-2">
					<div class="col-md-6 col-12">
						<div class="form_group mb-2">
							<select name="mt5account" class="form-select @error('mt5account') is-invalid @enderror" id="mt5account">
								<option value="">Select Account *</option>
								@foreach($mt5accountlists as $mt5account)
									<option value="{{ $mt5account->mt5id }}">{{ $mt5account->mt5id }}</option>
								@endforeach
							</select>
							@error('mt5account')
							<div class="invalid-feedback">
								<small>{{ $message }}</small>
							</div>
							@enderror
						</div>
					</div>
					<div class="col-md-6 col-12">
						<div class="form_group mb-2">
							<input type="text" name="amount" class="form-control @error('amount') is-invalid @enderror" id="amount" value="{{ old('amount') }}" placeholder="@lang('translate.amount')*" />
							@error('amount')
							<div class="invalid-feedback">
								<small>{{ $message }}</small>
							</div>
							@enderror
						</div>
					</div>
				</div>
				<div class="row gx-2">
					<div class="col-md-6 col-12">
						<div class="form_group mb-2">
							<input type="text" name="note" class="form-control @error('note') is-invalid @enderror" id="note" value="{{ old('note') }}" placeholder="@lang('translate.note')*" />
							@error('note')
							<div class="invalid-feedback">
								<small>{{ $message }}</small>
							</div>
							@enderror
						</div>
					</div>
					<div class="col-md-6 col-12">
						<div class="position-relative">
							<button class="btn_icon_black btn-sm w-100" id="submitFormButton" type="submit" onclick="this.disabled=true;this.value='Sending, please wait...';this.form.submit();">Submit <img src="{{ asset('/newdesign/images/right.svg') }}" class="ml10 mr0" alt=""></button>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
</aside>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript">
	$(function () { 
		$("#fromdate").datepicker({ 
			minDate: $("#fromdate").value,
			dateFormat: 'yy-mm-dd',
			changeYear:true,
			/*onSelect: function (date) {
				$("#todate").datepicker('option', 'minDate', date);
			}*/
		});
		$("#todate").datepicker({
			maxDate: $("#todate").value,
			dateFormat: 'yy-mm-dd',
			changeYear:true,
			/*onSelect: function (date) {
				$("#fromdate").datepicker('option', 'maxDate', date);
			}*/
		});
	});
	$('#mt5account').on('change', function () {
        var mt5account = $(this).val();
        if(mt5account) {
            $.ajax({
                url: "/client/account/getaccountequity/"+mt5account,
                type: "GET",
				dataType: 'json',
                success: function (response) {
                    $('.liveaccbalance').text(response.Equity);
                },
                error: function () {
                    $('.liveaccbalance').text("0");
                }
            });
        } else {
            $('.liveaccbalance').text('0');
        }
    });
	$('#mtaccount').on('change', function () {
        var mtaccount = $(this).val();
        if(mtaccount) {
            $.ajax({
                url: "/client/account/getaccountequity/"+mtaccount,
                type: "GET",
				dataType: 'json',
                success: function (response) {
                    $('.liveaccbalance').text(response.Equity);
                },
                error: function () {
                    $('.liveaccbalance').text("0");
                }
            });
        } else {
            $('.liveaccbalance').text('0');
        }
    });
</script>
@endsection