@extends('layouts.layout')
@section('css')
    <style type="text/css">
        .alert-msg {
            font-size: 12px;
            font-style: italic;
            color: #f00;
            margin-top:5px;
        }

        .label-new {
        	font-weight: bold;
        }

        .title-desc {
        	font-weight: bold;
        	font-size: 15px;
        	color: #1565c0;
        }
    </style>
@endsection

@section('body_class', 'nav-md')
@section('body_content')
	<div class="container body">
	    <div class="main_container">
	        @include('includes.sidebar')
	        <div class="right_col" role="main">	
	        	<div class="row">
	                <div class="col-xs-12">
	                    <ol class="breadcrumb">
	                        <li><a href="{{ route('dashboard') }}">Home</a></li>
	                        <li><a href="{{ route('notification_merchant_tx_new') }}">Merchant New</a></li>      
	                        <li><a href="{{ url('notification/merchant_new/' . $settlement->toko->id) }}">{{ $settlement->toko->nama }}</a></li>
	                        <li><a href="{{ url('notification/merchant_new/' . $settlement->toko->id . '/' . $settlement->id) }}">{{ $settlement->code }}</a></li>
	                        <li>Add Transaction</li>
	                    </ol>
	                </div>
	        		<div class="col-md-6">
						<div class="container">
							<div style="border:2px dashed #fbc02d; padding:10px; border-radius: 5%;">
								<div class="list-group">			
									<div class="text-left p-3">
										<div class="x-content">
											<div class="card">
												<div class="card-body">
													<form method="POST" action="{{ url('notification/merchant_new/confirm-transaction-save') }}" class="form-horizontal" id="form_confirm_transaction" enctype="multipart/form-data">

    													<input type="hidden" name="_token" value="{{ csrf_token() }}" />
														<input class="form-control" id="token" name="cust_token" type="hidden" value="{{ $token }}">
														<input type="hidden" name="id_settlement" value="{{ $settlement->id }}">

														<div class="form-group">
															<div class="text-center">
																<span><h4> {{ $temporary_data_trx->customer->name }} </h4></span>
															</div>
															<div class="text-center">
																<span> Email : {{ $temporary_data_trx->customer->email }} </span>
															</div>
															<div class="text-center">
																<span>HP : {{ $temporary_data_trx->customer->handphone }}</span>
															</div>         

														</div>

														<div class="mt-30">
															<label class="title-desc">Detail Barang</label>
														</div>
														<div class="row form-group marginbottom-0">
															<label for="total" class="col-5 col-sm-5 col-md-5 padding-t-2 label-new"><font size="2">Berat Perhiasan (Gram)</font></label>
															<div class="col-7 col-sm-7 col-md-7 padding-r-2">
																<div class="text-right card-body pt-1 pb-1">
																	<span>{{ $temporary_data_trx->berat_barang }}</span>
																</div>
															</div>
														</div>
														<div class="row form-group marginbottom-0">
															<label for="total" class="col-5 col-sm-5 col-md-5 padding-t-2 label-new"><font size="2">Kadar Emas (%)</font></label>
															<div class="col-7 col-sm-7 col-md-7 padding-r-2">
																<div class="text-right card-body pt-1 pb-1">
																	<b><span>{{ $temporary_data_trx->kadar_emas_barang }}</span></b>
																</div>
															</div>
														</div>
														<div class="row form-group marginbottom-0">
															<label for="total" class="col-5 col-sm-5 col-md-5 padding-t-2 label-new"><font size="2">Harga Total (Rp)</font></label>
															<div class="col-7 col-sm-7 col-md-7 padding-r-2">
																<div class="text-right card-body pt-1 pb-1">
																	<span>{{ number_format($temporary_data_trx->harga_kotor) }}</span>
																</div>
															</div>
														</div>

														<div class="mt-30">
															<label class="title-desc">Detail Pembayaran</label>
														</div>
														<div class="row form-group marginbottom-0">
															<label for="nominal_cash" class="col-5 col-sm-5 col-md-5 padding-t-2 label-new"><font size="2">Pembayaran Cash</font></label>
															<div class="col-7 col-sm-7 col-md-7 padding-r-2">
																<input class="form-control text-right" id="nominal_cash" name="nominal_cash" type="text" autocomplete="off" min="0" value="0" onkeyup="calculate()" />
															</div>
														</div>
														<div class="row form-group marginbottom-2">
															<label for="total" class="col-5 col-sm-5 col-md-5 padding-t-2 label-new"><font size="2">Sisa Bayar (Rp)</font></label>
															<div class="col-7 col-sm-7 col-md-7 padding-r-2">
																<div class="text-right card-body pt-1 pb-1">
																	<span id="sisa_bayar">{{ number_format($temporary_data_trx->harga_kotor) }}</span>
																</div>
															</div>
														</div>
														<div class="row form-group marginbottom-0">
															<label for="total" class="col-5 col-sm-5 col-md-5 padding-t-2 label-new"><font size="2">Ongkos (Rp)</font></label>
															<div class="col-7 col-sm-7 col-md-7 padding-r-2">
																<div class="text-right card-body pt-1 pb-1">
																	<span id="harga_ongkos">{{ number_format($temporary_data_trx->ongkos) }}</span>
																</div>
															</div>
														</div>
														<div class="row form-group marginbottom-0">
															<label for="total" class="col-5 col-sm-5 col-md-5 padding-t-2 label-new">
																<font size="2">Tax ({{ $temporary_data_trx->tax_percent }}%)</font>
															</label>
															<div class="col-7 col-sm-7 col-md-7 padding-r-2">
																<div class="text-right card-body pt-1 pb-1">
																	<span id="harga_tax">{{ number_format($temporary_data_trx->tax_nominal) }}</span>
																</div>
															</div>
														</div>
														<div class="row form-group marginbottom-0">
															<label for="total" class="col-5 col-sm-5 col-md-5 padding-t-2 label-new"><font size="2">Harga Bersih (Rp)</font></label>
															<div class="col-7 col-sm-7 col-md-7 padding-r-2">
																<div class="text-right card-body pt-1 pb-1">
																	<span id="harga_tanpa_pajak">{{ number_format($temporary_data_trx->harga_bersih_exclude_tax) }}</span>
																</div>
															</div>
														</div>
														<div class="row form-group marginbottom-0">
															<div class="col-md-12 marginbottom-0"><hr class="marginbottom-0"></div>
															<label for="total" class="col-5 col-sm-5 col-md-5 padding-t-2 label-new label-new"><font size="2">Total Bayar (Rp)</font></label>
															<div class="col-7 col-sm-7 col-md-7 padding-r-2">
																<div class="text-right card-body pt-1 pb-1">
																	<b><span id="total_bayar">{{ number_format($temporary_data_trx->harga_kotor) }}</span></b>
																</div>
															</div>
														</div>
														<div class="row form-group marginbottom-0">
															<label for="total" class="col-5 col-sm-5 col-md-5 label-new label-new"><font size="2">Total Emas Tukaran</font></label>
															<div class="col-7 col-sm-7 col-md-7 padding-r-2">
																<div class="text-right card-body pt-1 pb-1">
																	<b><span id="emas_tukaran">{{ $temporary_data_trx->emas_tukar }}</span> Gram</b>
																</div>
															</div>
														</div>

														<div class="mt-30">
															<label class="title-desc">Metode Pembayaran</label>
														</div>
														<div class="row form-group marginbottom-0">
															<label for="cara_bayar" class="col-5 col-sm-5 col-md-5 padding-t-5 label-new"><font size="2">Cara bayar *</font></label>
															<div class="col-7 col-sm-7 col-md-7">
																<select class="form-control" id="payment_method" name="payment_method" onchange="metode_pembayaran()">
																	@foreach($metode_pembayaran_customer_merchant as $key => $item)
								                                		<option value="{{ $item->id }}">{{ $item->metode_pembayaran }}</option>
								                                	@endforeach
																</select>
															</div>
														</div>
														<div id="no_edc" class="row form-group marginbottom-0">
															<label for="cara_bayar" class="col-5 col-sm-5 col-md-5 padding-t-5 label-new"><font size="2">Nomor Transaksi EDC *</font></label>
															<div class="col-7 col-sm-7 col-md-7">
																<input class="form-control" id="edc_transaction_number" name="edc_transaction_number" type="text" placeholder="Nomor Transaksi EDC" autocomplete="off" required="required" oninvalid="this.setCustomValidity('Nomor EDC harus diisi')" oninput="setCustomValidity('')">
															</div>
														</div>
														<div id="keterangan" class="row form-group marginbottom-0">
															<label for="keterangan" class="col-5 col-sm-5 col-md-5 padding-t-5 label-new"><font size="2">Keterangan *</font></label>
															<div class="col-7 col-sm-7 col-md-7">
																<textarea id="keterangan" name="keterangan" class="form-control" required="required" oninvalid="this.setCustomValidity('Keterangan harus diisi')" oninput="setCustomValidity('')" placeholder="Masukan keterangan"></textarea>
															</div>
														</div>
														<div id="foto_invoice" class="row form-group marginbottom-0" style="display: ;">
															<label for="keterangan" class="col-12 padding-t-5 label-new"><font size="2">Foto Invoice</font></label>
															<div class="col-12">
																<div class="pt-1 pb-1">
																	<div class="input-group input-group-sm pt-0 pb-1 padding-r-2">
																		<input type="file" id="invoice_photo_input" name="invoice_photo_input" class="invoice_photo_input">
																		{{-- <button type="button" class="btn btn-secondary"><i class="fa fa-camera"></i></button> --}}
																	</div>
																</div>
															</div>
														</div>
														<div id="preview_invoice" class="row form-group marginbottom-0" style="display: none">
															<label for="keterangan" class="col-12 padding-t-5 label-new"><font size="2">Preview</font></label>
															<div class="col-12">
																<img class="invoice_photo" width="100%">
															</div>
															<div class="col-12 col-md-12">
																<div class="text-center card-body pt-10 pb-1">
																	<button type="button" id="resetFile" class="btn btn-sm btn-secondary" style="font-size: 13px;" onclick="$('#preview_invoice').fadeOut()"><i class="fa fa-trash"></i> Batal</button>
																</div>
															</div>
														</div>

														@if(auth()->user()->email == env('MERCHANT_SUPER_USER'))
															<div class="mt-30">
																<label class="title-desc">Pembelian Toko </label>
															</div>
															<div class="row form-group marginbottom-0">
																<div class="col-12">
																	<div class="pt-1 pb-1">
																		<div class="input-group input-group-sm pt-0 pb-1 padding-r-2">
																			<select class="form-control" id="id_toko" name="id_toko" required>
																				<option value=''>Pilih Toko</option>
																				@foreach($stores as $key => $item)
											                                		<option value="{{ $item->id }}">{{ $item->nama }}</option>
											                                	@endforeach
																			</select>
																		</div>
																	</div>
																</div>
															</div>
														@endif

														<div class="form-group">
															<div class="alert-placeholder"></div>
														</div>

							                            @if (Session::has('success'))
							                                <br>
							                                <div class="alert alert-success text-center" role="alert" style="margin-bottom: 0 !important;">
							                                    {!! Session::get("success") !!}
							                                </div>
							                            @endif
							                            @if (Session::has('oops'))
							                                <br>
							                                <div class="alert alert-danger text-center" role="alert" style="margin-bottom: 0 !important;">
							                                    {!! Session::get("oops") !!}
							                                </div>
							                            @endif

									                    @if ($errors->any())
							                                @foreach ($errors->all() as $error)
								                                <div class="alert alert-danger text-center" role="alert" style="margin: 5px !important;">{{ $error }}</div>
							                                @endforeach
									                    @endif

														<div class="form-group">
															<div class="text-center loading" style="display: none"><i class="fa fa fa-spinner fa-pulse" style="color:#ddc355;"></i></div>
															<div class="submit">
											                    <button id="postButton" type="submit" class="btn btn-primary btn-lg btn-block"><i class="fa fa-check" aria-hidden="true"></i> Confirm</button>
											                </div>
														</div>
														
													</form>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
