@extends('layouts.org_dashboard')

@section('content')

<!-- Chart JS -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<style>
/* =========================
   GLOBAL
========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#f3fdf6;
overflow-x:hidden;
}

/* =========================
   DASHBOARD WRAPPER
========================= */

.dashboard-wrapper{
width:100%;
max-width:100%;
padding:20px;
overflow:hidden;
}

/* =========================
   DASHBOARD BOX
========================= */

.dashboard-box{
background:#fff;
border-radius:22px;
padding:24px;
margin-bottom:24px;
box-shadow:0 8px 24px rgba(34,197,94,0.08);
border:1px solid #e7f7eb;
overflow:hidden;
width:100%;
}

/* =========================
   HEADINGS
========================= */

.dashboard-heading{
font-size:22px;
font-weight:700;
color:#14532d;
margin-bottom:18px;
line-height:1.4;
word-break:break-word;
}

/* =========================
   TOP BAR
========================= */

.top-bar{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
flex-wrap:wrap;
margin-bottom:25px;
width:100%;
}

/* =========================
   DATE RANGE
========================= */

.date-range{
display:flex;
align-items:center;
gap:14px;
flex-wrap:wrap;
width:100%;
}

.date-group{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}

.date-group label{
font-size:14px;
font-weight:600;
color:#166534;
white-space:nowrap;
}

.date-group input{
height:46px;
padding:0 14px;
border:2px solid #dcfce7;
border-radius:12px;
font-size:14px;
outline:none;
background:#fff;
min-width:180px;
width:100%;
max-width:220px;
transition:.3s;
}

.date-group input:focus{
border-color:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,0.12);
}

/* =========================
   BUTTONS
========================= */

