@extends('dashboard.utama') 
@section('content') 
<div class="row">
    <!-- Striped rows -->
    <div class="col-md-12 my-4">
        <h2 class="h4 mb-1">Data Pembayaran</h2> 
        @if (Session::has('status')) 
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ Session::get('status') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div> 
        @endif 
        <div class="card shadow">
            <div class="card-body">
                <div class="toolbar row mb-3">
                    <div class="col">
                        <form class="form-inline">
                            <div class="form-row"></div>
                        </form>
                    </div>
                    <div class="col ml-auto">
                        <div class="dropdown float-right">
                            <button class="btn btn-primary float-right ml-3 " type="button" id="actionMenuButton" data-toggle="modal" data-target="#tambahpembayaran" aria-expanded="false"> Tambah Data </button>
                        </div>
                    </div>
                </div>
                <!-- table -->
                <table class="table datatables" id="dataTable-1" style="width:100%">
                    <thead>
                        <tr role="row">
                            <th>#</th>
                            <th>KODE BAYAR</th>
                            <th>NOPEL</th>
                            <th>NO HP</th>
                            <th>KETERANGAN</th>
                            <th>GRAND TOTAL</th>
                            <th>AKSI</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- simple table -->
</div>
<!-- end section -->
<div class="modal fade" id="tambahpembayaran" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header" style="background-color:#ededed">
                <h5 class="modal-title" id="exampleModalLongTitle">Tambah Pembayaran</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{route('savepembayaran')}}" method="POST">
                <div class="modal-body">
                    @csrf
                    <!-- <div class="container-fluid"> -->
                    <div class="col-md-12">
                        <div class="form-row">
                            <div class="col-md-6">
                                <h4>Data Pelanggan</h4>
                                <div class="col-md-12 mb-3">
                                    <label for="validationCustom3">NOPEL</label>
                                    <input type="text" class="form-control inp-nopel" id="nopel" name="nopel" required>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <label for="validationCustom4">NO HP</label>
                                    <input type="text" class="form-control" id="no_hp" name="no_hp" required>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <label for="validationCustom4">KETERANGAN</label>
                                    <textarea rows="3" class="form-control" id="keterangan" name="keterangan" required>KALIBRASI METER AIR</textarea>
                                </div>
                                <h4>Data Meter</h4>
                                <div class="col-md-12 mb-3">
                                    <label for="validationCustom3">STATUS METER</label>
                                    <select class="form-control" id="status_meter" name="status_meter" required>
                                    @foreach($status_meter as $key => $value)
                                        @if($value->kd_statusmtr == '10')
                                        <option value="{{ $value->kd_statusmtr }}" selected>{{ $value->kd_statusmtr.' - '.$value->keterangan }}</option>
                                        @else
                                        <option value="{{ $value->kd_statusmtr }}">{{ $value->kd_statusmtr.' - '.$value->keterangan }}</option>
                                        @endif
                                    @endforeach
                                    </select>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <label for="validationCustom4">STATUS AIR</label>
                                    <select class="form-control" id="status_air" name="status_air" required>
                                    @foreach($status_air as $key => $value)
                                        <option value="{{ $value->kd_statusair }}">{{ $value->kd_statusair.' - '.$value->keterangan }}</option>
                                    @endforeach
                                    </select>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <label for="validationCustom4">LETAK METER</label>
                                    <select class="form-control" id="letak_meter" name="letak_meter" required>
                                    @foreach($letak_meter as $key => $value)
                                        <option value="{{ $value->kd_letakmtr }}">{{ $value->kd_letakmtr.' - '.$value->keterangan }}</option>
                                    @endforeach
                                    </select>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <label for="validationCustom4">LUAS TEMPAT METER</label>
                                    <input type="text" class="form-control" id="luas_tempat_air" name="luas_tempat_air" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h4>Rincian Harga</h4>
                                <div class="col-md-12 mb-3">
                                    <label for="validationCustom3">HARGA</label>
                                    <input type="text" class="form-control hitung" id="total" name="total" readonly>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <label for="validationCustom4">PPN</label>
                                    <input type="hidden" class="form-control" id="ppn_persen" name="ppn_persen" readonly>
                                    <input type="text" class="form-control hitung" id="ppn" name="ppn" readonly>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <label for="validationCustom4">MATERAI</label>
                                    <input type="text" class="form-control hitung" id="materai" name="materai" readonly>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <label for="validationCustom4">TOTAL BAYAR</label>
                                    <input type="text" class="form-control hitung" id="grand_total" name="grand_total" readonly>
                                </div>
                            </div>
                        </div>
                        <!-- /.form-row -->
                    </div>
                </div>
                <div class="modal-footer" style="background-color:#ededed">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" style="float: right margin-right:50px" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal inmodal fade" id="modal-show" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header" style="background-color:#ededed">
                <h5 class="modal-title" id="exampleModalLongTitle">Data Pembayaran</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                 <div class="col-md-12">
                    <div class="form-row">
                        <div class="col-md-6">
                            <div class="col-md-12 mb-3">
                                <label for="validationCustom3">KODE BAYAR</label>
                                <input type="text" class="form-control" id="kode_bayar" name="kode_bayar" readonly>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label for="validationCustom3">NOPEL</label>
                                <input type="text" class="form-control" id="nopel" name="nopel" readonly>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label for="validationCustom4">NO HP</label>
                                <input type="text" class="form-control" id="no_hp" name="no_hp" readonly>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label for="validationCustom4">KETERANGAN</label>
                                <textarea rows="3" class="form-control" id="keterangan" name="keterangan" readonly></textarea>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="col-md-12 mb-3">
                                <label for="validationCustom3">HARGA</label>
                                <input type="text" class="form-control hitung text-right" id="total" name="total" readonly>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label for="validationCustom4">PPN</label>
                                <input type="text" class="form-control hitung text-right" id="ppn" name="ppn" readonly>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label for="validationCustom4">MATERAI</label>
                                <input type="text" class="form-control hitung text-right" id="materai" name="materai" readonly>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label for="validationCustom4">TOTAL BAYAR</label>
                                <input type="text" class="form-control hitung text-right" id="grand_total" name="grand_total" readonly>
                            </div>
                        </div>
                    </div>
                    <!-- /.form-row -->
                </div>
            </div>
            <div class="modal-footer" style="background-color:#ededed">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
