@extends('layouts.app')

@section('css')
    
@endsection

@section('content')
    <div class="container-fluid py-1">

    {{-- Admin dashboard Start --}}
@role('admin')
<style>
  body {
    background: linear-gradient(135deg, #e3e6ec 0%, #d0d4dc 100%);
  }

  .card {
    border: none !important;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
  }

  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  }

  .card-header {
    background-color: #f2f3f7 !important;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
  }

  .icon-shape {
    width: 45px;
    height: 45px;
  }

  .list-group-item {
    border-radius: 10px !important;
    background: #f9fafb;
    margin-bottom: 5px;
    transition: all 0.2s ease;
  }

  .list-group-item:hover {
    background: #eaf1f9;
  }

  .badge {
    font-size: 0.75rem;
    padding: 5px 10px;
  }

  h6.fw-bold {
    color: #0d6efd;
  }

  /* Extra depth effect for Alerts */
  .alert-card {
    background: linear-gradient(180deg, #ffffff 0%, #f9fafc 100%);
    border-left: 5px solid #0d6efd;
  }

  .action-card {
    background: linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
    border-left: 5px solid #20c997;
  }

</style>

<div class="row">
  <h2 class="text-dark mb-4 fw-bold">Admin Dashboard</h2>

  <!-- Top Summary Cards -->
  @php
    $admincards = [
      ['Total Students', '250', 'ni ni-single-02', 'bg-gradient-primary'],
      ['Lecturers', '15', 'ni ni-hat-3', 'bg-gradient-success'],
      ['Total MC Submitted', '120', 'ni ni-folder-17', 'bg-gradient-warning'],
      ['Pending Approvals', '12', 'ni ni-time-alarm', 'bg-gradient-danger']
    ];
  @endphp

  @foreach ($admincards as $acard)
  <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
    <div class="card">
      <div class="card-body p-4">
        <div class="row">
          <div class="col-8">
            <p class="text-sm text-uppercase fw-bold text-muted mb-1">{{ $acard[0] }}</p>
            <h4 class="fw-bold mb-0">{{ $acard[1] }}</h4>
          </div>
          <div class="col-4 text-end">
            <div class="icon icon-shape {{ $acard[3] }} shadow text-center rounded-circle">
              <i class="{{ $acard[2] }} text-lg opacity-10" aria-hidden="true"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  @endforeach
</div>

<!-- Chart Section -->
<div class="row mt-4">
  <div class="col-lg-8">
    <div class="card">
      <div class="card-header pb-0 p-3">
        <h6 class="mb-0 fw-bold">Student Warning Statistics by Semester</h6>
        <p class="text-sm text-muted mb-0">Overview of warning and MC cases per semester</p>
      </div>
      <div class="card-body p-3">
        <canvas id="adminChart" height="100"></canvas>
      </div>
    </div>
  </div>

  <!-- Latest Alerts (moved up) -->
  <div class="col-lg-4">
    <div class="card alert-card">
      <div class="card-header pb-0 p-3">
        <h6 class="mb-0 fw-bold text-primary">Latest Alerts</h6>
        <p class="text-sm text-muted mb-0">Recent issues and notifications</p>
      </div>
      <div class="card-body p-3">
        <ul class="list-group list-group-flush">
          <li class="list-group-item border-0 ps-0 mb-2">
            <i class="ni ni-bell-55 text-danger me-2"></i>
            <strong>DCS05C</strong> - 3 new warning letters issued
          </li>
          <li class="list-group-item border-0 ps-0 mb-2">
            <i class="ni ni-user-run text-warning me-2"></i>
            <strong>Student: Amir</strong> - Pending MC review over 3 days
          </li>
          <li class="list-group-item border-0 ps-0 mb-2">
            <i class="ni ni-single-02 text-info me-2"></i>
            <strong>Lecturer: Mr. Lee</strong> - Updated class schedule
          </li>
          <li class="list-group-item border-0 ps-0">
            <i class="ni ni-check-bold text-success me-2"></i>
            System backup completed successfully
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<!-- Performance & Quick Actions (swapped position) -->
<div class="row mt-4">
  <!-- Performance Panel -->
  <div class="col-lg-8">
    <div class="card">
      <div class="card-header pb-0 p-3">
        <h6 class="mb-0 fw-bold">Class Performance Overview</h6>
        <p class="text-sm text-muted mb-0">Top performing and high-risk classes this semester</p>
      </div>
      <div class="card-body p-3">
        <div class="table-responsive">
          <table class="table align-items-center mb-0">
            <thead>
              <tr>
                <th class="text-uppercase text-secondary text-xs font-weight-bolder">Class</th>
                <th class="text-uppercase text-secondary text-xs font-weight-bolder ps-2">MC Submitted</th>
                <th class="text-uppercase text-secondary text-xs font-weight-bolder ps-2">Warnings</th>
                <th class="text-uppercase text-secondary text-xs font-weight-bolder ps-2">Status</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>DCS01A</td>
                <td>12</td>
                <td>2</td>
                <td><span class="badge bg-success">Good</span></td>
              </tr>
              <tr>
                <td>DCS03B</td>
                <td>18</td>
                <td>5</td>
                <td><span class="badge bg-warning text-dark">Moderate</span></td>
              </tr>
              <tr>
                <td>DCS05C</td>
                <td>27</td>
                <td>9</td>
                <td><span class="badge bg-danger">High Risk</span></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <!-- Quick Actions (moved below) -->
  <div class="col-lg-4">
    <div class="card action-card">
      <div class="card-header pb-0 p-3">
        <h6 class="mb-0 fw-bold text-success">Quick Actions</h6>
      </div>
      <div class="card-body p-3">
        <ul class="list-group">
          <li class="list-group-item border-0 ps-0 mb-2">
            <i class="ni ni-fat-add text-primary me-2"></i> Add New Class
          </li>
          <li class="list-group-item border-0 ps-0 mb-2">
            <i class="ni ni-single-02 text-info me-2"></i> Manage Users
          </li>
          <li class="list-group-item border-0 ps-0 mb-2">
            <i class="ni ni-paper-diploma text-success me-2"></i> View MC Records
          </li>
          <li class="list-group-item border-0 ps-0">
            <i class="ni ni-settings text-warning me-2"></i> System Settings
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<!-- Chart Script -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('adminChart');
new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Semester 1', 'Semester 2', 'Semester 3', 'Semester 4', 'Semester 5', 'Semester 6'],
    datasets: [
      { label: 'MC Submission', data: [10, 15, 8, 12, 9, 11], backgroundColor: '#0d6efd' },
      { label: 'Warning Letters', data: [5, 9, 7, 11, 6, 10], backgroundColor: '#ffc107' },
      { label: 'Academic Actions', data: [2, 4, 3, 6, 3, 5], backgroundColor: '#dc3545' }
    ]
  },
  options: {
    responsive: true,
    plugins: { legend: { position: 'bottom' } },
    scales: { y: { beginAtZero: true } }
  }
});
</script>
@endrole
{{-- Admin dashboard End --}}


      {{-- Lecture Dashboard Start --}}
@role('lecture')
<style>
  body {
    background: linear-gradient(135deg, #e3f0ff 0%, #b3d9ff 100%);
  }

  .card {
    border: none !important;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    animation: fadeInUp 0.8s ease;
  }

  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  }

  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .card-header {
    background-color: #f5f9ff !important;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
  }

  .icon-shape {
    width: 45px;
    height: 45px;
  }

  .list-group-item {
    border-radius: 10px !important;
    background: #f9fafb;
    margin-bottom: 5px;
    transition: all 0.2s ease;
  }

  .list-group-item:hover {
    background: #e7f1ff;
  }

  .badge {
    font-size: 0.75rem;
    padding: 5px 10px;
  }

  h6.fw-bold {
    color: #0d6efd;
  }

  /* Accent cards */
  .alert-card {
    background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
    border-left: 5px solid #0d6efd;
  }

  .action-card {
    background: linear-gradient(180deg, #ffffff 0%, #eef5ff 100%);
    border-left: 5px solid #5aa2ff;
  }

  /* Adjust spacing between cards (not too close) */
  .compact-gap {
    margin-top: 10px !important;
  }
</style>

<div class="row">
  <h2 class="text-white mb-4 fw-bold animate__animated animate__fadeInDown">Lecture Dashboard</h2>

  <!-- Top Summary Cards -->
  @php
    $Lecturercards = [
      ['Total MC Reviewed', $lecturerMC, 'ni ni-check-bold', 'bg-gradient-info'],
      ['Pending Review', $lecturerMCPending, 'ni ni-time-alarm', 'bg-gradient-warning'],
      ['Approved MCs', $lecturerMCApprove, 'ni ni-like-2', 'bg-gradient-success'],
      ['Rejected MCs', $lecturerMCReject, 'ni ni-fat-remove', 'bg-gradient-danger']
    ];
  @endphp

  @foreach ($Lecturercards as $Lcard)
  <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
    <div class="card" data-aos="zoom-in">
      <div class="card-body p-4">
        <div class="row">
          <div class="col-8">
            <p class="text-sm text-uppercase fw-bold text-muted mb-1">{{ $Lcard[0] }}</p>
            <h4 class="fw-bold mb-0">{{ $Lcard[1] }}</h4>
          </div>
          <div class="col-4 text-end">
            <div class="icon icon-shape {{ $Lcard[3] }} shadow text-center rounded-circle">
              <i class="{{ $Lcard[2] }} text-lg opacity-10" aria-hidden="true"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  @endforeach
</div>


<!-- MC Overview Table -->
<div class="row mt-4">
  <div class="col-lg-12">
    <div class="card">
      <div class="card-header pb-0 p-3">
          <h6 class="mb-0 fw-bold text-primary">Course MC Overview - Batch: {{ $latestBatch->name ?? 'N/A' }}</h6>
          <p class="text-sm text-muted mb-0">Summary of MC submissions by class</p>
      </div>
      <div class="card-body p-3">
        <div class="table-responsive">
          <table class="table align-items-center mb-0">
            <thead>
              <tr>
                <th class="text-uppercase text-secondary text-xs font-weight-bolder">Class</th>
                <th class="text-uppercase text-secondary text-xs font-weight-bolder ps-2">Total MC</th>
                <th class="text-uppercase text-secondary text-xs font-weight-bolder ps-2">Approved</th>
              </tr>
            </thead>
            <tbody>
             @foreach($courseMCOverview as $class)
                <tr>
                    <td>{{ $class->code }}</td>
                    <td>{{ $class->total_mc }}</td>
                    <td>{{ $class->approved_mc }}</td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Chart Script -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('lectureChart');
new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5'],
    datasets: [
      { label: 'MC Submitted', data: [5, 8, 4, 9, 7], borderColor: '#0d6efd', tension: 0.4, fill: false },
      { label: 'MC Approved', data: [3, 6, 3, 7, 6], borderColor: '#17a2b8', tension: 0.4, fill: false }
    ]
  },
  options: {
    responsive: true,
    plugins: { legend: { position: 'bottom' } },
    scales: { y: { beginAtZero: true } }
  }
});
</script>
@endrole
{{-- Lecture Dashboard End --}}






       {{-- Student dashboard Start --}}
@role('student')
<style>
  body {
    background: linear-gradient(135deg, #e3e6ec 0%, #d0d4dc 100%);
  }

  .card {
    border: none !important;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
  }

  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  }

  .card-header {
    background-color: #f2f3f7 !important;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
  }

  .icon-shape {
    width: 45px;
    height: 45px;
  }

  .list-group-item {
    border-radius: 10px !important;
    background: #f9fafb;
    margin-bottom: 5px;
    transition: all 0.2s ease;
  }

  .list-group-item:hover {
    background: #eaf1f9;
  }

  .badge {
    font-size: 0.75rem;
    padding: 5px 10px;
  }

  h6.fw-bold {
    color: #0d6efd;
  }

  .info-card {
    background: linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
    border-left: 5px solid #0d6efd;
  }

</style>

<div class="row">
  <h2 class="text-white mb-2 fw-bold">Student Dashboard</h2>

  <!-- Student Info Section -->
  <div class="col-12 mb-4">
    <div class="card info-card">
      <div class="card-body p-3">
        <div class="row align-items-center">
          <div class="col-md-8">
            <h6 class="fw-bold text-primary mb-1">Student Information</h6>
            <p class="mb-0 text-muted">Name: <strong>{{$userAuth->name}}</strong></p>
            <p class="mb-0 text-muted">Student Current Class: <strong>{{$userAuth->classroom?->code ?? ''}}</strong></p>
            <p class="mb-0 text-muted">Section: <strong>{{$userAuth->classroom?->section?? ''}}</strong></p>
            {{-- <p class="mb-0 text-muted">Semester: <strong>5</strong></p> --}}
          </div>
          <div class="col-md-4 text-end">
            <a href="{{ route('profile.edit') }}" class="btn btn-primary btn-sm">
              Edit Profile
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Top Summary Cards -->
  @php
    $Studentcards = [
      ['MC Submitted', $studentMcSubmited ?? 0, 'ni ni-folder-17', 'bg-gradient-primary'],
      ['Pending Review', $studentMcPending ?? 0, 'ni ni-time-alarm', 'bg-gradient-warning'],
      ['Approved MC', $studentMcApprove ?? 0, 'ni ni-check-bold', 'bg-gradient-success'],
      ['Rejected MC', $studentMcReject ?? 0, 'ni ni-fat-remove', 'bg-gradient-danger']
    ];
  @endphp

  @foreach ($Studentcards as $Scard)
  <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
    <div class="card">
      <div class="card-body p-4">
        <div class="row">
          <div class="col-8">
            <p class="text-sm text-uppercase fw-bold text-muted mb-1">{{ $Scard[0] }}</p>
            <h4 class="fw-bold mb-0">{{ $Scard[1] }}</h4>
          </div>
          <div class="col-4 text-end">
            <div class="icon icon-shape {{ $Scard[3] }} shadow text-center rounded-circle">
              <i class="{{ $Scard[2] }} text-lg opacity-10" aria-hidden="true"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  @endforeach
