@extends('user.layouts.app')
@section('breadcrumb-first', $breadcrumb->first)
@section('breadcrumb-second', $breadcrumb->second)
@section('content')
<div class="row">
	<div class="col-lg-3">
		<div class="card card-custom">
			<div class="card-body">
				<div class="nav flex-column nav-pills" role="tablist" aria-orientation="vertical">
					<a class="nav-link active" id="profile-tab" data-toggle="pill" href="#profile" role="tab" aria-controls="profile" aria-selected="true">
						<i class="mdi mdi-account-outline font-size-18 mr-2"></i> Profil
					</a>
					<a class="nav-link" id="password-tab" data-toggle="pill" href="#password" role="tab" aria-controls="password" aria-selected="true">
						<i class="mdi mdi-account-key-outline font-size-18 mr-2"></i> Kata Sandi
					</a>
					<a class="nav-link" id="notification-tab" data-toggle="pill" href="#notification" role="tab" aria-controls="notification" aria-selected="true">
						<i class="mdi mdi-bell-outline font-size-18 mr-2"></i> Notifikasi
					</a>
					<a class="nav-link" id="api-tab" data-toggle="pill" href="#api" role="tab" aria-controls="api" aria-selected="true">
						<i class="mdi mdi-api font-size-18 mr-2"></i> API
					</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" id="password">
						<form method="post" action="{{ request()->url() }}" id="main_form">
							@method('patch')
							@csrf
							<div class="form-group">
								<label>Nama Lengkap <text class="text-danger">*</text></label>
								<input type="text" class="form-control" name="full_name" id="full_name" value="{{ old('full_name') ?? Auth::user()->full_name }}">
								<small id="full_name"></small>
								</div>
							<div class="form-group">
								<label>Password Baru</label>
								<input type="password" class="form-control @error('new_password') is-invalid @enderror" name="new_password" id="new_password" placeholder="Kosongkan jika tidak dibutuhkan">
								<small id="new_password"></small>
							</div>
							<div class="form-group">
								<label>Konfirmasi Password Baru</label>
								<input type="password" class="form-control" name="confirm_new_password" id="confirm_new_password" placeholder="Kosongkan jika tidak dibutuhkan">
								<small id="confirm_new_password"></small>
							</div>
							<div class="form-group">
								<label>Password <text class="text-danger">*</text></label>
								<input type="password" class="form-control" name="password" id="password">
								<small id="password"></small>
							</div>
							<div class="button-items d-grid gap-2 hidden" id="process-button">
								<button type="button" class="btn btn-primary btn-block waves-effect waves-light mt-0" disabled>Mohon Tunggu...</button>
							</div>
							<div class="row" id="main-button">
								<div class="col-6">
									<div class="button-items d-grid gap-2">
										<button type="reset" class="btn btn-secondary btn-block waves-effect waves-light mt-0"><i class="mdi mdi-refresh"></i> Reset</button>
									</div>
								</div>
								<div class="col-6">
									<div class="button-items d-grid gap-2">
										<button type="submit" class="btn btn-custom btn-block waves-effect waves-light mt-0"><i class="mdi mdi-send-outline"></i> Submit</button>
									</div>
								</div>
							</div>
						</form>
					</div>
					<div class="tab-pane fade" id="notification" role="tabpanel" aria-labelledby="notification-tab">
						<h6 class="font-weight-medium">Pemesanan</h6>
						<div class="custom-control custom-switch mb-0">
							<input type="checkbox" class="custom-control-input" id="notification-order" name="notification-order" value="{{ $notification->order == '1' ? '0' : '1' }}" onclick="setNotification(this, '{{ url('account/settings/notification/order') }}')" @if ($notification->order == '1') checked @endif>
							<label class="custom-control-label font-weight-normal" for="notification-order">Informasi pembuatan atau pembaruan pesanan anda.</label>
						</div>
						<h6 class="font-weight-medium mt-2">Deposit</h6>
						<div class="custom-control custom-switch mb-0">
							<input type="checkbox" class="custom-control-input" id="notification-deposit" name="notification-deposit" value="{{ $notification->deposit == '1' ? '0' : '1' }}" onclick="setNotification(this, '{{ url('account/settings/notification/deposit') }}')" @if ($notification->deposit == '1') checked @endif>
							<label class="custom-control-label font-weight-normal" for="notification-deposit">Informasi pembuatan atau pembaruan deposit anda.</label>
						</div>
						<h6 class="font-weight-medium mt-2">Tiket</h6>
						<div class="custom-control custom-switch mb-0">
							<input type="checkbox" class="custom-control-input" id="notification-ticket" name="notification-ticket" value="{{ $notification->ticket == '1' ? '0' : '1' }}" onclick="setNotification(this, '{{ url('account/settings/notification/ticket') }}')" @if ($notification->ticket == '1') checked @endif>
							<label class="custom-control-label font-weight-normal" for="notification-ticket">Informasi pembuatan atau pembaruan tiket anda.</label>
						</div>
					</div>
					<div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="profile-tab">
						<div class="form-group mb-3">
							<label>Nama Lengkap</label>
							<input type="text" class="form-control" value="{{ old('full_name') ?? Auth::user()->full_name }}" style="background-color: white;" readonly>
						</div>
						<div class="form-group mb-3">
							<label>Username</label>
							<input type="text" class="form-control" value="{{ old('username') ?? Auth::user()->username }}" style="background-color: white;" readonly>
						</div>
						<div class="form-group mb-3">
							<label>Email</label>
							<input type="text" class="form-control" value="{{ old('full_name') ?? Auth::user()->email }}" style="background-color: white;" readonly>
						</div>
						<div class="form-group mb-3">
							<label>No. Whatsapp</label>
							<input type="text" class="form-control" value="{{ old('full_name') ?? Auth::user()->phone_number }}" style="background-color: white;" readonly>
						</div>
						<div class="form-group mb-3">
							<label>Tanggal Bergabung</label>
							<input type="text" class="form-control" value="{{ \Carbon\Carbon::parse(Auth::user()->created_at)->translatedFormat('d F Y') }}" style="background-color: white;" readonly>
						</div>
						<div class="form-group mb-3">
							<label>Saldo Tersisa</label>
							<input type="text" class="form-control" value="Rp {{ number_format(Auth::user()->balance,0,',','.') }}" style="background-color: white;" readonly>
						</div>
					</div>
					<div class="tab-pane fade" id="api" role="tabpanel" aria-labelledby="api-tab">
						<form method="post" action="{{ url('account/settings/whitelist-ip') }}" id="api_whitelist_ip_form">
							@csrf
							<div class="form-group mb-3">
								<label>Kunci API</label>
								<div class="input-group">
									<input type="text" class="form-control" name="api_key" value="{{ old('api_key') ?? Auth::user()->api_key }}" id="api_key" readonly>
									<div class="input-group-append">
										<button class="btn btn-dark" type="button" onclick="copy('api_key')"><i class="fa fa-copy fa-fw"></i> Salin</button>
									</div>
                                    <div class="input-group-append">
										<a href="javascript:;" onclick="createAPIKey()" class="btn btn-custom" title="Buat ulang"><i class="fa fa-random"></i> Buat Ulang</a>
									</div>
									<small id="api_key"></small>
								</div>
							</div>
							<div class="form-group mb-3">
								<label class="form-label">Whitelist IP <text class="text-danger">*</text> <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="right" title="* Gunakan koma (,) sebagai pemisah apabila IP lebih dari satu"></i></label>
								<input class="form-control" type="text" name="whitelist_ip" id="whitelist_ip" value="{{ old('whitelist_ip') ?? Auth::user()->api_whitelist_ip }}">
								<small id="whitelist_ip"></small>
							</div>
							<div class="form-group mb-3">
								<label>Password <text class="text-danger">*</text></label>
								<input type="password" class="form-control" name="password" id="password">
								<small id="password"></small>
							</div>
							<div class="button-items d-grid gap-2 hidden" id="process-button">
								<button type="button" class="btn btn-primary btn-block waves-effect waves-light mt-0" disabled>Mohon Tunggu...</button>
							</div>
							<div class="row" id="main-button">
								<div class="col-6">
									<div class="button-items d-grid gap-2">
										<button type="reset" class="btn btn-secondary btn-block waves-effect waves-light mt-0"><i class="mdi mdi-refresh"></i> Reset</button>
									</div>
								</div>
								<div class="col-6">
									<div class="button-items d-grid gap-2">
										<button type="submit" class="btn btn-custom btn-block waves-effect waves-light mt-0"><i class="mdi mdi-send-outline"></i> Submit</button>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
            </div>
        </div>
    </div>
