@extends('layouts.backend')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <h4 class="page-title">Surat</h4>
            <ol class="breadcrumb">
                <li>
                    <a href="{{route('home')}}">Home</a>
                </li>
                <li>
                    <a href="{{route('daftar-surat')}}">Daftar Surat</a>
                </li>
                <li class="active">
                    Surat Kepemilikan Rumah
                </li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="card-box">
                <h4 class="m-t-0 header-title"><b>Surat Kepemilikan Rumah</b></h4>
                <p class="text-muted font-13">
                    <a href="{{ route('keterangan-kepemilikan-rumah-baru') }}" class="btn btn-primary btn-custom waves-effect waves-light"><i class="ti-plus"></i> Surat baru</a>
                </p>
                <table class="table table-bordered dt-responsive nowrap" width="100%">
                    <thead>
                        <tr>
                            <th>KTP Pemilik</th>
                            <th>Nama</th>
                            <th>Panjang Rumah</th>
                            <th>Lebar Rumah</th>
                            <th>Tinggi Rumah</th>
                            <th>Atap</th>
                            <th>Dinding</th>
                            <th>Lantai</th>
                            <th>Sebelah Utara</th>
                            <th>Sebelah Selatan</th>
                            <th>Sebelah timur</th>
                            <th>Sebelah Barat</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var table = $('.table').DataTable({
            responsive : true,
            initComplete : function() {
                var api = this.api();
                $('[data-toggle="tooltip"]').tooltip()
                $('#tbl_filter input').off('.DT').on('input.DT',function() {
                    api.search(this.value).draw();
                });
            },
            oLanguage : {
                sProcessing : "Getting Item"
            },
            processing : true,
            serverSide : true,
            ajax : {
                url : "{{ route('get-keterangan-kepemilikan-rumah') }}",
                type : 'POST',
                data : {
                    _token : "{{csrf_token()}}"
                },
                dataType : 'JSON',
                error : function(o,t,tr) {
                    alert(o.statusText);
                }
            },
            columns : [
                
                {data : 'no_ktp'},
                {data : 'nama'},
                {
                    data : 'panjang', 
                    mRender : function(data) {
                        return data + ' Meter';
                    }
                },
                {
                    data : 'lebar',
                    mRender : function(data) {
                        return data + ' Meter';
                    }
                },
                {
                    data : 'tinggi',
                    mRender : function(data) {
                        return data + ' Meter';
                    }
                },
                {data : 'atap'},
                {data : 'dinding'},
                {data : 'lantai'},
                {data : 's_utara'},
                {data : 's_selatan'},
                {data : 's_timur'},
                {data : 's_barat'},
                {
                    data : 'url',
                    orderable : false,
                    mRender : function(data) {
                        return ('<a href="'+data.edit+'" class="btn btn-icon waves-effect waves-light btn-warning"><i class="fa fa-pencil-square-o"></i></a>&nbsp<a data-link="'+data.delete+'" class="btn btn-icon waves-effect waves-light btn-danger"><i class="fa fa-ban"></i></a>&nbsp<a data-link="'+data.cetak+'" class="btn btn-icon waves-effect waves-light btn-success"><i class=" ti-printer"></i></a>')
                    }
                }

            ],
            "order": [[1, 'asc']]
        });
        $('.table tbody').on('click', '.btn-success', function() {
            var link = $(this).data('link');
            window.open(link, '_blank')
        })
        $('.table tbody').on('click', '.btn-danger', function() {
            var link = $(this).data('link');
            if (confirm('Anda yakin ?')) {
                window.location = link;
            }
        })
    </script>
</div> 
@endsection