@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;
        }
    </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" class="form-horizontal" action="{{ url('notification/merchant_new/create-transaction-save') }}">
													<input name="cust_id" type="hidden"  value="{{ encrypt($customer->id) }}">
													<input name="id_settlement" type="hidden"  value="{{ $settlement->id }}">
    												<input type="hidden" name="_token" value="{{ csrf_token() }}" />

													<div class="row form-group marginbottom-0">
														<label for="total" class="col-5 col-sm-5 col-md-5 label-new"><font size="2">Nama Customer</font></label>
														<div class="col-7 col-sm-7 col-md-7">
															<div class="text-left pt-1 pb-1">
																<span>{{ $customer->name }}</span>
															</div>
														</div>
													</div>
													<div class="row form-group marginbottom-0">
														<label for="total" class="col-5 col-md-5 col-sm-5 label-new"><font size="2">Status NPWP</font></label>
														<div class="col-7 col-md-7">
															<div class="text-left pt-1 pb-1">
																<span>@if($customer->is_npwp_approved == 1) Verified @else Not Verified @endif</span>
															</div>
														</div>
													</div>
													<div class="row form-group marginbottom-0">
														<label for="total" class="col-5 col-md-5 label-new"><font size="2">Tax Nominal</font></label>
														<div class="col-7 col-md-7">
															<div class="text-left pt-1 pb-1">
																<span>@if($customer->is_npwp_approved == 1) 0,45% @else 0,9% @endif</span>
															</div>
														</div>
													</div>
													<hr>
													<p>
														<center>
															<h4 style="margin: 20px;">~ Kalkulasi Harga ~</h4>
														</center>
													</p>
													<div class="row form-group marginbottom-0">
														<label for="total" class="col-5 col-md-5 label-new"><font size="2">Harga Beli LEI (Rp)</font></label>
														<div class="col-7 col-md-7">
															<input class="form-control" id="harga_beli" name="harga_beli" type="text" placeholder="Harga Beli LEI" autocomplete="off" value="" />
														</div>
													</div>
													<div class="row form-group marginbottom-0">
														<label for="total" class="col-5 col-md-5 label-new"><font size="2">TGP *</font></label>
														<div class="col-7 col-md-7">
															<input class="form-control" id="tgp" name="tgp" type="text" placeholder="Harga TGP" autocomplete="off" value="" />
														</div>
													</div>
													<div class="row form-group marginbottom-0">
														<label for="total" class="col-5 col-md-5 label-new"><font size="2">Berat Barang (Gram)*</font></label>
														<div class="col-7 col-md-7">
															<input class="form-control" id="berat_barang" name="berat_barang" type="tel" placeholder="Contoh : 1.5 gram" autocomplete="off" value="" />
														</div>
													</div>
													<div class="row form-group marginbottom-0">
														<label for="total" class="col-5 col-md-5 label-new"><font size="2">Kadar (%)* :</font></label>
														<div class="col-7 col-md-7">
															<input class="form-control" id="kadar" name="kadar" type="text" placeholder="Contoh : 99.99 %" maxlength="3" autocomplete="off" value="" />
														</div>
													</div>

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

													<div class="form-group">
														<div class="loading text-center" style="display: none"><i class="fa fa fa-spinner fa-pulse" style="color:#ddc355;"></i></div>
														<div class="submit">
										                    <button type="submit" class="btn btn-primary btn-block"><i class="fa fa-check" aria-hidden="true"></i> Process</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/create_transaction_new.min.js') }}"></script>
<script type="text/javascript">
	$('#kadar').keyup(function() {
		if(parseInt($(this).val()) >= 100) {
			$(this).val(99.99);
			$('#kadarWarning').html('Kadar maksimal 99.99 %');
			$('#kadarWarning').fadeIn();
		}
		else {
			$('#kadarWarning').hide();
		}
	});
</script>
@endsection