@extends('layouts.auth')

@section('title')
Navigasi Utama - Aplikasi AFRIKOT
@endsection

 
 
 <style>
  .modal-dialog {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
}

.modal-content {
  margin: 0 auto;
}

.card{
    
      transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
 
  cursor: pointer;
}

.card:hover{
     transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}
.main-wrapper {
  min-height: 80vh;  
}

.section {
  height: 100%;  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
        .footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: transparent;
   color: white;
   text-align: center;
}

hr.tebal {
  border: 5px solid #ffff;
  border-radius: 10px;
  width:120px;
}

hr.tebal2 {
  border: 5px solid #ffff;
  border-radius: 10px;
  width:80px;
  margin-left: 0;
}

/* ikon GOOGLE 
============================================*/
.fa-google {
  background: 
    linear-gradient(to bottom left,transparent 49%,#fbbc05 50%) 0 25%/48% 40%,
    linear-gradient(to top    left,transparent 49%,#fbbc05 50%) 0 75%/48% 40%,
  
    linear-gradient(-40deg ,transparent 53%,#ea4335 54%),
    linear-gradient( 45deg ,transparent 46%,#4285f4 48%),
    #34a853;
  background-repeat:no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.btn-google-new{background-color:#ebf1f7ff;}
    .btn-google-new:hover{background-color:#dcdcdcff;}
/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
@media all and (min-width: 768px) and (max-width: 959px) {
  .col-xl-7{
        disply:none;
		width:0;
		height:0;
		opacity:0;
		visibility: collapse;		
    } 
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 600px */
@media all and (min-width: 600px) and (max-width: 767px) {
    .col-xl-7{
        display:none;
		width:0;
		height:0;
		opacity:0;
		visibility: collapse
    } 
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media all and (min-width: 480px) and (max-width: 599px) {
    .col-xl-7{
        display:none;
		width:0;
		height:0;
		opacity:0;
		visibility: collapse
    } 
}
/*  #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media all and (max-width: 479px) {
    .col-xl-7{
        display:none;
		width:0;
		height:0;
		opacity:0;
		visibility: collapse
    }
}





       @media only screen and (max-width: 600px) {
         /* For phone: */

       
        .latifah2 {
          display:none;
		width:0;
		height:0;
		opacity:0;
		visibility: collapse
  }
        img {
          width: auto;
         height: 40%;
         position: absolute;
         bottom: 0;
         left: 0;
         
         margin: auto;
  }

}

@media only screen and (min-device-width : 600px) and (max-width: 992px) {
  /* For tablet: */

.latifah2 {
          display:none;
		width:0;
		height:0;
		opacity:0;
		visibility: collapse
  }

       img {
         width: auto;
         height: 60%;
         position: absolute;
         bottom: 0;
         left:0;        
         
         margin: auto;
         
       }
}

@media only screen and (min-width: 992px) {
  /* For desktop: */
  img {
         width: auto;
         height: 55%;
         position: absolute;
         bottom: 0;
         left:25%;   
         right:0;         
         
         margin: 0 auto;
         
       }



}

       </style>

</style>
    
@section('main-content')

<div class="container pb-4">
<div class="row">
  <div class="col-md-12">
  <h1 class="h5 mt-3  text-gray-100 font-weight-bold"><span id="blink"><i class="fa fa-circle text-success"></i></span>   AFRIKOT APP  <span class="float-right text-gray-100 small">Hi, {{ substr (Auth::user()->name,0,7 )}}... | <a class="btn btn-xs btn-danger" href="#" data-toggle="modal" data-target="#logoutModal">
                                <i class="fas fa-sign-out-alt fa-sm fa-fw text-gray-400"></i>
                                {{ __('Logout') }}
                            </a></span></h1> 
</div>
</div>
</div>

 @if ($cekHasil==0)
    <!-- Outer Row -->
<div class="container pb-4">
    
          <div class="align-items-center justify-content-between text-center mb-2 mt-4">
          @if ($cekHasil==0)
          <h1 class="h4 mb-0 text-gray-100">Klik step by step ya Bund, </h1>
          @else
          <h1 class="h4 mb-0 text-gray-100">Sudah selesai ya Bund, Yuk cek hasilnya </h1>
          @endif
          
          </div><div class="text-center mb-4">
          <hr class="tebal text-center">
</div>
@if ($cekHasil==0)
          <!-- Content Row -->
          <div class="row">
          
          <div class="col-xl-3 col-md-6 mb-2">
          

          </div>

            <!-- File -->
            <div class="col-xl-3 col-md-6 mb-2">

            <a href="{{ route('dataDiri') }}" style="text-decoration:none">
              <div class="card bg-gradient-warning shadow">
                <div class="card-body" style="padding-bottom:0px !important">
                  <div class="row align-items-center">
                    <div class="col md-6">
                    @if ($navDatadiri==0)
                      	<div class="mb-2 text-center text-gray-100"><i class="fa fa-address-book fa-2x"></i></div>
                        @else
                        <div class="mb-2 text-center text-gray-100"><i class="fa fa-check fa-2x"></i></div>
                    @endif
                    	<div class="h6 font-weight-bold text-center text-white">Identitas Diri</div>
                    	
                    </div>
                                    
                  </div>
                </div>
             
               
            </div></a>
            <br>
<!-- navigasi Riwayat Kesehatan -->
            @if ($navDatadiri==0)
            <a href="#" data-toggle="modal" data-target="#notifKesehatan" style="text-decoration:none">
              <div class="card bg-gradient-danger shadow">
                <div class="card-body" style="padding-bottom:0px !important">
                  <div class="row align-items-center">
                    <div class="col md-6">
                      	<div class="mb-2 text-center text-gray-100"><i class="fa fa-calendar fa-2x"></i></div>
                    	<div class="h6 font-weight-bold text-center text-white">Riwayat Kesehatan Ibu Hamil</div>

                    	
                    </div>
                                    
                  </div>
                </div>
            </div></a>

            @else
            <a href="{{ route('riwayatKesehatan') }}" style="text-decoration:none">
              <div class="card bg-gradient-danger shadow">
                <div class="card-body" style="padding-bottom:0px !important">
                  <div class="row align-items-center">
                    <div class="col md-6">
                    @if ($navRiwayatKesehatan==0)
                      	<div class="mb-2 text-center text-gray-100"><i class="fa fa-calendar fa-2x"></i></div>
                        @else
                        <div class="mb-2 text-center text-gray-100"><i class="fa fa-check fa-2x"></i></div>
                    @endif
                    	<div class="h6 font-weight-bold text-center text-white">Riwayat Kesehatan Ibu Hamil</div>

                    	
                    </div>
                                    
                  </div>
                </div>
            </div></a>
            
            @endif
            <br>
<!-- navigasi Riwayat Kehamilan -->
@if ($navRiwayatKesehatan==0)
<a href="#" data-toggle="modal" data-target="#notifKesehatan" style="text-decoration:none">
              <div class="card bg-gradient-info shadow">
                <div class="card-body" style="padding-bottom:0px !important">
                  <div class="row align-items-center">
                    <div class="col md-6">
                    @if ($navRiwayatKehamilan==0)
                      	<div class="mb-2 text-center  text-gray-100"><i class="fa fa-female fa-2x"></i> <i class="fa fa-female fa-2x"></i> <i class="fa fa-female fa-2x"></i></div>
                        @else
                        <div class="mb-2 text-center text-gray-100"><i class="fa fa-check fa-2x"></i></div>
                        @endif
                    	<div class="h6 font-weight-bold text-center text-white">Riwayat Kehamilan</div>

                    	
                    </div>
                                    
                  </div>
                </div>
             
               
            </div></a>
@else
<a href="{{ route('riwayatKehamilan') }}" style="text-decoration:none">
              <div class="card bg-gradient-info shadow">
                <div class="card-body" style="padding-bottom:0px !important">
                  <div class="row align-items-center">
                    <div class="col md-6">
                    @if ($navRiwayatKehamilan==0)
                      	<div class="mb-2 text-center  text-gray-100"><i class="fa fa-female fa-2x"></i> <i class="fa fa-female fa-2x"></i> <i class="fa fa-female fa-2x"></i></div>
                        @else
                        <div class="mb-2 text-center text-gray-100"><i class="fa fa-check fa-2x"></i></div>
                        @endif
                    	<div class="h6 font-weight-bold text-center text-white">Riwayat Kehamilan</div>

                    	
                    </div>
                                    
                  </div>
                </div>
             
               
            </div></a>
@endif
            <br>
<!-- navigasi Riwayat Kehamilan Sekarang-->
@if ($navRiwayatKehamilan==0)
<a href="#" data-toggle="modal" data-target="#notifKesehatan" style="text-decoration:none">
              <div class="card bg-purple shadow">
                <div class="card-body" style="padding-bottom:0px !important">
                  <div class="row align-items-center">
                    <div class="col md-6">
                      	<div class="mb-2 text-center  text-gray-100"><i class="fa fa-heartbeat fa-2x"></i></div>
                    	<div class="h6 font-weight-bold text-center text-white">Kehamilan Saat Ini</div>
                    	
                    </div>
                                    
                  </div>
                </div>
             
               
            </div></a>

@else
            <a href="{{ route('kehamilanSekarang') }}" style="text-decoration:none">
              <div class="card bg-purple shadow">
                <div class="card-body" style="padding-bottom:0px !important">
                  <div class="row align-items-center">
                    <div class="col md-6">
                    @if ($navKehamilanSekarang==0)
                      	<div class="mb-2 text-center  text-gray-100"><i class="fa fa-heartbeat fa-2x"></i></div>
                        @else
                        <div class="mb-2 text-center text-gray-100"><i class="fa fa-check fa-2x"></i></div>
                        @endif
                    	<div class="h6 font-weight-bold text-center text-white">Kehamilan Saat Ini</div>

                    	
                    </div>
                                    
                  </div>
                </div>
             
               
            </div></a>
  @endif
            <br>
            @if ($navKehamilanSekarang==0)
<a href="#" data-toggle="modal" data-target="#notifKesehatan" style="text-decoration:none">
<div class="card bg-gradient-success shadow">
                <div class="card-body" style="padding-bottom:0px !important">
                  <div class="row align-items-center">
                    <div class="col md-6">
                      	<div class="mb-2 text-center text-gray-100"><i class="fa fa-bullhorn fa-2x"></i></div>
                    	<div class="h6 font-weight-bold text-center text-white">Survey</div>

                    	
                    </div>
                                    
                  </div>
                </div>           
               
            </div></a>

@else
            <a href="{{ route('listSurvey') }}" style="text-decoration:none">
              <div class="card bg-gradient-success shadow">
                <div class="card-body" style="padding-bottom:0px !important">
                  <div class="row align-items-center">
                    <div class="col md-6">
                      	<div class="mb-2 text-center text-gray-100"><i class="fa fa-bullhorn fa-2x"></i></div>
                    	<div class="h6 font-weight-bold text-center text-white">Survey</div>

                    	
                    </div>
                                    
                  </div>
                </div>           
               
            </div></a>
            @endif
            
            </div>
          
          <!-- File -->
            <div class="col-xl-3 col-md-6 mb-2">
            
            </div>
          

            <div class="col-xl-3 col-md-6 mb-2"></div>

            <img class="latifah2" src="{{ asset('img/latifah.png') }}" rel="popover" alt="description of myimage">
          <div class="col-md-12 text-center mt-4"><small class="mt-4 font-weight-bold text-gray-200"><em>&copy; Milkhatun - Zulmah A - Triwahyuni - Alfi Ari FR</em></small></div>
  
  </div>

  @else
  <div class="col-md-6 offset-md-3">
  <a href="{{ route('interpretasi') }}" style="text-decoration:none">
              <div class="card bg-success shadow">
                <div class="card-body" style="padding-bottom:0px !important">
                  <div class="row align-items-center">
                    <div class="col md-6">
                    
                        <div class="mb-2 text-center text-gray-100"><i class="fa fa-user fa-2x"></i></div>
                       
                    	<div class="h5 font-weight-bold text-center text-white">Cek hasilnya yuk bund</div>

                    	
                    </div>
                                    
                  </div>
                </div>
             
               
            </div></a>

            

  </div>

  <img src="{{ asset('img/RekadanAnak.png') }}" class="text-center" alt="description of myimage">
</div>
  @endif

@else

<div class="container-fluid bg-info">

    <!-- Outer Row -->
    
          <div class="row">
          <div class="col-md-8 offset-md-2">
          <div class="card  mt-3 mb-3 bg-transparent shadow">
                <div class="card-body" style="padding-bottom:0px !important">
              <div class="align-items-center justify-content-between text-center">
            <h1 class="h5 mb-0 text-gray-100">Yuk Bund, Lihat hasilnya</h1>
            <p><h1 class="display-4 mb-0  text-gray-100 font-weight-bold">AFRIKOT</h1></p>
            <p><small class="text-gray-100 font-weight-bold">ANALISIS FAKTOR RESIKO  IBU  REKOMENDASI  TERPADU</small></p>
          </div>
</div>
</div>
</div>
</div>



</div>
<div class="container-fluid align-items-center">
          <!-- Content Row -->
          <div class="row mt-2">

          <div class="col-md-8 offset-md-2 text-right">
            <a href="{{ route('interpretasi') }}" style="text-decoration:none">
              <div class="bg-transparent h-100">
                
                  <div class="row">
                    <div class="col md-6">
                      	<div class="h1 font-weight-bold" ><span class="badge badge-pill badge-danger">Cek Hasilnya <i class="fa fa-arrow-circle-right"></i></span>
                    </div>                  	
                    	
                    </div>                                    
                  </div>
                
             
               
            </div></a>
            </div>
          
  
          <!-- File 
          @guest
            <div class="col-md-8 offset-md-2 text-right">
            <a href="{{ url('auth/google') }}" style="text-decoration:none">
              <div class="bg-transparent h-100">
                
                  <div class="row">
                    <div class="col md-6">
                      	<div class="mb-2 display-4 font-weight-bold" ><span class="badge badge-pill badge-warning" id="blink">Go .. <i class="fa fa-arrow-circle-right"></i></span>
                    </div>                  	
                    	
                    </div>                                    
                  </div>
                
             
               
            </div></a>
            </div>

            @else

            <div class="col-md-8 offset-md-2 text-right">
            <a href="{{ url('home') }}" style="text-decoration:none">
              <div class="bg-transparent h-100">
                
                  <div class="row">
                    <div class="col md-6">
                      	<div class="mb-2 display-4 font-weight-bold" ><span class="badge badge-pill badge-info" id="blink">Go .. <i class="fa fa-arrow-circle-right"></i></span>
                    </div>                  	
                    	
                    </div>                                    
                  </div>
                
             
               
            </div></a>
            </div>

            @endguest-->

</div>
</div>
<img src="{{ asset('img/RekadanAnak.png') }}" class="text-center" alt="description of myimage">

@endif

  <!-- input Modal-->
<div class="modal fade" id="notifKesehatan" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header alert-danger border-0">
                <h5 class="modal-title font-weight-bold">{{ __('Notifikasi') }}</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
            <p class="text-center">input-nya step by step ya bund</p>
            </div>
            <div class="modal-footer border-0">
                <button class="btn btn-warning" type="button" data-dismiss="modal">{{ __('Close') }}</button>
                
                
            </div>
        </div>
    </div>
</div>


  <style>
        #blink {
            transition: 0.5s;
        }
    </style>


<script type="text/javascript">
        var blink = document.getElementById('blink');
        setInterval(function() {
            blink.style.opacity = (blink.style.opacity == 0 ? 1 : 0);
        }, 1000);
    </script>
  @endsection