@extends('layouts.main')

@section('container')
<div class="card">
    <div class="card-header">
      <table width="100%">
        <tr>
          <td><h3 class="card-title">List</h3></td>
            @can('add asuransi')
                <td align="right" style="margin-right: 5px"><a class="btn btn-success btn-sm "
                    onclick="showModalAsuransi()"><i class="fa fa-plus" style="margin-right:5px"></i>Add
                    New</a></td>
            @endcan
        </tr>

          {{-- <td align="right" style="margin-right: 5px"><a href="{{ url('asuransi/create') }}" class="btn btn-success btn-sm"><i class="fa fa-plus" style="margin-right:5px"></i>Add New</a></td> --}}
        </tr>
      </table>
    </div>
    <!-- /.card-header -->
    <div class="card-body">
      <div class="scroll-x-table">
        <table class="table table-bordered table-striped table-condensed datatable-ajax" data-ajax-url="{{ route('admin.asuransi.ajax.list') }}" id="dt_table" width="100%">
          <thead>
              <tr>
                <th width="10">No</th>
                <th>Jenis Asuransi</th>
                <th>Tenor</th>
                <th>Lokasi</th>
                <th>Asuransi Persen</th>
                <th width="80"></th>
              </tr>
          </thead>
          <tbody>
          </tbody>
        </table>

        <br>
      </div>
    </div>
    <!-- /.card-body -->
  </div>
  <!-- /.card -->


  <!-- /.modal -->

  {{-- modal asuransi --}}
	<div class="modal fade" tabindex="-1" role="dialog" id="ModalAsuransi">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="modal_title"></h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<form method="POST" id="formAsuransi">
					@csrf
					<div class="modal-body">
						<input type="hidden" name="id" id="id" value="">

						<div class=" form-group">
              <label class="col-form-label">Asuransi</label>
              <select name="jenis_asuransi" id="jenis_asuransi" class="form-control  form-control-sm">
                  @foreach ($jenis_asuransi as $jenis_asuransi)
                      <option value="{{ $jenis_asuransi }}"
                          {{ old('jenis_asuransi', isset($res) ? $res->jenis_asuransi : '') == $jenis_asuransi ? 'selected' : '' }}>
                          {{ $jenis_asuransi}}</option>
                  @endforeach
              </select>
              <small class="form-text text-danger" id="jenis_asuransi_error"></small>
          </div>

           <div class=" form-group">
              <label class="col-form-label">Tenor</label>
              <select name="tenor" id="tenor" class="form-control  form-control-sm">
                  @foreach ($tenor as $tenor)
                      <option value="{{ $tenor }}"
                          {{ old('tenor', isset($res) ? $res->tenor : '') == $tenor ? 'selected' : '' }}>
                          {{ $tenor}} Bulan</option>
                  @endforeach
              </select>
              <small class="form-text text-danger" id="tenor_error"></small>
          </div>

          <div class="form-group">
              <label class="col-form-label">Lokasi</label>
              <select name="lokasi" id="lokasi" class="form-control  form-control-sm">
                  @foreach ($lokasi as $lokasi)
                      <option value="{{ $lokasi }}"
                          {{ old('lokasi', isset($res) ? $res->lokasi : '') == $lokasi ? 'selected' : '' }}>
                          {{ $lokasi}}</option>
                  @endforeach
              </select>
              <small class="form-text text-danger" id="lokasi_error"></small>
          </div>

          <div class="form-group">
              <label class="col-form-label">Asuransi Pa Persen</label>
              <input type="number" class="form-control" name="asuransi_pa_persen" id="asuransi_pa_persen" value="{{ old('asuransi_pa_persen',(isset($res))?$res->asuransi_pa_persen:"") }}">
              <small class="form-text text-danger" id="asuransi_pa_persen_error"></small>
          </div>



					</div>
					<div class="modal-footer">
						<button type="submit" class="btn btn-primary">Save changes</button>
						<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
					</div>
			</div>
			</form>
		</div>
	</div>



@endsection



@section('javascript')

<script>
  $(function () {
    // showDataTable();
    $("#formAsuransi"). submit(function (event) {
            event.preventDefault();
            ajaxSubmit();
        });
  })

  function clearErrorValidation(){
        var form1= $('#formAsuransi').serializeArray();
        var fields=[];
        for (let i = 0; i < form1.length; i++) {
            const el = form1[i];
            fields=[...fields,el.name];
        }
        for (let j = 0; j < fields.length; j++) {
            $("#" + fields[j] + "_error").text("");
            $("#" + fields[j]).removeClass("is-invalid");
        }
    }





  function showModalAsuransi() {
	  $("#modal_title").text("Add Asuransi")
	  $('#id').val("");
	  $('#jenis_asuransi').val("pilih").select();
    $('#tenor').val("pilih").select();
	  $('#lokasi').val("pilih").select();
    $('#asuransi_pa_persen').val("");
	  $('#ModalAsuransi').modal('show');
	 }

  function ajaxGetOneAsuransi(id) {
	  $.ajaxSetup({
	   headers: {
	    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
	   }
	  });
	  $.ajax({
	   url: "{{ route('admin.asuransi.ajax.getOne', '') }}/" + id,
	   type: 'GET',
	   beforeSend: function() {
	    $.LoadingOverlay("show");
	   },
	   complete: function() {
	    $.LoadingOverlay("hide");
	   },
	   success: function(json) {
	    $.LoadingOverlay("hide");
	    console.log(json);
	    if (json.status == "success") {
	     var result = json.result;
	     $("#modal_title").text("Edit")
	     $('#id').val(result.id);
	     $('#jenis_asuransi').val(result.jenis_asuransi).select();
	     $('#tenor').val(result.tenor).select();
       $('#lokasi').val(result.lokasi).select();
	     $('#asuransi_pa_persen').val(result.asuransi_pa_persen);
	     $('#ModalAsuransi').modal('show')

	    } else {
	     toastr["error"](json.error_message)
	    }

	   },
	   error: function(error) {
	    $.LoadingOverlay("hide");
	    console.log(error.responseJSON.message);
	    swal({
	     type: 'error',
	     html: error.responseJSON.message,
	    })
	   }
	  })
	 }


   function ajaxSubmit(){
        clearErrorValidation();
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            url: "{{ route('admin.asuransi.ajax.save') }}",
            type: 'POST',
            data: $('#formAsuransi').serialize(),
            beforeSend: function() {
                $.LoadingOverlay("show");
            },
            complete: function() {
                $.LoadingOverlay("hide");
            },
            success: function(json){
                $.LoadingOverlay("hide");
                console.log(json);
                if(json.status=="success"){
                    swal({
                        type: 'success',
                        html: json.result,
                        allowOutsideClick: false,
                    }).then((result)=>{
                      $('#ModalAsuransi').modal('hide')
	                    $("#dt_table").DataTable().ajax.reload();
                    }).catch(swal.noop);

                }else if(json.status=="error_val"){
                    $.each(json.error_message, function (key, val) {
                        $("#" + key + "_error").text(val[0]);
                        $("#" + key).addClass("is-invalid");
                    });
                    toastr["error"]('Validation Error!')
                }else{
                    toastr["error"](json.error_message)
                }

            },
            error: function(error){
                $.LoadingOverlay("hide");
                console.log(error.responseJSON.message);
                swal({
                    type: 'error',
                    html: error.responseJSON.message,
                })
            }
        })
    }


</script>


@endsection