<head>
    <style>
        #tbl-referensi th, tr, td {border-bottom:1px black solid; border-top:1px black solid; }
    </style>
</head>

@extends('layouts.app')

@section('title')
  Data Referensi
@endsection

@section('breadcrumb')
   @parent
   <li>referensi</li>
@endsection

@section('content')     

<section id="tbl-data" class="show">

<div class="row">
  <div class="container-fluid">
    <div class="card">
      <div class="card-block">     

      <div class="text-left">
        <a onclick="addForm()" class="btn btn-outline-info btn-sm"><i class="fa fa-user" ></i> New Referensi</a>
      </div>

<table class="table table-striped table-padding table-responsive" id="tbl-referensi" width="100%">
<thead>
   <tr class="tblheader">
      <th width="20%">Nama</th>
      <th width="30%">Alamat</th>
	  <th width="10%">No.HP</th>
	  <th width="25%">Status</th>
      <th width="10%">Act</th>
   </tr>
</thead>
<tbody></tbody>
</table>

      </div>
    </div>
  </div>
</div>
</section>

<!---------------------------- form data ------------------------> 

<setcion id="form-data" class="hide">

<form class="form-horizontal" data-toggle="validator" method="post" id="form-input">
   {{ csrf_field() }} {{ method_field('POST') }}
   
<div class="Container-fluid">      

    <div class="card" style="width:100%; margin:auto;">
        <div class="card-block">
            <h6>Form Customer</h6>

    <div style="padding:5px 50px">
      
    <input type="hidden" id="id" name="id">

        <div class="col-sm-6 col-md-6">      
            <div class="form-group">
                <label for="nama">Nama Referensi</label>
                <input id="nama" type="text" class="form-control" name="nama" autofocus required autocomplete="off">
                <span class="help-block with-errors"></span>
            </div>
        
            <div class="form-group">
                <label for="alamat">Alamat</label>
                <input id="alamat" type="text" class="form-control" name="alamat" autofocus autocomplete="off" required>
                <small class="text-muted">Alamat Lengkap</small>
            </div>


            <div class="form-group">
                <label for="telp">No. Telepon/HP</label>
                <input id="telp" type="text" class="form-control" name="telp" autofocus required autocomplete="off">
                <small class="text-muted">No.HP / No.Telp </small>
            </div>      

            <div class="form-group">
                <label>Status</label>
                <select id="sts" name='sts' type="text" class="form-control" autofocus autocomplete="off">
                    <option value="KARYAWAN">KARYAWAN</option>
                    <option value="FREELANCE">FREELANCE</option>
                </select>
            </div>            
            
            <div class="form-group">
        	    <button id="submit-control" type="submit" class="btn btn-outline-success"><i class="fa fa-floppy-o"></i> Save </button>
                <button id="tutup" onclick="tutupForm()" type="button" class="btn btn-outline-warning"><i class="fa fa-times"></i> Cancel</button>
            </div>            
            
        </div>
        
    </div>

    </div>
    
            </div>
        </div>
    </div>
</form>

</section>

@include('referensi.form_komisi')
@include('referensi.add_komisi')
@include('referensi.listtransaksi')

@endsection

@section('script')

<script type="text/javascript">
var table, save_method, tbltrans;

$(function(){
   table = $('#tbl-referensi').DataTable({
     "processing" : true,
     "lengthMenu": [[8, 15, 50, -1], [8, 15, 50, "All"]],       //pilihan jumlah record show
     "ajax" : {
       "url" : "{{ route('referensi.data') }}",
       "type" : "GET"
     }
   }); 
   
    $('#form-input').validator().on('submit', function(e){
      
        if(!e.isDefaultPrevented()){
            var id = $('#id').val();
            if(save_method == "add") url = "{{ route('referensi.store') }}";
                else url = "referensi/"+id;
         
            $.ajax({
                url : url,
                type : "POST",
                data : $('#form-input').serialize(),
                dataType: 'JSON',		   
                success : function(data){
 
                    if(data.msg=="error"){
               	        swal("WARNING", " Gagal menyimpan data !","error");
                        $('#nama').focus().select();
                    }else{
                        tutupForm();
				        swal("SUCCESS", " Data Referensi berhasil disimpan ! ","success");
                        table.ajax.reload(null, false);
                    }   
 		        },
                error : function(){
		            swal("WARNING"," DATA tidak dapat disimpan, harap hubungi IT !","error");	
                }   
            });
            return false;
        }
    });
});


