@extends('layouts.app')
@section('title','Notifications')
@section('page-title','Notifications')
@section('breadcrumb','SpaceHR/ Notifications')

@section('content')
<div class="page-body">
  <div class="page-header animate-entry">
    <div class="page-header-title"><h1>Notifications</h1><p>Send announcements, leave alerts and HR updates to your team</p></div>
    <div style="display:flex;gap:10px">
      <button class="btn btn-secondary" onclick="markAllRead()"><i class="fas fa-check-double"></i> Mark All Read</button>
      <button class="btn btn-primary" onclick="openModal('modal-send')"><i class="fas fa-paper-plane"></i> Send Notification</button>
    </div>
  </div>

  <div class="stat-grid">
    <div class="stat-card cyan animate-entry"><div class="stat-icon"><i class="fas fa-bell"></i></div><div class="stat-num" id="ns-total">—</div><div class="stat-label">Total Sent</div></div>
    <div class="stat-card amber animate-entry"><div class="stat-icon"><i class="fas fa-envelope"></i></div><div class="stat-num" id="ns-unread">—</div><div class="stat-label">Unread</div></div>
    <div class="stat-card teal animate-entry"><div class="stat-icon"><i class="fas fa-globe"></i></div><div class="stat-num" id="ns-all">—</div><div class="stat-label">Broadcast</div></div>
    <div class="stat-card violet animate-entry"><div class="stat-icon"><i class="fas fa-user-tag"></i></div><div class="stat-num" id="ns-individual">—</div><div class="stat-label">Individual</div></div>
  </div>

  <div class="grid-70-30">
    <div class="panel">
      <div class="panel-header">
        <span class="panel-title">All Notifications</span>
        <div style="display:flex;gap:4px;flex-wrap:wrap">
          <button class="tab-btn active" onclick="filterNotifs('',this)">All</button>
          <button class="tab-btn" onclick="filterNotifs('leave',this)">Leave</button>
          <button class="tab-btn" onclick="filterNotifs('salary',this)">Salary</button>
          <button class="tab-btn" onclick="filterNotifs('hr',this)">HR</button>
          <button class="tab-btn" onclick="filterNotifs('appraisal',this)">Appraisal</button>
          <button class="tab-btn" onclick="filterNotifs('policy',this)">Policy</button>
        </div>
      </div>
      <div id="notif-loading" style="text-align:center;padding:32px;color:var(--text-muted)">
        <i class="fas fa-spinner fa-spin fa-2x"></i>
      </div>
      <div id="notif-list" class="notif-list" style="display:none"></div>
      <div id="notif-empty" style="display:none;text-align:center;padding:48px;color:var(--text-muted)">
        <i class="fas fa-bell-slash fa-3x" style="display:block;margin-bottom:14px;opacity:.3"></i>
        <p style="font-size:13px">No notifications found for this filter</p>
      </div>
    </div>

    <div style="display:flex;flex-direction:column;gap:16px">
      <div class="panel">
        <div class="panel-header"><span class="panel-title">Breakdown by Type</span></div>
        <div class="panel-body">
          <div style="display:flex;flex-direction:column;gap:10px">
            <div style="display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)">
              <span style="font-size:12px;color:var(--text-secondary);display:flex;align-items:center;gap:8px"><i class="fas fa-calendar-times" style="color:var(--accent-amber);width:16px"></i> Leave Alerts</span>
              <span id="stat-leave" style="font-weight:700;color:var(--accent-amber)">—</span>
            </div>
            <div style="display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)">
              <span style="font-size:12px;color:var(--text-secondary);display:flex;align-items:center;gap:8px"><i class="fas fa-dollar-sign" style="color:var(--accent-teal);width:16px"></i> Salary Updates</span>
              <span id="stat-salary" style="font-weight:700;color:var(--accent-teal)">—</span>
            </div>
            <div style="display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)">
              <span style="font-size:12px;color:var(--text-secondary);display:flex;align-items:center;gap:8px"><i class="fas fa-star" style="color:var(--accent-violet);width:16px"></i> Appraisal</span>
              <span id="stat-appraisal" style="font-weight:700;color:var(--accent-violet)">—</span>
            </div>
            <div style="display:flex;justify-content:space-between;align-items:center;padding:8px 0">
              <span style="font-size:12px;color:var(--text-secondary);display:flex;align-items:center;gap:8px"><i class="fas fa-bullhorn" style="color:var(--accent-cyan);width:16px"></i> HR Announcements</span>
              <span id="stat-hr" style="font-weight:700;color:var(--accent-cyan)">—</span>
            </div>
          </div>
        </div>
      </div>

      <div class="panel">
        <div class="panel-header"><span class="panel-title">Quick Templates</span></div>
        <div class="panel-body" style="display:flex;flex-direction:column;gap:8px">
          <button class="btn btn-secondary" style="justify-content:flex-start;gap:10px;padding:10px 12px;text-align:left"
            onclick="quickSend('leave','Leave Approved','Your leave request has been approved. Please ensure a smooth handover before your leave begins.')">
            <i class="fas fa-check-circle" style="color:var(--accent-teal);font-size:16px;flex-shrink:0"></i>
            <div><div style="font-weight:600;font-size:12px">Leave Approved</div><div style="font-size:10px;color:var(--text-muted)">Notify employee of approval</div></div>
          </button>
          <button class="btn btn-secondary" style="justify-content:flex-start;gap:10px;padding:10px 12px;text-align:left"
            onclick="quickSend('salary','Salary Disbursed','Your salary for this month has been processed and will be credited to your bank account within 24 hours.')">
            <i class="fas fa-dollar-sign" style="color:var(--accent-cyan);font-size:16px;flex-shrink:0"></i>
            <div><div style="font-weight:600;font-size:12px">Salary Disbursed</div><div style="font-size:10px;color:var(--text-muted)">Monthly salary notification</div></div>
          </button>
          <button class="btn btn-secondary" style="justify-content:flex-start;gap:10px;padding:10px 12px;text-align:left"
            onclick="quickSend('appraisal','Appraisal Reminder','Your Q2 performance self-review is due by June 30, 2026. Please complete your self-assessment in the system.')">
            <i class="fas fa-star" style="color:var(--accent-amber);font-size:16px;flex-shrink:0"></i>
            <div><div style="font-weight:600;font-size:12px">Appraisal Reminder</div><div style="font-size:10px;color:var(--text-muted)">Remind team of review deadline</div></div>
          </button>
          <button class="btn btn-secondary" style="justify-content:flex-start;gap:10px;padding:10px 12px;text-align:left"
            onclick="quickSend('hr','Public Holiday Notice','A reminder that the office will remain closed on the upcoming public holiday.')">
            <i class="fas fa-calendar-day" style="color:var(--accent-violet);font-size:16px;flex-shrink:0"></i>
            <div><div style="font-weight:600;font-size:12px">Holiday Notice</div><div style="font-size:10px;color:var(--text-muted)">Upcoming public holiday</div></div>
          </button>
          <button class="btn btn-secondary" style="justify-content:flex-start;gap:10px;padding:10px 12px;text-align:left"
            onclick="quickSend('policy','HR Policy Update','Our HR policies have been updated. Please review the updated Employee Handbook on the company portal.')">
            <i class="fas fa-file-alt" style="color:var(--accent-rose);font-size:16px;flex-shrink:0"></i>
            <div><div style="font-weight:600;font-size:12px">Policy Update</div><div style="font-size:10px;color:var(--text-muted)">HR policy announcement</div></div>
          </button>
          <button class="btn btn-secondary" style="justify-content:flex-start;gap:10px;padding:10px 12px;text-align:left"
            onclick="quickSend('salary','Salary Increment Applied','Congratulations! Your salary increment has been approved and will be reflected in your next payslip.')">
            <i class="fas fa-gift" style="color:var(--accent-teal);font-size:16px;flex-shrink:0"></i>
            <div><div style="font-weight:600;font-size:12px">Increment Applied</div><div style="font-size:10px;color:var(--text-muted)">Salary increment congratulation</div></div>
          </button>
        </div>
      </div>

      <div class="panel">
        <div class="panel-header"><span class="panel-title">Quick Actions</span></div>
        <div class="panel-body" style="display:flex;flex-direction:column;gap:8px">
          <button class="btn btn-success" onclick="markAllRead()"><i class="fas fa-check-double"></i> Mark All as Read</button>
          <button class="btn btn-secondary" onclick="loadNotifications(currentFilter)"><i class="fas fa-sync"></i> Refresh</button>
        </div>
      </div>
    </div>
  </div>
