@extends('templates.master')

@section('breadcrumb')
  <div class="content content-full">
    <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2">
      <div class="flex-grow-1">
        <h1 class="h3 fw-bold mb-2">
          @php
          $title = "anggota"
          @endphp
          {{ strtoupper($title) }}
        </h1>
      </div>
      <nav class="flex-shrink-0 mt-3 mt-sm-0 ms-sm-3" aria-label="breadcrumb">
        <ol class="breadcrumb breadcrumb-alt">
          <li class="breadcrumb-item">
            <a class="link-fx" href="#">Dashboard</a>
          </li>
          <li class="breadcrumb-item">
            <a class="link-fx" href="#">{{ ucfirst($title) }}</a>
          </li>
          <li class="breadcrumb-item" aria-current="page">
            Tambah
          </li>
        </ol>
      </nav>
    </div>
  </div>
@endsection

@section('content')

  <div class="block block-rounded">
    <div class="block-header block-header-default">
      <h3 class="block-title">DETIL {{ $title }}</h3>
      <div class="block-options">
        <a href="{{ url('anggota') }}/{{ session()->get('kantor') }}">
            <button type="button" class="btn-block-option">
                <i class="si si-arrow-left"></i>
            </button>
        </a>
        <button type="button" class="btn-block-option" data-toggle="block-option" data-action="fullscreen_toggle">
            <i class="si si-size-fullscreen"></i>
        </button>
      </div>
    </div>
    <div class="block-content block-content-full">
      <div class="row">
        <div class="col">
          <ul id="anggota-tab" class="nav nav-tabs">
            <li class="nav-item">
                <a href="#data-anggota" class="nav-link active" data-bs-toggle="tab">Data Anggota</a>
            </li>
            <li class="nav-item">
                <a href="#data-pasangan" class="nav-link" data-bs-toggle="tab">Data Pasangan</a>
            </li>
            <li class="nav-item">
                <a href="#data-anggota-keluarga" class="nav-link" data-bs-toggle="tab">Data Anggota Keluarga</a>
            </li>
            <li class="nav-item">
                <a href="#aset-rumah-tangga" class="nav-link" data-bs-toggle="tab">Aset Rumah Tangga</a>
            </li>
            <li class="nav-item">
                <a href="#usaha-rumah-tangga" class="nav-link" data-bs-toggle="tab">Usaha Rumah Tangga</a>
            </li>
            <li class="nav-item">
                <a href="#pendapatan" class="nav-link" data-bs-toggle="tab">Pendapatan</a>
            </li>
            <li class="nav-item">
              <a href="#anggota-photo" class="nav-link" data-bs-toggle="tab">Photo</a>
            </li>
          </ul>
          <div class="tab-content py-4">
            <!-- Data Anggota -->
            <div class="tab-pane fade show active" id="data-anggota">
              @include('anggota.anggota.detail._data_anggota')
            </div>
            <!-- End Data Anggota -->

            <!-- Data Pasangan -->
            <div class="tab-pane fade" id="data-pasangan">
              @include('anggota.anggota.detail._data_pasangan')
            </div>
            <!-- End Data Pasangan -->

            <!-- Anggota Keluarga -->
            <div class="tab-pane fade" id="data-anggota-keluarga">
              @include('anggota.anggota.detail._data_anggota_keluarga')
            </div>
            <!-- End Anggota Keluarga -->

            <!-- Aset Rumah Tangga -->
            <div class="tab-pane fade" id="aset-rumah-tangga">
              @include('anggota.anggota.detail._aset_rumah_tangga')
            </div>
            <!-- End Aset Rumah Tangga -->

            <!-- Usaha Rumah Tangga -->
            <div class="tab-pane fade" id="usaha-rumah-tangga">
              @include('anggota.anggota.detail._anggota_usaha')
            </div>
            <!-- End Usaha Rumah Tangga -->

            <!-- Pendapatan -->
            <div class="tab-pane fade" id="pendapatan">
              @include('anggota.anggota.detail._anggota_pendapatan')
            </div>
            <!-- End Pendapatan -->

            <!-- Anggota Photo -->
            <div class="tab-pane fade" id="anggota-photo">
              @include('anggota.anggota.detail._anggota_photo')
            </div>
            <!-- End Anggota Photo -->
          </div>
        </div>
      </div>
    </div>
  </div>

@endsection

@section('js')
<script type='text/javascript'>
  $('.text-number-separator').each(function(i, elm) {
    if (/^[0-9.,]+$/.test($(elm).text())) {
      $(elm).text(
        parseFloat($(elm).text().replace(/,/g, '')).toLocaleString('en')
      );
    } else {
      $(elm).text(
        $(elm)
          .text()
          .substring(0, $(elm).text().length - 1)
      );
    }
  });
</script>
@parent
@endsection