@extends('layouts.master')
@section('title', config('app.name') . ' : Laporan Ke Pusat')
@section('content')
<div class="main-content feedback">
    <div class="container">
      <div class="page-header">Laporan ke Pusat</div>
      <div class="feedback__form">
        <div class="form-group">
          <label>Tipe Laporan:</label>
          <select class="custom-selection form-control" name="feedbackType" id="feedbackType">
            <option value="Tambah Dana Tidak diproses">Tambah Dana Tidak diproses</option>
            <option value="Tarik Dana Tidak diproses">Tarik Dana Tidak diproses</option>
            <option value="Live Chat Bermasalah">Live Chat Bermasalah</option>
            <option value="Lainnya">Lainnya</option>
          </select>
        </div>
        <div class="form-group">
          <label>Email:</label>
          <input class="custom-textfield form-control" name="email" id="email" placeholder="Email" value="" autocomplete="off" required="">
        </div>
        <div class="form-group">
          <label>Pesan:</label>
          <textarea class="custom-textfield form-control" name="message" id="message" placeholder="Pesan" value="" autocomplete="off"></textarea>
        </div>
        <div class="col-lg-4">
          <div class="form-group">
            <div class="captcha-img">
              <img loading="lazy" id="captchaFeedback" src="{{ route('captcha') }}?{{ time() }}" alt="captcha-picture">
              <a id="refreshCaptchaFeedback" class="btn btn-sm btn-info mr-4">
                <i class="fas fa-sync-alt"></i>
              </a>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label>Kode Verifikasi:</label>
          <input class="custom-textfield form-control" autocomplete="off" type="text" name="captcha" id="captcha" placeholder="Kode Verifikasi" required="">
        </div>
        <div class="form-group">
          <button id="feedbackFormSubmit" type="submit" class="btn-custom">Kirim</button>
        </div>
      </div>
    </div>
  </div>
@endsection
@push('scripts')
<script>
    $(document).ready(function() {
		$('#refreshCaptchaFeedback').click(function(e) {
			e.preventDefault();
			$('#captchaFeedback').attr('src', 'captcha/default?' + Math.random())
		});
	});

	$("button[id=feedbackFormSubmit]").on("click", function() {
		let feedbackType = $("select[name=feedbackType]"),
			email = $("input[name=email]"),
			message = $("textarea[name=message]"),
			captcha = $("input[name=captcha]")

		$.ajax({
			type: "POST",
			url: "{{ route('feedback.store') }}",
			data: {
				_token: "{{ csrf_token() }}",
				feedbackType: feedbackType.val(),
				email: email.val(),
				message: message.val(),
				captcha: captcha.val()
			},
			success: function(response) {
				if (response.success == true) {
					Swal.fire({
						icon: 'info',
						title: response.message
					});
					message.val("")
					captcha.val("")
				} else {
					Swal.fire({
						icon: 'error',
						title: response.message
					});
					message.val("")
				}
				$('#refreshCaptchaFeedback').click()
			},
			error: function(err) {
				let msg = '';
				$.each(err.responseJSON.errors, function(index, valueOfElement) {
					msg += valueOfElement + '<br />'
				});
				Swal.fire({
					toast: true,
					position: 'top-end',
					icon: 'error',
					title: (msg == '') ? "Mohon maaf atas ketidaknyamanannya, halaman ini akan dimuat ulang dalam #1 detik" : msg
				});
				captcha.val("")
				$('#refreshCaptchaFeedback').click()
				if (msg == '') {
					location.reload();
				}
			}
		});
	});
</script>
@endpush