@extends('layouts.appuser')




@section('dynamic_css')
<style>

    .clock_style{
        font-size: 17px;
       font-family: monospace;
        color: #364db9;
    }
	@media (max-width: 768px)
	{

	}

</style>
@endsection
@section('content')
<div class="container">  
    <div class="row">
        <div class="col-md-12 text-right">
                        <div class="clock_style">
                            <small class="text-sm"> &nbsp;Thursday 28th May - 2026,&nbsp;Time&nbsp;<span id="txt"></span></small>
                            <input type="hidden" name="clock_date" value="" id="date">
                            <input type="hidden" name="clock_time" value="" id="clock_time">

                        </div>
        </div>
    </div>
    <div class="row container_layout " >       
                <div class="col-md-8 card_row card_row-last">
                         
                            <div class="card  card-cascade narrower animated zoomIn">
                                 <div class="view view-cascade gradient-card-header info-color narrower py-2 mx-4 mb-3  text-center" style="margin-top: -25px;">

                                     <span  class="white-text mx-3" style="font-size:18px;">
                                         <i class="fa fa-braille" aria-hidden="true"></i>
                                         Information Board
                                     </span>
                                         

                                 </div> 
                                <div class="card-body" style="padding:5px 5px 15px 5px;"> 
                                        <div class="text-center" style="width: 100%;height:470px;padding: 5px;margin-top:0px;font-size: 12px;font-variant: petite-caps;overflow-y: auto;">
                                        </div>
                                </div>
                            </div>
                      
                </div>  
                <div class="col-md-4 card_row card_row-last">
                         
                            <div class="card  card-cascade narrower animated zoomIn">
                                 <div class="view view-cascade gradient-card-header red narrower py-2 mx-4 mb-3  text-center" style="margin-top: -25px;">

                                     <span  class="white-text mx-3" style="font-size:18px;">
                                         <i class="fa fa-external-link" aria-hidden="true"></i> Important Links</span>

                                 </div> 
                                <div class="card-body" style="padding:5px 5px 15px 5px;"> 

                                        <div class="text-left" style="width: 100%;height:470px;padding: 5px;margin-top:0px;font-size: 12px;font-variant: petite-caps;overflow-y: auto;">
                                            
                                            <ol>
                                              <li>
                                                  Online applications are invited from the intending eligible contractual employees working under the Commissionerate of Panchayat & Rural Development, Assam for filling up of "Assistant District Program Manager(MGNREGA)[earlier District MIS Manager(Contractual) under MGNREGA] AND "Assistant District Program Manager(PMAY-G)[earlier District I.T Officer(Contractual) under PMAYT-G]".<a href="http://pnrdhcms.org/intrarecruitment/public/loged_in/{{base64_encode(Auth::user()->username)}}" class="btn btn-danger btn-xs" target="_blank">Click Here</a> 
                                               </li>

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

</div>

@endsection

@section('dynamic_js')
<script>
    function startTime() {
        var time = new Date();
        var date = time.getDate();
        var month = time.getMonth() + 1;
        var years = time.getFullYear();
        var hr = time.getHours();
        var hour = time.getHours();
        var min = time.getMinutes();
        var minn = time.getMinutes();
        var sec = time.getSeconds();
        var secc = time.getSeconds();
        if (date <= 9) {
            var dates = "0" + date;
        } else {
            dates = date;
        }
        if (month <= 9) {
            var months = "0" + month;
        } else {
            months = month;
        }
        var ampm = " PM "
        if (hr < 12) {
            ampm = " AM "
        }
        if (hr > 12) {
            hr -= 12
        }
        if (hr < 10) {
            hr = " " + hr
        }
        if (min < 10) {
            min = "0" + min
        }
        if (sec < 10) {
            sec = "0" + sec
        }
        
        document.getElementById('date').value = years + "-" + months + "-" + dates;
        document.getElementById('clock_time').value = hour + ":" + minn + ":" + secc;
        document.getElementById('txt').innerHTML = hr + ":" + min + ":" + sec + ampm;
        var t = setTimeout(function () {
            startTime()
        }, 500);
    }

    function checkTime(i) {
        if (i < 10) {
            i = "0" + i
        }
        ;  // add zero in front of numbers < 10
        return i;
    }
    
    startTime()
</script>

@endsection