</div> 
@endsection 
@section('page_javascripts') 
<script>
$(".alert-dismissible").fadeTo(5000, 500).slideUp(500, function() {
    $(".alert-dismissible").alert('close');
});
</script>
<script>

var table = $('#dataTable-1').DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": {
        url: "{{ route('datapembayaran')}}",
    },
    "columns": [{
            data: 'kode_bayar'
        }, {
            data: 'kode_bayar'
        }, {
            data: 'nopel'
        }, {
            data: 'no_hp'
        }, {
            data: 'keterangan'
        }, {
            data: 'grand_total'
        }, {
            data: 'action',
            orderable: false,
            searchable: false
        }
        //{data: 'action', name: 'action', orderable: false, searchable: false}
    ],
    "lengthMenu": [
        [15, 100, -1],
        [15, 100, "Semua"]
    ],
    "order": [
        [1, 'desc']
    ],
    /*"dom": "lTfigt",
        "tableTools": {
        "sSwfPath": "{{asset('js/plugins/dataTables/swf/copy_csv_xls_pdf.swf')}}"
        }*/
    columnDefs: [{
        searchable: false,
        orderable: false,
        targets: 0,
    }, ],
});
table.on('draw.dt', function() {
    var PageInfo = $('#dataTable-1').DataTable().page.info();
    table.column(0, {
        page: 'current'
    }).nodes().each(function(cell, i) {
        cell.innerHTML = i + 1 + PageInfo.start;
    });
});
function edit(id) {
    /*console.log(id);*/
    $.ajax({
        url: "{{route('editpembayaran')}}/" + id,
        type: "GET",
        dataType: "JSON",
        success: function(data) {
            $('#modal-show').find('input[name=kode_bayar]').val(data.kode_bayar);
            $('#modal-show').find('input[name=nopel]').val(data.nopel);
            $('#modal-show').find('input[name=no_hp]').val(data.no_hp);
            $('#modal-show').find('textarea[name=keterangan]').val(data.keterangan);
            $('#modal-show').find('input[name=total]').val(data.total);
            $('#modal-show').find('input[name=ppn]').val(data.ppn);
            $('#modal-show').find('input[name=materai]').val(data.materai);
            $('#modal-show').find('input[name=grand_total]').val(data.grand_total);
            $('#modal-show').modal('show');
        }
    });
}
$('.hitung').on('keyup', function(){
    var harga = parseInt($('input[name=total]').val() ? $('input[name=total]').val() : 0);
    var ppn = parseInt($('input[name=ppn]').val() ? $('input[name=ppn]').val() : 0);
    var materai = parseInt($('input[name=materai]').val() ? $('input[name=materai]').val() : 0);
    var total = (harga + ppn + materai);
    $('input[name=grand_total]').val(total);
});
$('.inp-nopel').on('change', function(){
    // alert($(this).val());
    var nopel = $(this).val();
    $.ajax({
        url: "{{route('ceknopel')}}",
        type: 'POST',
        data: {
            nopel: nopel, 
            _token: '{{ csrf_token() }}'
        },
    })
    .done(function(response) {
        console.log(response.total);
        $('#tambahpembayaran').find('input[name=total]').val(response.total);
        $('#tambahpembayaran').find('input[name=ppn]').val(response.ppn);
        $('#tambahpembayaran').find('input[name=materai]').val(response.materai);
        $('#tambahpembayaran').find('input[name=grand_total]').val(response.grand_total);
    })
    .fail(function(response) {
    })
    .always(function(){
    });
    return false;
});
</script> 
@endsection