@extends('layouts.app')
@section('title', 'إعدادات الإشعارات - DOTS HR Pro')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">إعدادات الإشعارات</h1>
        <p class="page-subtitle">إدارة إشعارات البريد الإلكتروني والتنبيهات التلقائية</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('notifications.logs') }}" class="btn btn-secondary"><i class="fas fa-list-alt"></i> سجل الإشعارات</a>
    </div>
</div>

<div class="stats-grid cols-4">
    <div class="stat-card">
        <div class="stat-icon" style="background: var(--primary-light); color: var(--primary)"><i class="fas fa-bell"></i></div>
        <div class="stat-value">{{ $stats['total'] }}</div>
        <div class="stat-label">إجمالي الإشعارات</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background: var(--success-light); color: var(--success)"><i class="fas fa-toggle-on"></i></div>
        <div class="stat-value">{{ $stats['active'] }}</div>
        <div class="stat-label">مفعّلة</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background: var(--warning-light); color: var(--warning)"><i class="fas fa-envelope"></i></div>
        <div class="stat-value">{{ $stats['sent'] }}</div>
        <div class="stat-label">بريد مرسل</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background: var(--danger-light); color: var(--danger)"><i class="fas fa-exclamation-circle"></i></div>
        <div class="stat-value">{{ $stats['failed'] }}</div>
        <div class="stat-label">فشل الإرسال</div>
    </div>
</div>

@if(session('success'))
<div style="background: var(--success-light); border: 1px solid var(--success); padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; color: var(--success); font-weight: 600">
    <i class="fas fa-check-circle"></i> {{ session('success') }}
</div>
@endif

@if(session('error'))
<div style="background: var(--danger-light); border: 1px solid var(--danger); padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; color: var(--danger); font-weight: 600">
    <i class="fas fa-times-circle"></i> {{ session('error') }}
</div>
@endif

<div class="card">
    <div class="card-header">
        <h3><i class="fas fa-cogs"></i> أنواع الإشعارات</h3>
    </div>
    <div class="table-responsive">
        <table class="data-table">
            <thead>
                <tr>
                    <th>نوع الإشعار</th>
                    <th>القناة</th>
                    <th>الحالة</th>
                    <th>المستلمون</th>
                    <th>آخر إرسال</th>
                    <th style="width: 150px">إجراءات</th>
                </tr>
            </thead>
            <tbody>
                @forelse($settings as $setting)
                <tr>
                    <td>
                        <strong>{{ $setting->label }}</strong>
                        <br><small style="color: var(--text-muted)">{{ $setting->key }}</small>
                    </td>
                    <td>
                        @if($setting->channel === 'email')
                            <span style="color: var(--primary)"><i class="fas fa-envelope"></i> {{ $setting->channel_label }}</span>
                        @elseif($setting->channel === 'database')
                            <span style="color: var(--warning)"><i class="fas fa-database"></i> {{ $setting->channel_label }}</span>
                        @else
                            <span style="color: var(--success)"><i class="fas fa-broadcast-tower"></i> {{ $setting->channel_label }}</span>
                        @endif
                    </td>
                    <td>
                        <form method="POST" action="{{ route('notifications.update', $setting) }}" style="display: inline">
                            @csrf @method('PUT')
                            <input type="hidden" name="channel" value="{{ $setting->channel }}">
                            <input type="hidden" name="is_active" value="{{ $setting->is_active ? '0' : '1' }}">
                            <button type="submit" class="status-badge {{ $setting->is_active ? 'status-active' : 'status-pending' }}" style="cursor: pointer; border: none; font-size: 0.85rem">
                                <i class="fas {{ $setting->is_active ? 'fa-toggle-on' : 'fa-toggle-off' }}"></i>
                                {{ $setting->is_active ? 'مفعّل' : 'معطّل' }}
                            </button>
                        </form>
                    </td>
                    <td>
                        @if($setting->recipients && count($setting->recipients) > 0)
                            <span class="status-badge status-active">{{ count($setting->recipients) }} مستلم</span>
                        @else
                            <span style="color: var(--text-muted)">الافتراضي</span>
                        @endif
                    </td>
                    <td>
                        @if(isset($lastSent[$setting->key]))
                            <small style="color: var(--text-secondary)">{{ \Carbon\Carbon::parse($lastSent[$setting->key])->diffForHumans() }}</small>
                        @else
                            <span style="color: var(--text-muted)">—</span>
                        @endif
                    </td>
                    <td>
                        <div class="action-btns">
                            <a href="{{ route('notifications.edit', $setting) }}" class="action-btn" title="تعديل الإعدادات"><i class="fas fa-edit"></i></a>
                            <form method="POST" action="{{ route('notifications.test', $setting->key) }}" style="display: inline">
                                @csrf
                                <button type="submit" class="action-btn" title="إرسال تجريبي" style="border: none; background: none; cursor: pointer; color: inherit"><i class="fas fa-paper-plane"></i></button>
                            </form>
                            <a href="{{ route('notifications.logs', ['type' => $setting->key]) }}" class="action-btn" title="عرض السجل"><i class="fas fa-list-alt"></i></a>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6">
                        <div class="empty-state">
                            <i class="fas fa-bell-slash"></i>
                            <h3>لا توجد إعدادات إشعارات</h3>
                            <p>قم بتشغيل أمر البذر لإنشاء الإعدادات الافتراضية</p>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection