@extends('layouts.dashboard')

@section('content')

<style>
/* WRAPPER */

.dashboard-wrapper{
width:100%;
}

/* DOWNLOAD CARD */

.download-card{
background:#fff;
border-radius:22px;
padding:24px;
margin-bottom:22px;
position:relative;
overflow:hidden;
box-shadow:0 3px 10px rgba(0,0,0,0.04);
}

.download-card::after{
content:'';
position:absolute;
right:-50px;
top:-30px;
width:160px;
height:160px;
background:#eef4ef;
border-radius:50%;
}

.download-title{
font-size:19px;
font-weight:700;
color:#07122b;
margin-bottom:18px;
position:relative;
z-index:2;
}

/* BUTTON */

.download-btn{
display:inline-flex;
align-items:center;
gap:8px;
background:#16a34a;
color:#fff;
text-decoration:none;
padding:12px 20px;
border-radius:12px;
font-size:14px;
font-weight:600;
position:relative;
z-index:2;
transition:0.3s;
box-shadow:0 6px 12px rgba(22,163,74,0.18);
}

.download-btn:hover{
background:#15803d;
}

/* DASHBOARD BOX */

.dashboard-box{
background:#fff;
border-radius:22px;
padding:24px;
position:relative;
overflow:hidden;
box-shadow:0 3px 10px rgba(0,0,0,0.04);
}

/* BG TEXT */

.dashboard-box::after{
content:'SURVEY';
position:absolute;
right:35px;
top:55px;
font-size:55px;
font-weight:800;
color:#f4f5f4;
}

/* HEADING */

.dashboard-heading{
font-size:28px;
font-weight:800;
color:#020b35;
position:relative;
z-index:2;
}

.heading-line{
width:65px;
height:5px;
background:#22c55e;
border-radius:20px;
margin-top:12px;
margin-bottom:28px;
position:relative;
z-index:2;
}

/* CARDS */

.stats-cards{
display:flex;
gap:18px;
flex-wrap:wrap;
position:relative;
z-index:2;
}

.stats-card{
flex:1;
min-width:220px;
background:#fff;
border-radius:20px;
padding:20px;
border-bottom:4px solid #16a34a;
box-shadow:0 3px 10px rgba(0,0,0,0.05);
}

/* TOP */

.stats-top{
display:flex;
align-items:center;
gap:14px;
}

/* ICON */

.icon-box{
width:58px;
height:58px;
background:#eef6ef;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:22px;
color:#16a34a;
}

/* NUMBER */

.stats-number{
font-size:30px;
font-weight:800;
color:#15803d;
line-height:1;
}

/* TEXT */

.stats-text{
margin-top:6px;
font-size:14px;
color:#64748b;
line-height:22px;
}

/* MOBILE */

@media(max-width:768px){

.download-card,
.dashboard-box{
padding:18px;
border-radius:18px;
}

.dashboard-heading{
font-size:24px;
}

.stats-card{
min-width:100%;
}

.dashboard-box::after{
display:none;
}

.download-btn{
width:100%;
justify-content:center;
}

}

</style>

<div class="dashboard-wrapper">

<!-- DOWNLOAD -->

<div class="download-card">

<div class="download-title">

Download Reports

</div>

<a href="{{ url('/report/'.session('user_id')) }}"
class="download-btn">

<i class="fa fa-download"></i>

Download Individual Report

</a>

</div>

<!-- DASHBOARD -->

<div class="dashboard-box">

<div class="dashboard-heading">

Welcome to the Dashboard

</div>

<div class="heading-line"></div>

<div class="stats-cards">

<!-- ANSWERED -->

<div class="stats-card">

<div class="stats-top">

<div class="icon-box">

<i class="fa fa-clipboard-check"></i>

</div>

<div>

<div class="stats-number">

{{ $answered }}

</div>

<div class="stats-text">

Responded Questions

</div>

</div>

</div>

</div>

<!-- TOTAL -->

<div class="stats-card">

<div class="stats-top">

<div class="icon-box">

<i class="fa fa-list-check"></i>

</div>

<div>

<div class="stats-number">

{{ $totalQuestions }}

</div>

<div class="stats-text">

Total Questions

</div>

</div>

</div>

</div>

<!-- PENDING -->

<div class="stats-card">

<div class="stats-top">

<div class="icon-box">

<i class="fa fa-clock"></i>

</div>

<div>

<div class="stats-number">

{{ $pending }}

</div>

<div class="stats-text">

Pending Questions

</div>

</div>

</div>

</div>

</div>

</div>

</div>

@endsection