@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 = "Tambah Anggota"
          @endphp
          {{ $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">
            {{ $title }}
          </li>

        </ol>
      </nav>
    </div>
  </div>
@endsection

@section('content')

  <div class="block block-rounded">
    <div class="block-header block-header-default">
      <h3 class="block-title">{{ $title }}</h3>
      <div class="block-options">
        <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#tambah">
          <i class="fa fa-plus"></i> Tambah
        </button>
      </div>
    </div>
    <div class="block-content block-content-full">

      <div class="block block-rounded">

        <ul class="nav nav-tabs nav-tabs-alt" role="tablist">
          <li class="nav-item">
            <button class="nav-link active" id="btabs-alt-static-home-tab" data-bs-toggle="tab" data-bs-target="#btabs-alt-static-home" role="tab" aria-controls="btabs-alt-static-home" aria-selected="true">Data Anggota</button>
          </li>

          <li class="nav-item">
            <button class="nav-link" id="data-pasangan" data-bs-toggle="tab" data-bs-target="#btabs-alt-static-profile" role="tab" aria-controls="btabs-alt-static-profile" aria-selected="false">Data Pasangan</button>
          </li>

          <li class="nav-item">
            <button class="nav-link" id="data-anggota-keluarga" data-bs-toggle="tab" data-bs-target="#btabs-alt-static-keluarga" role="tab" aria-controls="btabs-alt-static-keluarga" aria-selected="false">Data Anggota Keluarga</button>
          </li>

        </ul>

        <div class="block-content tab-content">
          <div class="tab-pane active" id="btabs-alt-static-home" role="tabpanel" aria-labelledby="btabs-alt-static-home-tab">
            <form action="">
              <div class="row">
                <div class="col-md-6">
                  <div class="mb-4">
                    <label class="form-label">Rumpun</label>
                    <input type="text" class="form-control" name="rumpun">
                  </div>

                  <div class="mb-4">
                    <label class="form-label">Tanggal Registrasi</label>
                    <input type="date" class="form-control" name="rumpun">
                  </div>

                  <div class="mb-4">
                    <label class="form-label">Nama</label>
                    <input type="text" class="form-control" name="rumpun">
                  </div>

                  <div class="mb-4">
                    <label class="form-label">ID Anggota</label>
                    <input type="text" class="form-control" name="rumpun" disabled>
                  </div>

                  <div class="mb-4">
                    <label class="form-label">Rumpun</label>
                    <input type="text" class="form-control" name="rumpun">
                  </div>

                  <div class="mb-4">
                    <label class="form-label">Petugas</label>
                    <select name="" class="form-control">
                      <option value="">-- Pilih Petugas --</option>
                      <option value="">...</option>
                    </select>
                  </div>
                </div>

                <div class="col-md-6">
                  <div class="mb-4">
                    <label class="form-label">Nama Ibu Kandung</label>
                    <input type="text" class="form-control" name="">
                  </div>

                  <div class="mb-4">
                    <label class="form-label">Tempat Lahir</label>
                    <input type="date" class="form-control" name="">
                  </div>

                  <div class="mb-4">
                    <label class="form-label">Tanggal Lahir</label>
                    <input type="text" class="form-control" name="">
                  </div>

                  <div class="mb-4">
                    <label class="form-label">Status Perkawinan</label>
                    <select name="" class="form-control">
                      <option value="" hidden>-- Pilih Status Perkawinan --</option>
                      <option value="">...</option>
                    </select>
                  </div>

                  <div class="mb-4">
                    <label class="form-label">Pendidikan</label>
                    <select name="" class="form-control">
                      <option value="" hidden>-- Pilih Pendidikan --</option>
                      <option value="">...</option>
                    </select>
                  </div>

                  <div class="mb-4">
                    <label class="form-label">Pekerjaan</label>
                    <select name="" class="form-control">
                      <option value="" hidden>-- Pilih Pekerjaan --</option>
                      <option value="">...</option>
                    </select>
                  </div>
                </div>
              </div>

            </form>
          </div>

          <div class="tab-pane" id="btabs-alt-static-profile" role="tabpanel" aria-labelledby="data-pasangan">
            <h4 class="fw-normal">Data Pasangan</h4>
            <p>...</p>
          </div>

          <div class="tab-pane" id="btabs-alt-static-keluarga" role="tabpanel" aria-labelledby="data-anggota-keluarga">
            <h4 class="fw-normal">Data Anggota Keluarga</h4>
            <p>...</p>
          </div>
        </div>

      </div>

    </div>
  </div>

@endsection