@extends('adminlte::page')

@section('title', 'IPRS | Search')

@section('content_header')
@stop

@section('content')

    <livewire:search.searchform />
    <livewire:search.tableresult lazy />
    <livewire:search.passport-modal lazy />
    <livewire:search.birth-modal lazy />
    <livewire:search.resultsmodal lazy />

@stop

@section('css')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.0.0/css/flag-icons.min.css"/>
    <style type="text/css">
      .record-not-found{
          font-size: 20px;
          border: 2px solid red;
          width: fit-content;
          padding: 0 .75rem 0 .5rem;
          border-radius: 20px;
      }
      #category{
          font-size: 0.8rem;
          border-radius: 25px 0 0 25px;
      }
      #searchInput{
          border-radius: 0 25px 25px 0px;
      }
      .hbg-dark{
          background-color: #e6e6e6;
      }
      .create{
          color:red;
      }
      #submitSearch{
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        width: 20%;
      }

      #searchModalBasic > .modal-dialog{
          max-width: 95vw;
          margin: auto;
      }

      #searchModalPassport > .modal-dialog{
          max-width: 95vw;
          margin: auto;
      }

      #searchModalBirth > .modal-dialog{
          max-width: 95vw;
          margin: auto;
      }

      #overlaySpinner{
          position: fixed;
          top: 0;
          z-index: 100;
          width: 100%;
          height:100%;
          display: none;
          background:rgba(24, 104, 104, 0.5);
          left:0;
      }
      .cv-spinner {
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
      }
      .spinner {
          width: 40px;
          height: 40px;
          border: 4px #ddd solid;
          border-top: 4px #2e93e6 solid;
          border-radius: 50%;
          animation: sp-anime 0.8s infinite linear;
      }
      @keyframes sp-anime {
          100% {
              transform: rotate(360deg);
          }
      }
      .is-hide{
          display:none;
      }
      #searchCard{
          display: none;
      }
      .cardLine {
          width: 80%;
          height: 1px;
          background-color: #aaa;
          margin-bottom: 1rem;
      }

      .cardLine2 {
          width: 80%;
          height: 1px;
          background-color: #aaa;
          margin-bottom: 1rem;
      }

      .cardLine3 {
          width: 80%;
          height: 1px;
          background-color: #2e2b5a;
          margin-bottom: 1rem;
      }
      .upi{
          color: #115403;
          background-color: #6fff90;
          border-color: #28a745;
          box-shadow: none;
          padding: 9px;
          border-radius: 10px;
      }

      .field-value {
          font-size: 1.5rem;
          font-weight: 600;
          color: #010110;
          opacity: 1;
          transition: opacity 0.5s linear;
      }
      .field-value-text {
          font-size: 1rem;
          font-weight: 600;
          color: #010110;
          opacity: 1;
          transition: opacity 0.5s linear;
      }

  </style>
@stop

@section('js')
    <script>
        //handle basic modal: event delegation
        $(document).on('click', '#humanbtn',function(event){
            $('#searchModalBasic').modal('show');
        });

        //handle passport modal: event delegation
        $(document).on('click', '#passportbtn', function(event){
            $('#searchModalPassport').modal('show');
        });

        //handle passport modal: event delegation
        $(document).on('click', '#birthbtn', function(event){
            $('#searchModalBirth').modal('show');
        });

    </script>

@stop
