@extends('user.layouts.app')
@section('breadcrumb-first', $breadcrumb->first)
@section('breadcrumb-second', $breadcrumb->second)
@section('content')
<div class="row">
    <div class="col-lg-4 col-md-6">
        <a href="{{ url('/deposit/history') }}" style="text-decoration:none;">
            <div class="card stats-widget m-b-30">
                <div class="card-body">
                    <div class="float-left">
                        <span class="label label-warning mb-3">Saldo</span>
                        <h5 class="mt-2">
                            Rp {{ number_format(Auth::user()->balance,0,',','.') }}
                        </h5>
                    </div>
                    <div class="float-right">
                        <div class="avatar-xs">
                            <span class="avatar-title rounded-circle bg-custom">
                                <i class="mdi mdi-account-cash-outline"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <div class="col-lg-4 col-md-6">
        <a href="{{ url('/deposit/new') }}" style="text-decoration:none;">
            <div class="card stats-widget m-b-30">
                <div class="card-body">
                    <div class="float-left">
                        <span class="label label-primary mb-3">Tambah Deposit</span>
                        <h5 class="mt-2">
                            Klik Disini
                        </h5>
                    </div>
                    <div class="float-right">
                        <div class="avatar-xs">
                            <span class="avatar-title rounded-circle bg-custom">
                                <i class="mdi mdi-credit-card-plus-outline"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <div class="col-lg-4 col-md-6">
        <a href="{{ url('/order/history') }}" style="text-decoration:none;">
            <div class="card stats-widget m-b-30">
                <div class="card-body">
                    <div class="float-left">
                        <span class="label label-success mb-3">Riwayat Order</span>
                        <h5 class="mt-2">
                            Klik Disini
                        </h5>
                    </div>
                    <div class="float-right">
                        <div class="avatar-xs">
                            <span class="avatar-title rounded-circle bg-custom">
                                <i class="mdi mdi-history"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
