@extends('layouts.parent')

@section('title', 'Notification Inbox - Kidscholl')

@section('styles')
<style>
    .notifications-header {
        background: linear-gradient(135deg, #E0F2FE 0%, #EEF2F6 100%);
        border-radius: 24px;
        padding: 30px;
        margin-bottom: 30px;
        border-bottom: 4px solid var(--secondary);
    }
    
    .filter-card {
        background-color: #ffffff;
        border: none;
        border-radius: 20px;
        box-shadow: var(--card-shadow);
        padding: 25px;
        border-top: 4px solid var(--primary);
    }

    .form-control-custom, .form-select-custom {
        border-radius: 12px;
        padding: 12px 15px;
        border: 2px solid #e2e8f0;
        transition: all 0.2s ease;
        font-weight: 600;
        color: var(--dark);
    }

    .form-control-custom:focus, .form-select-custom:focus {
        border-color: var(--secondary);
        box-shadow: 0 0 0 4px rgba(78, 205, 196, 0.15);
        background-color: #ffffff;
    }

    .notification-item-card {
        background: #ffffff;
        border: 2px solid #f1f5f9;
        border-radius: 20px;
        padding: 24px;
        margin-bottom: 20px;
        transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        position: relative;
    }

    .notification-item-card:hover {
        transform: translateY(-3px);
        border-color: var(--secondary);
        box-shadow: 0 10px 25px rgba(0,0,0,0.03);
    }

    .unread-dot {
        position: absolute;
        top: 24px;
        left: -6px;
        width: 12px;
        height: 12px;
        background-color: #ef4444;
        border-radius: 50%;
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.25);
    }

    .category-badge-pill {
        font-family: 'Fredoka', sans-serif;
        font-size: 0.75rem;
        padding: 6px 16px;
        border-radius: 20px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .category-general { background-color: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
    .category-ptm { background-color: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
    .category-exam { background-color: #fff1f2; color: #9f1239; border: 1px solid #fecdd3; }
    .category-results { background-color: #faf5ff; color: #6b21a8; border: 1px solid #e9d5ff; }
    .category-emergency { background-color: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }

    .btn-action-custom {
        font-family: 'Fredoka', sans-serif;
        font-weight: 700;
        border-radius: 30px;
        padding: 8px 20px;
        font-size: 0.85rem;
        transition: all 0.2s ease;
    }

    .btn-action-custom:hover {
        transform: translateY(-2px);
    }
</style>
@endsection

@section('content')
<div class="notifications-header">
    <div class="row align-items-center">
        <div class="col-md-8">
            <h2 class="text-primary mb-1"><i class="bi bi-bell-fill me-2"></i> Notification Inbox</h2>
            <p class="text-secondary mb-0">Stay informed with updates, announcements, and notices regarding your child's academic activities.</p>
        </div>
        <div class="col-md-4 text-md-end mt-3 mt-md-0">
            <span class="badge bg-white text-primary border border-2 border-primary rounded-pill px-3 py-2 fw-bold font-monospace">
                Total Logs: {{ $logs->count() }}
            </span>
        </div>
    </div>
</div>

<div class="row">
    <!-- Filter Sidebar Column -->
    <div class="col-lg-3 mb-4">
        <div class="filter-card">
            <h5 class="fw-bold mb-4 text-dark"><i class="bi bi-funnel me-2 text-primary"></i> Filter Messages</h5>
            <form action="{{ route('parent.notifications') }}" method="GET">
                <div class="mb-3">
                    <label class="form-label fw-bold text-secondary small">Search Keywords</label>
                    <div class="input-group">
                        <span class="input-group-text bg-light border-end-0 border-2 rounded-start-3" style="border-color:#e2e8f0;"><i class="bi bi-search text-muted"></i></span>
                        <input type="text" name="search" class="form-control form-control-custom rounded-end-3 border-start-0" placeholder="Type to search..." value="{{ request('search') }}">
                    </div>
                </div>
                <div class="mb-4">
                    <label class="form-label fw-bold text-secondary small">Category</label>
                    <select name="category" class="form-select form-select-custom">
                        <option value="">All Categories</option>
                        <option value="General" {{ request('category') == 'General' ? 'selected' : '' }}>General Announcement</option>
                        <option value="PTM" {{ request('category') == 'PTM' ? 'selected' : '' }}>PTM Meeting</option>
                        <option value="Exam" {{ request('category') == 'Exam' ? 'selected' : '' }}>Exams Schedule</option>
                        <option value="Results" {{ request('category') == 'Results' ? 'selected' : '' }}>Report Cards</option>
                        <option value="Emergency" {{ request('category') == 'Emergency' ? 'selected' : '' }}>Emergency / Holidays</option>
                    </select>
                </div>
                <button type="submit" class="btn btn-primary w-100 rounded-pill py-2 fw-bold text-white shadow-sm btn-action-custom">
                    <i class="bi bi-filter me-1"></i> Apply Filters
                </button>
                @if(request()->anyFilled(['search', 'category']))
                    <a href="{{ route('parent.notifications') }}" class="btn btn-outline-secondary w-100 rounded-pill py-2 fw-bold mt-2 btn-action-custom small">
                        Clear Filters
                    </a>
                @endif
            </form>
        </div>
    </div>

    <!-- Notifications Content List Column -->
    <div class="col-lg-9 mb-4">
        <div class="portal-card h-100" style="border-bottom-color: var(--secondary);">
            <div class="d-flex flex-column gap-1">
                @forelse($logs as $log)
                    @php
                        $isUnread = ($log->status != 'Read');
                        $catClass = 'category-' . strtolower($log->notification->category);
                    @endphp
                    <div class="notification-item-card {{ $isUnread ? 'bg-light border-danger border-opacity-10' : '' }}">
                        @if($isUnread)
                            <span class="unread-dot"></span>
                        @endif

                        <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                            <span class="category-badge-pill {{ $catClass }}">{{ $log->notification->category }}</span>
                            <small class="text-muted fw-bold"><i class="bi bi-clock me-1"></i> {{ $log->notification->created_at->format('d M Y - h:i A') }}</small>
                        </div>
                        
                        <h5 class="fw-bold text-dark mb-2">{{ $log->notification->title }}</h5>
                        <p class="text-secondary small mb-4 lh-lg text-wrap">{{ $log->notification->description }}</p>
                        
                        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 border-top pt-3">
                            <div>
                                @if($isUnread)
                                    <a href="{{ route('parent.notifications.read', $log->notification->id) }}" class="btn btn-success text-white btn-action-custom">
                                        <i class="bi bi-check-lg me-1"></i> Mark as Read
                                    </a>
                                @else
                                    <span class="text-success small fw-bold bg-success bg-opacity-10 px-3 py-1.5 rounded-pill"><i class="bi bi-check-circle-fill me-1"></i> Read receipt logged at {{ \Carbon\Carbon::parse($log->read_at)->format('H:i') }}</span>
                                @endif
                            </div>

                            @if($log->notification->attachment_path)
                                <a href="{{ asset('storage/' . $log->notification->attachment_path) }}" class="btn btn-outline-danger btn-action-custom" download>
                                    <i class="bi bi-file-earmark-pdf-fill me-1"></i> Download Circular PDF
                                </a>
                            @endif
                        </div>
                    </div>
                @empty
                    <div class="text-center py-5 text-muted">
                        <i class="bi bi-chat-left-heart fs-1 mb-3 d-block text-secondary opacity-50"></i>
                        <h5 class="fw-bold text-dark mb-1">No Notifications Found</h5>
                        <p class="small text-muted mb-0">We couldn't find any circular notifications matching your filters.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection