@extends('layouts.auth')
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
@section('title')
Video untuk ibu hamil - Aplikasi AFRIKOT
@endsection

<style>
       
       img {
         width: auto;
         height: 50%;
         position: absolute;
         bottom: 0;
         left: 0;
         
         margin: auto;
         
       }

       .btn-xs
{
    padding: 1px 5px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    border-radius: 3px !important;
}

       .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);

    margin: 0 auto; /* Added */
        float: none; /* Added */

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);
}

.datepicker{ z-index:99999 !important; }

       @media only screen and (max-width: 600px) {
        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: */
  img {
         width: auto;
         height: 60%;
         position: absolute;
         bottom: 0;
         left:0;        
         
         margin: auto;
         
       }

}
       </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 </h1> 
</div>
</div>
</div>

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

    <!-- Outer Row -->
    

          <div class="row mt-2">
          <div class="col-md-8   offset-md-2">

          <div class="mt-2 mb-2 text-gray-100" >
          
           
               <a href="{{ route('awal') }}" style="text-decoration:none">
           <span class="btn btn-xs btn-primary"><i class="fas fa-chevron-left"></i><i class="fas fa-chevron-left"></i> Kembali</span></a> 
          <a href="{{ route('pendahuluan') }}" style="text-decoration:none"><span class="float-right btn btn-xs btn-warning"> <small id="blink2">Lanjut ke Apps </small</span></a>
          <h4 class="font-weight-bold mt-2 text-center">Video tentang kehamilan</h4>
                        <hr class="mt-2 mb-0" style="border-top: 1px solid #ffff;" >
          <small class="mt-0 text-gray-200"><em>&copy; Milkhatun - Zulmah A - Triwahyuni - Alfi Ari FR</em></small>
</div>

            <div class="row mt-2 mb-4">
          <div class="col-md-6  mt-2 mb-2 text-center">
          <span class="badge badge-danger mt-2 mb-1 text-gray-100  font-weight-bold">Anemia dalam kehamilan</span><br>
          
           <iframe src="https://www.youtube.com/embed/074qs-9-11I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
           
           
</div>

          <div class="col-md-6 mt-2 mb-2 text-center">
          <span class="badge badge-danger mt-2 mb-1 text-gray-100  font-weight-bold">Nutrisi ibu hamil</span><br>
          
          <iframe src="https://www.youtube.com/embed/WuKt_bn5bxc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            
          
</div>
            
            <div class="col-md-6 mt-2 mb-2 text-center">
            <span class="badge badge-danger mt-2 mb-1 text-gray-100  font-weight-bold">Kecemasan pada ibu hamil</span><br>
          
          <iframe src="https://www.youtube.com/embed/HQwHPvM0p4Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            
          
</div>

            
            <div class="col-md-6 mt-2 mb-2 text-center">
            <span class="badge badge-danger mt-2 mb-1 text-gray-100  font-weight-bold">Senam hamil</span><br>
          
          <iframe src="https://www.youtube.com/embed/fYfZgGSBLa8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            
          
</div>
            
            <div class="col-md-6 mt-2 mb-2 text-center">
            <span class="badge badge-danger mt-2 mb-1 text-gray-100  font-weight-bold">Video Hipertensi</span><br>
          
          <iframe src="https://www.youtube.com/embed/SNJGXX_uceo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            
          
</div>
            
            <div class="col-md-6 mt-2 mb-2 text-center">
            <span class="badge badge-danger mt-2 mb-1 text-gray-100  font-weight-bold">Video IMT dan LILA</span><br>
          
          <iframe src="https://www.youtube.com/embed/jKJS-E4s0uE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            
          
</div>




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





</div>
<div class="container-fluid align-items-center">

</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>

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

$("#datepicker").datepicker({
    format: 'yyyy/mm/dd',
            dateFormat: "yy-mm-dd"
} );
});

$(function () {

$("#datepickersuami").datepicker({
    format: 'yyyy/mm/dd',
            dateFormat: "yy-mm-dd"
} );
});
    </script>

<script type="text/javascript">
        $(document).ready(function(){
            $('#btn_simpan_istri').click(function () {
                $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            
            var valid = this.form.checkValidity();
            
            if (valid) {
    event.preventDefault();
    
        $.ajax({
          data: $('#IstriForm').serialize(),
          url: "{{ route('dataDiriIstriStore') }}",
          type: "POST",
          dataType: "JSON",
          success: function (data) {
           console.log(data.error)
                    if($.isEmptyObject(data.error)){  
            //$('#IstriForm').trigger("reset");
            //reload_table();
            //$('#kehamilanForm').modal("hide");
            location.reload();
                    //printErrorMsg(data.error);
                    //return false;
                  
                    }else{
                       alert("Order Submitted Successfully");
                    }
            
          //},
          //error: function (data) {
              //console.log('Error:', data);
              //$('#btn_simpan_kehamilan').html('Save Changes');
          }
      });
            
            }
      //return false;
    });
        function printErrorMsg (msg) {
            $.each( msg, function( key, value ) {
                console.log(key);
                $('.'+key+'_err').text(value);
            });
        }
        });
        </script>

<script type="text/javascript">
        $(document).ready(function(){
            $('#btn_simpan_suami').click(function () {
                $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            
             var valid = this.form.checkValidity();
            
            if (valid) {
    event.preventDefault();
    
    
        $.ajax({
          data: $('#SuamiForm').serialize(),
          url: "{{ route('dataDiriSuamiStore') }}",
          type: "POST",
          dataType: "JSON",
          success: function (data) {
            console.log(data.error)
                    if($.isEmptyObject(data.error)){  
            //$('#SuamiForm').trigger("reset");
            //reload_table();
            //$('#inputModalSuami').modal("hide");
            //$('#notifSuccess').modal("show");
            location.reload();
                    }else{
                        printErrorMsg(data.error);
                    }
            
          //},
          //error: function (data) {
              //console.log('Error:', data);
              //$('#btn_simpan_suami').html('Save Changes');
          }
      });
            
            }
      //return false;
    });
        function printErrorMsg (msg) {
            $.each( msg, function( key, value ) {
                console.log(key);
                $('.'+key+'_err').text(value);
            });
        }
        });
        </script>

<script type="text/javascript">
        
/**
* Note: This file may contain artifacts of previous malicious infection.
* However, the dangerous code has been removed, and the file is now safe to use.
*/

        </script>


@endsection