@extends('frontend.layouts.frontend')

@section('metaTitle', $page->metaTitle)
@section('metaDescription', $page->metaDescription)
@section('metaKeywords', $page->metaKeywords)

@section('content')
	<div class="default-section pt-xs-30 pb-xs-0">
		<div class="container">

			<div class="row transaction-wrapper">
				<div class="col-md-7 col-12 order-md-1 order-2">

					@include('frontend.section.process-tab')

					{{-- LOGIN --}}
					<div class="default-white-box login-register-box pt-xs-20 pb-xs-20">
						<h3 class="default-title mb-50 mb-xs-20">Masuk atau Daftar untuk melanjutkan pembiayaan Anda</h3>

						<div class="auth-box">

							<ul class="nav nav-tabs" role="tablist">
								<li class="nav-item">
									<a class="nav-link active" id="login-tab" data-toggle="tab" href="#auth-login" role="tab" aria-controls="login" aria-selected="true">Masuk</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" id="register-tab" data-toggle="tab" href="#auth-register" role="tab" aria-controls="register" aria-selected="false">Daftar</a>
								</li>
							</ul>


							<div class="tab-content pt-xs-25">
								<div class="tab-pane fade show active" id="auth-login" role="tabpanel" aria-labelledby="login-tab">
									<div class="text-center mb-30">
										<strong>Assalamualaikum,</strong> <br>
										Masuk dengan nomor handphone untuk melanjutkan <br>
										pembiayaan syariah melalui <strong>Duha Syariah</strong>
									</div>

									@if($errors->any())
										<p class="error-msg">{{$errors->first()}}</p>
									@endif

									<form action="{{ route('transaction.loginSubmit', ['transactionNumber' => $transaction->transactionNumber]) }}" method="POST" enctype="multipart/form-data">
										<div class="form-group">
											<label for="phone">Nomor Handphone</label>
											<div class="input-group-icon input-group">
												<div class="input-group-prepend">
													<span class="input-group-text">+62</span>
												</div>
												<input type="tel" class="form-control" id="phone" name="phone" placeholder="Masukkan nomor handphone..." required>
												<img class="icon" src="{!! url('/') !!}/assets/frontend/images/phone-ico.png" alt="phone">
											</div>
										</div>

										<div class="form-group">
											<label for="password">PIN</label>
											<div class="input-group-icon">
												<input type="password" class="form-control" id="password" name="password" placeholder="Masukkan PIN..." required>
												<img class="icon" src="{!! url('/') !!}/assets/frontend/images/pin-ico.png" alt="phone">
											</div>
										</div>

										<button type="submit" class="btn btn-main btn-full">Masuk</button>
									</form>


								</div>
								<div class="tab-pane fade" id="auth-register" role="tabpanel" aria-labelledby="register-tab">

									<div class="text-center"><strong>Assalamualaikum,</strong></div>
									<div class="text-center mb-20">
										Daftar akun <strong>Duha Madani</strong> lewat aplikasi!
									</div>

									<p class="mb-10">Dengan melanjutkan proses pendaftaran, Anda menyatakan bahwa Anda</p>

									<ul class="list-check">
										<li class="item">
											Berusia 18-60 tahun
										</li>
										<li class="item">
											Berpenghasilan tetap bersih setelah pajak min Rp 3 juta/bulan
										</li>
										<li class="item">
											Berdomisili di Jabodetabek dan Bandung
										</li>
										<li class="item">
											Bekerja pada perusahaan pemberi kerja yang bekerja sama dengan Duha Syariah
										</li>
									</ul>

									<hr>

									<div class="text-center mb-20">
										<span class="color-main">HARAP!</span><br>
										Siapkan hal-hal berikut ini untuk<br>
										melanjutkan pendaftaran:
									</div>


									<div class="default-inline-wrapper with-icon mb-10">
										<div class="image-section">
											<img class="icon" src="{!! url('/') !!}/assets/frontend/images/profile-ktp-ico.png" alt="ktp">
										</div>
										<div class="info-section">
											<p class="btm-small">e-KTP</p>
										</div>
									</div>

									<div class="default-inline-wrapper with-icon mb-10 flex-nowrap">
										<div class="image-section">
											<img class="icon" src="{!! url('/') !!}/assets/frontend/images/profile-job-ico.png" alt="ktp">
										</div>
										<div class="info-section">
											<p class="btm-small">Slip gaji satu bulan terakhir atau surat keterangan gaji.</p>
										</div>
									</div>

									<div class="default-inline-wrapper with-icon mb-20">
										<div class="image-section">
											<img class="icon" src="{!! url('/') !!}/assets/frontend/images/profile-banking-ico.png" alt="ktp">
										</div>
										<div class="info-section">
											<p class="btm-small">Rekening Tabungan (Rekening Koran)</p>
										</div>
									</div>
									<div class="text-center">
										<a href="{{ \App\Service\ComponentService::GetPlayStoreUrl() }}" target="_blank">
											<img src="{{ asset('assets/frontend/images/play-store-icon.png') }}" alt="" style="width: auto; height: 60px;">
										</a>
										<br><br>
										<a href="{{ \App\Service\ComponentService::GetAppStoreUrl() }}" target="_blank">
											<img src="{{ asset('assets/frontend/images/app-store-icon.png') }}" alt="" style="width: auto; height: 60px;">
										</a>
									</div>
									{{-- <a href="{{ \App\Service\ComponentService::GetPlayStoreUrl() }}" class="btn btn-main btn-full">Daftar di Aplikasi</a> --}}
								</div>
							</div>
						</div>

						<div class="text-center">
							<a class="link-back" href="{!! $transaction->merchant->returnUrl . '?orderNumber=' . $transaction->orderNumber !!}">Kembali ke {{ $transaction->merchant->name }}</a>
						</div>

					</div>
				</div>

				<div class="col-md-5 col-12 order-md-2 order-1">
					@include('frontend.section.loan-product-details')
				</div>
			</div>
		</div>
	</div>
@endsection