<div>
    @php
        $modalStyle="";
        $modalStatus='';
           if($isOpen) {
              $modalStatus= 'show';
              $modalStyle="display: block;";
           }
        $fname = $human['name'] ?? '';
        $sname = $human['surn'] ?? '';
        $mname= $human['last_name'] ?? '';
    @endphp

    <x-adminlte-modal id="searchModalBasic" class="{{ $modalStatus }}" style="{{ $modalStyle }}" size="lg"
                      title="ID Details: {{ $fname }} {{ $mname }} {{ $sname }}" v-centered static-backdrop scrollable>
        <div class="modal-body">
            <ul class="nav nav-tabs" id="custom-tabs-six-tab" role="tablist">
                @if($role->hasAnyPermission(["Basic View ID Details", "Basic View Passport Details", "Basic View Birth Details"]))
                    <li class="nav-item">
                        @if($modalStatus)
                        <a class="nav-link active" id="custom-tabs-six-home-tab" data-toggle="pill"
                           href="#custom-tabs-six-home" role="tab" aria-controls="custom-tabs-six-home"
                           aria-selected="true">
                            Document data
                        </a>
                        @else
                            <a class="nav-link active" id="custom-tabs-six-home-tab" data-toggle="pill" href="#custom-tabs-six-home" role="tab" aria-controls="custom-tabs-six-home" aria-selected="true">
                                <div class="skeleton skeleton-text short" style="width: 10rem;"></div>
                            </a>
                        @endif
                    </li>
                @endif
                @if($role->hasAnyPermission(["Basic View ID Family relations","Basic View Passport Family relations", "Basic View Birth Family relations"]))
                    <li class="nav-item">
                        @if($modalStatus)
                        <a class="nav-link" id="custom-tabs-six-family-tab" data-toggle="pill"
                           href="#custom-tabs-six-family" role="tab" aria-controls="custom-tabs-six-family"
                           aria-selected="false">
                            Family relations
                        </a>
                        @else
                            <a class="nav-link" id="custom-tabs-six-family-tab" data-toggle="pill" href="#custom-tabs-six-family" role="tab" aria-controls="custom-tabs-six-family" aria-selected="false">
                                <div class="skeleton skeleton-text short" style="width: 10rem;"></div>
                            </a>
                        @endif
                    </li>
                @endif
                @if($doctype == 'ID')
                    @if($role->hasPermissionTo("Basic View ID Photo and Signature"))
                        <li class="nav-item">
                            @if($modalStatus)
                            <a class="nav-link" id="custom-tabs-six-photo-tab" data-toggle="pill"
                               href="#custom-tabs-six-photo" role="tab" aria-controls="custom-tabs-six-photo"
                               aria-selected="false">
                                Photo & signature </a>
                            @else
                                <a class="nav-link" id="custom-tabs-six-family-tab" data-toggle="pill" href="#custom-tabs-six-family" role="tab" aria-controls="custom-tabs-six-family" aria-selected="false">
                                    <div class="skeleton skeleton-text short" style="width: 10rem;"></div>
                                </a>
                            @endif
                        </li>
                    @endif
                @endif
                @if($role->hasAnyPermission(["Basic View ID Documents", "Basic View Passport Documents", "Basic View Birth Documents"]))
                    <li class="nav-item">
                        @if($modalStatus)
                        <a class="nav-link" id="custom-tabs-six-history-tab" data-toggle="pill"
                           href="#custom-tabs-six-documents" role="tab" aria-controls="custom-tabs-six-documents"
                           aria-selected="false">
                            Documents</a>
                        @else
                            <a class="nav-link" id="custom-tabs-six-family-tab" data-toggle="pill" href="#custom-tabs-six-family" role="tab" aria-controls="custom-tabs-six-family" aria-selected="false">
                                <div class="skeleton skeleton-text short" style="width: 10rem;"></div>
                            </a>
                        @endif
                    </li>
                @endif
                @if($role->hasAnyPermission(["Basic View ID History", "Basic View Passport History", "Basic View Birth History"]))
                    <li class="nav-item">
                        @if($modalStatus)
                        <a class="nav-link" id="custom-tabs-six-history-tab" data-toggle="pill"
                           href="#custom-tabs-six-history" role="tab" aria-controls="custom-tabs-six-history"
                           aria-selected="false">
                            Document History</a>
                        @else
                            <a class="nav-link" id="custom-tabs-six-family-tab" data-toggle="pill" href="#custom-tabs-six-family" role="tab" aria-controls="custom-tabs-six-family" aria-selected="false">
                                <div class="skeleton skeleton-text short" style="width: 10rem;"></div>
                            </a>
                        @endif
                    </li>
                @endif
                <li class="nav-item">
                    @if($modalStatus)
                    <a class="nav-link" id="custom-tabs-six-history-tab" data-toggle="pill"
                       href="#custom-tabs-six-death" role="tab" aria-controls="custom-tabs-six-death"
                       aria-selected="false">
                        Date of Death
                    </a>
                    @else
                        <a class="nav-link" id="custom-tabs-six-family-tab" data-toggle="pill" href="#custom-tabs-six-family" role="tab" aria-controls="custom-tabs-six-family" aria-selected="false">
                            <div class="skeleton skeleton-text short" style="width: 10rem;"></div>
                        </a>
                    @endif
                </li>
            </ul>
            <div class="card card-primary card-outline card-outline-tabs" style="box-shadow: none;">
                <div class="card-header p-0 border-bottom-0">
                </div>
                <div class="card-body">
                    <div class="tab-content" id="custom-tabs-six-tabContent">
                        @if($role->hasAnyPermission(["Basic View ID Details", "Basic View Passport Details", "Basic View Birth Details"]))
                            <div class="tab-pane fade show active" id="custom-tabs-six-home" role="tabpanel"
                                 aria-labelledby="custom-tabs-six-home-tab">
                                @include('livewire.search.partials.tabs.id.document_data')
                            </div>
                        @endif
                        @if($role->hasAnyPermission(["Basic View ID Family relations","Basic View Passport Family relations", "Basic View Birth Family relations"]))
                            <div class="tab-pane fade" id="custom-tabs-six-family" role="tabpanel"
                                 aria-labelledby="custom-tabs-six-family-tab">
                                @include('livewire.search.partials.tabs.id.document_header_details')
                                @include('livewire.search.partials.tabs.id.family_relation')
                            </div>
                        @endif
                        @if($doctype == 'ID')
                            @if($role->hasPermissionTo("Basic View ID Photo and Signature"))
                                <div class="tab-pane fade" id="custom-tabs-six-photo" role="tabpanel"
                                     aria-labelledby="custom-tabs-six-photo-tab">
                                    @include('livewire.search.partials.tabs.id.document_header_details')
                                    @include('livewire.search.partials.tabs.id.photo')
                                </div>
                            @endif
                        @endif
                        @if($role->hasAnyPermission(["Basic View ID Documents", "Basic View Passport Documents", "Basic View Birth Documents"]))
                            <div class="tab-pane fade" id="custom-tabs-six-documents" role="tabpanel"
                                 aria-labelledby="custom-tabs-six-documents-tab">
                                @include('livewire.search.partials.tabs.id.document_header_details')
                                @include('livewire.search.partials.tabs.id.human_document')
                            </div>
                        @endif
                        @if($role->hasAnyPermission(["Basic View ID History", "Basic View Passport History", "Basic View Birth History"]))
                            <div class="tab-pane fade" id="custom-tabs-six-history" role="tabpanel"
                                 aria-labelledby="custom-tabs-six-history-tab">
                                @include('livewire.search.partials.tabs.id.document_header_details')
                                @include('livewire.search.partials.tabs.id.document_history')
                            </div>
                        @endif
                        <div class="tab-pane fade" id="custom-tabs-six-death" role="tabpanel"
                             aria-labelledby="custom-tabs-six-death-tab">
                            @include('livewire.search.partials.tabs.id.document_header_details')
                            <h2>No results!</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <x-slot name="footerSlot">
            <x-adminlte-button theme="info" label="Print" data-dismiss="modal"/>
            <x-adminlte-button theme="danger" label="Close" data-dismiss="modal"/>
        </x-slot>

    </x-adminlte-modal>
    <style>
        #searchModalBasic > .modal-dialog{
            max-width: 95vw;
            margin: auto;
        }
    </style>
</div>
