@extends('layouts.bedview')
@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" style="background-color: #efefef">
    <!-- Container-fluid starts-->
    <div class="container-fluid">
        <div class="row widget-grid">
            <div class="col-xxl-12 col-ed-12 col-xl-12 box-col-12 mt-0">
                <div class="row" style="background-color: #efefef">
                    <div class="col-sm-12 mt-4">
                        <div class="card o-hidden welcome-card" style="height:100px;margin-top:-140px">
                            <div class="card-body">

                                <h5 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 RSI Amal Sehat Sragen</h5>
                                <p></p>
                            </div>
                            <!-- <img class="welcome-img" src="{{ asset('fonts/cartoon.svg') }}" alt="search image"> -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- Feature section start -->
            <div class="row row-cols-xl-4 m-auto row-cols-lg-4 row-cols-sm-2 row-cols-1 gy-sm-4 gy-3 g-3">
                <div class="col">
                    <div class="card widget-1">
                        <div class="card-body">
                            <div class="widget-content">
                                <div class="widget-round secondary">
                                    <div class="bg-round">
                                        <li class="fa fa-bookmark font-warning" style="font-size:20pt"></li>
                                    </div>
                                </div>
                                <div>
                                    <h2>{{ $getTotalDataBed['totalruangan'] ?? 'Data Null' }}</h2><span
                                        class="f-bold">TOTAL BANGSAL</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card widget-1">
                        <div class="card-body">
                            <div class="widget-content">
                                <div class="widget-round secondary">
                                    <div class="bg-round">
                                        <li class="fa fa-bed font-info" style="font-size:20pt"></li>
                                    </div>
                                </div>
                                <div>
                                    <h2>{{ $getTotalDataBed['totalKeseluruhanBed'] ?? 'Data Null' }}</h4><span
                                            class="f-bold">TOTAL BED</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col">
                    <div class="card widget-1">
                        <div class="card-body">
                            <div class="widget-content">
                                <div class="widget-round secondary">
                                    <div class="bg-round">
                                        <li class="fa fa-bed font-danger" style="font-size:20pt"></li>
                                    </div>
                                </div>
                                <div>
                                    <h2>{{ $getTotalDataBed['totalTerisi'] ?? 'Data Null' }}</h3><span
                                            class="f-bold">BED TERISI</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col">
                    <div class="card widget-1">
                        <div class="card-body">
                            <div class="widget-content">
                                <div class="widget-round secondary">
                                    <div class="bg-round">
                                        <li class="fa fa-bed font-success" style="font-size:20pt"></li>
                                    </div>
                                </div>
                                <div>
                                    <h2>{{ $getTotalDataBed['sisaKeseluruhan'] ?? 'Data Null' }}</h2><span
                                        class="f-bold">BED KOSONG</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- <div class="row row-cols-xl-5 m-auto row-cols-lg-4 row-cols-sm-2 row-cols-1 gy-sm-4 gy-3 g-3">
            @foreach($getListBed['data'] as $item)
            <div class="col">
                <div class="card balance-box">
                    <div class="card-body">
                        <div class="social-img-wrap">
                            <div class="social-img"><img src="{{ asset('images/bed.webp') }}" alt="profile"></div>
                            <div class="edit-icon">
                            </div>
                        </div>

                        <div class="social-details">
                            <h3 class="mb-1">{{ $item['namaruangan'] }}</h3>
                            <span class="f-light">INFORMASI KETERSEDIAAN</span>
                            <hr>
                            <ul class="social-follow">
                                <li>
                                    <span class="btn btn-xs btn-pill btn-info mb-1">Total</span>
                                    <h4 class="mb-0">{{ $item['totalbed'] }}</h4>
                                </li>
                                <li>
                                    <span class="btn btn-xs btn-pill btn-danger mb-1">Terisi</span>
                                    <h4 class="mb-0">{{ $item['terisi'] }}</h4>
                                </li>
                                <li>
                                    <span class="btn btn-xs btn-pill btn-success mb-1">Kosong</span>
                                    <h4 class="mb-0">{{ $item['sisa'] }}</h4>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div> --}}

        <div class="row row-cols-xl-5 m-auto row-cols-lg-4 row-cols-sm-2 row-cols-1 gy-sm-4 gy-3 g-3">
            <div class="col">
                <div class="card balance-box">
                    <div class="card-body">
                        <div class="social-img-wrap">
                            <div class="social-img"><img src="{{ asset('images/bed.webp') }}" alt="profile"></div>
                            <div class="edit-icon">
                            </div>
                        </div>

                        <div class="social-details">
                            <h3 class="mb-1">KELAS III</h3>
                            <span class="f-light">INFORMASI KETERSEDIAAN</span>
                            <hr>
                            <ul class="social-follow">
                                <li>
                                    <span class="btn btn-xs btn-pill btn-danger mb-1">Terisi</span>
                                    <h4 class="mb-0">{{ $getListBed['totalKelas']['total_kelas_3_isi'] }}</h4>
                                </li>
                                <li>
                                    <span class="btn btn-xs btn-pill btn-success mb-1">Kosong</span>
                                    <h4 class="mb-0">{{ $getListBed['totalKelas']['total_kelas_3_kosong'] }}</h4>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card balance-box">
                    <div class="card-body">
                        <div class="social-img-wrap">
                            <div class="social-img"><img src="{{ asset('images/bed.webp') }}" alt="profile"></div>
                            <div class="edit-icon">
                            </div>
                        </div>

                        <div class="social-details">
                            <h3 class="mb-1">KELAS II</h3>
                            <span class="f-light">INFORMASI KETERSEDIAAN</span>
                            <hr>
                            <ul class="social-follow">
                                <li>
                                    <span class="btn btn-xs btn-pill btn-danger mb-1">Terisi</span>
                                    <h4 class="mb-0">{{ $getListBed['totalKelas']['total_kelas_2_isi'] }}</h4>
                                </li>
                                <li>
                                    <span class="btn btn-xs btn-pill btn-success mb-1">Kosong</span>
                                    <h4 class="mb-0">{{ $getListBed['totalKelas']['total_kelas_2_kosong'] }}</h4>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card balance-box">
                    <div class="card-body">
                        <div class="social-img-wrap">
                            <div class="social-img"><img src="{{ asset('images/bed.webp') }}" alt="profile"></div>
                            <div class="edit-icon">
                            </div>
                        </div>

                        <div class="social-details">
                            <h3 class="mb-1">KELAS I</h3>
                            <span class="f-light">INFORMASI KETERSEDIAAN</span>
                            <hr>
                            <ul class="social-follow">
                                <li>
                                    <span class="btn btn-xs btn-pill btn-danger mb-1">Terisi</span>
                                    <h4 class="mb-0">{{ $getListBed['totalKelas']['total_kelas_1_isi'] }}</h4>
                                </li>
                                <li>
                                    <span class="btn btn-xs btn-pill btn-success mb-1">Kosong</span>
                                    <h4 class="mb-0">{{ $getListBed['totalKelas']['total_kelas_1_kosong'] }}</h4>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card balance-box">
                    <div class="card-body">
                        <div class="social-img-wrap">
                            <div class="social-img"><img src="{{ asset('images/bed.webp') }}" alt="profile"></div>
                            <div class="edit-icon">
                            </div>
                        </div>

                        <div class="social-details">
                            <h3 class="mb-1">KELAS VIP</h3>
                            <span class="f-light">INFORMASI KETERSEDIAAN</span>
                            <hr>
                            <ul class="social-follow">
                                <li>
                                    <span class="btn btn-xs btn-pill btn-danger mb-1">Terisi</span>
                                    <h4 class="mb-0">{{ $getListBed['totalKelas']['total_vip_isi'] }}</h4>
                                </li>
                                <li>
                                    <span class="btn btn-xs btn-pill btn-success mb-1">Kosong</span>
                                    <h4 class="mb-0">{{ $getListBed['totalKelas']['total_vip_kosong'] }}</h4>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card balance-box">
                    <div class="card-body">
                        <div class="social-img-wrap">
                            <div class="social-img"><img src="{{ asset('images/bed.webp') }}" alt="profile"></div>
                            <div class="edit-icon">
                            </div>
                        </div>

                        <div class="social-details">
                            <h3 class="mb-1">KELAS VVIP</h3>
                            <span class="f-light">INFORMASI KETERSEDIAAN</span>
                            <hr>
                            <ul class="social-follow">
                                <li>
                                    <span class="btn btn-xs btn-pill btn-danger mb-1">Terisi</span>
                                    <h4 class="mb-0">{{ $getListBed['totalKelas']['total_vvip_isi'] }}</h4>
                                </li>
                                <li>
                                    <span class="btn btn-xs btn-pill btn-success mb-1">Kosong</span>
                                    <h4 class="mb-0">{{ $getListBed['totalKelas']['total_vvip_kosong'] }}</h4>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row row-cols-xl-5 m-auto row-cols-lg-4 row-cols-sm-2 row-cols-1 gy-sm-4 gy-3 g-3">
            <div class="col">
                <div class="card balance-box">
                    <div class="card-body">
                        <div class="social-img-wrap">
                            <div class="social-img"><img src="{{ asset('images/bed.webp') }}" alt="profile"></div>
                            <div class="edit-icon">
                            </div>
                        </div>

                        <div class="social-details">
                            <h3 class="mb-1">RUANG ICU</h3>
                            <span class="f-light">INFORMASI KETERSEDIAAN</span>
                            <hr>
                            <ul class="social-follow">
                                <li>
                                    <span class="btn btn-xs btn-pill btn-danger mb-1">Terisi</span>
                                    <h4 class="mb-0">{{ $getListBed['totalKelas']['total_icu_isi'] }}</h4>
                                </li>
                                <li>
                                    <span class="btn btn-xs btn-pill btn-success mb-1">Kosong</span>
                                    <h4 class="mb-0">{{ $getListBed['totalKelas']['total_icu_kosong'] }}</h4>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card balance-box">
                    <div class="card-body">
                        <div class="social-img-wrap">
                            <div class="social-img"><img src="{{ asset('images/bed.webp') }}" alt="profile"></div>
                            <div class="edit-icon">
                            </div>
                        </div>

                        <div class="social-details">
                            <h3 class="mb-1">RUANG ICCU</h3>
                            <span class="f-light">INFORMASI KETERSEDIAAN</span>
                            <hr>
                            <ul class="social-follow">
                                <li>
                                    <span class="btn btn-xs btn-pill btn-danger mb-1">Terisi</span>
                                    <h4 class="mb-0">{{ $getListBed['totalKelas']['total_iccu_isi'] }}</h4>
                                </li>
                                <li>
                                    <span class="btn btn-xs btn-pill btn-success mb-1">Kosong</span>
                                    <h4 class="mb-0">{{ $getListBed['totalKelas']['total_iccu_kosong'] }}</h4>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card balance-box">
                    <div class="card-body">
                        <div class="social-img-wrap">
                            <div class="social-img"><img src="{{ asset('images/bed.webp') }}" alt="profile"></div>
                            <div class="edit-icon">
                            </div>
                        </div>

                        <div class="social-details">
                            <h3 class="mb-1">RUANG NICU</h3>
                            <span class="f-light">INFORMASI KETERSEDIAAN</span>
                            <hr>
                            <ul class="social-follow">
                                <li>
                                    <span class="btn btn-xs btn-pill btn-danger mb-1">Terisi</span>
                                    <h4 class="mb-0">{{ $getListBed['totalKelas']['total_nicu_isi'] }}</h4>
                                </li>
                                <li>
                                    <span class="btn btn-xs btn-pill btn-success mb-1">Kosong</span>
                                    <h4 class="mb-0">{{ $getListBed['totalKelas']['total_nicu_kosong'] }}</h4>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card balance-box">
                    <div class="card-body">
                        <div class="social-img-wrap">
                            <div class="social-img"><img src="{{ asset('images/bed.webp') }}" alt="profile"></div>
                            <div class="edit-icon">
                            </div>
                        </div>

                        <div class="social-details">
                            <h3 class="mb-1">RUANG PICU</h3>
                            <span class="f-light">INFORMASI KETERSEDIAAN</span>
                            <hr>
                            <ul class="social-follow">
                                <li>
                                    <span class="btn btn-xs btn-pill btn-danger mb-1">Terisi</span>
                                    <h4 class="mb-0">{{ $getListBed['totalKelas']['total_picu_isi'] }}</h4>
                                </li>
                                <li>
                                    <span class="btn btn-xs btn-pill btn-success mb-1">Kosong</span>
                                    <h4 class="mb-0">{{ $getListBed['totalKelas']['total_picu_kosong'] }}</h4>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card balance-box">
                    <div class="card-body">
                        <div class="social-img-wrap">
                            <div class="social-img"><img src="{{ asset('images/bed.webp') }}" alt="profile"></div>
                            <div class="edit-icon">
                            </div>
                        </div>

                        <div class="social-details">
                            <h3 class="mb-1">RUANG ISOLASI</h3>
                            <span class="f-light">INFORMASI KETERSEDIAAN</span>
                            <hr>
                            <ul class="social-follow">
                                <li>
                                    <span class="btn btn-xs btn-pill btn-danger mb-1">Terisi</span>
                                    <h4 class="mb-0">{{ $getListBed['totalKelas']['total_ruang_isolasi_isi'] }}</h4>
                                </li>
                                <li>
                                    <span class="btn btn-xs btn-pill btn-success mb-1">Kosong</span>
                                    <h4 class="mb-0">{{ $getListBed['totalKelas']['total_ruang_isolasi_kosong'] }}</h4>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection