@extends('layouts.default')
@section('content')
  <div class="container">
    <div class="row">
      <x-sidebar />

      <!-- Middle Panel
============================================= -->
      <div class="col-lg-9">

        <!-- Notifications
        ============================================= -->
        <div class="bg-white shadow-sm rounded py-4 mb-4">
          <h3 class="text-5 fw-400 px-4 mb-4">Bildirimler</h3>
          <hr class="mb-0">

          <!-- Notifications List
          =============================== -->
          <div class="notifications-list">
            @forelse($notifications as $notification)
              <div class="notifications-item {{ $notification->read_at ? '' : 'unread' }} px-4 py-3"
                   data-bs-toggle="modal"
                   data-bs-target="#notifications-detail-{{ $notification->id }}">
                <div class="row align-items-center flex-row">
                  <div class="col-2 col-sm-1 text-center text-8 icon-bell">
                    <i class="far fa-bell"></i>
                  </div>
                  <div class="col col-sm-10">
                    <h4 class="text-3 mb-1">{{ $notification->data['title'] }}</h4>
                    <span class="text-muted">
                    {{ \Carbon\Carbon::parse($notification->created_at)->format('d M Y H:i') }}
                </span>
                  </div>
                  <div class="col-1 text-end text-muted">
                    <div class="dropdown">
                      <button class="btn btn-link dropdown-toggle" type="button"
                              data-bs-toggle="dropdown">
                        <i class="fas fa-ellipsis-v"></i>
                      </button>
                      <ul class="dropdown-menu">
                        @if(!$notification->read_at)
                          <li>
                            <form
                                    action="{{ route('notifications.markAsRead', $notification->id) }}"
                                    method="POST">
                              @csrf
                              <button type="submit" class="dropdown-item">
                                <i class="fas fa-check me-2"></i> Okundu İşaretle
                              </button>
                            </form>
                          </li>
                        @endif
                        <li>
                          <form
                                  action="{{ route('notifications.destroy', $notification->id) }}"
                                  method="POST">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="dropdown-item text-danger">
                              <i class="fas fa-trash me-2"></i> Sil
                            </button>
                          </form>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>

              <!-- Bildirim Detay Modal -->
              <div class="modal fade" id="notifications-detail-{{ $notification->id }}" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">{{ $notification->data['title'] }}</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                      {{ $notification->data['message'] ?? '' }}
                    </div>
                    <div class="modal-footer">
                      @if(!$notification->read_at)
                        <form
                                action="{{ route('notifications.markAsRead', $notification->id) }}"
                                method="POST">
                          @csrf
                          <button type="submit" class="btn btn-primary">Okundu İşaretle
                          </button>
                        </form>
                      @endif
                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        Kapat
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            @empty
              <div class="text-center py-5">
                <h4>Henüz bildiriminiz bulunmamaktadır.</h4>
              </div>
            @endforelse
          </div>
          <!-- Notifications Item Details Modal End -->

        </div>
        <!-- Notifications End -->

      </div>
      <!-- Middle Panel End -->
    </div>
  </div>
@endsection