@extends('layouts.master')

@section('sidebar')
    @parent

    <p>This is appended to the master sidebar.</p>
@stop

@section('content')

<style>
    .notification {
      padding: 15px;
      margin-bottom: 15px;
      border-left: 4px solid #28a745;
      background-color: #f8f9fa;
      border-radius: 5px;
    }

    .notification.unread {
      border-left-color: #007bff;
      background-color: #e9f5ff;
    }

    .notification.important {
      border-left-color: #dc3545;
      background-color: #f8d7da;
    }

    .notification.read {
      border-left-color: #6c757d;
      background-color: #f1f1f1;
    }

    .notification-time {
      font-size: 0.85rem;
      color: #6c757d;
    }
    .thead-primary {
        background-color: #2cabe3; /* Bleu Bootstrap */
        color: white;
    }
    
  </style>
<!-- complex headers -->
<div class="row">
    <div class="col-12">
        <div class="material-card card">
            <div class="card-body">
                <div class="container">
                    <h2 class="text-center mb-4">🔔 Notifications</h2>              
                    <table id="complex_header" class="table table-striped table-bordered display" style="width:100%">
                        <thead class="thead-primary">
                            <tr>
                              <th>Message</th>
                              <th>Date</th>
                              {{-- <th>Statut</th> --}}
                              <th>Action</th>
                            </tr>
                          </thead>
                          @foreach ($notifications as $notif)
                                @php
                                    if ($notif->status == 1) {
                                        $rowClass = 'status-read';
                                    } else {
                                        $rowClass = 'status-unread';
                                    }
                                @endphp

                            <tr class="{{ $rowClass }}">
                                <td>{{ $notif->contenu }}</td>
                                <td>{{ $notif->created }}</td>
                                <td>
                                    @if ($notif->status === 1)
                                        <span class="text-success">✓ Lue</span>
                                    @else
                                        {{-- <form method="POST" action="{{ url('/notifications/' . $notif->id . '/mark-as-read') }}"
                                            >
                                            @csrf
                                            <button class="btn btn-sm btn-outline-secondary">Marquer comme lue</button>
                                        </form> --}}
                                        <button 
                                            class="btn btn-sm btn-outline-secondary" 
                                            onclick="markAsRead({{ $notif->id }})"
                                        >
                                            Marquer comme lue
                                        </button>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                      </table>
                
                  </div>
                
            </div>
        </div>
    </div>
</div>
<script>
    function markAsRead(notificationId) {
        const baseUrl = '