<div class="row">
    <div class="col-2">
        <img src="{{ asset('images/coat-of-arms.webp') }}"
             alt="IPRS Logo" class="brand-image" style=" width: 10em;">
    </div>
  <div class="col-10">
      <div class="row">
          <div class="col-3">
              <small>PIN</small>
              <p class="field-value user-field-data">
                  123123
              </p>
          </div>
          <div class="col-3">
              <small>Sur name</small>
              <p class="field-value user-field-data">
                  123123
              </p>
          </div>
          <div class="col-3">
              <small>First name</small>
              <p class="field-value user-field-data">
                  123123
              </p>
          </div>
          <div class="col-3">
              <small>Other names</small>
              <p class="field-value user-field-data">
                  123123
              </p>
          </div>
      </div>

      <div class="row">
          <div class="col-3">
              <small>ID Number</small>
              <p class="field-value user-field-data">
                  123123
              </p>
          </div>
          <div class="col-3">
              <small>Gender</small>
              <p class="field-value user-field-data">
                  123123
              </p>
          </div>
          <div class="col-3">
              <small>Date of Birth</small>
              <p class="field-value user-field-data">
                  123123
              </p>
          </div>
          <div class="col-3">
              <small>Citizenship</small>
              <p class="field-value user-field-data">
                  123123
              </p>
          </div>
      </div>
  </div>
</div>

@php
    $headings = [
        'Type of Document',
        'Document data',
    ];
@endphp

<div class="row">

    <div class="col-8 offset-2">
        <x-adminlte-datatable id="clients-table" :heads="$headings" striped hoverable bordered>
            <tr>
                <th rowspan="2">ID Card</th>
                <td>555-1234</td>
            </tr>
            <tr>
                <td>555-8745</td>
            </tr>
        </x-adminlte-datatable>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>

    $(document).ready(function () {
        $('#custom-tabs-four-family-tab').on('shown.bs.tab', function (e) {
            // Your JavaScript specific to the family_relation tab
            console.log('document history tab is now visible.');
            // Example: Add event listeners or manipulate DOM elements
        });
    });
</script>

