<div>
             @php
                 $modalStyle="";
                 $modalStatus='';
                    if($isOpen) {
                       $modalStatus= 'show';
                       $modalStyle="display: block;";
                    }
             @endphp
             <x-adminlte-modal id="searchModalPassportBasic" class="{{ $modalStatus }}" style="{{ $modalStyle }}" size="lg"
                               title="" v-centered static-backdrop scrollable>
                 <div class="modal-body">
                     <ul class="nav nav-tabs" id="custom-tabs-four-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-four-home-tab" data-toggle="pill"
                                        href="#custom-tabs-four-home" role="tab" aria-controls="custom-tabs-four-home"
                                        aria-selected="true">
                                         Document data
                                     </a>
                                 @else
                                     <a class="nav-link active" id="custom-tabs-four-home-tab" data-toggle="pill" href="#custom-tabs-four-home" role="tab" aria-controls="custom-tabs-four-home" aria-selected="true">
                                         <div class="skeleton skeleton-text short" style="width: 10rem;"></div>
                                     </a>
                                 @endif
                             </li>
                         @endif
                         @if($role->hasPermissionTo("Basic View ID Photo and Signature"))
                                 <li class="nav-item">
                                     @if($modalStatus)
                                         <a class="nav-link" id="custom-tabs-four-photo-tab" data-toggle="pill"
                                            href="#custom-tabs-four-photo" role="tab" aria-controls="custom-tabs-four-photo"
                                            aria-selected="false">
                                             Photo & signature </a>
                                     @else
                                         <a class="nav-link" id="custom-tabs-four-family-tab" data-toggle="pill" href="#custom-tabs-four-family" role="tab" aria-controls="custom-tabs-four-family" aria-selected="false">
                                             <div class="skeleton skeleton-text short" style="width: 10rem;"></div>
                                         </a>
                                     @endif
                                 </li>
                             @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-four-history-tab" data-toggle="pill"
                                        href="#custom-tabs-four-documents" role="tab" aria-controls="custom-tabs-four-documents"
                                        aria-selected="false">
                                         Documents</a>
                                 @else
                                     <a class="nav-link" id="custom-tabs-four-family-tab" data-toggle="pill" href="#custom-tabs-four-family" role="tab" aria-controls="custom-tabs-four-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-four-history-tab" data-toggle="pill"
                                        href="#custom-tabs-four-history" role="tab" aria-controls="custom-tabs-four-history"
                                        aria-selected="false">
                                         Document History</a>
                                 @else
                                     <a class="nav-link" id="custom-tabs-four-family-tab" data-toggle="pill" href="#custom-tabs-four-family" role="tab" aria-controls="custom-tabs-four-family" aria-selected="false">
                                         <div class="skeleton skeleton-text short" style="width: 10rem;"></div>
                                     </a>
                                 @endif
                             </li>
                         @endif
                     </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-four-tabContent">
                                 @if($role->hasAnyPermission(["Basic View Passport Details"]))
                                     <div class="tab-pane fade show active" id="custom-tabs-four-home" role="tabpanel"
                                          aria-labelledby="custom-tabs-four-home-tab">
                                         @include('livewire.search.partials.tabs.passport_tabs.document_data')
                                     </div>
                                 @endif
                                 @if($role->hasPermissionTo("Basic View Passport Details"))
                                         <div class="tab-pane fade" id="custom-tabs-four-photo" role="tabpanel"
                                              aria-labelledby="custom-tabs-four-photo-tab">
                                             @include('livewire.search.partials.tabs.passport_tabs.document_header_details')
                                         </div>
                                     @endif
                                 @if($role->hasAnyPermission(["Basic View Passport Documents"]))
                                     <div class="tab-pane fade" id="custom-tabs-four-documents" role="tabpanel"
                                          aria-labelledby="custom-tabs-four-documents-tab">
                                         @include('livewire.search.partials.tabs.passport_tabs.document_header_details')

                                     </div>
                                 @endif
                                 @if($role->hasAnyPermission(["Basic View Passport History"]))
                                     <div class="tab-pane fade" id="custom-tabs-four-history" role="tabpanel"
                                          aria-labelledby="custom-tabs-four-history-tab">
                                         @include('livewire.search.partials.tabs.passport_tabs.document_header_details')
                                     </div>
                                 @endif
                             </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" wire:click="$refresh"/>
                 </x-slot>

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