@extends("backend.layout-sticky.master")

@section("title")
    Home
@endsection


@push('css')
<style>

@media screen and (min-width: 1080px){
  .header-clear-medium {
    padding-top: calc(50px + (env(safe-area-inset-top))*0.8) !important;
    padding-bottom: calc(55px + (env(safe-area-inset-top))*0.8) !important;
    background-image: url('bg_rdental.jpg');
    background-position: top;
    background-size: cover !important;
  }
}

@media screen and (max-width: 1080px){
  .header-clear-medium {
    padding-top: calc(50px + (env(safe-area-inset-top))*0.8) !important;
    padding-bottom: calc(55px + (env(safe-area-inset-top))*0.8) !important;
    background-image: url('bg_rdental.jpg');
    background-position: top;
    background-size: cover !important;
  }
}

@media screen and (max-width: 760px){
  .header-clear-medium {
    padding-top: calc(50px + (env(safe-area-inset-top))*0.8) !important;
    padding-bottom: calc(55px + (env(safe-area-inset-top))*0.8) !important;
    background-image: url("{{asset(App\Helpers\SettingHelper::setting('filepath_bg'))}}");
    background-position: top;
    background-size: contain!important;
  }
}



.bg-overlay-front {
    background-position: center center;
        background: #b3c1c1b5;
    background-size: cover !important;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    position: absolute;
    z-index: 0;
}

</style>
@endpush

@section ('content')

<div class="d-flex px-3 pb-4 notch-clear">
    <div class="align-self-center">
        <h1 class="font-22 color-white mb-n1">👋 {{ Auth::user()->name }}</h1>
        <p class="font-14 color-white mb-0 opacity-70">{{ Auth::user()->toRole->name }}</p>
    </div>
    <div class="align-self-center">
      <!-- <img src="{{asset(App\Helpers\SettingHelper::setting('filepath'))}}"
        style="width: 10%;" alt=""> -->
    </div>
    <div class="ms-auto align-self-center float-right">
        <!-- <a href="#" class="btn btn-sm bg-blue-dark text-uppercase font-700 rounded-sm">Call Now</a>
        <img src="{{asset(App\Helpers\SettingHelper::setting('filepath'))}}"
          style="width: 10%;" alt=""> -->
    </div>
</div>

<div data-card-height="250" class="card card-style rounded-m preload-img" style="z-index: 2; background-image: url({{App\Helpers\SettingHelper::setting('filepath_bg_card')}}); background-size: cover!important;">

    <div class="card-center text-center">
      <img src="{{asset(App\Helpers\SettingHelper::setting('filepath'))}}"
        style="width: 250px; margin-right: 6px; margin-bottom: 18px;"  alt="">
    </div>

    <div class="card-overlay" style="background-color: #e1e2e34d!important;"></div>
</div>

<div class="row text-center mb-0 p-4" style="background-color: #f7fbfb; border-radius: 30px; z-index: 2; position: relative;">
  @can('layanan-registrasi-index')
    <a href="{{route('dashboard.layanan.registrasi.index')}}" class="col-md-3 col-6 mr-2 mr-2 p-0">
        <div class="card card-style ms-2 mb-2">
            <i class="fa fa-calendar-plus color-green-dark fa-3x mt-5" style="color: #529dc1 !important;"></i>
            <h5 class=" pt-4 mb-4 mb-4">Pendaftaran</h5>
        </div>
    </a>
  @endcan
  @can('layanan-rekam_medis-index')
    <a href="{{route('dashboard.layanan.rekam_medis.index')}}" class="col-md-3 col-6 mr-2 mr-2 p-0">
        <div class="card card-style ms-2 mb-2">
            <i class="fa fa-stethoscope color-blue-dark fa-3x mt-5"></i>
            <h5 class=" pt-4 mb-4">Tindakan</h5>
        </div>
    </a>
  @endcan

  @can('layanan-jadwal-index')
  <a href="{{route('dashboard.layanan.jadwal.index')}}" class="col-md-3 col-6 mr-2 mr-2 p-0">
      <div class="card card-style ms-2 mb-2">
          <i class="fa fa-calendar-days color-blue-dark fa-3x mt-5"  style="color: #db9619  !important;"></i>
          <h5 class=" pt-4 mb-4">Jadwal</h5>
      </div>
  </a>
  @endcan

  @can('keuangan-kasir-index')
  <a href="{{route('dashboard.keuangan.billing.index')}}" class="col-md-3 col-6 mr-2 mr-2 p-0">
      <div class="card card-style ms-2 mb-2">
          <i class="fa fa-money-bill fa-3x mt-5" style="color: #129992 !important;"></i>
          <h5 class=" pt-4 mb-4">Kasir</h5>
      </div>
  </a>
  @endcan

  @can('master-pasien-index')
    <a href="{{route('dashboard.master.pasien.index')}}" class="col-md-3 col-6 mr-2 mr-2 p-0 mr-2 p-0">
        <div class="card card-style ms-2 mb-2">
            <i class="fa fa-notes-medical color-green-dark fa-3x mt-5"></i>
            <h5 class=" pt-4 mb-4 mb-4">Rekam Medis</h5>
        </div>
    </a>
  @endcan

  @can('keuangan-keuangan-index')
    <a href="{{route('dashboard.keuangan.keuangan.index')}}" class="col-md-3 col-6 mr-2 mr-2 p-0">
        <div class="card card-style ms-2 mb-2">
            <i class="fa fa-cash-register color-magenta-dark fa-3x mt-5"></i>
            <h5 class=" pt-4 mb-4">Keuangan</h5>
        </div>
    </a>
    @endcan



    @can('statistik-statistik-index')
    <a href="{{route('dashboard.statistik.index')}}" class="col-md-3 col-6 mr-2 mr-2 p-0">
        <div class="card card-style ms-2 mb-2">
            <i class="fa fa-chart-line color-brown-dark fa-3x mt-5"></i>
            <h5 class=" pt-4 mb-4">Statistik</h5>
        </div>
    </a>
    @endcan


    @can('database-database-index')
    <a href="{{route('dashboard.database.index')}}" class="col-md-3 col-6 mr-2 mr-2 p-0">
        <div class="card card-style ms-2 mb-2">
            <i class="fa fa-database color-blue-dark fa-3x mt-5"></i>
            <h5 class=" pt-4 mb-4">Database</h5>
        </div>
    </a>
    @endcan

    @can('absensi-absensi-menu')
    <a href="{{route('dashboard.absensi.menu.index')}}" class="col-md-3 col-6 mr-2 mr-2 p-0">
        <div class="card card-style ms-2 mb-2">
            <i class="fa fa-clock fa-3x mt-5" style="color: #b5385b"></i>
            <h5 class=" pt-4 mb-4">Absensi</h5>
        </div>
    </a>
    @endcan
</div>
<!-- <div class="bg-overlay-front" style=""></div> -->

@endsection