.apply-btn{
height:46px;
padding:0 24px;
border:none;
background:linear-gradient(135deg,#22c55e,#15803d);
color:#fff;
border-radius:12px;
font-size:14px;
font-weight:600;
cursor:pointer;
transition:.3s;
white-space:nowrap;
}

.apply-btn:hover{
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(34,197,94,0.25);
}

.download-btn{
background:linear-gradient(135deg,#16a34a,#166534);
color:#fff;
border:none;
padding:13px 24px;
border-radius:12px;
font-size:15px;
font-weight:600;
cursor:pointer;
transition:.3s;
display:inline-flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}

.download-btn:hover{
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(22,163,74,0.25);
}

/* =========================
   CARDS GRID
========================= */

.cards-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
width:100%;
}

/* =========================
   DASHBOARD CARD
========================= */

.dashboard-card{
background:linear-gradient(135deg,#ffffff,#f4fff7);
border-radius:22px;
padding:22px;
position:relative;
overflow:hidden;
transition:.3s;
box-shadow:0 8px 20px rgba(0,0,0,0.05);
border:1px solid #edf8ef;
min-width:0;
}

.dashboard-card::before{
content:'';
position:absolute;
top:-35px;
right:-35px;
width:130px;
height:130px;
background:rgba(34,197,94,0.08);
border-radius:50%;
}

.dashboard-card:hover{
transform:translateY(-4px);
box-shadow:0 12px 24px rgba(34,197,94,0.12);
}

.card-top{
display:flex;
align-items:center;
gap:14px;
margin-bottom:14px;
position:relative;
z-index:2;
flex-wrap:wrap;
}

.card-icon{
width:56px;
height:56px;
border-radius:16px;
background:linear-gradient(135deg,#22c55e,#15803d);
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:20px;
flex-shrink:0;
box-shadow:0 6px 14px rgba(34,197,94,0.25);
}

.card-count{
font-size:34px;
font-weight:700;
color:#111827;
line-height:1;
word-break:break-word;
}

.card-title{
font-size:15px;
color:#374151;
line-height:1.5;
position:relative;
z-index:2;
word-break:break-word;
}

/* =========================
   GRAPH SECTION
========================= */

.graph-wrapper{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:24px;
width:100%;
}

.graph-card{
background:#fff;
border-radius:22px;
padding:24px;
box-shadow:0 8px 24px rgba(34,197,94,0.08);
border:1px solid #e7f7eb;
overflow:hidden;
min-width:0;
width:100%;
}

.graph-title{
font-size:18px;
font-weight:700;
margin-bottom:20px;
color:#14532d;
line-height:1.4;
word-break:break-word;
}

.chart-container{
position:relative;
width:100%;
height:320px;
}

/* =========================
   LARGE TABLET
========================= */

@media(max-width:1200px){

.cards-grid{
grid-template-columns:repeat(2,1fr);
}

.graph-wrapper{
grid-template-columns:1fr;
}

}

/* =========================
   TABLET
========================= */

@media(max-width:992px){

.dashboard-wrapper{
padding:16px;
}

.top-bar{
flex-direction:column;
align-items:flex-start;
}

.date-range{
width:100%;
}

.date-group{
width:100%;
}

.date-group input{
max-width:100%;
}

}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

.dashboard-wrapper{
padding:14px;
}

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

.cards-grid{
grid-template-columns:1fr;
}

.graph-wrapper{
grid-template-columns:1fr;
}

.date-range{
flex-direction:column;
align-items:stretch;
}

.date-group{
flex-direction:column;
align-items:flex-start;
width:100%;
}

.date-group input{
width:100%;
max-width:100%;
}

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

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

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

.graph-title{
font-size:16px;
}

.card-count{
font-size:28px;
}

.chart-container{
height:260px;
}

}

/* =========================
   SMALL MOBILE
========================= */

@media(max-width:480px){

.dashboard-wrapper{
padding:10px;
}

.dashboard-box,
.graph-card{
padding:14px;
border-radius:16px;
}

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

.graph-title{
font-size:15px;
}

.card-icon{
width:48px;
height:48px;
font-size:18px;
}

.card-count{
font-size:24px;
}

.card-title{
font-size:14px;
}

.chart-container{
height:220px;
}

}

</style>

<div class="dashboard-wrapper">

<!-- Download Report -->
<div class="dashboard-box">

<div class="dashboard-heading">
Download Reports
</div>

<button class="download-btn">
<i class="fa fa-download"></i>
Download Organization Report
</button>

</div>

<!-- Dashboard Section -->
<div class="dashboard-box">

<!-- Top Bar -->
<div class="top-bar">

<div class="dashboard-heading">
Welcome to the Dashboard
</div>

<form method="GET" action="{{ url('admin/dashboard') }}">

<div class="date-range">

<div class="date-group">

<label>Start Date:</label>

<input
type="date"
name="start_date"
value=""
>

</div>

<div class="date-group">

<label>End Date:</label>

<input
type="date"
name="end_date"
value=""
>

</div>

<button class="apply-btn" type="submit">
Apply Date Range
</button>

</div>

</form>

</div>

<!-- Cards -->
<div class="cards-grid">

<!-- CARD 1 -->

<div class="dashboard-card">

<div class="card-top">

<div class="card-icon">
<i class="fa fa-users"></i>
</div>

<div class="card-count">
0
</div>

</div>

<div class="card-title">
Total Individuals
</div>

</div>

<!-- CARD 2 -->

<div class="dashboard-card">

<div class="card-top">

<div class="card-icon">
<i class="fa fa-clipboard-check"></i>
</div>

<div class="card-count">
0
</div>

</div>

<div class="card-title">
Unique Surveys Completed
</div>

</div>

<!-- CARD 3 -->

<div class="dashboard-card">

<div class="card-top">

<div class="card-icon">
<i class="fa fa-clock"></i>
</div>

<div class="card-count">
0
</div>

</div>

<div class="card-title">
Unique Surveys Pending
</div>

</div>

<!-- CARD 4 -->

<div class="dashboard-card">

<div class="card-top">

<div class="card-icon">
<i class="fa fa-chart-line"></i>
</div>

<div class="card-count">
0
</div>

</div>

<div class="card-title">
Unique Surveys InProgress
</div>

</div>

</div>

</div>

<!-- Graph Section -->

<div class="graph-wrapper">

<!-- LINE CHART -->

<div class="graph-card">

<div class="graph-title">
Survey Submissions Trend as per date
</div>

<div class="chart-container">
<canvas id="lineChart"></canvas>
</div>

</div>

<!-- PIE CHART -->

<div class="graph-card">

<div class="graph-title">
Survey Status Overview
</div>

<div class="chart-container">
<canvas id="pieChart"></canvas>
</div>

</div>

</div>

</div>

<script>

/* =========================
   LINE CHART
========================= */

const lineCtx = document.getElementById('lineChart');

new Chart(lineCtx, {
type: 'line',
data: {
labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
datasets: [{
label: 'Survey',
data: [12,19,10,15,22,18,30],
borderColor: '#22c55e',
backgroundColor: 'rgba(34,197,94,0.12)',
fill: true,
tension: 0.4
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});

/* =========================
   PIE CHART
========================= */

const pieCtx = document.getElementById('pieChart');

new Chart(pieCtx, {
type: 'doughnut',
data: {
labels: ['Completed','Pending','InProgress'],
datasets: [{
data: [40,20,10],
backgroundColor: [
'#22c55e',
'#f59e0b',
'#3b82f6'
]
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});

</script>

@endsection