@extends('layouts.app')

@section('content')
<div class="page-title">
        <div class="row">
            <div class="col-12 col-md-6 order-md-1 order-last">
                <h3>Detail Karyawan</h3>
                
            </div>
            <div class="col-12 col-md-6 order-md-2 order-first">
                <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Karyawan</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
<section class="section">
  <div class="container py-5">
    

    <div class="row">
      <div class="col-lg-4">
        <div class="card mb-4">
          <div class="card-body text-center">
            <img src="{{ $row->photo == "" ? 'https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3.webp' : asset('uploads/'.$row->nik.'/photo/'.strtolower($row->photo)) }}" alt="avatar"
              class="rounded-circle img-fluid" style="width: 150px;">
            <h5 class="my-3">{{ $row->nama_panggilan }}</h5>
            <p class="text-muted mb-1">{{ @$row->jabatan->nama }}</p>
            <p class="text-muted mb-4">{{ @$row->lokasi->nama }}</p>
            <div class="d-flex justify-content-center mb-2">
              <button type="button" class="btn btn-primary">Follow</button>
              <button type="button" class="btn btn-outline-primary ms-1">Message</button>
            </div>
          </div>
        </div>
        <div class="card mb-4 mb-lg-0">
          <div class="card-body p-0">
            <ul class="list-group list-group-flush rounded-3">
              <li class="list-group-item d-flex justify-content-between align-items-center p-3">
                <i class="fas fa-image fa-lg"></i>
                <p class="mb-0">@if($row->file_ktp != "")<a href="{{ asset('uploads/'.$row->nik.'/file_ktp/'.$row->file_ktp) }}" data-lightbox="file-ktp">File Ktp</a>@endif</p>
              </li>
              <li class="list-group-item d-flex justify-content-between align-items-center p-3">
                <i class="fas fa-image fa-lg" style="color: #333333;"></i>
                <p class="mb-0">@if($row->file_kk != "")<a href="{{ asset('uploads/'.$row->nik.'/file_kk/'.$row->file_kk) }}" data-lightbox="file-kk">File KK</a>@endif</p>
              </li>
             
            </ul>
          </div>
        </div>
      </div>
      <div class="col-lg-8">
        <div class="card mb-4">
          <div class="card-body">
            <div class="row">
              <div class="col-sm-3">
                <p class="mb-0">Nama Lengkap</p>
              </div>
              <div class="col-sm-9">
                <p class="text-muted mb-0">{{ $row->nama }}</p>
              </div>
            </div>
            <hr>
              <div class="row">
              <div class="col-sm-3">
                <p class="mb-0">Divisi</p>
              </div>
              <div class="col-sm-9">
                <p class="text-muted mb-0">{{ @$row->divisi->nama }}</p>
              </div>
            </div>
            <hr>
              <div class="row">
              <div class="col-sm-3">
                <p class="mb-0">Jenis Kelamin</p>
              </div>
              <div class="col-sm-9">
                <p class="text-muted mb-0">{{ $row->jenis_kelamin == 'L' ? 'Laki-laki' : 'Perempuan' }}</p>
              </div>
            </div>
            <hr>
            <div class="row">
              <div class="col-sm-3">
                <p class="mb-0">Email</p>
              </div>
              <div class="col-sm-9">
                <p class="text-muted mb-0">{{ @$row->user->email }}</p>
              </div>
            </div>
            <hr>
            <div class="row">
              <div class="col-sm-3">
                <p class="mb-0">Nomor Telp</p>
              </div>
              <div class="col-sm-9">
                <p class="text-muted mb-0">{{ $row->nomor_telp }}</p>
              </div>
            </div>
            <hr>
            <div class="row">
              <div class="col-sm-3">
                <p class="mb-0">Alamat</p>
              </div>
              <div class="col-sm-9">
                <p class="text-muted mb-0">{{ $row->alamat }}</p>
              </div>
            </div>
            <hr>
            <div class="row">
              <div class="col-sm-3">
                <p class="mb-0">Tempat/Tanggal lahir</p>
              </div>
              <div class="col-sm-9">
                <p class="text-muted mb-0">{{ $row->tempat_lahir }}/{{ $row->tanggal_lahir }}</p>
              </div>
            </div>
            <hr>
            <div class="row">
              <div class="col-sm-3">
                <p class="mb-0">Referensi</p>
              </div>
              <div class="col-sm-9">
                <p class="text-muted mb-0">{{ $row->referensi }}</p>
              </div>
            </div>
              <hr>
            <div class="row">
              <div class="col-sm-3">
                <p class="mb-0">Nomor KTP</p>
              </div>
              <div class="col-sm-9">
                <p class="text-muted mb-0">{{ $row->no_ktp }}</p>
              </div>
            </div>
              <hr>
            <div class="row">
              <div class="col-sm-3">
                <p class="mb-0">Nomor KK</p>
              </div>
              <div class="col-sm-9">
                <p class="text-muted mb-0">{{ $row->no_kk }}</p>
              </div>
            </div>
            <hr>
            <div class="row">
              <div class="col-sm-3">
                <p class="mb-0">Lama Gabung</p>
              </div>
              <div class="col-sm-9">
                <p class="text-muted mb-0">{{ $lama }}</p>
              </div>
            </div>
          </div>
        </div>
       
      </div>
    </div>
       <div class="row">
          <div class="col-md-6">
            <div class="card mb-4 mb-md-0 ">
              
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-4">
                    <p class="mb-0">Nama Ayah</p>
                  </div>
                  <div class="col-sm-8">
                    <p class="text-muted mb-0">{{ $row->nama_ayah }}</p>
                  </div>
                </div>  
                  <hr>
                   <div class="row">
                      <div class="col-sm-4">
                        <p class="mb-0">Nama Ibu</p>
                      </div>
                      <div class="col-sm-8">
                        <p class="text-muted mb-0">{{ $row->nama_ibu }}</p>
                      </div>
                    </div>
                  <hr>
                   <div class="row">
                      <div class="col-sm-4">
                        <p class="mb-0">Pekerjaan Ayah</p>
                      </div>
                      <div class="col-sm-8">
                        <p class="text-muted mb-0">{{ $row->pekerjaan_ayah }}</p>
                      </div>
                    </div>
                  <hr>
                   <div class="row">
                      <div class="col-sm-4">
                        <p class="mb-0">Pekerjaan Ibu</p>
                      </div>
                      <div class="col-sm-8">
                        <p class="text-muted mb-0">{{ $row->pekerjaan_ibu }}</p>
                      </div>
                    </div>     
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card mb-4 mb-md-0">
              <div class="card-body">
                 <div class="row">
                  <div class="col-sm-4">
                    <p class="mb-0">Nama Kontak 1</p>
                  </div>
                  <div class="col-sm-8">
                    <p class="text-muted mb-0">{{ $row->nama_kontak1 }}</p>
                  </div>
                </div>  
                  <hr>
                   <div class="row">
                      <div class="col-sm-4">
                        <p class="mb-0">Nomor Kontak 1</p>
                      </div>
                      <div class="col-sm-8">
                        <p class="text-muted mb-0">{{ $row->nomor_telp1 }}</p>
                      </div>
                    </div>
                  <hr>
                   <div class="row">
                      <div class="col-sm-4">
                        <p class="mb-0">Nama Kontak 2</p>
                      </div>
                      <div class="col-sm-8">
                        <p class="text-muted mb-0">{{ $row->nama_kontak2 }}</p>
                      </div>
                    </div>
                  <hr>
                   <div class="row">
                      <div class="col-sm-4">
                        <p class="mb-0">Nomor Kontak 2</p>
                      </div>
                      <div class="col-sm-8">
                        <p class="text-muted mb-0">{{ $row->nomor_telp2 }}</p>
                      </div>
                    </div>    
              </div>
            </div>
          </div>
        </div>
        <div class="row mt-4">
          <div class="col-md-12">
          <div class="card mb-4 mb-md-0">
              <div class="card-body">
                <table class="table">
                  <tr>
                    <th>#</th>
                    <th>Nama Detail</th>
                    <th>Value Detail</th>
                  </tr>
                  @foreach($row->detail as $k=>$r)
                  <tr>
                    <td>{{ $k+1 }}</td>
                    <td>{{ $r->option_key }}</td>
                    <td>{{ $r->option_value }}</td>
                  </tr>
                  @endforeach
                </table>
</div>
</div>
          </div>
        </div>
  </div>
</section>
@endsection