@auth
         <span></span>
        @else
        <script>window.location = "{{url('/')}}"</script>
    
@endauth
@extends('layouts.frontendlayout')
@section('content')
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f9f9f9;
    }
    header {
      background-color: #0047ab;
      color: #fff;
      padding: 20px;
      margin-left: 70px;
      margin-right: 70px;
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    header .logo {
      font-size: 24px;
      font-weight: bold;
    }
    nav a {
      color: #fff;
      margin: 0 10px;
      text-decoration: none;
    }
    .container {
      padding: 20px;
    }
    .banner {
      background-color: #e3f2fd;
      padding: 20px;
      border-radius: 5px;
      margin-bottom: 20px;
    }
    .banner h1 {
      margin: 0;
    }
    .card {
      background-color: #fff;
      padding: 15px;
      border-radius: 5px;
      margin-bottom: 20px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    .card h2 {
      margin-top: 0;
    }
    footer {
      background-color: #0047ab;
      color: #fff;
      text-align: center;
      padding: 10px;
      position: relative;
      bottom: 0;
      width: 100%;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
    }
  </style>
  <header>
    <div class="logo">Student Portal</div>
   <!--  <nav>
      <a href="#">Home</a>
      <a href="#">Profile</a>
      <a href="#">Classes</a>
      <a href="#">Settings</a>
      <a href="#">Logout</a>
    </nav> -->
  </header>
  
  <div class="container">
    <div class="banner">
    @auth
    <h1>Welcome, {{ auth()->user()->name }}!</h1>
    @endauth
      
      <p>Today is <span id="current-date"></span>.</p>
    </div>
    
    <div class="grid">
      <div class="card">
        <h2>Announcements</h2>
        <ul>
          <li>School carnival on January 10th!</li>
          <li>Midterm exams start on February 5th.</li>
        </ul>
      </div>
      <div class="card">
        <h2>Today's Schedule</h2>
        <ul>
          <li>8:00 AM - Math</li>
          <li>9:30 AM - Science</li>
          <li>11:00 AM - History</li>
        </ul>
      </div>
      <div class="card">
        <h2>Upcoming Assignments</h2>
        <ul>
          <li>Science Project - Due Jan 8</li>
          <li>Math Homework - Due Jan 7</li>
        </ul>
      </div>
      <div class="card">
        <h2>Grades Overview</h2>
        <ul>
          <li>Math: A</li>
          <li>Science: B+</li>
          <li>History: A-</li>
        </ul>
      </div>
      <div class="card"> <!-- Account Section -->
       
      <h2>Account Settings</h2>
      <div>
        <!--<button style="color: #fff;" class="btn btn-info" onclick="updateProfile()">Update Profile</button>-->
        <a class="btn btn-primary" role="button" href="profile/edit">Edit Profile</a>
      <!--<button class="btn btn-primary" onclick="changePassword()">Change Password</button>-->
      </div>
        
      </div>
    </div>
  </div>
  <script>
    // Display the current date
    document.getElementById('current-date').textContent = new Date().toLocaleDateString();
  </script>
  @endsection