@extends('layouts.contentLayoutMaster')

@section('title','Lihat SKBPM')

@section('vendor-styles')
<link rel="stylesheet" type="text/css" href="{{asset('css/plugins/forms/validation/form-validation.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/forms/select/select2.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/pickers/pickadate/pickadate.css')}}">
@endsection

@section('page-styles')
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/page-users.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/app-invoice.css')}}">
@endsection

@section('content')
    <!-- app invoice View Page -->
<section class="invoice-view-wrapper">
  <div class="row">
    <!-- invoice view page -->
    <div class="col-lg-9 col-12">
      <div class="card invoice-print-area d-none d-sm-block">
        <div class="card-content">
          <div class="card-body pb-0">
            <!-- header section -->
            <!-- logo and title -->
            <div class="row my-2 justify-content-center">
                <div class="col-11" style="border-bottom: 2px solid #000 !important; padding-bottom: 3px">
                  <div class="row" style="border-bottom: 5px solid #000 !important; padding-bottom: 10px">
                      <div class="col-1">
                        <img src="{{asset('images/logo/fakfak1.png')}}" alt="logo" width="120">
                      </div>
                      <div class="col-11 text-center" style="color: black !important; margin-left: -35px;">
                        <h3 style="color: black !important">PEMERINTAH KABUPATEN FAKFAK</h3>
                        <h2 style="color: black !important">DISTRIK PARIWARI</h2>
                        <h1 style="color: black !important">KELURAHAN WAGOM</h1>
                        <span><em>JL. CHRISTINA MARTHA TIAHAHU TLP. 0956 23971</em></span>
                    </div>
                  </div>
              </div>
              <div class="col-7 pt-2 pb-0 text-center">
                <span class="h5" style="color: black !important; font-size: 1.4rem; border-bottom: 2px solid black;">SURAT KETERANGAN BELUM PERNAH MENIKAH</span>
                <p style="color: black !important; font-weight: 600; font-size: 1.4rem">NO: 145/@if($skbpm->no_surat == 0)-@else{{ $skbpm->no_surat }}@endif/SKBPM/KW/{{ date('Y')}}</p>
              </div>
            </div>
            <div class="row mt-2 justify-content-center">
                <div class="col-11 text-justify">
                    <span class="text-justify" style="color: black !important;">&emsp;&emsp;Yang bertanda tangan dibawah ini, Kepala Kelurahan Wagom menerangkan dengan sesungguhnya bahwa :</span>
                    <div class="row justify-content-center">
                        <div class="col-11 mt-1 text-left">
                            <div class="table-responsive">
                                <table class="table table-borderless" style="border-spacing: 0px; color:#333">
                                    <tbody>
                                        <tr>
                                            <td style="padding: 0px 10px; font-weight: 600">1. Nama</td>
                                            <td style="padding: 0px 10px; font-weight: 600">:</td>
                                            <td style="padding: 0px 10px; font-weight: 600">{{$skbpm->user->name}}</td>
                                        </tr>
                                        <tr>
                                            <td style="padding: 0px 10px; font-weight: 600">2. Tempat, Tanggal Lahir</td>
                                            <td style="padding: 0px 10px; font-weight: 600">:</td>
                                            <td style="padding: 0px 10px; font-weight: 600">{{$skbpm->user->profil->tempat_lahir}}, {{$skbpm->user->profil->tanggal_lahir}}</td>
                                        </tr>
                                        <tr>
                                            <td style="padding: 0px 10px; font-weight: 600">3. Kewarganegaraan</td>
                                            <td style="padding: 0px 10px; font-weight: 600">:</td>
                                            <td style="padding: 0px 10px; font-weight: 600">{{$skbpm->user->profil->kewarganegaraan}}</td>
                                        </tr>
                                        <tr>
                                            <td style="padding: 0px 10px; font-weight: 600">4. Jenis Kelamin</td>
                                            <td style="padding: 0px 10px; font-weight: 600">:</td>
                                            <td style="padding: 0px 10px; font-weight: 600">{{$skbpm->user->profil->jenis_kelamin}}</td>
                                        </tr>
                                        <tr>
                                            <td style="padding: 0px 10px; font-weight: 600">5. Agama</td>
                                            <td style="padding: 0px 10px; font-weight: 600">:</td>
                                            <td style="padding: 0px 10px; font-weight: 600">{{$skbpm->user->profil->agama}}</td>
                                        </tr>
                                        <tr>
                                            <td style="padding: 0px 10px; font-weight: 600">6. Pekerjaan</td>
                                            <td style="padding: 0px 10px; font-weight: 600">:</td>
                                            <td style="padding: 0px 10px; font-weight: 600">{{$skbpm->user->profil->pekerjaan}}</td>
                                        </tr>
                                        <tr>
                                            <td style="padding: 0px 10px; font-weight: 600">7. Status Perkawinan</td>
                                            <td style="padding: 0px 10px; font-weight: 600">:</td>
                                            <td style="padding: 0px 10px; font-weight: 600">{{$skbpm->user->profil->status_perkawinan}}</td>
                                        </tr>
                                        <tr>
                                            <td style="padding: 0px 10px; font-weight: 600">8. NO. KTP/NIK</td>
                                            <td style="padding: 0px 10px; font-weight: 600">:</td>
                                            <td style="padding: 0px 10px; font-weight: 600">{{$skbpm->user->nik}}</td>
                                        </tr>
                                        <tr>
                                            <td style="padding: 0px 10px; font-weight: 600">9. NO. KK</td>
                                            <td style="padding: 0px 10px; font-weight: 600">:</td>
                                            <td style="padding: 0px 10px; font-weight: 600">{{$skbpm->user->profil->no_kk}}</td>
                                        </tr>
                                        <tr>
                                            <td style="padding: 0px 10px; font-weight: 600">10. Golongan Darah</td>
                                            <td style="padding: 0px 10px; font-weight: 600">:</td>
                                            <td style="padding: 0px 10px; font-weight: 600">= {{$skbpm->user->profil->golongan_darah}} =</td>
                                        </tr>
                                        <tr>
                                            <td style="padding: 0px 10px; font-weight: 600">11. Alamat</td>
                                            <td style="padding: 0px 10px; font-weight: 600">:</td>
                                            <td style="padding: 0px 10px; font-weight: 600">{{$skbpm->user->profil->alamat}} RT {{$skbpm->user->profil->rt}} RW {{$skbpm->user->profil->rw}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <p class="text-justify" style="color: black !important;">&emsp;&emsp;Yang bersangkutan namanya tersebut diatas adalah benar-benar warga masyarakat yang berdomisili di <span style="text-transform: capitalize">{{$skbpm->user->profil->alamat}} RT {{$skbpm->user->profil->rt}} RW {{$skbpm->user->profil->rw}}</span> Kelurahan {{ Str::title($villages->name) }}, Distrik {{ Str::title($districts->name) }}, {{ Str::title($cities->name) }}, Provinsi {{ Str::title($provinces->name) }} dan sepanjang pengamatan kami, yang bersangkutan <span class="text-bold-600">Belum Pernah Menikah</span>.</p>
                    <p class="text-justify" style="color: black !important;">&emsp;&emsp;Demikian surat keterangan ini dibuat untuk dipergunakan sebagaimana mestinya.</p>

                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-11 text-justify">
                    <div class="row justify-content-end">
                        <div class="col-5 mt-1 text-justify">
                            <div class="table-responsive">
                                <table class="table table-borderless text-center" style="border-spacing: 0px; color:#333">
                                    <tbody>
                                        <tr>
                                            <td width="240px" style="padding: 5px 10px; text-align: left">
                                            <a class="text-bold-600">DIBUAT DI : WAGOM</a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td width="240px" style="padding: 5px 10px; text-align: left">
                                            <a class="text-bold-600">PADA TANGGAL : 
                                                @if($skbpm->tanggal == NULL)
                                                -
                                                @else
                                                {{ $skbpm->tanggal }}
                                                @endif
                                            </a>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td width="240px" style="padding: 5px 10px;"><img src="{{asset('images/qr-code.png')}}" alt="ttd" width="100"></td>
                                        </tr>
                                        <tr>
                                            <td width="240px" style="padding: 5px 10px;">
                                                <a class="text-bold-600" style="border-bottom: 2px solid black;">ABDURRASYID WADJO,SE</a>                                        
                                                <a>NIP.197308262005021004</a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card invoice-print-area d-print-none d-block d-sm-none">
        <div class="card-content">
          <div class="card-body pb-0">
            <!-- header section -->
            <!-- logo and title -->
            <div class="row my-2 justify-content-center">
                <div class="col-12 col-lg-10" style="border-bottom: 2px solid #000 !important; padding-bottom: 3px">
                  <div class="row" style="border-bottom: 5px solid #000 !important; padding-bottom: 10px">
                      <div class="col-12 col-md-1 text-center mb-2">
                        <img src="{{asset('images/logo/fakfak1.png')}}" alt="logo" width="120">
                      </div>
                      <div class="col-12 col-md-11 text-center" style="color: black !important">
                        <h3 style="color: black !important">PEMERINTAH KABUPATEN FAKFAK</h3>
                        <h2 style="color: black !important">DISTRIK PARIWARI</h2>
                        <h1 style="color: black !important">KELURAHAN WAGOM</h1>
                        <span><em>JL. CHRISTINA MARTHA TIAHAHU TLP. 0956 23971</em></span>
                    </div>
                  </div>
              </div>
              <div class="col-12 col-md-7 pt-2 pb-0 text-center">
                <span class="h5" style="color: black !important; font-size: 1.4rem; border-bottom: 2px solid black;">SURAT KETERANGAN BELUM PERNAH MENIKAH</span>
                <p style="color: black !important; font-weight: 600; font-size: 1.4rem">NO: 145/@if($skbpm->no_surat == 0)-@else{{ $skbpm->no_surat }}@endif/SKBPM/KW/{{ date('Y')}}</p>
              </div>
            </div>
            <div class="row mt-2 justify-content-center">
                <div class="col-12 col-lg-10 text-justify">
                    <span class="text-justify" style="color: black !important;">&emsp;&emsp;Yang bertanda tangan dibawah ini, Kepala Kelurahan Wagom menerangkan dengan sesungguhnya bahwa :</span>
                    <div class="row justify-content-center">
                        <div class="col-12 col-lg-11 mt-1 text-justify">
                            <div class="table-responsive">
                                <table class="table table-borderless" style="border-spacing: 0px; color:#333">
                                    <tbody>
                                        <tr>
                                            <td style="padding: 0px 10px; font-weight: 600">1. Nama</td>
                                            <td style="padding: 0px 10px; font-weight: 600">:</td>
                                            <td style="padding: 0px 10px; font-weight: 600">{{$skbpm->user->name}}</td>
                                        </tr>
                                        <tr>
                                            <td style="padding: 0px 10px; font-weight: 600">2. Tempat, Tanggal Lahir</td>
                                            <td style="padding: 0px 10px; font-weight: 600">:</td>
                                            <td style="padding: 0px 10px; font-weight: 600">{{$skbpm->user->profil->tempat_lahir}}, {{$skbpm->user->profil->tanggal_lahir}}</td>
                                        </tr>
                                        <tr>
                                            <td style="padding: 0px 10px; font-weight: 600">3. Kewarganegaraan</td>
                                            <td style="padding: 0px 10px; font-weight: 600">:</td>
                                            <td style="padding: 0px 10px; font-weight: 600">{{$skbpm->user->profil->kewarganegaraan}}</td>
                                        </tr>
                                        <tr>
                                            <td style="padding: 0px 10px; font-weight: 600">4. Jenis Kelamin</td>
                                            <td style="padding: 0px 10px; font-weight: 600">:</td>
                                            <td style="padding: 0px 10px; font-weight: 600">{{$skbpm->user->profil->jenis_kelamin}}</td>
                                        </tr>
                                        <tr>
                                            <td style="padding: 0px 10px; font-weight: 600">5. Agama</td>
                                            <td style="padding: 0px 10px; font-weight: 600">:</td>
                                            <td style="padding: 0px 10px; font-weight: 600">{{$skbpm->user->profil->agama}}</td>
                                        </tr>
                                        <tr>
                                            <td style="padding: 0px 10px; font-weight: 600">6. Pekerjaan</td>
                                            <td style="padding: 0px 10px; font-weight: 600">:</td>
                                            <td style="padding: 0px 10px; font-weight: 600">{{$skbpm->user->profil->pekerjaan}}</td>
                                        </tr>
                                        <tr>
                                            <td style="padding: 0px 10px; font-weight: 600">7. Status Perkawinan</td>
                                            <td style="padding: 0px 10px; font-weight: 600">:</td>
                                            <td style="padding: 0px 10px; font-weight: 600">{{$skbpm->user->profil->status_perkawinan}}</td>
                                        </tr>
                                        <tr>
                                            <td style="padding: 0px 10px; font-weight: 600">8. NO. KTP/NIK</td>
                                            <td style="padding: 0px 10px; font-weight: 600">:</td>
                                            <td style="padding: 0px 10px; font-weight: 600">{{$skbpm->user->nik}}</td>
                                        </tr>
                                        <tr>
                                            <td style="padding: 0px 10px; font-weight: 600">9. NO. KK</td>
                                            <td style="padding: 0px 10px; font-weight: 600">:</td>
                                            <td style="padding: 0px 10px; font-weight: 600">{{$skbpm->user->profil->no_kk}}</td>
                                        </tr>
                                        <tr>
                                            <td style="padding: 0px 10px; font-weight: 600">10. Golongan Darah</td>
                                            <td style="padding: 0px 10px; font-weight: 600">:</td>
                                            <td style="padding: 0px 10px; font-weight: 600">= {{$skbpm->user->profil->golongan_darah}} =</td>
                                        </tr>
                                        <tr>
                                            <td style="padding: 0px 10px; font-weight: 600">11. Alamat</td>
                                            <td style="padding: 0px 10px; font-weight: 600">:</td>
                                            <td style="padding: 0px 10px; font-weight: 600">{{$skbpm->user->profil->alamat}} RT {{$skbpm->user->profil->rt}} RW {{$skbpm->user->profil->rw}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <p class="text-justify" style="color: black !important;">&emsp;&emsp;Yang bersangkutan namanya tersebut diatas adalah benar-benar warga masyarakat yang berdomisili di <span style="text-transform: capitalize">{{$skbpm->user->profil->alamat}} RT {{$skbpm->user->profil->rt}} RW {{$skbpm->user->profil->rw}}</span> Kelurahan {{ Str::title($villages->name) }}, Distrik {{ Str::title($districts->name) }}, {{ Str::title($cities->name) }}, Provinsi {{ Str::title($provinces->name) }} dan sepanjang pengamatan kami, yang bersangkutan <span class="text-bold-600">Belum Pernah Menikah</span>.</p>
                    <p class="text-justify" style="color: black !important;">&emsp;&emsp;Demikian surat keterangan ini dibuat untuk dipergunakan sebagaimana mestinya.</p>

                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-9 col-lg-10 text-justify">
                    <div class="row justify-content-end">
                        <div class="col-12 col-md-5 mt-1 text-justify">
                            <div class="table-responsive">
                                <table class="table table-borderless text-center" style="border-spacing: 0px; color:#333">
                                    <tbody>
                                        <tr>
                                            <td width="240px" style="padding: 5px 10px; text-align: left">
                                            <a class="text-bold-600">DIBUAT DI : WAGOM</a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td width="240px" style="padding: 5px 10px; text-align: left">
                                            <a class="text-bold-600">PADA TANGGAL : 
                                                @if($skbpm->tanggal == NULL)
                                                -
                                                @else
                                                {{ $skbpm->tanggal }}
                                                @endif
                                            </a>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td width="240px" style="padding: 5px 10px;"><img src="{{asset('images/qr-code.png')}}" alt="ttd" width="100"></td>
                                        </tr>
                                        <tr>
                                            <td width="240px" style="padding: 5px 10px;">
                                                <a class="text-bold-600" style="border-bottom: 2px solid black;">ABDURRASYID WADJO,SE</a>                                           
                                                <a>NIP.197308262005021004</a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- invoice action  -->
    <div class="col-lg-3 col-12">
      <div class="card invoice-action-wrapper shadow-none border">
        <div class="card-body">
            @can ('acc cetak surat')
                @if ($skbpm->status === 'SUDAH ACC LURAH')
                    <div class="invoice-action-btn mb-1">
                        <a type="button" href="#" name="acccetak" id="{{ $skbpm->id }}" class="acccetak btn btn-success btn-block text-white" title="ACC">
                        <i class='bx bx-check-double'></i>
                        <span>Tandai Sudah Dicetak</span>
                        </a>
                    </div>
                @endif
            @endcan
            @can ('acc validasi surat')
                @if ($skbpm->status === 'SUDAH ACC STAFF')
                    <div class="invoice-action-btn mb-1">
                        <a type="button" href="#" name="acclurah" id="{{ $skbpm->id }}" class="acclurah btn btn-success btn-block text-white" title="ACC">
                        <i class='bx bx-check-double'></i>
                        <span>ACC Surat</span>
                        </a>
                    </div>
                @endif
            @endcan
            @can ('print surat')
                    <div class="invoice-action-btn mb-0">
                        <a class="btn btn-danger btn-block text-white invoice-print">
                            <i class='bx bx-printer'></i>
                        <span>Print</span>
                        </a>
                    </div>
            @endcan
        </div>
      </div>
    </div>
  </div>
</section>
<div id="modalAccLurah" class="modal fade text-left" id="danger" tabindex="-1" role="dialog"
    aria-labelledby="myModalLabel120" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-success">              
                <h5 class="modal-title white">Konfirmasi</h5>
                <button type="button" class="close btn btn-sm" data-dismiss="modal" aria-label="Close">
                    <i class="bx bx-x"></i>
                </button>
            </div>
            <div class="modal-body">
                <h5 align="center" style="margin:0;">Apakah Anda yakin akan <span class="text-success"> ACC </span> data ini?</h5>
            </div>
            <div class="modal-footer">
                <button type="button" name="ok_aktif" id="ok_aktif" class="btn btn-sm btn-success">OK</button>
                <button type="button" class="btn btn-sm btn-light-secondary" data-dismiss="modal">Batal</button>
            </div>
        </div>
    </div>
</div>
<div id="modalAccCetak" class="modal fade text-left" id="danger" tabindex="-1" role="dialog"
    aria-labelledby="myModalLabel120" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-success">              
                <h5 class="modal-title white">Konfirmasi</h5>
                <button type="button" class="close btn btn-sm" data-dismiss="modal" aria-label="Close">
                    <i class="bx bx-x"></i>
                </button>
            </div>
            <div class="modal-body">
                <h5 align="center" style="margin:0;">Apakah Anda yakin akan <span class="text-success"> sudah cetak </span> data ini?</h5>
            </div>
            <div class="modal-footer">
                <button type="button" name="ok_cetak" id="ok_cetak" class="btn btn-sm btn-success">OK</button>
                <button type="button" class="btn btn-sm btn-light-secondary" data-dismiss="modal">Batal</button>
            </div>
        </div>
    </div>
</div>
@endsection

{{-- vendor scripts --}}
@section('vendor-scripts')
<script src="{{asset('vendors/js/forms/select/select2.full.min.js')}}"></script>
<script src="{{asset('vendors/js/forms/validation/jqBootstrapValidation.js')}}"></script>
<script src="{{asset('vendors/js/pickers/pickadate/picker.js')}}"></script>
<script src="{{asset('vendors/js/pickers/pickadate/picker.date.js')}}"></script>
@endsection

{{-- page scripts --}}
@section('page-scripts')
<script src="{{asset('js/scripts/pages/page-users.js')}}"></script>
<script src="{{asset('js/scripts/navs/navs.js')}}"></script>
<script src="{{asset('js/scripts/forms/validation/form-validation.js')}}"></script>
<script src="{{asset('js/scripts/pages/app-invoice.js')}}"></script>
<script>
    $(document).ready(function() {
    var user_id;

    $(document).on('click', '.acclurah', function(){
        user_id = $(this).attr('id');
        $('#modalAccLurah').modal('show');
    });

    $('#ok_aktif').click(function(){
        $.ajax({
        url:"../../skbpm/acclurah/"+user_id,
        beforeSend:function(){
        $('#ok_aktif').text('Mengaktifkan data...');
        },
        success:function(data)
        {
            setTimeout(function(){
            $('#modalAccLurah').modal('hide');
            $('#ok_aktif').text('OK');
            Swal.fire('Berhasil','Data berhasil di ACC!', 'success');
            }, 1500);

            setTimeout(function(){
                window.location.href = "{{URL::to('skbpm')}}"
            } , 3000);   
        }
        })
    });
    });
</script>
<script>
    $(document).ready(function() {
    var user_id;

    $(document).on('click', '.acccetak', function(){
        user_id = $(this).attr('id');
        $('#modalAccCetak').modal('show');
    });

    $('#ok_cetak').click(function(){
        $.ajax({
        url:"../../skbpm/acccetak/"+user_id,
        beforeSend:function(){
        $('#ok_cetak').text('Mengaktifkan data...');
        },
        success:function(data)
        {
            setTimeout(function(){
            $('#modalAccCetak').modal('hide');
            $('#ok_cetak').text('OK');
            Swal.fire('Berhasil','Data berhasil diubah!', 'success');
            }, 1500);

            setTimeout(function(){
                window.location.href = "{{URL::to('skbpm')}}"
            } , 3000);   
        }
        })
    });
    });
</script>
@endsection