@extends('layouts.main')

@section('css')
@endsection

@section('content')
    {{-- Header --}}
    <x-content-header :title="'Data Guru'" :btnBack="true" :redirect="'/guru'"></x-content-header>

    {{-- Content --}}
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6">
                    <div class="card card-secondary">
                        <div class="card-header">
                            <h3 class="card-title pt-1">Detail Data Guru</h3>
                            <div class="float-right">
                                <a href="{{ route('guru.edit', $guru) }}" class="btn btn-warning text-dark btn-sm">
                                    <i class="fas fa-pencil-alt pe-1">
                                    </i>
                                    Edit Data
                                </a>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="text-center">
                                <img class="profile-user-img img-fluid img-circle"
                                    src="/img/fotoprofil/{{ $guru->user->foto }}" alt="{{ $guru->user->name }}">
                            </div>

                            <h3 class="profile-username text-center mb-5">{{ $guru->user->name }}</h3>

                            <div class="table-responsive">
                                <table class="table table-sm table-hover">
                                    <tr class="border-bottom">
                                        <td class="fw-bold">Email</td>
                                        <td style="width: 1px;">:</td>
                                        <td class="">{{ $guru->user->email ?? '-' }}</td>
                                    </tr>
                                    <tr class="border-bottom">
                                        <td class="fw-bold">NIP</td>
                                        <td style="width: 1px;">:</td>
                                        <td class="">{{ $guru->nip ?? '-' }}</td>
                                    </tr>
                                    <tr class="border-bottom">
                                        <td class="fw-bold">NUPTK</td>
                                        <td style="width: 1px;">:</td>
                                        <td class="">{{ $guru->nuptk ?? '-' }}</td>
                                    </tr>
                                    <tr class="border-bottom">
                                        <td class="fw-bold">Jenis Kelamin</td>
                                        <td style="width: 1px;">:</td>
                                        <td class="text-capitalize">{{ $guru->user->jk ?? '-' }}</td>
                                    </tr>
                                    <tr class="border-bottom">
                                        <td class="fw-bold">Telepon/WA</td>
                                        <td style="width: 1px;">:</td>
                                        <td class="">{{ $guru->user->telepon ?? '-' }}</td>
                                    </tr>
                                    <tr class="border-bottom">
                                        <td class="fw-bold">Alamat</td>
                                        <td style="width: 1px;">:</td>
                                        <td class="">{{ $guru->user->alamat ?? '-' }}</td>
                                    </tr>
                                    <tr class="border-bottom">
                                        <td class="fw-bold">Username</td>
                                        <td style="width: 1px;">:</td>
                                        <td class="">{{ $guru->user->username ?? '-' }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                  <div class="card card-secondary">
                      <div class="card-header">
                          <div class="float-left pt-1">
                              QR Code
                          </div>
                          <div class=" float-right">
                              <a href="/guru/{{ $guru->id }}?download=qrcode" class="btn btn-sm btn-primary" target="_blank">
                                  <i class="fa fa-download"></i>
                                  Download
                              </a>
                          </div>
                      </div>
                      <div class="card-body">
                          <div class="text-center">
                              {!! QrCode::size(300)->generate($guru->barcode->idt) !!}
                          </div>
                      </div>
                  </div>
              </div>
            </div>
    </section>
@endsection

@section('js')
@endsection