</div>

{{-- Send Notification Modal --}}
<div class="modal-overlay" id="modal-send">
  <div class="modal" style="max-width:540px">
    <div class="modal-header">
      <span class="modal-title"><i class="fas fa-paper-plane" style="color:var(--accent-cyan);margin-right:8px"></i>Send Notification</span>
      <button class="modal-close" onclick="closeModal('modal-send')"><i class="fas fa-times"></i></button>
    </div>
    <div class="modal-body">
      <div class="form-grid">
        <div class="form-group">
          <label class="form-label">Notification Type</label>
          <select class="form-control" id="nf-type">
            <option value="hr">📢 HR Announcement</option>
            <option value="leave">📅 Leave Update</option>
            <option value="salary">💰 Salary Notice</option>
            <option value="appraisal">⭐ Appraisal</option>
            <option value="policy">📄 Policy Update</option>
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">Send To</label>
          <select class="form-control" id="nf-recv" onchange="toggleRecipFields()">
            <option value="all">🌐 All Employees</option>
            <option value="department">🏢 Specific Department</option>
            <option value="individual">👤 Individual Employee</option>
          </select>
        </div>
        <div class="form-group full" id="nf-dept-row" style="display:none">
          <label class="form-label">Department</label>
          <select class="form-control" id="nf-dept"><option value="">Select department…</option></select>
        </div>
        <div class="form-group full" id="nf-emp-row" style="display:none">
          <label class="form-label">Employee</label>
          <select class="form-control" id="nf-emp"><option value="">Select employee…</option></select>
        </div>
        <div class="form-group full">
          <label class="form-label">Title / Subject <span style="color:var(--accent-rose)">*</span></label>
          <input class="form-control" id="nf-title" placeholder="Enter notification subject…">
        </div>
        <div class="form-group full">
          <label class="form-label">Message <span style="color:var(--accent-rose)">*</span></label>
          <textarea class="form-control" id="nf-msg" rows="5" placeholder="Write your full message here…"></textarea>
          <div style="display:flex;justify-content:flex-end;margin-top:4px">
            <span id="char-count" style="font-size:10px;color:var(--text-muted)">0 characters</span>
          </div>
        </div>
      </div>
      <div style="background:rgba(0,212,255,.06);border:1px solid rgba(0,212,255,.12);border-radius:8px;padding:10px 14px;margin-top:4px;font-size:11px;color:var(--text-secondary)">
        <i class="fas fa-info-circle" style="color:var(--accent-cyan)"></i>
        Notifications are delivered in-app immediately. Email delivery requires SMTP configuration in <code>.env</code>.
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary" onclick="closeModal('modal-send')">Cancel</button>
      <button class="btn btn-primary" id="btn-send" onclick="sendNotification()">
        <i class="fas fa-paper-plane"></i> Send Now
      </button>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
