@extends('layouts.layout')
@section('body_class', 'nav-md')
@section('css')
	<style>
		.control-label {
			font-weight: bold !important;
			font-size: 13px;
		}
	</style>
@endsection()
@section('body_content')
<div class="container body">
    <div class="main_container">
        @include('includes.sidebar')
        <div class="right_col" role="main">
            <div class="page-title">
                <div class="title_left">
                    <h3><i class="fa fa-file-text"></i> Kurs Form</h3>
                </div>
                <div class="clearfix"></div>
            </div>
            
            <div class="row">
                <div class="col-xs-12">
                    <ol class="breadcrumb">
                        <li><a href="{{ url('/dashboard') }}">Home</a></li>
                        <li><a href="{{ url('/kurs') }}">Kurs</a></li>
                        <li class="active">Config</li>
                    </ol>
                </div>
            </div>
			
			<div class="col-xs-12">
				<div class="alert alert-info" style="display: none;"><center><b>UPDATE RATE</b></center></div>
				<div class="x_panel" style="padding: 0 !important; margin-top: 10px;">
					<div class="x_content">
						<div class="col-xs-12 col-md-12">
							<div style="border: 2px solid #888; padding: 15px; padding-top: 0;">
								<h4 style="padding-bottom: 7px; border-bottom: 1px solid #000;">
									<div class="row">
										<div class="col-sm-12 col-md-12">
											Config Beli Digital - Spread
										</div>
									</div>
								</h4>
								<div class="text-left" style="padding: 5px;">
									<form class="form-horizontal">
										<div class="form-group">
											<label class="col-sm-4 col-xs-12 control-label">Spread Beli Reguler</label>
											<div class="col-sm-2 col-xs-12">
												<select class="form-control" id="type_beli_reguler">
													<option value="nominal">Rp</option>
													<!-- <option value="percentage">%</option> -->
												</select>
											</div>
											<div class="col-sm-6 col-xs-12">
												<input class="form-control form-input-harga" type="text" id="selisih_harga_lakuemas_reguler" name="selisih_harga_lakuemas_reguler" value="0" />
											</div>
										</div>

										<div class="form-group">
											<label class="col-sm-4 col-xs-12 control-label">Spread Beli Elite</label>
											<div class="col-sm-2 col-xs-12">
												<select class="form-control" id="type_beli_elite">
													<option value="nominal">Rp</option>
													<!-- <option value="percentage">%</option> -->
												</select>
											</div>
											<div class="col-sm-6 col-xs-12">
												<input class="form-control form-input-harga" type="text" id="selisih_harga_lakuemas_elite" name="selisih_harga_lakuemas_elite" value="0" />
											</div>
										</div>

										<div class="form-group">
											<label class="col-sm-4 col-xs-12 control-label">Spread Redeem Elite</label>
											<div class="col-sm-2 col-xs-12">
												<select class="form-control" id="type_redeem_elite">
													<option value="nominal">Rp</option>
													<!-- <option value="percentage">%</option> -->
												</select>
											</div>
											<div class="col-sm-6 col-xs-12">
												<input class="form-control form-input-harga" type="text" id="selisih_harga_redeem_voucher_elite" name="selisih_harga_redeem_voucher_elite" value="0" />
											</div>
										</div>

										<div class="form-group">
											<label class="col-sm-4 col-xs-12 control-label">Maksimal selisih dengan xauidrg</label>
											<div class="col-sm-2 col-xs-12">
												<select class="form-control" id="type_redeem_elite">
													<option value="nominal">Rp</option>
													<!-- <option value="percentage">%</option> -->
												</select>
											</div>
											<div class="col-sm-6 col-xs-12">
												<input class="form-control form-input-harga" type="text" id="maksimal_selisih_xauidrg" name="maksimal_selisih_xauidrg" value="0" />
											</div>
										</div>

										<div class="form-group">
											<div class="col-sm-offset-6 col-sm-9">
												<div class="loading hidden"><i class="fa fa fa-spinner fa-pulse"></i></div>
												<div class="submit">
													<button type="button" class="btn btn-primary" onclick="submitNewConfig()"><i class="fa fa-save"
															aria-hidden="true"></i> Update</button>
												</div>
											</div>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
        </div>
        @include('includes.footer')
    </div>
</div>

@endsection

@section('scripts')
	<script type="text/javascript">
		
		$('#selisih_harga_lakuemas_reguler').val(formatRibuan('' + '{{ $selisih_harga_lakuemas_reguler }}'));
		$('#selisih_harga_lakuemas_elite').val(formatRibuan('' + '{{ $selisih_harga_lakuemas_elite }}'));
		$('#selisih_harga_redeem_voucher_elite').val(formatRibuan('' + '{{ $selisih_harga_redeem_voucher_elite }}'));
		$('#maksimal_selisih_xauidrg').val(formatRibuan('' + '{{ $maksimal_selisih_xauidrg }}'));
		
		$(document).ready(function() {
			const input_harga_perubahan = document.getElementsByClassName('form-input-harga');

			for (let i = 0; i < input_harga_perubahan.length; i++) {
				input_harga_perubahan[i].addEventListener('input', function (e) {
					// Hapus semua karakter non-angka
					let value_0 = e.target.value.replace(/\D/g, '');
					let value = value_0;

					if (value) {
						// Format dengan separator ribuan (titik)
						value = value.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
					}

					e.target.value = value;
				});
			}
		});
		
		function formatRibuan(angka) {
			angka = angka.replace(/\D/g, ''); // hanya angka
			return angka.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
		}
		
		function getNilaiAsli(value) {
			return value.replace(/\./g, '');
		}
		
		function submitNewConfig() {
			$.ajax({
				url: '{{ url("kurs/v1/config/save") }}',
				method: "POST",
				headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
				data: {
					'selisih_harga_lakuemas_reguler' : getNilaiAsli($('#selisih_harga_lakuemas_reguler').val()),
					'selisih_harga_lakuemas_elite' : getNilaiAsli($('#selisih_harga_lakuemas_elite').val()),
					'selisih_harga_redeem_voucher_elite' : getNilaiAsli($('#selisih_harga_redeem_voucher_elite').val()),
					'maksimal_selisih_xauidrg' : getNilaiAsli($('#maksimal_selisih_xauidrg').val())
				},
				success: function(response) {
					$('#cover-spin').fadeIn();
					setTimeout(function() {
						location.reload();
					}, 1500);
					
				},
				error: function(response) {
					var response = response.responseJSON;
					alert(response.error);
				}
			});
		}
		
	</script>
@endsection