@endsection

@section('scripts')
	<script src="https://cdnjs.cloudflare.com/ajax/libs/autonumeric/4.1.0/autoNumeric.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/decimal.js/10.0.1/decimal.min.js"></script>
	<script src="{{ asset('/js/transaction/confirm_transaction_new.min.js') }}"></script>
	<script type="text/javascript">
	    let pembayaran_cash;
	    new AutoNumeric('#nominal_cash', {
	        decimalPlaces : 0,
	        minimumValue : 0,
	        maximumValue : {{ $temporary_data_trx->harga_kotor }},
	        selectNumberOnly : true
	    });

	    $(".invoice_photo_input").on('change', function() {        
	        $('#preview_invoice').fadeIn();
	        if (this.files && this.files[0]) {
	            var reader = new FileReader();
	            reader.onload = function (e) { $('.invoice_photo').attr('src', e.target.result); };
	            reader.readAsDataURL(this.files[0]);
	        }
	    });

	    $('#resetFile').on('click', function(e) {
	        var $el = $('#invoice_photo_input');
	        $el.wrap('<form>').closest('form').get(0).reset();
	        $el.unwrap();
	    });

	    function calculate() {
	    	pembayaran_cash = parseNumberCustom($('#nominal_cash').val());
	    	let mid_price = parseInt('{{ $temporary_data_trx->mid_price }}');
	    	if(isNaN(pembayaran_cash)) {
	    		pembayaran_cash = 0;
	    	}

	    	/** Sisa bayar */
		    let total_bayar = parseInt('{{ $temporary_data_trx->harga_kotor }}');
		    let sisa_bayar = total_bayar-pembayaran_cash;
		    $('#sisa_bayar').html(currencyFormat(sisa_bayar));

	    	/** Ongkos */
		    let sisa_ongkos = calculate_ongkos();
	    	let harga_bersih_include_tax = parseInt('{{ $temporary_data_trx->harga_bersih_include_tax }}');
	    	if(harga_bersih_include_tax > sisa_bayar) {
	    		harga_bersih_include_tax = sisa_bayar;
	    	}

	    	/** Tax */
	    	let tax_percent = '{{ $temporary_data_trx->tax_percent }}';
	    	let harga_bersih_exclude_tax = Math.floor(harga_bersih_include_tax/(1+(tax_percent/100)));
	    	$('#harga_tanpa_pajak').html(currencyFormat(harga_bersih_exclude_tax));
	    	let tax_nominal = Math.ceil(tax_percent/100*harga_bersih_exclude_tax);
	    	$('#harga_tax').html(currencyFormat(tax_nominal));
	    	$('#total_bayar').html(currencyFormat(sisa_bayar));

	    	/** Emas Tukaran */
	    	let emas_tukaran = harga_bersih_exclude_tax/mid_price;
	    	emas_tukaran = Math.floor(emas_tukaran* 10000) / 10000;
	    	$('#emas_tukaran').html(emas_tukaran);

	    	if(emas_tukaran == 0) {
	    		$('#form_confirm_transaction').attr('disabled', true);
	    		$('#postButton').attr('disabled', true);
	    		$('#postButton').addClass('disabled-button');
	    	}
	    	else {
	    		$('#form_confirm_transaction').attr('disabled', false);
	    		$('#postButton').attr('disabled', false);
	    		$('#postButton').removeClass('disabled-button');
	    	}
	    }

	    function calculate_ongkos() {
		    let ongkos = parseInt('{{ $temporary_data_trx->ongkos }}');
		    let sisa_ongkos = ongkos-pembayaran_cash;
		    if(sisa_ongkos >= 0) {
		    	$('#harga_ongkos').html(currencyFormat(sisa_ongkos));
		    }
		    else {
		    	$('#harga_ongkos').html(currencyFormat(0));
		    }
		    return sisa_ongkos;
	    }

	    function metode_pembayaran() {
	    	let metode = $('#payment_method').val();
	    	if(metode == 2) {
	    		$('#edc_form').hide();
	    		$('#edc_transaction_number').attr('disabled', true);
	    	}
	    	else {
	    		$('#edc_form').show();
	    		$('#edc_transaction_number').attr('disabled', false);
	    	}
	    }

	    function parseNumberCustom(number_string) {
		    let new_number1 = parseInt(number_string.indexOf(',') >= 4 ? number_string.split(',')[0] : number_string.replace(/[^0-9\.]/g, ''));
		    return new_number1;
		}

	    function currencyFormat(num) {
			return num.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
		}
	</script>
@endsection