<div class="row">
<div class="col-6 col-lg-3 col-md-4">
<button type="button" class="btn btn-custom bg-gradient w-100 mb-3" style="pointer-events: none;" onclick="filterCategory(`Semua`)">
<i class="fas fa-asterisk me-1"></i>
Semua
</button>
</div>
<div class="col-6 col-lg-3 col-md-4">
<button type="button" class="btn btn-custom bg-gradient w-100 mb-3" style="pointer-events: none;" onclick="filterCategory(`Facebook`)">
<i class="fab fa-facebook-square me-1"></i>
Facebook
</button>
</div>
<div class="col-6 col-lg-3 col-md-4">
<button type="button" class="btn btn-custom bg-gradient w-100 mb-3" style="pointer-events: none;" onclick="filterCategory(`Instagram`)">
<i class="fab fa-instagram me-1"></i>
Instagram
</button>
</div>
<div class="col-6 col-lg-3 col-md-4">
<button type="button" class="btn btn-custom bg-gradient w-100 mb-3" style="pointer-events: none;" onclick="filterCategory(`Youtube`)">
<i class="fab fa-youtube-square me-1"></i>
Youtube
</button>
</div>
<div class="col-6 col-lg-3 col-md-4">
<button type="button" class="btn btn-custom bg-gradient w-100 mb-3" style="pointer-events: none;" onclick="filterCategory(`Twitter`)">
<i class="fab fa-twitter me-1"></i>
Twitter
</button>
</div>
<div class="col-6 col-lg-3 col-md-4">
<button type="button" class="btn btn-custom bg-gradient w-100 mb-3" style="pointer-events: none;" onclick="filterCategory(`Tiktok`)">
<i class="fas fa-music me-1"></i>
Tiktok
</button>
</div>
<div class="col-6 col-lg-3 col-md-4">
<button type="button" class="btn btn-custom bg-gradient w-100 mb-3" style="pointer-events: none;" onclick="filterCategory(`Telegram`)">
<i class="fab fa-telegram me-1"></i>
Telegram
</button>
</div>
<div class="col-6 col-lg-3 col-md-4">
<button type="button" class="btn btn-custom bg-gradient w-100 mb-3" style="pointer-events: none;" onclick="filterCategory(`Lainnya`)">
<i class="fas fa-child me-1"></i>
Lainnya
</button>
</div>
</div>
<div class="row">
	<div class="col-lg-8">
		<div class="card card-custom">
			<div class="card-body">
				<form method="post" action="{{ request()->url() }}" id="input_form">
					@csrf
					<div class="form-group">
						<label>Pilih Tipe <text class="text-danger">*</text></label>
						<select class="custom-select" name="type" id="type">
							<option value="general" selected>Layanan SMM Panel</option>
							<option value="favorite">Layanan Buzzer Indonesia</option>
						</select>
                        <small id="type"></small>
					</div>
					<div class="form-group">
						<label>Kategori <text class="text-danger">*</text></label>
						<select class="form-control" name="category" id="category" data-toggle="select2">
							<option value="" selected>Pilih...</option>
							@foreach($categories as $item)
								<option value="{{ $item->category_id }}" {{ old('category_id') ? (old('category_id') == $item->category_id ? 'selected' : '') : ''  }}>{{ $item->category_name }}</option>
							@endforeach
						</select>
                        <small id="category"></small>
					</div>
					<div class="form-group">
						<label>Layanan <text class="text-danger">*</text></label>
						<select class="form-control" name="service" id="service" data-toggle="select2">
							<option value="" selected>Pilih Kategori...</option>
						</select>
                        <small id="service"></small>
					</div>
					<input type="hidden" id="rate">
					<div id="component" class="hidden">
						<div class="row" id="order-info">
							<div class="form-group col-4">
								<label>Harga/1000 <span class="text-danger hidden" id="custom_price">(*Khusus)</span></label>
								<span class="form-control autonumeric-currency" id="price">Rp 0</span>
							</div>
							<div class="form-group col-4">
								<label>Minimal order.</label>
								<span class="form-control autonumeric-quantity" id="min"># 0</span>
							</div>
							<div class="form-group col-4">
								<label>Maksimal order.</label>
								<span class="form-control autonumeric-quantity" id="max"># 0</span>
							</div>
							<div class="form-group col-12">
								<label>Waktu Rata Rata.</label>
								<span class="form-control autonumeric-quantity" id="avarage-time"># 0</span>
							</div>
							<div class="form-group col-lg-12">
								<label>Deskripsi Layanan</label>
								<textarea class="form-control" id="description" rows="5" readonly>-</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 href="javascript:;" onclick="modal('', '', '', '#example_target')" class="text-custom">
									<i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title="Contoh Target Pesanan"></i> Contoh Target Pesanan
								</a>
							</div>
							<input type="text" class="form-control" name="target" value="{{ old('target') }}" placeholder="Username/Link">
							<small id="target"></small>
						</div>
						<div class="form-group hidden" id="input_username">
							<label>Username/Catatan <text class="text-danger">*</text></label>
							<input type="text" class="form-control" name="username" id="username" value="{{ old('username') ?? '' }}" placeholder="Username dari pemilik komentar">
							<small id="username"></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 id="custom_comments"></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="{{ old('quantity') ?? '# ' }}">
							<small id="quantity"></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="last_balance">{{ 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>
								<small id="approval"></small>
							</div>
						</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>
					</div>
				</form>
			</div>
		</div>
	</div>
	<div class="col-lg-4" id="information">
		<div class="card card-custom">
			<div class="card-body">
				{!! 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">
				<h5>- Instagram</h5>
				<ul>
					<li><b>Instagram Followers, Story, Live Video, Profile Visits</b> : <span class="text-custom">username</span></li>
					<li><b>Instagram Likes, Views, Comments, Impressions, Saves, TV</b> : <span class="text-custom">https://www.instagram.com/p/one</span></li>
				</ul>

				<h5>- Youtube</h5>
				<ul>
					<li><b>Youtube Likes, Views, Shares, Komentar</b> : <span class="text-custom">https://www.youtube.com/watch?v=video-one</span></li>
					<li><b>Youtube Live Steam</b> : <span class="text-custom">https://www.youtube.com/watch?v=video-one</span></li>
					<li><b>Youtube Subscribers</b> : <span class="text-custom">https://www.youtube.com/channel/username</span></li>
				</ul>

				<h5>- Facebook</h5>
				<ul>
					<li><b>Facebook Page Likes, Page Followers</b> : <span class="text-custom">https://www.facebook.com/fanspage</span></li>
					<li><b>Facebook Post Likes, Post Video</b> : <span class="text-custom">https://www.facebook.com/username/posts/one</span></li>
					<li><b>Facebook Followers, Friends</b> : <span class="text-custom">https://www.facebook.com/username</span></li>
					<li><b>Facebook Group Members</b> : <span class="text-custom">https://www.facebook.com/groups/group-one</span></li>
				</ul>

				<h5>- Twitter</h5>
				<ul>
					<li><b>Twitter Followers</b> : <span class="text-custom">username</span></li>
					<li><b>Twitter Retweet, Favorite</b> : <span class="text-custom">https://twitter.com/username/status/tweet-one</span></li>
				</ul>

				<h5>- Tik Tok</h5>
				<ul>
					<li><b>Tik Tok Followers</b> : <span class="text-custom">https://vt.tiktok.com/username</span></li>
					<li><b>Tik Tok Likes / Views</b> : <span class="text-custom">https://vt.tiktok.com/video-one</span></li>
				</ul>

				<h5>- Shopee</h5>
				<ul>
					<li><b>Shopee Followers</b> : <span class="text-custom">username</span></li>
					<li><b>Shopee Product Likes</b> : <span class="text-custom">https://shopee.co.id/product-one</span></li>
				</ul>

				<h5>- Tokopedia</h5>
				<ul>
					<li><b>Tokopedia Followers</b> : <span class="text-custom">https://www.tokopedia.com/username</span></li>
					<li><b>Tokopedia Wishlist, Favorite</b> : <span class="text-custom">https://www.tokopedia.com/username/product-one</span></li>
				</ul>

				<h5>- Website Traffic</h5>
				<ul>
					<li><b>Website Traffic</b> : <span class="text-custom">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">
    function filterCategory(category) {
        $.ajax({
            type: "GET",
            url: "{{ url('ajax/service/category') }}",
            data: { category: category },
            dataType: "json",
            success: function(data) {
                console.log(data.categories);
                $('#category').html(data.categories);
                reset_form();
            }
        });
    }
	$(document).ready(function() {
		$('#type').on('change', function() {
			if ($('#type').val() == 'general') categories = {!! $categories !!}
			if ($('#type').val() == 'favorite') categories = {!! $categories_favorite !!}
			option = '<option value="" selected>Pilih...</option>';
			$.each(categories, function(key, value) {
				option += '<option value="'+ value.category_id +'">'+ value.category_name +'</option>'
			});
			$("#category").html(option);
            $('#service').html('<option value="">Pilih Kategori...</option>');
        });
		$('#category').on('change', function() {
			$.ajax({
				type: "GET",
				url: "{{ url('ajax/service/list') }}",
				data: {
					type    : $('#type').val(),
					category: $('#category').val(),
				},
				dataType: "json",
				beforeSend: function() {
					reset_form();
				},
				success: function(result) {
					$('#service').html(result.data);
				}, error: function() {
					swal.fire("Gagal!", "Terjadi kesalahan.", "error");
				}
			});
		});
		$('#service').on('change', function() {
			var service = $('#service').val();
			$.ajax({
				type: "GET",
				url: "{{ url('ajax/service/detail') }}",
				data: "service=" + service,
				dataType: "json",
				success: function(response) {
					$('#component').removeClass('hidden');
					if (response.service.custom_price == 1) {
						$('#custom_price').removeClass('hidden');
					} else {
						$('#custom_price').addClass('hidden');
					}
					if (response.service.type == 'Custom Comments') {
						$('#quantity').prop('readonly', true);
						$('#input_custom_comments').removeClass('hidden');
					} else {
						$('#quantity').prop('readonly', false);
						$('#input_custom_comments').addClass('hidden');
					}
					if (response.service.type == 'Comment Likes') {
						$('#input_username').removeClass('hidden');
					} else {
						$('#input_username').addClass('hidden');
					}
					$('#rate').val(response.service.rate);
					$('#price').html(response.service.price).autoNumeric('update');
					$('#min').html(response.service.min).autoNumeric('update');
					$('#max').html(response.service.max).autoNumeric('update');
					$('#description').html(response.service.description);
					$('#avarage-time').html(response.service.avarage_time);
				}, error: function() {
					swal.fire("Gagal!", "Terjadi kesalahan.", "error");
				}
			});
		});
		$('#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');
		});
		$('#input_form').on('reset', function(e) {
			$('html,body').animate({
				scrollTop: $("#alert").offset().top
			}, 'slow');
            reset_form();
			$('#input_form')[0].reset();
            $('#category').val('').trigger('change.select2');
            $('#type').val('general').trigger('change.select2');
            $('#service').html('<option value="">Pilih Kategori...</option>');
		});
		$("#input_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() {
                    $('#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) {
                                $('input#'+key+', select#'+key+'').addClass('is-invalid');
                                $('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
                            );
                        }
                        $("input, select").each(function() {
                            if (this.classList.contains('is-invalid') == false) {
                                this.classList.add('is-valid');
                            }
                        });
                    } else {
						reset_form();
                        $('#input_form')[0].reset();
						$('#last_balance').html(response.last_balance).autoNumeric('update');
						$('#category_id').val('').trigger('change');
                        showAlert('success', response.message, 30000, 'col-lg-12');
					}
				},
				error:function(response) {
                    $('#preloader').fadeOut("slow");
                    $('button:submit').removeAttr('disabled');
                    $('#process-button').addClass('hidden');
                    $('#main-button').removeClass('hidden');
                    if (response.status == 429) {
                        var t;
                        Swal.fire({
                            title: "Gagal!", 
                            icon: "error",
                            html: "Coba lagi dalam <strong></strong> detik.",
                            timer: response.getResponseHeader('retry-after') * 1000,
                            onBeforeOpen: function () {
                                Swal.showLoading(), (t = setInterval(function () {
                                    Swal.getContent().querySelector("strong").textContent = (Swal.getTimerLeft() / 1000).toFixed();
                                }, 1000));
                            },
                            onClose: function () {
                                clearInterval(t);
                            },
                        }).then(function (t) {
                            t.dismiss === Swal.DismissReason.timer;
                        });
                    } else {
                        swal.fire("Gagal!", 'Terjadi Kesalahan', "error");
                    }
                },
			});
		});
		function reset_form() {
			$('#component').addClass('hidden');
			$('#description').html('-');
			$('#total_price').html('Rp 0');
			$('#min, #max').html('# 0');
			$('#custom_price').addClass('hidden');
			$('#input_custom_comments').addClass('hidden');
			$('#input_username').addClass('hidden');
		}
	});
</script>
@endsection