let currentFilter = '';

$(document).ready(function () {
  loadNotifications('');
  loadSidebarDepts();
  loadEmpSelect('#nf-emp');
  $('#nf-msg').on('input', function () {
    $('#char-count').text($(this).val().length + ' characters');
  });
});

function loadSidebarDepts() {
  $.get('/employees/departments/list', function (d) {
    d.forEach(dept => $('#nf-dept').append(`<option value="${dept.id}">${dept.name}</option>`));
  });
}

function loadNotifications(type) {
  currentFilter = type;
  $('#notif-loading').show();
  $('#notif-list, #notif-empty').hide();

  $.get('/notifications/list', { type }, function (res) {
    const data = res.data || [];
    const total = res.meta?.total || data.length;
    $('#ns-total').text(total);
    $('#notif-loading').hide();

    $('#stat-leave').text(data.filter(n => n.type === 'leave').length);
    $('#stat-salary').text(data.filter(n => n.type === 'salary').length);
    $('#stat-appraisal').text(data.filter(n => n.type === 'appraisal').length);
    $('#stat-hr').text(data.filter(n => n.type === 'hr').length);
    $('#ns-all').text(data.filter(n => n.recipients === 'all').length);
    $('#ns-individual').text(data.filter(n => n.recipients === 'individual').length);

    $.get('/notifications/unread-count', d => {
      $('#ns-unread').text(d.count);
      $('#unread-notif-badge').text(d.count > 0 ? d.count : '').toggle(d.count > 0);
      $('#notif-dot').toggle(d.count > 0);
    });

    if (!data.length) { $('#notif-empty').show(); return; }
    const list = $('#notif-list').show().empty();

    data.forEach(n => {
      const recipBadge = n.recipients === 'all'
        ? `<span style="font-size:10px;background:rgba(0,212,255,.1);color:var(--accent-cyan);padding:2px 7px;border-radius:10px">All Employees</span>`
        : n.recipients === 'department'
        ? `<span style="font-size:10px;background:rgba(139,92,246,.1);color:var(--accent-violet);padding:2px 7px;border-radius:10px">${n.department?.name||'Dept'}</span>`
        : `<span style="font-size:10px;background:rgba(0,184,148,.1);color:var(--accent-teal);padding:2px 7px;border-radius:10px">${n.employee?.full_name||'Individual'}</span>`;

      list.append(`
        <div class="notif-item" id="notif-${n.id}">
          <div class="notif-icon" style="background:${n.color}22;color:${n.color}">
            <i class="${n.icon}"></i>
          </div>
          <div class="notif-body" style="flex:1;min-width:0">
            <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px">
              <h4 style="margin:0;font-size:13px">${n.title}</h4>
              ${recipBadge}
            </div>
            <p style="font-size:12px;line-height:1.5">${n.message}</p>
            <div style="display:flex;align-items:center;justify-content:space-between;margin-top:6px;flex-wrap:wrap;gap:4px">
              <div class="notif-time">
                <i class="fas fa-clock"></i> ${timeAgo(n.created_at)}
                ${n.sender?.name ? ` &nbsp;·&nbsp; <strong>${n.sender.name}</strong>` : ''}
              </div>
              <div style="display:flex;gap:4px">
                <button class="btn btn-secondary btn-sm" title="Mark as read" onclick="markRead(${n.id})">
                  <i class="fas fa-check"></i>
                </button>
                <button class="btn btn-danger btn-sm" title="Delete" onclick="deleteNotif(${n.id})">
                  <i class="fas fa-trash"></i>
                </button>
              </div>
            </div>
          </div>
        </div>`);
    });
  }).fail(() => {
    $('#notif-loading').html(`
      <i class="fas fa-exclamation-triangle" style="color:var(--accent-rose)"></i>
      Error loading notifications.
      <button class="btn btn-secondary btn-sm" style="margin-left:8px" onclick="loadNotifications(currentFilter)">Retry</button>`);
  });
}

