@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>

<a href="{{ route('organization.report.download') }}"
   class="download-btn">
    <i class="fa fa-download"></i>
    Download Organization Report
</a>

</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="{{ route('organization_dashboard') }}">

<div class="date-range">

<div class="date-group">

<label>Start Date:</label>

<input type="date" name="start_date" value="{{ $startDate ?? '' }}">

</div>

<div class="date-group">

<label>End Date:</label>

<input type="date" name="end_date" value="{{ $endDate ?? '' }}">

</div>

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

</div>

</form>

</div>
 <div class="dashboard-heading">
        Employee Survey
    </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">
{{ $totalIndividuals }}
</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">
{{ $completedSurveys }}
</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">
{{ $pendingSurveys }}
</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">
{{ $inProgressSurveys }}
</div>

</div>

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

</div>

</div>

</div>




<!-- Employer Questions -->

<div class="dashboard-box">

    <div class="dashboard-heading">
        Employer Survey
    </div>

    <div class="cards-grid">

        <!-- Total Employers -->

        <div class="dashboard-card">

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

                <div class="card-count">
                    {{ $totalEmployers }}
                </div>
            </div>

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

        </div>

        <!-- Completed -->

        <div class="dashboard-card">

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

                <div class="card-count">
                    {{ $completedEmployerSurveys }}
                </div>
            </div>

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

        </div>

        <!-- Pending -->

        <div class="dashboard-card">

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

                <div class="card-count">
                    {{ $pendingEmployerSurveys }}
                </div>
            </div>

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

        </div>

        <!-- In Progress -->

        <div class="dashboard-card">

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

                <div class="card-count">
                    {{ $inProgressEmployerSurveys }}
                </div>
            </div>

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

        </div>

    </div>

</div>


<!-- Graph Section -->

<div class="graph-wrapper">

    <!-- Employee Chart -->

    <div class="graph-card">

        <div class="graph-title">
            Employee Survey Submissions Trend
        </div>

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

    </div>

    <!-- Employer Chart -->

    <div class="graph-card">

        <div class="graph-title">
            Employer Survey Submissions Trend
        </div>

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

    </div>

</div>
<script>

// Employee Survey Chart

new Chart(document.getElementById('employeeChart'), {

    type: 'line',

    data: {

        labels: {!! json_encode($employeeLabels) !!},

        datasets: [{

            label: 'Employee Surveys',

            data: {!! json_encode($employeeData) !!},

            borderColor: '#22c55e',

            backgroundColor: 'rgba(34,197,94,0.15)',

            fill: true,

            tension: 0.4

        }]

    },

    options: {

        responsive: true,

        maintainAspectRatio: false

    }

});


// Employer Survey Chart

new Chart(document.getElementById('employerChart'), {

    type: 'line',

    data: {

        labels: {!! json_encode($employerLabels) !!},

        datasets: [{

            label: 'Employer Surveys',

            data: {!! json_encode($employerData) !!},

            borderColor: '#3b82f6',

            backgroundColor: 'rgba(59,130,246,0.15)',

            fill: true,

            tension: 0.4

        }]

    },

    options: {

        responsive: true,

        maintainAspectRatio: false

    }

});

</script>

@endsection