@extends('user.layout.app')

@section('title', 'Notifications')

@section('content')
<div class="main-content">
  <section class="section">
    <div class="section-body">

      @if(session('success'))
        <div class="alert alert-success alert-dismissible show fade">
          <div class="alert-body">
            <button class="close" data-dismiss="alert"><span>&times;</span></button>
            {{ session('success') }}
          </div>
        </div>
      @endif

      <div class="card">
        <div class="card-header d-flex justify-content-between">
          <h4>All Notifications</h4>
          <form action="{{ route('user.notifications.readAll') }}" method="POST" class="m-0">
            @csrf
            <button class="btn btn-sm btn-outline-primary">
              <i class="fas fa-envelope-open"></i> Mark all read
            </button>
          </form>
        </div>

        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>Title</th>
                  <th>Message</th>
                  <th>Attachments</th>
                  <th>Status</th>
                  <th>Received</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                @forelse($notifications as $n)
                  <tr class="{{ $n->pivot->is_read ? '' : 'font-weight-bold' }}">
                    <td>{{ $n->title }}</td>
                    <td>{{ \Illuminate\Support\Str::limit($n->message, 80) }}</td>
                    <td>
                      @forelse($n->attachments as $att)
                        <a href="{{ asset('storage/'.$att->path) }}" class="btn btn-sm btn-outline-primary" download>
                          <i class="fas fa-download"></i> {{ basename($att->path) }}
                        </a>
                      @empty
                        <span class="text-muted">—</span>
                      @endforelse
                    </td>
                    <td>
                      @if($n->pivot->is_read)
                        <span class="badge badge-secondary">Read</span>
                      @else
                        <span class="badge badge-primary">Unread</span>
                      @endif
                    </td>
                    <td>{{ $n->created_at->format('d M Y H:i') }}</td>
                    <td class="d-flex">
                      <a href="{{ route('user.notifications.show', $n->id) }}" class="btn btn-sm btn-info mr-2">
                        View
                      </a>

                      @if($n->pivot->is_read)
                        <form action="{{ route('user.notifications.unread', $n->id) }}" method="POST">
                          @csrf
                          <button class="btn btn-sm btn-warning">Mark Unread</button>
                        </form>
                      @else
                        <form action="{{ route('user.notifications.read', $n->id) }}" method="POST">
                          @csrf
                          <button class="btn btn-sm btn-success">Mark Read</button>
                        </form>
                      @endif
                    </td>
                  </tr>
                @empty
                  <tr>
                    <td colspan="6" class="text-center text-muted">No notifications.</td>
                  </tr>
                @endforelse
              </tbody>
            </table>
          </div>

          <div class="d-flex justify-content-center">
            {{ $notifications->links() }}
          </div>
        </div>
      </div>

    </div>
  </section>
</div>
@endsection