function filterNotifs(type, btn) {
  $(btn).addClass('active').siblings('.tab-btn').removeClass('active');
  loadNotifications(type);
}

function markRead(id) {
  $.post(`/notifications/${id}/read`, {}, () => {
    $(`#notif-${id}`).css({ opacity: '.5', 'pointer-events': 'none' });
    $.get('/notifications/unread-count', d => {
      $('#ns-unread').text(d.count);
      $('#unread-notif-badge').text(d.count > 0 ? d.count : '').toggle(d.count > 0);
      $('#notif-dot').toggle(d.count > 0);
    });
  });
}

function markAllRead() {
  $.post('/notifications/read-all', {}, () => {
    showToast('All notifications marked as read', 'success');
    $('#ns-unread').text('0');
    $('#unread-notif-badge').hide();
    $('#notif-dot').hide();
    $('.notif-item').css({ opacity: '.5', 'pointer-events': 'none' });
  });
}

function deleteNotif(id) {
  $.ajax({
    url: `/notifications/${id}`, type: 'DELETE',
    success: () => {
      $(`#notif-${id}`).slideUp(250, function () { $(this).remove(); });
      showToast('Notification deleted', 'info');
      const remaining = $('#notif-list .notif-item').length;
      if (remaining === 0) { $('#notif-list').hide(); $('#notif-empty').show(); }
      const cur = parseInt($('#ns-total').text() || '0');
      if (cur > 0) $('#ns-total').text(cur - 1);
    }
  });
}

function toggleRecipFields() {
  const val = $('#nf-recv').val();
  $('#nf-dept-row').toggle(val === 'department');
  $('#nf-emp-row').toggle(val === 'individual');
}

function sendNotification() {
  const title   = $('#nf-title').val().trim();
  const message = $('#nf-msg').val().trim();
  if (!title)   { showToast('Title is required', 'error'); return; }
  if (!message) { showToast('Message is required', 'error'); return; }

  const d = {
    type:          $('#nf-type').val(),
    recipients:    $('#nf-recv').val(),
    department_id: $('#nf-dept').val() || null,
    employee_id:   $('#nf-emp').val()  || null,
    title,
    message,
  };

  const $btn = $('#btn-send').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Sending…');

  $.post('/notifications', d, () => {
    showToast('Notification sent successfully!', 'success');
    closeModal('modal-send');
    $('#nf-title, #nf-msg').val('');
    $('#char-count').text('0 characters');
    toggleRecipFields();
    loadNotifications(currentFilter);
  })
  .fail(() => showToast('Error sending notification', 'error'))
  .always(() => $btn.prop('disabled', false).html('<i class="fas fa-paper-plane"></i> Send Now'));
}

function quickSend(type, title, message) {
  $.post('/notifications', { type, title, message, recipients: 'all' }, () => {
    showToast(`"${title}" sent to all employees!`, 'success');
    loadNotifications(currentFilter);
  }).fail(() => showToast('Error sending notification', 'error'));
}
</script>
@endpush