@extends('layouts.app')
@section('header')
<div class="header" style="padding:20px;">
<h5 style="font-weight: 600;"><i class="fas fa-dollar-sign"></i> Import transactions </h5>
</div>
@endsection

@section('content')
<div class="row">
	<div class="col-sm-4">
		<form action="{{url('/')}}/transferImport/save" method="POST" enctype="multipart/form-data">
			@csrf
			<div class="form-group">
				<label>Select provider</label>
				<select name="transfer_provider_id" class="form-control @error('transfer_provider_id') is-invalid @enderror" id="transfer_provider">
					@foreach($transferProviders as $transferProvider)
					<option value="{{$transferProvider->id}}">{{$transferProvider->name}}</option>
					@endforeach
				</select>
			</div>
			<div id="transactionType"></div>
			<div class="form-group">
				<label>Branch</label>
				<select name="branch_id" value="{{ old('branch_id') }}" class="form-control @error('branch_id') is-invalid @enderror">
					@foreach(Auth::user()->branches as $branch)
					<option value="{{$branch->id}}">{{$branch->name}}</option>
					@endforeach
				</select>
			</div>
			<div class="form-group">
				<label>Date</label>
				<input type="date" name="date" value="{{ old('date') ?? date('Y-m-d') }}" class="form-control @error('date') is-invalid @enderror">
			</div>
			<div class="form-group">
				<label>Upload File</label>
				<input type="file" name="file" class="form-control-file">
			</div>
			<button type="submit" class="btn btn-sm btn-success"><i class="fa fa-upload"></i> Upload transactions</button>
		</form>


		<h4 class="mt-5 font-weight-bold">Upload multiple transaction documents (Single customer KYC) </h4>
		{{-- OLD URL ENDPOINT --}}
		{{-- transferImport/single/save --}}
		<form action="{{url('/')}}/transferImport/new/single/save" method="POST" enctype="multipart/form-data">
			@csrf
			<div class="form-group">
				<label>Select Files</label>
				<input type="file" name="file[]" class="form-control-file" multiple="multiple">
			</div>
			<button type="submit" class="btn btn-sm btn-success mb-5"><i class="fa fa-upload"></i> Upload transactions</button>
		</form>


	</div>
	<div class="col-sm-5">
		<div class="card">
			<div class="card-header">
				<h5 style="font-weight: 600;"> Instructions</h5>
			</div>
			<div class="card-body">
				<p><b>Warning!!</b> This action is final and cannot be undone once it has started.
				</p>
				<ul>
					<li>The file to uploaded should be a single page excel document (.xls)</li>
					<li>For Money Gram transactions the excel collumns should be in the following order
						<b>[Agent Id, Currency Code, Time, Employee Number, Receiver Name, Reference Number, Serial Number, Transaction Type, User Id, Amount, Exchange Rate, Fee, Processing Fee, Sender, User Name, Total Amount]</b>
					</li>
					<li>For Western union transactions the excel collumns should be in the following order
						<b>[Originating Country Code, Originating Currency Code, Terminal ID, Op. ID, Superv. Op. ID, Username, MTCN, Receiver Name, Sender, Destination Country Code, Destination Currency Code, Type, Creation Date, Principal Amount, Charge, Delivery Charge, Message Charge, Promotion Discount, Collect Amount, Exchange Rate, Expected Payout Amount, Total Charges, Total Taxes, Payment Type]</b>
					</li>
					<li>The first row of the excel document should contain titles of the various columns in the data.</li>
					<li>
						<b>Please make sure the document uploaded has been verified and is final</b>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>
@endsection
@section('scripts')
<script type="text/javascript">
	function type(){
		var transfer_provider=$('#transfer_provider option:selected').text();
		console.log(transfer_provider);
		if(transfer_provider=='Western Union'){
			$('#transactionType').html('<div class="form-group"><label>Type of transaction</label><select name="type" class="form-control" id="type"><option>Sending Funds</option><option>Receiving Funds</option></select></div>');
		}
		else{
			$('#transactionType').html('');
		}
	}

	$(document).ready(function() {
		type();
	});
	$(document).on('change', '#transfer_provider', function(){
    	type();
    });

</script>
@endsection