</div>


<!-- Submission History & Quick Actions -->
<div class="row mt-4">
  <!-- Submission History -->
   <div class="col-lg-8 mb-4 mb-lg-0">
    <div class="card">
      <div class="card-header pb-0 p-3">
        <h6 class="mb-0 fw-bold">Recent MC Submissions</h6>
        {{-- <p class="text-sm text-muted mb-0">Track the status of your submissions</p> --}}
      </div>
      <div class="card-body p-3">
        <div class="table-responsive">
          <div class="card-body p-3">
            <div class="table-responsive" style="overflow-x:auto;">
              <table class="table align-items-center mb-0">
                <thead>
                  <tr>
                    <th class="text-uppercase text-secondary text-xs font-weight-bolder">Date Submitted</th>
                    <th class="text-uppercase text-secondary text-xs font-weight-bolder ps-2">Subject</th>
                    <th class="text-uppercase text-secondary text-xs font-weight-bolder ps-2">Date MC</th>
                    <th class="text-uppercase text-secondary text-xs font-weight-bolder ps-2">Status</th>
                  </tr>
                </thead>
                <tbody>
                  @forelse ($mcSubmissions as $mc)
                    <tr>
                      <td>{{ \Carbon\Carbon::parse($mc->create_at)->format('d M Y') }}</td>
                      <td>{{ $mc->reason }}</td>
                      <td>
                          <strong>{{ \Carbon\Carbon::parse($mc->date_from)->format('d M Y') }}</strong>
                          Until
                          <strong>{{ \Carbon\Carbon::parse($mc->date_to)->format('d M Y') }}</strong>
                      </td>
                      <td>
                          @if($mc->approval_status == 0)
                              <span class="badge bg-warning text-dark">Pending</span>
                          @elseif($mc->approval_status == 1)
                              <span class="badge bg-success">Approved</span>
                          @else
                              <span class="badge bg-danger">Rejected</span>
                          @endif
                      </td>
                      
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4" class="text-center">No MC submissions found.</td>
                    </tr>
                  @endforelse
                </tbody>
              </table>
              {{-- <div class="mt-3">
                  {{ $mcSubmissions->links() }}
              </div> --}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Quick Actions -->
  <div class="col-lg-4">
    <div class="card">
      <div class="card-header pb-0 p-3">
        <h6 class="mb-0 fw-bold text-success">Quick Actions</h6>
      </div>
      <div class="card-body p-3">
        <ul class="list-group">
          <li class="list-group-item border-0 ps-0 mb-2">
            <a href="{{ route('student.mc.create') }}" class="text-decoration-none">
              <i class="ni ni-fat-add text-primary me-2"></i> Submit New MC
            </a>
          </li>
          <li class="list-group-item border-0 ps-0 mb-2">
            <a href="{{ route('student.mc.index') }}" class="text-decoration-none">
              <i class="ni ni-single-copy-04 text-info me-2"></i> View All Submissions
            </a>
          </li>
          <li class="list-group-item border-0 ps-0 mb-2">
            <a href="https://ipoh.kptm.edu.my/index.php/ms/profil-kptm/jabatan/jabatan-akademik/jabatan-matematik-sains-komputer" target=" _blank">
              <i class="ni ni-email-83 text-success me-2"></i> Contact Lecturer
            </a>
          </li>
          <li class="list-group-item border-0 ps-0">
            <i class="ni ni-help-17 text-warning me-2"></i> View Submission Guide
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<!-- Chart Script -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('studentChart');
new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov'],
    datasets: [
      { label: 'MC Submitted', data: [1, 0, 2, 1, 0, 1], borderColor: '#0d6efd', backgroundColor: '#cfe2ff', fill: true },
      { label: 'Approved', data: [1, 0, 1, 0, 0, 1], borderColor: '#198754', backgroundColor: '#d1e7dd', fill: true }
    ]
  },
  options: {
    responsive: true,
    plugins: { legend: { position: 'bottom' } },
    scales: { y: { beginAtZero: true } }
  }
});
</script>
@endrole
{{-- Student dashboard End --}}



      <footer class="footer pt-3  ">
        <div class="container-fluid">
          <div class="row align-items-center justify-content-lg-between">
            <div class="col-lg-6 mb-lg-0 mb-4">
              <div class="copyright text-center text-sm text-muted text-lg-start">
                © <script>
                  document.write(new Date().getFullYear())
                </script>,
                made with <i class="fa fa-heart"></i> by
                <a href="https://www.creative-tim.com" class="font-weight-bold" target="_blank">Creative Tim</a>
                for a better web.
              </div>
            </div>
            <div class="col-lg-6">
              <ul class="nav nav-footer justify-content-center justify-content-lg-end">
                <li class="nav-item">
                  <a href="https://www.creative-tim.com" class="nav-link text-muted" target="_blank">Creative Tim</a>
                </li>
                <li class="nav-item">
                  <a href="https://www.creative-tim.com/presentation" class="nav-link text-muted" target="_blank">About Us</a>
                </li>
                <li class="nav-item">
                  <a href="https://www.creative-tim.com/blog" class="nav-link text-muted" target="_blank">Blog</a>
                </li>
                <li class="nav-item">
                  <a href="https://www.creative-tim.com/license" class="nav-link pe-0 text-muted" target="_blank">License</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </footer>
    </div>
@endsection

@section('js')
    
@endsection