@extends('admin.layout')
@section('title', 'Quản lý thông báo')
@section('greeting') QUẢN LÝ <span>THÔNG BÁO</span> @endsection
@section('subtitle') Gửi thông báo tới toàn bộ người dùng @endsection

@section('content')
    {{-- Create Notification --}}
    <div class="card" style="margin-bottom:20px;">
        <div class="card-header">
            <h3><i class="fas fa-plus-circle" style="color:var(--accent);margin-right:8px;"></i>Tạo thông báo mới</h3>
        </div>
        <div style="padding:20px;">
            <form method="POST" action="{{ route('admin.notifications.create') }}">
                @csrf
                <div style="display:grid;grid-template-columns:1fr auto;gap:12px;margin-bottom:12px;">
                    <div>
                        <label style="font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px;display:block;">Tiêu đề</label>
                        <input type="text" name="title" required maxlength="200" placeholder="VD: Cập nhật hệ thống..." class="ad-input" style="width:100%;">
                    </div>
                    <div>
                        <label style="font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px;display:block;">Loại</label>
                        <select name="type" class="ad-input" style="min-width:140px;">
                            <option value="info">ℹ️ Thông tin</option>
                            <option value="success">✅ Thành công</option>
                            <option value="warning">⚠️ Cảnh báo</option>
                            <option value="promo">🎉 Khuyến mãi</option>
                        </select>
                    </div>
                </div>
                <div style="margin-bottom:12px;">
                    <label style="font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px;display:block;">Nội dung</label>
                    <textarea name="content" required rows="3" placeholder="Nội dung thông báo..." class="ad-input" style="width:100%;resize:vertical;min-height:80px;"></textarea>
                </div>
                <button type="submit" class="btn btn-primary"><i class="fas fa-paper-plane"></i> Gửi thông báo</button>
            </form>
        </div>
    </div>

    {{-- Notification List --}}
    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-list" style="color:var(--accent);margin-right:8px;"></i>Danh sách thông báo</h3>
        </div>
        <div style="overflow-x:auto;">
            <table class="ad-table">
                <thead>
                    <tr>
                        <th style="width:40px;">#</th>
                        <th>Loại</th>
                        <th>Tiêu đề</th>
                        <th>Nội dung</th>
                        <th>Trạng thái</th>
                        <th>Ngày tạo</th>
                        <th style="text-align:center;">Hành động</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($notifications as $notif)
                    <tr style="{{ !$notif->is_active ? 'opacity:0.5;' : '' }}">
                        <td style="font-size:11px;color:var(--text-muted);">{{ $notif->id }}</td>
                        <td>
                            @if($notif->type === 'info')
                                <span class="badge badge-info">ℹ️ Thông tin</span>
                            @elseif($notif->type === 'success')
                                <span class="badge badge-success">✅ Thành công</span>
                            @elseif($notif->type === 'warning')
                                <span class="badge badge-warning">⚠️ Cảnh báo</span>
                            @else
                                <span class="badge" style="background:#fef3c7;color:#d97706;">🎉 Khuyến mãi</span>
                            @endif
                        </td>
                        <td style="font-weight:600;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ $notif->title }}</td>
                        <td style="font-size:12px;color:var(--text-muted);max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ $notif->content }}</td>
                        <td>
                            @if($notif->is_active)
                                <span class="badge badge-success">Đang hiện</span>
                            @else
                                <span class="badge badge-muted">Đã ẩn</span>
                            @endif
                        </td>
                        <td style="font-size:11px;color:var(--text-muted);">{{ $notif->created_at ? \Carbon\Carbon::parse($notif->created_at)->format('d/m/Y H:i') : '' }}</td>
                        <td style="text-align:center;">
                            <div style="display:flex;gap:4px;justify-content:center;">
                                <button type="button" class="btn btn-sm btn-outline" title="Sửa" onclick='editNotif({{ json_encode($notif) }})' style="color:var(--accent);border-color:var(--accent);">
                                    <i class="fas fa-pen"></i>
                                </button>
                                <form method="POST" action="{{ route('admin.notifications.toggle', $notif->id) }}">
                                    @csrf @method('PUT')
                                    <button type="submit" class="btn btn-sm {{ $notif->is_active ? 'btn-warning' : 'btn-primary' }}" title="{{ $notif->is_active ? 'Ẩn' : 'Hiện' }}">
                                        <i class="fas {{ $notif->is_active ? 'fa-eye-slash' : 'fa-eye' }}"></i>
                                    </button>
                                </form>
                                <form method="POST" action="{{ route('admin.notifications.delete', $notif->id) }}" onsubmit="return confirm('Xóa thông báo này?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-danger" title="Xóa"><i class="fas fa-trash"></i></button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="7" style="text-align:center;color:var(--text-muted);padding:40px;">Chưa có thông báo nào.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Edit Modal --}}
    <div id="editNotifModal" style="display:none;position:fixed;inset:0;z-index:100;background:rgba(0,0,0,0.35);align-items:center;justify-content:center;">
        <div style="background:#fff;border-radius:18px;width:100%;max-width:480px;box-shadow:0 12px 40px rgba(0,0,0,0.12);animation:modalIn 0.25s ease;">
            <div style="display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(0,0,0,0.06);">
                <h3 style="font-size:14px;font-weight:700;color:var(--text);"><i class="fas fa-pen" style="color:var(--accent);margin-right:8px;"></i>Sửa thông báo</h3>
                <button onclick="closeEditNotif()" style="background:none;border:none;cursor:pointer;font-size:18px;color:var(--text-muted);">&times;</button>
            </div>
            <div style="padding:20px;" id="editNotifContent"></div>
        </div>
    </div>
    <style>
        @keyframes modalIn { from { opacity:0; transform:scale(0.95) translateY(10px); } to { opacity:1; transform:scale(1) translateY(0); } }
    </style>
    <script>
        function editNotif(notif) {
            const typeOptions = ['info', 'success', 'warning', 'promo'].map(t => {
                const labels = { info: 'ℹ️ Thông tin', success: '✅ Thành công', warning: '⚠️ Cảnh báo', promo: '🎉 Khuyến mãi' };
                return `<option value="${t}" ${notif.type === t ? 'selected' : ''}>${labels[t]}</option>`;
            }).join('');

            document.getElementById('editNotifContent').innerHTML = `
                <form method="POST" action="/admin/notifications/${notif.id}">
                    <input type="hidden" name="_token" value="${document.querySelector('meta[name=csrf-token]').content}">
                    <input type="hidden" name="_method" value="PUT">
                    <div style="margin-bottom:14px;">
                        <label style="font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px;display:block;">Tiêu đề</label>
                        <input type="text" name="title" value="${notif.title}" required maxlength="200" class="ad-input" style="width:100%;">
                    </div>
                    <div style="margin-bottom:14px;">
                        <label style="font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px;display:block;">Loại</label>
                        <select name="type" class="ad-input" style="width:100%;">${typeOptions}</select>
                    </div>
                    <div style="margin-bottom:14px;">
                        <label style="font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px;display:block;">Nội dung</label>
                        <textarea name="content" required rows="4" class="ad-input" style="width:100%;resize:vertical;min-height:80px;">${notif.content}</textarea>
                    </div>
                    <div style="display:flex;gap:8px;justify-content:flex-end;padding-top:14px;border-top:1px solid rgba(0,0,0,0.06);">
                        <button type="button" class="btn btn-outline" onclick="closeEditNotif()">Hủy</button>
                        <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Lưu thay đổi</button>
                    </div>
                </form>
            `;
            document.getElementById('editNotifModal').style.display = 'flex';
            document.body.style.overflow = 'hidden';
        }

        function closeEditNotif() {
            document.getElementById('editNotifModal').style.display = 'none';
            document.body.style.overflow = '';
        }

        document.getElementById('editNotifModal').addEventListener('click', function(e) {
            if (e.target === this) closeEditNotif();
        });
    </script>
@endsection