function editref(id){
    save_method = "edit";
    $('input[name=_method]').val('PATCH');
   
    $.ajax({
        url : "{{ DIR_APP }}referensi/"+id+"/edit",
        type : "GET",
        dataType : "JSON",
        success : function(data){

        bukaForm();
        
        $('#id').val(data.id);
	    $('#nama').val(data.nama);
        $('#alamat').val(data.alamat);
	    $('#telp').val(data.nohp);
        $('#sts').val(data.status);
        },
            error : function(){
            alert("Tidak dapat menampilkan data!");
        }
    });
}

/* versi baru */

function addForm(){
	save_method="add";
    $('input[name=_method]').val('POST');

	$('#tbl-data').addClass("hide");
	$('#form-data').removeClass("hide");
	$('#form-data').addClass("show");
	document.getElementById("form-input").reset();
}


function tutupForm(){

	$('#form-data').addClass("hide");
	$('#tbl-data').removeClass("hide");
	$('#tbl-data').addClass("show");	

    document.getElementById("form-input").reset();
}

function bukaForm(){
    //$('#burger').click();
    $('#tbl-data').addClass("hide");
	$('#form-data').removeClass("hide");
	$('#form-data').addClass("show");
	document.getElementById("form-input").reset();
}

/* komisi */
function addkomisi(id){
    $('#modal-komisi').modal('show');
    $('#idref').val(id);

    tampilReferensi(id);
    tampilDetail(id);
}

function tampilDetail(id){

    tblkomisi.ajax.url("{{ DIR_APP }}referensi/"+id+"/datakomisi");
	tblkomisi.ajax.reload();
}    

tblkomisi = $('#tbl-komisi').DataTable({
    "scrollY": '55vh',
    "scrollCollapse": true,
    "bSort": false,
    "destroy": true,
    "processing" : true,
    "paging" : false,
    "dom" : 'bt',
});


function tampilReferensi(id){
    $.ajax({
        url : "{{ DIR_APP }}referensi/"+id+"/edit",
        type : "GET",
        dataType : "JSON",
        success : function(data){

            $('#referensi').text(data.nama+' - '+data.status);
            $('#namaref').val(data.nama);
            $('#id2').val(id);
	    },
        error : function(){
            alert("Tidak dapat menampilkan data!");
        }
    });       
}


function komisi(){
    var id=$('#id2').val();
    
    save_method = "add";
    $('input[name=_method]').val('POST');
    $('#modal-addkomisi').modal('show');
    $('#modal-addkomisi form')[0].reset();     
    
    tampilReferensi(id);
	
} 


tbltrans = $('#tbl-trx').DataTable({
    "scrollY": '55vh',
    "scrollCollapse": true,
    "bSort": false,
    "destroy": true,
    "processing" : true,
    "paging" : false,
    "dom" : 'bti',
});


function showTransaksi(){
    var ref =$('#idref').val();
    
    $('#modal-trans').modal('show');

    tbltrans.ajax.url("{{ DIR_APP }}referensi/"+ref+"/daftartrans");
	tbltrans.ajax.reload();
}

function selectTransaksi(id){
	$('#id_trx').val(id);
	$('#modal-trans').modal('hide');
	
	$.ajax({
        url : "{{ DIR_APP }}transaksi/"+id+"/edit",
        type : "GET",
        dataType : "JSON",
        success : function(data){
            $('#trans').val(data.trans_no);
            $('#nmproj').val(data.project_name);
            $('#norumah').val(data.cluster.concat('/', data.block. concat('/', data.nomor)));
			$('#tprumah').val(data.luasrumah.concat('/', data.luastanah));
			$('#hgrumah').val(data.harga_rumah);
        },
        error : function(){
          alert("Tidak dapat menampilkan data!");
        }   
     });  
}


//submit
$('#form-addkomisi').validator().on("submit", function(e) {

    if(!e.isDefaultPrevented()){
        
        var id = $('#id2').val();		 
        if(save_method == "add") { url = "{{ route('referensi.simpankomisi') }}"; }

        $.ajax({
            url : url,
            type : "POST",
            data : $('#form-addkomisi').serialize(),
            dataType: 'JSON',		   
            success : function(data){
			    if(data.msg=="error"){
					swal("WARNING", " Gagal menyimpan data !","error");

				}else{
					$('#modal-addkomisi').modal('hide');
					$('#tbl-komisi').DataTable().ajax.reload(null, false);
				}   
 		    },
            error : function(){
			    swal("WARNING"," DATA tidak dapat disimpan, harap hubungi IT !","error");
		 
            }   
        });
        return false;
	}
});


function report(id){
    window.location="{{ DIR_APP }}referensi/"+id+"/report";
}



</script>

@endsection