</div>
<script>
	$("#api_whitelist_ip_form, #main_form").on('submit', function(element) {
		element.preventDefault();
		var id = $(this).attr('id')
		$.ajax({
			url: $(this).attr('action'),
			method: $(this).attr('method'),
			data: new FormData(this),
			processData: false,
			dataType: 'json',
			contentType: false,
			beforeSend: function() {
				$('#preloader').fadeIn("slow");
				$('button:submit').attr('disabled', 'true');
				$('#process-button').removeClass('hidden');
				$('#main-button').addClass('hidden');
				$(document).find('input, select').removeClass('is-invalid').removeClass('is-valid');
			},
			success: function(response) {
				$('#preloader').fadeOut("slow");
				$('button:submit').removeAttr('disabled');
				$('#process-button').addClass('hidden');
				$('#main-button').removeClass('hidden');
				if (response.status == false) {
					if (response.type == 'validation') {
						$.each(response.message, function(key, value) {
							$('#'+id+' input#'+key+'').addClass('is-invalid');
							$('#'+id+' small#'+key+'').addClass('invalid-feedback').html(value[0]);
						});
						showAlert('danger', 'Periksa Input', 3000);
					} 
					if (response.type == 'alert') {
						showAlert(
							response.hasOwnProperty('alert') ? response.alert : 'danger', 
							response.message, 
							response.hasOwnProperty('timeout') ? response.timeout : 5000
						);
					}
				} else {
					$("input[name=password], input[name=new_password], input[name=confirm_new_password]").val('');
					showAlert('success', '<b><i class="fa fa-a-circle"></i> Berhasil:</b> '+response.message, 15000, 'col-lg-12');
				}
			},
			error:function(response) {
				$('#preloader').fadeOut("slow");
				$('button:submit').removeAttr('disabled');
				$('#process-button').addClass('hidden');
				$('#main-button').removeClass('hidden');
				showAlert('danger', 'Terjadi Kesalahan', 5000);
			},
		});
	});
	function setNotification(elt, url) {
		$.ajax({
			url: url+'/'+$(elt).attr('value'),
			type: 'GET',
			error: function() {
				alertify.error('<i class="fa fa-times"></i> Terjadi kesalahan.')
			},
			success: function(result) {
				result = JSON.parse(result);
				if (result.result == false) {
					alertify.error('<i class="fa fa-times"></i> Terjadi kesalahan.')
				} else {
					if ($(elt).attr('value') == '1') {
						$("input[id="+$(elt).attr('id')+"]").val('0');
					} else {
						$("input[id="+$(elt).attr('id')+"]").val('1');
					}
					alertify.success('<span class="text-white"><i class="fa fa-check"></i> '+result.message+'</span>');
				}
			}
		});
	}
	function createAPIKey() {
		$.ajax({
			type: "GET",
			url: "{{ url('ajax/create_api_key') }}",
			success: function(data) {
				$('#api_key').val(data);
			}
		});
	}
</script>
@endsection