<?php $__env->startSection('breadcrumb-first', $breadcrumb->first); ?>
<?php $__env->startSection('breadcrumb-second', $breadcrumb->second); ?>
<?php $__env->startSection('content'); ?>
<div class="row">
	<div class="col-lg-8">
		<div class="card card-custom">
			<div class="card-body">
				<form method="post" action="<?php echo e(request()->url()); ?>" id="main_form">
                    <?php echo csrf_field(); ?>
                    <div class="form-group">
						<label>Kategori <text class="text-danger">*</text></label>
						<select class="form-control" name="category_id" id="category_id" data-toggle="select2">
							<option value="" selected>Pilih...</option>
							<?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
								<option value="<?php echo e($item->id); ?>" <?php echo e(old('category_id') ? (old('category_id') == $item->id ? 'selected' : '') : ''); ?>><?php echo e($item->name); ?></option>
							<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
						</select>
						<small class="text-danger category_id_error"></small>
					</div>
                    <div class="form-group">
                        <label>Layanan <text class="text-danger">*</text></label>
                        <select class="form-control" name="service_id" id="service_id" data-toggle="select2">
                            <option value="" selected>Pilih Kategori...</option>
                        </select>
						<small class="text-danger service_id_error"></small>
					</div>
					<input type="hidden" id="rate">
					<div class="row hidden" id="order-info">
						<div class="form-group col-lg-4">
							<label>Harga/K <span class="text-danger hidden" id="custom_price">(*Khusus)</span></label>
							<span class="form-control autonumeric-currency" id="price"></span>
						</div>
						<div class="form-group col-lg-4">
							<label>Minimal order.</label>
							<span class="form-control autonumeric-quantity" id="min"></span>
						</div>
						<div class="form-group col-lg-4">
							<label>Maksimal order.</label>
							<span class="form-control autonumeric-quantity" id="max"></span>
						</div>
						<div class="form-group col-lg-12">
							<label>Deskripsi Layanan</label>
							<textarea class="form-control" id="description" rows="5" readonly>Deskripsi Layanan.</textarea>
						</div>
					</div>
                    <div class="form-group">
						<div class="d-flex justify-content-between">
                            <label class="form-label">Target <text class="text-danger">*</text></label>
                            <a class="text-dark" style="text-align: right;" href="javascript:;" data-toggle="modal" data-target="#example_target">Contoh Target Pesanan</a>
                        </div>
						<input type="text" class="form-control" name="target" value="<?php echo e(old('target')); ?>" placeholder="Username/Link">
						<small class="text-danger target_error"></small>
					</div>
					<div class="form-group hidden" id="input_custom_comments">
						<label>Kustom Komentar <text class="text-danger">*</text></label>
						<textarea class="form-control" name="custom_comments" rows="5" id="custom_comments" placeholder=""></textarea>
						<small class="text-danger custom_comments_error"></small>
					</div>
					<div class="form-group">
						<label>Jumlah <text class="text-danger">*</text></label>
						<input type="text" class="form-control autonumeric-quantity" name="quantity" id="quantity" value="<?php echo e(old('quantity') ?? '# '); ?>">
						<small class="text-danger quantity_error"></small>
					</div>
					<div class="row">
						<div class="form-group col-lg-6">
							<label>Total Harga</label>
							<span class="form-control autonumeric-currency" id="total-price">Rp</span>
						</div>
						<div class="form-group col-lg-6">
							<label>Saldo Saya</label>
							<span class="form-control autonumeric-currency" id="max"><?php echo e(Auth::user()->balance); ?></span>
						</div>
					</div>
					<div class="form-group">
						<div class="custom-control custom-checkbox">
							<input type="checkbox" class="custom-control-input" id="approval" name="approval" value="1"> 
							<label class="custom-control-label font-weight-normal" for="approval">
								Saya telah membaca <a href="#information" class="text-primary">Informasi</a>
							</label>
						</div>
						<small class="text-danger approval_error"></small>
					</div>
                    <div class="button-items d-grid gap-2">
						<div class="row">
							<div class="col-6">
								<button type="reset" class="btn btn-danger btn btn-block waves-effect waves-light">Reset</button>
							</div>
							<div class="col-6">
								<button type="submit" class="btn btn-custom btn btn-block waves-effect waves-light">Submit</button>
							</div>
							<div class="col-12">
								<button class="btn btn-custom btn btn-block waves-effect waves-light" disabled><span class="spinner-grow spinner-grow-sm"></span> Mohon Tunggu</button>
							</div>
						</div>
                    </div>
				</form>
			</div>
		</div>
	</div>
	<div class="col-lg-4" id="information">
		<div class="card card-custom">
			<div class="card-body">
				<?php echo website_config('other')->order_info; ?>

			</div>
		</div>
	</div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="example_target">
	<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title"><i class="fa fa-info-circle fa-fw"></i> Contoh Target Pesanan</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<b>Instagram</b>
				<ul>
					<li>Instagram Followers, Story, Live Video, Profile Visits : Username akun Instagram tanpa tanda @ // Contoh : <span class="text-danger">my.username</span></li>
					<li>Instagram Likes, Views, Comments, Impressions, Saves, TV : Link postingan akun Instagram // Contoh : <span class="text-danger">https://www.instagram.com/p/xxxxxx</span></li>
				</ul>

				<b>Youtube</b>
				<ul>
					<li>Youtube Likes, Views, Shares, Komentar : Link video youtube // Contoh : <span class="text-danger">https://www.youtube.com/watch?v=xxxxxxx</span></li>
					<li>Youtube Live Steam : Link video live youtube // Contoh : <span class="text-danger">https://www.youtube.com/watch?v=xxxxxx</span></li>
					<li>Youtube Subscribers : Link channel youtube // Contoh : <span class="text-danger">https://www.youtube.com/channel/xxxxxx</span></li>
				</ul>

				<b>Facebook</b>
				<ul>
					<li>Facebook Page Likes, Page Followers : Link halaman atau fanspage facebook // Contoh : <span class="text-danger">https://www.facebook.com/xxxxxx</span></li>
					<li>Facebook Post Likes, Post Video : Link postingan facebook // Contoh : <span class="text-danger">https://www.facebook.com/xxxxxx/posts/123</span></li>
					<li>Facebook Followers, Friends : Link profile facebook // Contoh : <span class="text-danger">https://www.facebook.com/xxxxxx</span></li>
					<li>Facebook Group Members : Link group facebook // Contoh : <span class="text-danger">https://www.facebook.com/groups/xxxxxx</span></li>
				</ul>

				<b>Twitter</b>
				<ul>
					<li>Twitter Followers : Username akun twitter tanpa tanda @ // Contoh : <span class="text-danger">TelkomCare</span></li>
					<li>Twitter Retweet, Favorite : Link tweet atau postingan twitter // Contoh : <span class="text-danger">https://twitter.com/xxxxxx/status/xxxxxx</span></li>
				</ul>

				<b>Tik Tok</b>
				<ul>
					<li>Tik Tok Followers : Link profile tik tok atau username tanpa tanda @ // Contoh : <span class="text-danger">https://vt.tiktok.com/xxxxxx</span></li>
					<li>Tik Tok Likes / Views : Link video tik tok // Contoh : <span class="text-danger">https://vt.tiktok.com/xxxxxx</span></li>
				</ul>

				<b>Shopee</b>
				<ul>
					<li>Shopee Followers : Username akun shopee // Contoh : <span class="text-danger">my.username</span></li>
					<li>Shopee Product Likes : Link produk shopee // Contoh : <span class="text-danger">https://shopee.co.id/xxxxxx</span></li>
				</ul>

				<b>Tokopedia</b>
				<ul>
					<li>Tokopedia Followers : Username akun tokopedia atau link profile // Contoh : <span class="text-danger">https://www.tokopedia.com/xxxxxx</span></li>
					<li>Tokopedia Wishlist atau Favorite : Link produk tokopedia // Contoh : <span class="text-danger">https://www.tokopedia.com/xxxxxx/xxxxxx</span></li>
				</ul>

				<b>Website Traffic</b>
				<ul>
					<li>Website Traffic : Link website // Contoh : <span class="text-danger">https://website.com/page/site/pertanyaan-umum</span></li>
				</ul>
			</div>
			<div class="modal-footer bg-whitesmoke br">
				<button type="button" class="btn btn-light" data-dismiss="modal">Tutup</button>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(document).ready(function() {
		$('#main_form').on('reset', function(e) {
			$('html,body').animate({
				scrollTop: $("#alert").offset().top
			}, 'slow');
			$('#main_form')[0].reset();
			$('#category_id').val('').trigger('change');
		});
		$('#category_id').on('change', function() {
			var category_id = $('#category_id').val();
			$.ajax({
				type: "GET",
				url: "<?php echo e(url('ajax/service/list')); ?>",
				data: "category_id="+ category_id,
				dataType: "json",
				success: function(result) {
					reset_form();
					$('#service_id').html(result.data);
				}, error: function() {
					swal.fire("Gagal!", "Terjadi kesalahan.", "error");
				}
			});
		});
		$('#service_id').on('change', function() {
			var service_id = $('#service_id').val();
			$.ajax({
				type: "GET",
				url: "<?php echo e(url('ajax/service/detail')); ?>",
				data: "service_id=" + service_id,
				dataType: "json",
				success: function(result) {
					$('#order-info').removeClass('hidden');
					if (result.service.custom_price == 1) {
						$('#custom_price').removeClass('hidden');
					} else {
						$('#custom_price').addClass('hidden');
					}
					if (result.service.type == 'custom_comments') {
						$('#quantity').prop('readonly', true);
						$('#input_custom_comments').removeClass('hidden');
					} else {
						$('#quantity').prop('readonly', false);
						$('#input_custom_comments').addClass('hidden');
					}
					$('#rate').val(result.service.rate);
					$('#price').html(result.service.price);
					$('#min').html(result.service.min);
					$('#max').html(result.service.max);
					$('#description').html(result.service.description);
				}, error: function() {
					swal.fire("Gagal!", "Terjadi kesalahan.", "error");
				}
			});
		});
		function numeric(string) {
			return string.trim().replace('# ', '').split('.').join('');
		}
		$('.autonumeric-currency').autoNumeric('init', {
			mDec  : '0',
			aSep  : '.',
			aDec  : ',',
			aSign : 'Rp ',
		});
		$('.autonumeric-quantity').autoNumeric('init', {
			mDec  : '0',
			aSep  : '.',
			aDec  : ',',
			aSign : '# ',
		});
		$('#custom_comments').on('keyup', function() {
			var quantity = $('#custom_comments').val().split("\n").length, rate = $('#rate').val();
			$('#quantity').val(quantity).autoNumeric('update');
			$('#total-price').html(quantity * rate).autoNumeric('update');
		});
		$("#quantity").keyup(function() { 
			var quantity = $('#quantity').val(), rate = $('#rate').val()
			var total = (numeric(quantity) * rate);
			$('#total-price').html(total.toFixed(0)).autoNumeric('update');
		});
		function reset_form() {
			$('#order-info').addClass('hidden');
			$('#custom_price').addClass('hidden');
			$('#input_custom_comments').addClass('hidden');
		}
	});
	$(function() {
		$("#main_form").on('submit', function(e) {
			e.preventDefault();
			$.ajax({
				url: $(this).attr('action'),
				method: $(this).attr('method'),
				data: new FormData(this),
				processData: false,
				dataType: 'json',
				contentType: false,
				beforeSend: function() {
					reset_button(0);
					$(document).find('small.text-danger').text('');
					$(document).find('input').removeClass('is-invalid');
				},
				success: function(data) {
					reset_button(1);
					if (data.status == false) {
						if (data.type == 'validation') {
							$.each(data.message, function(prefix, val) {
								$("input[name="+prefix+"]").addClass('is-invalid');
								$('small.'+prefix+'_error').text(val[0]);
							});
						}
						if (data.type == 'alert') {
							$('html,body').animate({
								scrollTop: $("#alert-danger").offset().top
							}, 'slow');
							$('#alert-danger-message').html("<b><i class=\"fa fa-times-circle\"></i> Gagal:</b> "+data.message);
                            $('#alert-danger').removeClass('hidden');
                            setTimeout(() => {
                                $('#alert-danger').addClass('hidden');
                            }, 5000);
						}
					} else {
                        $('#main_form')[0].reset();
						$('#category_id').val('').trigger('change');
						$('html,body').animate({
							scrollTop: $("#alert-success").offset().top
						}, 'slow');
						$('#alert-success-message').html("<b><i class=\"fa fa-check-circle\"></i> Berhasil:</b> "+data.message);
                        $('#alert-success').removeClass('hidden');
                        setTimeout(() => {
                            $('#alert-success').addClass('hidden');
                        }, 30000);
					}
				},
				error:function() {
					$('html,body').animate({
						scrollTop: $("#alert-danger").offset().top
					}, 'slow');
					$('#alert-danger-message').html("<b><i class=\"fa fa-times-circle\"></i> Gagal:</b> Terjadi kesalahan.");
                    $('#alert-danger').removeClass('hidden');
                    setTimeout(() => {
                        $('#alert-danger').addClass('hidden');
                    }, 5000);
				},
			});
		});
	});
	function reset_button(value = 0) {
		if (value == 0) {
			$('button[type="submit"]').attr('disabled', 'true');
			$('button[type="submit"]').text('');
			$('button[type="submit"]').append('<span class=\"spinner-grow spinner-grow-sm mb-1\"></span> Mohon tunggu...');
			$('button[type="reset"]').hide();
		} else {
			$('button[type="submit"]').removeAttr('disabled');
			$('button[type="submit"]').removeAttr('span');
			$('button[type="submit"]').text('Submit');
			$('button[type="reset"]').show();
		}
	}
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('user.layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/glor5228/public_html/resources/views/user/order/new.blade.php ENDPATH**/ ?>