@extends('layouts.adminv2x')
@section('content')
<!-- Page Sidebar Ends-->
<style>
  .loader {
 position: relative;
 width: 2.5em;
 height: 2.5em;
 transform: rotate(165deg);
}

.loader:before, .loader:after {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 display: block;
 width: 0.5em;
 height: 0.5em;
 border-radius: 0.25em;
 transform: translate(-50%, -50%);
}

.loader:before {
 animation: before8 2s infinite;
}

.loader:after {
 animation: after6 2s infinite;
}

@keyframes before8 {
 0% {
  width: 0.5em;
  box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
 }

 35% {
  width: 2.5em;
  box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
 }

 70% {
  width: 0.5em;
  box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
 }

 100% {
  box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
 }
}

@keyframes after6 {
 0% {
  height: 0.5em;
  box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
 }

 35% {
  height: 2.5em;
  box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
 }

 70% {
  height: 0.5em;
  box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
 }

 100% {
  box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
 }
}

.loader {
 position: absolute;
 top: calc(50% - 1.25em);
 left: calc(50% - 1.25em);
}
</style>
<div class="page-body">
<!-- Container-fluid starts-->
          <div class="container-fluid">
            <div class="row">
              <div class="col-xxl-12 col-ed-12 col-xl-12 box-col-12 mt-0">
                <div class="row">
                  <div class="col-sm-12 mt-4">
                    <div class="card o-hidden welcome-card" style="height:150px;margin-top:-150px">            
                      <div class="card-body">
      
                        <h4 class="mb-3 mt-1 f-w-500 mb-0 f-22">Halo! <span> <img src="{{ asset('fonts/hand.svg') }}" alt="hand vector"></span> Selamat Datang di <br><p style="font-size:32pt">RSI Amal Sehat Sragen</p></h4>
                        <p></p>
                      </div><img class="welcome-img" src="{{ asset('fonts/cartoon.svg') }}" alt="search image">
                    </div>
                  </div>
                  <div class="col-sm-6">
                <div class="card course-box"> 
                <div class="card-body"> 
                <div class="course-widget">
                  <div class="text-center"> 
                    <div class="get-image text-center" style="height: auto;">
                      <img class="img-fluid" style="width: 50%; display: inline-block;margin-bottom:-10px;" src="{{ asset('images/logo/rencana.png') }}" alt="leptop with men vector">
                    </div>
                    <div class="text-center"><hr>
                    <p style="font-size:75pt" class="text-success">{{ $dataPasienTotal['rencana'] ?? 'Data Null' }}</p>
                </div>
              </div>
            </div>
          </div>
    <ul class="square-group">
      <li class="square-1 warning"></li>
      <li class="square-1 primary"></li>
      <li class="square-2 warning1"></li>
      <li class="square-3 danger"></li>
      <li class="square-4 light"></li>
      <li class="square-5 warning"></li>
      <li class="square-6 success"></li>
      <li class="square-7 success"></li>
    </ul>
  </div>
</div>

                  <div class="col-sm-6">
                <div class="card course-box"> 
                <div class="card-body"> 
                <div class="course-widget">
                  <div class="text-center"> 
                    <div class="get-image text-center" style="height: auto;">
                      <img class="img-fluid" style="width: 47%; display: inline-block;margin-bottom:-10px;" src="{{ asset('images/logo/pasiendilayani.png') }}" alt="leptop with men vector">
                    </div>
                    <div class="text-center"><hr>
                    <p style="font-size:75pt" class="text-info">{{ $dataPasienTotal['terlayani'] ?? 'Data Null' }}</p>
                </div>
              </div>
            </div>
          </div>
    <ul class="square-group">
      <li class="square-1 warning"></li>
      <li class="square-1 primary"></li>
      <li class="square-2 warning1"></li>
      <li class="square-3 danger"></li>
      <li class="square-4 light"></li>
      <li class="square-5 warning"></li>
      <li class="square-6 success"></li>
      <li class="square-7 success"></li>
    </ul>
  </div>
</div>
                    <!-- <div class="col-sm-4">
  <div class="card course-box"> 
    <div class="card-body"> 
      <div class="course-widget">
        <div class="text-center"> 
          <div class="get-image text-center" style="height: auto;">
            <img class="img-fluid" style="width: 70%; display: inline-block;margin-bottom:-10px;" src="{{ asset('images/logo/kubikal-crm.png') }}" alt="leptop with men vector">
          </div>
          <div class="text-center"><hr>
                          <p>Kelola mudah dan cepat di Kubikal CRM!</p>
            <button class="btn btn-sm btn-pill btn-secondary">Cooming Soon</button> 
          </div>
        </div>
      </div>
    </div>
    <ul class="square-group">
      <li class="square-1 warning"></li>
      <li class="square-1 primary"></li>
      <li class="square-2 warning1"></li>
      <li class="square-3 danger"></li>
      <li class="square-4 light"></li>
      <li class="square-5 warning"></li>
      <li class="square-6 success"></li>
      <li class="square-7 success"></li>
    </ul>
  </div>
</div>
                                        <div class="col-sm-4">
  <div class="card course-box"> 
    <div class="card-body"> 
      <div class="course-widget">
        <div class="text-center"> 
          <div class="get-image text-center" style="height: auto;">
            <img class="img-fluid" style="width: 70%; display: inline-block;margin-bottom:-10px;" src="{{ asset('images/logo/kubikal-hris.png') }}" alt="leptop with men vector">
          </div>
          <div class="text-center"><hr>
                          <p>Kelola kepegawaian mudah dengan Kubikal HRIS!</p>
            <button class="btn btn-sm btn-pill btn-outline-primary">Coming Soon</button> 
          </div>
        </div>
      </div>
    </div>
    <ul class="square-group">
      <li class="square-1 warning"></li>
      <li class="square-1 primary"></li>
      <li class="square-2 warning1"></li>
      <li class="square-3 danger"></li>
      <li class="square-4 light"></li>
      <li class="square-5 warning"></li>
      <li class="square-6 success"></li>
      <li class="square-7 success"></li>
    </ul>
  </div>
</div>
                                     <div class="col-sm-4">
  <div class="card course-box"> 
    <div class="card-body"> 
      <div class="course-widget">
        <div class="text-center"> 
          <div class="get-image text-center" style="height: auto;">
            <img class="img-fluid" style="width: 70%; display: inline-block;margin-bottom:-10px;" src="{{ asset('images/logo/kubikal-asset.png') }}" alt="leptop with men vector">
          </div>
          <div class="text-center"><hr>
             <p>Kelola Asset mudah dengan Kubikal Asset!</p>
            <button class="btn btn-sm btn-pill btn-outline-primary">Coming Soon</button> 
          </div>
        </div>
      </div>
    </div>
    <ul class="square-group">
      <li class="square-1 warning"></li>
      <li class="square-1 primary"></li>
      <li class="square-2 warning1"></li>
      <li class="square-3 danger"></li>
      <li class="square-4 light"></li>
      <li class="square-5 warning"></li>
      <li class="square-6 success"></li>
      <li class="square-7 success"></li>
    </ul>
  </div>
</div> -->

<!-- Start
 <div class="row">
    @foreach($dataPasien as $item)
    <div class="col-xl-4 col-sm-6 col-xxl-3 col-ed-4 box-col-4">
        <div class="card social-profile">
            <div class="card-body">
                <div class="social-img-wrap">
                    <div class="social-img"><img class="img-fluid" src="{{ asset('images/profilbaru.png') }}" alt="profile"></div>
                </div>
                <div class="social-details">
                    <h3 class="mb-1">NO RM : {{ $item['nocm'] }}<hr><span class="btn btn-lg btn-pill btn-primary"><i class="fa fa-bell" aria-hidden="true"></i> RENCANA OPERASI : {{ $item['tanggaloperasi'] }}</span></h3><hr>
                    <h6 class="mb-1">{{ $item['jenistindakan'] }}</h6>
                    <div class="col-md-12">
                    </div>
                </div>
            </div>
        </div>
    </div>
    @if ($loop->iteration % 3 == 0) <!-- Membuat baris baru setiap 3 item -->
<!-- </div>
<div class="row">
@endif
@endforeach -->
<!-- </div> -->
<div class="slider-container">
    <div class="slider">
        @foreach($dataPasien as $item)
        <div class="slide">
            <div class="col-xl-4 col-sm-6 col-xxl-3 col-ed-4 box-col-4">
                <div class="card social-profile">
                    <div class="card-body">
                        <div class="social-img-wrap">
                            <div class="social-img"><img class="img-fluid" src="{{ asset('images/profilbaru.png') }}" alt="profile"></div>
                        </div>
                        <div class="social-details">
                            <h3 class="mb-1">NO RM : {{ $item['nocm'] }}<hr><span class="btn btn-lg btn-pill btn-primary"><i class="fa fa-bell" aria-hidden="true"></i> RENCANA OPERASI : {{ $item['tanggaloperasi'] }}</span></h3><hr>
                            <h6 class="mb-1">{{ $item['jenistindakan'] }}</h6>
                            <div class="col-md-12">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>

{{-- End Modul --}}
                </div>
              </div>
      {{-- End Container --}}
            
          </div>
        </div>
        {{-- End --}}
    </div>

<script>
    const slider = document.querySelector(".slider");
    const slides = document.querySelectorAll(".slide");

    let currentSlide = 0; // Dimulai dari slide pertama
    let slideInterval = 30000; // Ganti slide setiap 5 detik

    function nextSlide() {
        currentSlide = (currentSlide + 1) % slides.length;
        updateSlider();
    }

    function updateSlider() {
        const translateX = currentSlide * 100; // Menggeser slide sejauh 100% (lebar satu slide)
        slider.style.transform = `translateX(-${translateX}%)`;

        // Cek jika telah mencapai slide terakhir
        if (currentSlide === 0) {
            // Kembali ke slide terakhir
            currentSlide = slides.length - 1;
            updateSlider();
        }
    }

    setInterval(nextSlide, slideInterval);
</script>


@endsection