@extends('layouts.app')

@section('title', 'Notifikasi Ruangan')
@section('page_title', 'Notifikasi Ruangan')
@section('page_pretitle', 'Prioritas Inventaris')

@section('content')
  <div class="card notification-feed-card">
    <div class="card-header">
      <div>
        <h3 class="card-title">Aktivitas Notifikasi Terbaru</h3>
        <p class="card-subtitle">Scan QR, laporan kerusakan, dan pengajuan dari aplikasi mobile.</p>
      </div>
      <div class="notification-feed-tools">
        <span class="notification-feed-stat">
          <strong>{{ $realtimeNotificationTotal }}</strong>
          <small>Total tersimpan</small>
        </span>
        @if ($realtimeNotificationTotal > 0)
          <button class="btn btn-sm btn-ghost-primary notification-select-toggle" type="button" data-notification-select-toggle aria-pressed="false">
            <i class="ti ti-checklist"></i>
            Pilih
          </button>
          <form action="{{ route('notifications.clear') }}" method="POST" data-notification-clear-form>
            @csrf
            <button class="btn btn-sm btn-outline-danger" type="button" data-notification-clear-open>
              <i class="ti ti-trash-x"></i>
              Bersihkan Semua
            </button>
          </form>
        @endif
      </div>
    </div>

    @if ($realtimeNotificationTotal > $realtimeNotifications->count())
      <div class="notification-feed-note">
        Menampilkan {{ $realtimeNotifications->count() }} aktivitas terbaru dari {{ $realtimeNotificationTotal }} riwayat. Gunakan tombol bersihkan jika riwayat sudah tidak diperlukan.
      </div>
    @endif

    <form class="notification-select-form" action="{{ route('notifications.delete-selected') }}" method="POST" data-notification-select-form>
      @csrf
      <div class="notification-selection-bar" data-notification-selection-bar hidden>
        <span>
          <strong data-notification-selected-count>0</strong>
          notifikasi dipilih
        </span>
        <div class="notification-selection-actions">
          <button class="btn btn-sm btn-outline-danger" type="button" data-notification-delete-selected disabled>
            <i class="ti ti-trash"></i>
            Hapus Dipilih
          </button>
          <button class="btn btn-sm" type="button" data-notification-select-cancel>
            Batal
          </button>
        </div>
      </div>

      <div class="notification-feed">
        @forelse ($realtimeNotifications as $notification)
          @php
            $isNew = $newNotificationIds->contains($notification->id);
            $icon = match ($notification->jenis) {
              'damage_report' => 'ti-report',
              'replacement_request' => 'ti-package-export',
              'room_scan' => 'ti-qrcode',
              'item_scan' => 'ti-scan',
              default => 'ti-inbox',
            };
          @endphp
          <div class="notification-select-item" data-notification-item>
            <input
              class="notification-select-input"
              id="notification-{{ $notification->id }}"
              type="checkbox"
              name="notification_ids[]"
              value="{{ $notification->id }}"
              data-notification-checkbox
            >
            <a
              class="notification-card {{ $isNew ? 'is-new' : '' }} {{ $notification->jenis }}"
              href="{{ $notification->url ?: route('notifications.index') }}"
              data-notification-card
            >
              <span class="notification-select-control" aria-hidden="true">
                <i class="ti ti-check"></i>
              </span>
              <span class="notification-card-icon">
                <i class="ti {{ $icon }}"></i>
              </span>
              <span class="notification-card-body">
                <span class="notification-card-title">
                  <strong>{{ $notification->title }}</strong>
                  @if ($isNew)
                    <em>Baru</em>
                  @endif
                </span>
                <small>{{ $notification->message }}</small>
              </span>
              <time>{{ $notification->dibuat_pada?->format('d/m/Y H:i') }}</time>
            </a>
          </div>
        @empty
          <div class="empty py-5">
            <p class="empty-title">Belum ada aktivitas notifikasi realtime.</p>
          </div>
        @endforelse
      </div>
    </form>
  </div>

  <div class="notification-confirm-modal" data-notification-selected-delete-modal aria-hidden="true">
    <button class="notification-confirm-backdrop" type="button" data-notification-selected-delete-close aria-label="Batalkan hapus notifikasi terpilih"></button>
    <section class="notification-confirm-dialog" role="dialog" aria-modal="true" aria-labelledby="deleteSelectedNotificationTitle" aria-describedby="deleteSelectedNotificationDescription">
      <button class="notification-confirm-close" type="button" data-notification-selected-delete-close aria-label="Tutup popup">
        <i class="ti ti-x"></i>
      </button>
      <div class="notification-confirm-icon selected-delete">
        <i class="ti ti-trash"></i>
      </div>
      <div class="notification-confirm-copy">
        <h2 id="deleteSelectedNotificationTitle">Hapus notifikasi terpilih?</h2>
        <p id="deleteSelectedNotificationDescription">
          <strong data-notification-selected-modal-count>0</strong>
          notifikasi yang kamu pilih akan dihapus dari riwayat realtime. Data inventaris tetap aman.
        </p>
      </div>
      <div class="notification-confirm-actions">
        <button class="btn" type="button" data-notification-selected-delete-close>Batal</button>
        <button class="btn btn-outline-danger notification-selected-delete-confirm" type="button" data-notification-selected-delete-confirm>
          <i class="ti ti-trash"></i>
          Hapus
        </button>
      </div>
    </section>
  </div>

  <div class="notification-confirm-modal" data-notification-clear-modal aria-hidden="true">
    <button class="notification-confirm-backdrop" type="button" data-notification-clear-close aria-label="Batalkan bersihkan notifikasi"></button>
    <section class="notification-confirm-dialog" role="dialog" aria-modal="true" aria-labelledby="clearNotificationTitle" aria-describedby="clearNotificationDescription">
      <button class="notification-confirm-close" type="button" data-notification-clear-close aria-label="Tutup popup">
        <i class="ti ti-x"></i>
      </button>
      <div class="notification-confirm-icon">
        <i class="ti ti-trash-x"></i>
      </div>
      <div class="notification-confirm-copy">
        <h2 id="clearNotificationTitle">Bersihkan semua notifikasi?</h2>
        <p id="clearNotificationDescription">Riwayat aktivitas realtime akan dikosongkan dari daftar ini. Data barang, ruangan, laporan, dan pengajuan tetap aman.</p>
      </div>
      <div class="notification-confirm-actions">
        <button class="btn" type="button" data-notification-clear-close>Batal</button>
        <button class="btn btn-outline-danger notification-clear-confirm" type="button" data-notification-clear-confirm>
          <i class="ti ti-trash"></i>
          Bersihkan
        </button>
      </div>
    </section>
  </div>

  <div class="row row-deck row-cards">
    <div class="col-lg-4">
      <div class="card">
        <div class="card-header">
          <div>
            <h3 class="card-title">Barang Mendekati Umur Pakai</h3>
            <p class="card-subtitle">Aset yang perlu dievaluasi masa manfaatnya.</p>
          </div>
        </div>
        <div class="list-group list-group-flush">
          @forelse ($nearEndOfLife as $item)
            <div class="list-group-item">
              <div class="row align-items-center">
                <div class="col-auto">
                  <span class="avatar bg-warning-lt text-warning"><i class="ti ti-hourglass"></i></span>
                </div>
                <div class="col">
                  <div class="fw-bold">{{ $item->nama_barang }}</div>
                  <div class="text-secondary small">{{ $item->room->nama_ruangan }} - diperoleh {{ $item->tahun_perolehan }}, umur pakai {{ $item->umur_manfaat_tahun }} tahun.</div>
                  <div class="text-secondary small mt-1">{{ $item->kode_aset }}</div>
                </div>
              </div>
            </div>
          @empty
            <div class="empty py-5">
              <p class="empty-title">Tidak ada barang mendekati umur pakai.</p>
            </div>
          @endforelse
        </div>
      </div>
    </div>

    <div class="col-lg-4">
      <div class="card">
        <div class="card-header">
          <div>
            <h3 class="card-title">Barang Perlu Pemeliharaan</h3>
            <p class="card-subtitle">Jadwal pemeliharaan yang mendekati jatuh tempo.</p>
          </div>
        </div>
        <div class="list-group list-group-flush">
          @forelse ($maintenanceDue as $item)
            <div class="list-group-item">
              <div class="row align-items-center">
                <div class="col-auto">
                  <span class="avatar bg-info-lt text-info"><i class="ti ti-tool"></i></span>
                </div>
                <div class="col">
                  <div class="fw-bold">{{ $item->nama_barang }}</div>
                  <div class="text-secondary small">{{ $item->room->nama_ruangan }} - jadwal {{ $item->tanggal_jadwal_pemeliharaan?->format('d/m/Y') ?? '-' }}.</div>
                  <div class="text-secondary small mt-1">{{ $item->kode_aset }}</div>
                </div>
              </div>
            </div>
          @empty
            <div class="empty py-5">
              <p class="empty-title">Tidak ada jadwal pemeliharaan dekat.</p>
            </div>
          @endforelse
        </div>
      </div>
    </div>

    <div class="col-lg-4">
      <div class="card">
        <div class="card-header">
          <div>
            <h3 class="card-title">Pengajuan Penggantian</h3>
            <p class="card-subtitle">Pengajuan dari petugas mobile.</p>
          </div>
        </div>
        <div class="list-group list-group-flush">
          @forelse ($replacementRequests as $item)
            <div class="list-group-item">
              <div class="row align-items-center">
                <div class="col-auto">
                  <span class="avatar bg-danger-lt text-danger"><i class="ti ti-message-report"></i></span>
                </div>
                <div class="col">
                  <div class="fw-bold">{{ $item->nama_barang }}</div>
                  <div class="text-secondary small">{{ $item->room->nama_ruangan }} - status {{ $item->status_label }}.</div>
                  <div class="text-secondary small mt-1">{{ $item->kode_aset }}</div>
                </div>
              </div>
            </div>
          @empty
            <div class="empty py-5">
              <p class="empty-title">Belum ada pengajuan penggantian.</p>
            </div>
          @endforelse
        </div>
      </div>
    </div>
  </div>
@endsection
