@extends('admin.layouts.layout')
@section('content')
<style>
    /* From Uiverse.io by vinodjangid07 */ 
.card {
margin: 20px;
  width: 100%;
  height: fit-content;
  background: rgb(255, 255, 255);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 10px;
  position: relative;
  box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.068);
}
.card-content {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.card-heading {
  font-size: 20px;
  font-weight: 700;
  color: rgb(27, 27, 27);
  text-align: center;
}
.card-description {
  font-weight: 100;
  color: rgb(102, 102, 102);
}
.card-button-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.card-button {
  padding: 15px 30px 15px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
 
  height: 35px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}
.primary {
  background-color: rgba(255, 68, 0, 0.117);
  color: orangered;
  /* border: 1px solid rgba(255, 68, 0, 0.555); */
}
.primary:hover {
  background-color: rgb(255, 73, 66);
}
.secondary {
  background-color: #ddd;
}
.secondary:hover {
  background-color: rgb(197, 197, 197);
}
.exit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: transparent;
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
}
.exit-button:hover svg {
  fill: black;
}
.exit-button svg {
  fill: rgb(175, 175, 175);
}

</style>
<div style="display: flex;justify-content: space-between; align-items: center;">
    
    <div style="display: flex; gap: 20px;">

        <h2>{{$website_name}}</h2>
        <button onclick="visitWebsite()"  style="color: orangered ;border:none; padding: 10px;border-radius: 5px; height: fit-content;">Go To Website  <i class="fa fa-arrow-right"></i></button>
        {{-- <div class="option" style="background-color: rgb(230, 230, 230) ;padding :20px ; margin: 20px ; border-radius: 5px;width: 100%;">
        </div> --}}
        
        
    </div>
    
    
    
    <div  style="width: fit-content">
        <form action="{{ route('toggle.maintenance') }}" method="GET">
            @csrf
            
            <div class="switch-holder">
                <div class="switch-label">
                    <i class="fa "></i><span>Maintenance Mode </span>
                </div>
                <div class="switch-toggle">
                    <input type="checkbox" id="maintenence"  onchange="this.form.submit()" {{ app()->isDownForMaintenance() ? 'checked' : '' }}>
                    <label for="maintenence"></label>
                </div>
            </div>
        </form>
    </div>
</div>




  <div class="row">


<div class="col-3 card">
    <div class="card-content">
      <p class="card-heading">Total Pages</p>
      {{-- <p class="card-description">Lorem ipsum dolor sit amet, consectetur adi</p> --}}
    </div>
    <div class="card-button-wrapper">
      {{-- <button class="card-button secondary">Cancel</button> --}}
      <button class="card-button primary">{{$pages->count()}}</button>
    </div>
  
  </div>
  </div>


  <h3 style="margin-top: 60px; margin-left: 20px;color:gray">Modules</h3>
  <div class="row">
  @foreach($modules as $module)

  <div class="col-3 card">
    <div class="card-content">
      <p class="card-heading">{{$module['label']}}</p>
      {{-- <p class="card-description">Lorem ipsum dolor sit amet, consectetur adi</p> --}}
    </div>
    <div class="card-button-wrapper">
      {{-- <button class="card-button secondary">Cancel</button> --}}
      <button class="card-button primary">{{$module['record_count']}}</button>
    </div>
  
  </div>



  {{-- <li>
      <a href="{{route('collection', $module->id)}}"><i data-feather="grid"></i> <span>{{$module->label}}</span></a>
  </li>											 --}}
  @endforeach
</div>

  </div>

















    <script>
        function visitWebsite() {
            let currentUrl = window.location.href;
        // Remove "/admin" and anything after it
        let cleanUrl = currentUrl.split('/admin')[0];
        window.open(cleanUrl, '_blank');

        }
    </script>


@endsection