@extends('user.layouts.app')
@section('breadcrumb-first', $breadcrumb->first)
@section('breadcrumb-second', $breadcrumb->second)
@section('content')
@php
$profile_success = '{
	"status": true,
	"data": {
		"full_name": "Jhon Delton",
		"username": "jhondelton",
		"balance": 10000
	},
}';
$profile_failed = '{
	"status": false,
	"data": {
		"message": "API Key salah"
	}
}';
$service_success = '{
	"status": true,
	"data": [
		{
			"id": 1,
			"category": "Instagram Followers",
			"name": "Instagram Followers Server 1",
			"price": 10000,
			"min": 100,
			"max": 500,
			"description": "Instan\r\nCepat",
			"status": 1,
			"refill_support": 1,
			"type": "" // custom_comments, dsb.
		},
	]
}';
$service_failed = '{
	"status": false,
	"data": {
		"message": "API Key salah"
	}
}';
$order_success = '{
	"status": true,
	"data": {
		"id": 123
	}
} ';
$order_failed = '{
	"status": false,
	"data": {
		"message": "Saldo tidak cukup"
	}
}';
$status_success = '{
	"status": true,
	"data": {
		"target": "jhondelton",
		"price": 10000,
		"start_count": 1000,
		"remains": 200,
		"status": "Pending"
	}
}';
$status_failed = '{
	"status": false,
	"data": {
		"message": "Pesanan tidak ditemukan"
	}
}';
$refill_status_success = '{
	"status": true,
	"data": {
		"status": "Success"
	}
}';
$example_class = '&#x3C;?php
function connect($end_point, $post) {
&#x9;$_post = array();
&#x9;if (is_array($post)) {
&#x9;&#x9;foreach ($post as $name =&#x3E; $value) {
&#x9;&#x9;&#x9;$_post[] = $name.&#x27;=&#x27;.urlencode($value);
&#x9;&#x9;}
&#x9;}
&#x9;$ch = curl_init($end_point);
&#x9;curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
&#x9;curl_setopt($ch, CURLOPT_POST, 1);
&#x9;curl_setopt($ch, CURLOPT_HEADER, 0);
&#x9;curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
&#x9;if (is_array($post)) {
&#x9;&#x9;curl_setopt($ch, CURLOPT_POSTFIELDS, join(&#x27;&#x26;&#x27;, $_post));
&#x9;}
&#x9;curl_setopt($ch, CURLOPT_USERAGENT, &#x27;Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0)&#x27;);
&#x9;$result = curl_exec($ch);
&#x9;if (curl_errno($ch) != 0 &#x26;&#x26; empty($result)) {
&#x9;&#x9;$result = false;
&#x9;}
&#x9;curl_close($ch);
&#x9;return $result;
}

$api_url = &#x27;api_url&#x27;; // api url
$post_data = array(
&#x9;&#x27;api_key&#x27; =&#x3E; &#x27;randomkey&#x27;, // api key Anda
);

$api = json_decode(connect($api_url, $post_data));
print(&#x22;&#x3C;pre&#x3E;&#x22;.print_r($api,true).&#x22;&#x3C;/pre&#x3E;&#x22;);';
@endphp
<div class="row">
    <div class="col-lg-12">
        <div class="alert alert-dismissable alert-custom bg-custom border-custom text-white">
            <button type="button" class="close text-white" data-dismiss="alert" aria-hidden="true">×</button>
            <b><i class="fa fa-info-circle"></i> Informasi:</b> Silahkan menghubungi Admin jika mengalami kesulitan dalam penggunaan API.
        </div>
    </div>
	<div class="col-lg-3">
		<div class="card card-custom">
			<div class="card-body">
				<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
					<a class="nav-link active" href="#tab-main" data-toggle="pill" role="tab"><i class="mdi mdi-store-outline font-size-18 mr-2"></i> Utama</a>
					<a class="nav-link" href="#tab-profile" data-toggle="pill" role="tab"><i class="mdi mdi-account-outline  font-size-18 mr-2"></i> Profil</a>
					<a class="nav-link" href="#tab-services" data-toggle="pill" role="tab"><i class="mdi mdi-tag-multiple-outline font-size-18 mr-2"></i> Layanan</a>
					<a class="nav-link" href="#tab-order" data-toggle="pill" role="tab"><i class="mdi mdi-cart-outline font-size-18 mr-2"></i> Pemesanan</a>
					<a class="nav-link" href="#tab-status" data-toggle="pill" role="tab"><i class="mdi mdi-card-search-outline font-size-18 mr-2"></i> Status Pesanan</a>
					<a class="nav-link" href="#tab-refill" data-toggle="pill" role="tab"><i class="mdi mdi-recycle font-size-18 mr-2"></i> Refill</a>
					<a class="nav-link" href="#tab-refill-status" data-toggle="pill" role="tab"><i class="mdi mdi-card-search-outline font-size-18 mr-2"></i> Status Refill</a>
					<a class="nav-link" href="#tab-example-class" data-toggle="pill" role="tab"><i class="mdi mdi-code-tags font-size-18 mr-2"></i> Contoh Class</a>
				</div>
			</div>
		</div>
    </div>
    <div class="col-lg-9">
        <div class="card card-custom">
            <div class="card-body">
				<div class="tab-content">
					<div class="tab-pane fade show active" id="tab-main">
						<div class="table-responsive">
							<p>API (Application Programming Interface) adalah sekumpulan perintah, fungsi, dan protokol yang dapat digunakan oleh programmer saat membangun software, sehingga tercipta interkoneksi yang stabil dan cepat antar sistem.</p>
							<p>API ini merupakan jalur yang dapat digunakan agen / mitra / host untuk bertransaksi dengan mudah, cepat dan stabil. Dapat digunakan untuk melakukan request cek saldo akun, cek harga produk, cek status transaksi, dan membuat transaksi baru.</p>
							
							<p>Koneksi API ini memerlukan sedikit pengetahuan tentang pemrograman komputer. Jika Anda tidak paham tentang bahasa pemrograman sebaiknya tidak menggunakan ini.</p>
							
							<p>Adapun beberapa hal yang perlu diperhatikan untuk koneksi API, antara lain:</p>
							<ul>
								<li>Kami membungkus semua HTTP Request ke dalam format <strong>JSON</strong></li>
								<li>Seluruh HTTP Request Method dikirim sebagai <strong>POST</strong> Request.</li>
								<li>Dapatkan Kunci API Anda di halaman <a href="{{ url('account/settings') }}" class="text-default">Pengaturan Akun</a></li>
								<li>Silahkan Whitelist IP <b>{{ request()->ip() }} </b> di Pengaturan Akun</li>
							</ul>
						</div>
					</div>
					<div class="tab-pane fade" id="tab-profile">
						<h5>1. Endpoint</h5>
						<div class="table-responsive">
							<table class="table table-bordered table-hover mb-0 mt-0">
								<tr>
									<td>{{ url('api/profile') }}</td>
								</tr>
							</table>
						</div>
						<hr />
						<h5>2. Request</h5>
						<div class="table-responsive">
							<table class="table table-borderless table-hover mb-0 mt-0">
								<thead class="thead-light">
									<tr>
										<th>Parameter</th>
										<th>Keterangan</th>
										<th>Tipe Data</th>
										<th>Wajib</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>api_key</td>
										<td>API Key Anda.</td>
										<td><code>string</code></td>
										<td>Ya</td>
									</tr>
								</tbody>
							</table>
						</div>
						<hr />
						<h5>3. Response</h5>
						<div class="table-responsive">
							<table class="table table-bordered mb-0 mt-0">
								<tr>
									<th width="50%">Contoh Respon Sukses</th>
								</tr>
								<tr>
									<td>
										<pre>
											<code class="language-json">
												{!! $profile_success !!}
					                    	</code>
										</pre>
									</td>
								</tr>
								<tr>
									<th width="50%">Contoh Respon Gagal</th>
								</tr>
								<tr>
									<td>
										<pre>
											<code class="language-json">
												{!! $profile_failed !!}
					                    	</code>
										</pre>
									</td>
								</tr>
							</table>
						</div>
					</div>
					<div class="tab-pane fade" id="tab-services">
						<h5>1. Endpoint</h5>
						<div class="table-responsive">
							<table class="table table-bordered table-hover mb-0 mt-0">
								<tr>
									<td>{{ url('api/services') }}</td>
								</tr>
							</table>
						</div>
						<hr />
						<h5>2. Request</h5>
						<div class="table-responsive">
							<table class="table table-borderless table-hover mb-0 mt-0">
								<thead class="thead-light">
									<tr>
										<th>Parameter</th>
										<th>Keterangan</th>
										<th>Tipe Data</th>
										<th>Wajib</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>api_key</td>
										<td>API Key Anda.</td>
										<td><code>string</code></td>
										<td>Ya</td>
									</tr>
								</tbody>
							</table>
						</div>
						<hr />
						<h5>3. Response</h5>
						<div class="table-responsive">
							<table class="table table-bordered">
								<tr>
									<th width="50%">Contoh Respon Sukses</th>
								</tr>
								<tr>
									<td>
										<pre>
											<code class="language-json">
												{!! $service_success !!}
					                    	</code>
										</pre>
									</td>
								</tr>
								<tr>
									<th width="50%">Contoh Respon Gagal</th>
								</tr>
								<tr>
									<td>
										<pre>
											<code class="language-json">
												{!! $service_failed !!}
					                    	</code>
										</pre>
									</td>
								</tr>
							</table>
						</div>
					</div>
					<div class="tab-pane fade" id="tab-order">
						<h5>1. Endpoint</h5>
						<div class="table-responsive">
							<table class="table table-bordered table-hover mb-0 mt-0">
								<tr>
									<td>{{ url('api/order') }}</td>
								</tr>
							</table>
						</div>
						<hr />
						<h5>2. Request</h5>
						<div class="table-responsive">
							<table class="table table-borderless table-hover mb-0 mt-0">
								<thead class="thead-light">
									<tr>
										<th>Parameter</th>
										<th>Keterangan</th>
										<th>Tipe Data</th>
										<th>Wajib</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>api_key</td>
										<td>API Key Anda.</td>
										<td><code>string</code></td>
										<td>Ya</td>
									</tr>
									<tr>
										<td>service</td>
										<td>ID Layanan, dapat dilihat di <a href="{{ url('page/service/list') }}" class="btn btn-sm btn-custom">Daftar Layanan</a>.</td>
										<td><code>integer</code></td>
										<td>Ya</td>
									</tr>
									<tr>
										<td>target</td>
										<td>Input dengan username/link anda.</td>
										<td><code>string</code></td>
										<td>Ya</td>
									</tr>
									<tr>
										<td>quantity</td>
										<td>Input dengan jumlah pesanan anda.</td>
										<td><code>integer</code></td>
										<td>Ya</td>
									</tr>
									<tr>
										<td>custom_comments</td>
										<td>Input dengan Kustom Komentar anda.</td>
										<td><code>string</code></td>
										<td>Tidak</td>
									</tr>
								</tbody>
							</table>
						</div>
						<hr />
						<h5>3. Response</h5>
						<div class="table-responsive">
							<table class="table table-bordered">
								<tr>
									<th width="50%">Contoh Respon Sukses</th>
								</tr>
								<tr>
									<td>
										<pre>
											<code class="language-json">
												{!! $order_success !!}
					                    	</code>
										</pre>
									</td>
								</tr>
								<tr>
									<th width="50%">Contoh Respon Gagal</th>
								</tr>
								<tr>
									<td>
										<pre>
											<code class="language-json">
												{!! $order_failed !!}
					                    	</code>
										</pre>
									</td>
								</tr>
							</table>
						</div>
					</div>
					<div class="tab-pane fade" id="tab-status">
						<h5>1. Endpoint</h5>
						<div class="table-responsive">
							<table class="table table-bordered table-hover mb-0 mt-0">
								<tr>
									<td>{{ url('api/status') }}</td>
								</tr>
							</table>
						</div>
						<hr />
						<h5>2. Request</h5>
						<div class="table-responsive">
							<table class="table table-borderless table-hover mb-0 mt-0">
								<thead class="thead-light">
									<tr>
										<th>Parameter</th>
										<th>Keterangan</th>
										<th>Tipe Data</th>
										<th>Wajib</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>api_key</td>
										<td>API Key Anda.</td>
										<td><code>string</code></td>
										<td>Ya</td>
									</tr>
									<tr>
										<td>id</td>
										<td>ID Pesanan.</td>
										<td><code>integer</code></td>
										<td>Ya</td>
									</tr>
								</tbody>
							</table>
						</div>
						<hr />
						<h5>3. Response</h5>
						<div class="table-responsive">
							<table class="table table-bordered">
								<tr>
									<th width="50%">Contoh Respon Sukses</th>
								</tr>
								<tr>
									<td>
										<pre>
											<code class="language-json">
												{!! $status_success !!}
					                    	</code>
										</pre>
									</td>
								</tr>
								<tr>
									<th width="50%">Contoh Respon Gagal</th>
								</tr>
								<tr>
									<td>
										<pre>
											<code class="language-json">
												{!! $status_failed !!}
					                    	</code>
										</pre>
									</td>
								</tr>
							</table>
						</div>
					</div>
					<div class="tab-pane fade" id="tab-refill">
						<h5>1. Endpoint</h5>
						<div class="table-responsive">
							<table class="table table-bordered table-hover mb-0 mt-0">
								<tr>
									<td>{{ url('api/refill') }}</td>
								</tr>
							</table>
						</div>
						<hr />
						<h5>2. Request</h5>
						<div class="table-responsive">
							<table class="table table-borderless table-hover mb-0 mt-0">
								<thead class="thead-light">
									<tr>
										<th>Parameter</th>
										<th>Keterangan</th>
										<th>Tipe Data</th>
										<th>Wajib</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>api_key</td>
										<td>API Key Anda.</td>
										<td><code>string</code></td>
										<td>Ya</td>
									</tr>
									<tr>
										<td>id</td>
										<td>ID Pesanan.</td>
										<td><code>integer</code></td>
										<td>Ya</td>
									</tr>
								</tbody>
							</table>
						</div>
						<hr />
						<h5>3. Response</h5>
						<div class="table-responsive">
							<table class="table table-bordered">
								<tr>
									<th width="50%">Contoh Respon Sukses</th>
								</tr>
								<tr>
									<td>
										<pre>
											<code class="language-json">
												{!! $order_success !!}
					                    	</code>
										</pre>
									</td>
								</tr>
								<tr>
									<th width="50%">Contoh Respon Gagal</th>
								</tr>
								<tr>
									<td>
										<pre>
											<code class="language-json">
												{!! $service_failed !!}
					                    	</code>
										</pre>
									</td>
								</tr>
							</table>
						</div>
					</div>
					<div class="tab-pane fade" id="tab-refill-status">
						<h5>1. Endpoint</h5>
						<div class="table-responsive">
							<table class="table table-bordered table-hover mb-0 mt-0">
								<tr>
									<td>{{ url('api/refill_status') }}</td>
								</tr>
							</table>
						</div>
						<hr />
						<h5>2. Request</h5>
						<div class="table-responsive">
							<table class="table table-borderless table-hover mb-0 mt-0">
								<thead class="thead-light">
									<tr>
										<th>Parameter</th>
										<th>Keterangan</th>
										<th>Tipe Data</th>
										<th>Wajib</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>api_key</td>
										<td>API Key Anda.</td>
										<td><code>string</code></td>
										<td>Ya</td>
									</tr>
									<tr>
										<td>id</td>
										<td>ID Refill.</td>
										<td><code>integer</code></td>
										<td>Ya</td>
									</tr>
								</tbody>
							</table>
						</div>
						<hr />
						<h5>3. Response</h5>
						<div class="table-responsive">
							<table class="table table-bordered">
								<tr>
									<th width="50%">Contoh Respon Sukses</th>
								</tr>
								<tr>
									<td>
										<pre>
											<code class="language-json">
												{!! $refill_status_success !!}
					                    	</code>
										</pre>
									</td>
								</tr>
								<tr>
									<th width="50%">Contoh Respon Gagal</th>
								</tr>
								<tr>
									<td>
										<pre>
											<code class="language-json">
												{!! $service_failed !!}
					                    	</code>
										</pre>
									</td>
								</tr>
							</table>
						</div>
					</div>
					<div class="tab-pane fade" id="tab-example-class">
						<pre>
							<code class="language-php">
								{!! $example_class !!}
							</code>
						</pre>
					</div>
				</div>
            </div>
        </div>
    </div>
</div>
@endsection