@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <!-- Modern Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb modern-breadcrumb-notification">
            <li class="breadcrumb-item">
                <a href="{{ route('dashboard') }}" class="breadcrumb-link">
                    <i class="bx bx-home"></i>
                    <span>Dashboard</span>
                </a>
            </li>
            <li class="breadcrumb-item active">
                <i class="bx bx-bell"></i>
                <span>Notifications</span>
            </li>
        </ol>
    </nav>

    <!-- Modern Page Header -->
    <div class="page-header-modern mb-4">
        <div class="d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center">
                <div class="header-icon me-3">
                    <i class="bx bx-bell"></i>
                </div>
                <div>
                    <h1 class="page-title mb-0">Notifications Center</h1>
                    <p class="page-subtitle mb-0">Stay updated with all system activities</p>
                </div>
            </div>
            <div class="d-flex align-items-center gap-3">
                @if($unreadCount > 0)
                    <div class="unread-badge">
                        <i class="bx bx-envelope"></i>
                        <span>{{ $unreadCount }} Unread</span>
                    </div>
                    <a href="{{ route('notifications.mark-all-read') }}" class="btn btn-primary">
                        <i class="bx bx-check-double"></i> Mark All Read
                    </a>
                @else
                    <div class="all-read-badge">
                        <i class="bx bx-check-circle"></i>
                        <span>All Caught Up!</span>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Filters Card -->
    <div class="card filter-card mb-4">
        <div class="card-body">
            <form method="GET" action="{{ route('notifications.index') }}" class="row g-3">
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Enquiry Status</label>
                    <select name="status" class="form-select">
                        <option value="">All Status</option>
                        <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                        <option value="assigned" {{ request('status') == 'assigned' ? 'selected' : '' }}>Assigned</option>
                        <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Rejected</option>
                        <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>Completed</option>
                        <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>Approved</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Type</label>
                    <select name="type" class="form-select">
                        <option value="">All Types</option>
                        <option value="enquiry_registered">Enquiry Registered</option>
                        <option value="enquiry_assigned">Enquiry Assigned</option>
                        <option value="status_changed">Status Changed</option>
                        <option value="payment_initiated">Payment Initiated</option>
                        <option value="payment_approved">Payment Approved</option>
                        <option value="loan_processed">Loan Processed</option>
                    </select>
                </div>
                <div class="col-md-4 d-flex align-items-end gap-2">
                    <button type="submit" class="btn btn-primary">
                        <i class="bx bx-search"></i> Filter
                    </button>
                    <a href="{{ route('notifications.index') }}" class="btn btn-outline-secondary">
                        <i class="bx bx-reset"></i> Reset
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Notifications List -->
    @if($notifications->count() > 0)
        <div class="notifications-grid">
            @foreach($notifications as $notification)
                <div class="notification-card {{ $notification->is_read ? 'read' : 'unread' }}">
                    <div class="notification-header">
                        <div class="d-flex align-items-start">
                            <div class="notification-icon me-3">
                                @php
                                    $iconMap = [
                                        'loan_application' => ['icon' => 'bx-credit-card', 'color' => 'success'],
                                        'payment' => ['icon' => 'bx-money', 'color' => 'info'],
                                        'membership' => ['icon' => 'bx-user-plus', 'color' => 'primary'],
                                        'withdrawal' => ['icon' => 'bx-log-out', 'color' => 'danger'],
                                    ];
                                    $enquiryType = $notification->enquiry->type ?? 'default';
                                    $icon = $iconMap[$enquiryType] ?? ['icon' => 'bx-bell', 'color' => 'primary'];
                                @endphp
                                <i class="bx {{ $icon['icon'] }} text-{{ $icon['color'] }}"></i>
                            </div>
                            <div class="flex-grow-1">
                                <div class="d-flex align-items-center mb-2">
                                    @if(!$notification->is_read)
                                        <span class="badge bg-danger me-2">NEW</span>
                                    @endif
                                    <h5 class="notification-title mb-0">{{ $notification->title }}</h5>
                                </div>
                                <p class="notification-message">{{ Str::limit($notification->message, 150) }}</p>
                            </div>
                            <div class="notification-type-badge">
                                @php
                                    $typeColors = [
                                        'enquiry_registered' => 'info',
                                        'enquiry_assigned' => 'primary',
                                        'status_changed' => 'warning',
                                        'payment_initiated' => 'info',
                                        'payment_approved' => 'success',
                                        'loan_processed' => 'info',
                                    ];
                                    $color = $typeColors[$notification->type] ?? 'secondary';
                                @endphp
                                <span class="badge bg-{{ $color }}">
                                    {{ ucwords(str_replace('_', ' ', $notification->type)) }}
                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="notification-meta">
                        <div class="meta-items">
                            <span class="meta-item">
                                <i class="bx bx-time"></i>
                                {{ $notification->created_at->diffForHumans() }}
                            </span>
                            <span class="meta-item">
                                <i class="bx bx-file"></i>
                                {{ $notification->enquiry->check_number ?? 'N/A' }}
                            </span>
                            @if($notification->enquiry)
                                <span class="meta-item">
                                    <i class="bx bx-user"></i>
                                    {{ Str::limit($notification->enquiry->full_name, 25) }}
                                </span>
                                <span class="meta-item">
                                    <i class="bx bx-map"></i>
                                    {{ $notification->enquiry->region->name ?? 'N/A' }}, {{ $notification->enquiry->district->name ?? 'N/A' }}
                                </span>
                                <span class="meta-item status-badge">
                                    <i class="bx bx-info-circle"></i>
                                    Status: <strong>{{ ucfirst($notification->enquiry->status) }}</strong>
                                </span>
                            @endif
                        </div>
                    </div>

                    <div class="notification-actions">
                        @if($notification->enquiry)
                            <a href="{{ route('enquiries.show', $notification->enquiry_id) }}" class="btn btn-sm btn-primary">
                                <i class="bx bx-file"></i> View Enquiry
                            </a>
                        @endif
                        <a href="{{ route('notifications.show', $notification->id) }}" class="btn btn-sm btn-outline-secondary">
                            <i class="bx bx-info-circle"></i> Details
                        </a>
                        @if(!$notification->is_read)
                            <form action="{{ route('notifications.mark-read', $notification->id) }}" method="POST" class="d-inline">
                                @csrf
                                <button type="submit" class="btn btn-sm btn-outline-success">
                                    <i class="bx bx-check"></i> Mark Read
                                </button>
                            </form>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>

       @if($notifications->hasPages())
            <div class="pagination-wrapper">
                <div class="d-flex justify-content-center">
                    {{ $notifications->links('pagination::bootstrap-5') }}
                </div>
            </div>
        @endif
    @else
        <div class="empty-state">
            <i class="bx bx-bell-off"></i>
            <h4>No Notifications Found</h4>
            <p>You're all caught up! Check back later for updates.</p>
        </div>
    @endif
</div>

@push('styles')
<style>
/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

/* Modern Breadcrumb */
.modern-breadcrumb-notification {
    background: white;
    padding: 14px 20px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 0;
    border: 1px solid #e5e7eb;
}

.modern-breadcrumb-notification .breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.modern-breadcrumb-notification .breadcrumb-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    text-decoration: none;
    transition: color 0.2s;
}

.modern-breadcrumb-notification .breadcrumb-link:hover {
    color: #3b82f6;
}

/* Page Header */
.page-header-modern {
    background: linear-gradient(135deg, #17479E 0%, #87CEEB 100%);
    padding: 36px;
    border-radius: 6px;
    color: white;
    box-shadow: 0 2px 6px rgba(23, 71, 158, 0.15);
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.6s ease-out 0.2s backwards;
}

.page-header-modern::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.header-icon {
    width: 70px;
    height: 70px;
    background: rgba(255,255,255,0.25);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.page-header-modern:hover .header-icon {
    transform: rotate(10deg) scale(1.1);
    background: rgba(255,255,255,0.3);
}

.page-title {
    font-size: 28px;
    font-weight: 700;
    color: white;
}

.page-subtitle {
    color: rgba(255,255,255,0.9);
    font-size: 14px;
}

.unread-badge {
    background: rgba(255,255,255,0.2);
    padding: 8px 16px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-weight: 600;
}

.all-read-badge {
    background: rgba(34, 197, 94, 0.2);
    padding: 8px 16px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-weight: 600;
}

/* Filter Card */
.filter-card {
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Notifications Grid */
.notifications-grid {
    display: grid;
    gap: 24px;
}

.notification-card {
    background: white;
    border-radius: 6px;
    padding: 28px;
    border: 1px solid #e5e7eb;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.5s ease-out backwards;
}

.notification-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #17479E 0%, #87CEEB 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.notification-card:hover {
    box-shadow: 0 3px 8px rgba(23, 71, 158, 0.12);
    transform: translateY(-2px);
    border-color: #17479E;
}

.notification-card:hover::before {
    opacity: 1;
}

.notification-card.unread {
    background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 50%, #ffffff 100%);
    border-color: #3b82f6;
    border-left: 5px solid #3b82f6;
    animation: slideInRight 0.5s ease-out backwards;
}

.notification-card.unread::after {
    content: '';
    position: absolute;
    top: 20px;
    right: 20px;
    width: 12px;
    height: 12px;
    background: #ef4444;
    border-radius: 50%;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
}

.notification-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.notification-card:hover .notification-icon {
    transform: rotate(-5deg) scale(1.05);
    box-shadow: 0 2px 6px rgba(23, 71, 158, 0.15);
}

.notification-card.unread .notification-icon {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
}

.notification-title {
    font-size: 19px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}

.notification-card:hover .notification-title {
    color: #17479E;
}

.notification-message {
    color: #6b7280;
    margin: 14px 0;
    line-height: 1.7;
    font-size: 15px;
}

.notification-type-badge {
    margin-left: auto;
}

.notification-meta {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.meta-items {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid #e5e7eb;
}

.meta-item:hover {
    background: #e5e7eb;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.meta-item.status-badge {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border-color: #fbbf24;
}

.meta-item i {
    font-size: 16px;
}

.notification-actions {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px dashed #e5e7eb;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.notification-actions .btn {
    border-radius: 10px;
    padding: 8px 18px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    border-width: 2px;
}

.notification-actions .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.notification-actions .btn-primary {
    background: linear-gradient(135deg, #17479E 0%, #87CEEB 100%);
    border: none;
}

.notification-actions .btn-primary:hover {
    background: linear-gradient(135deg, #0d3c7a 0%, #6bb8e0 100%);
}

.notification-actions .btn-outline-secondary:hover {
    background: #f3f4f6;
}

.notification-actions .btn-outline-success:hover {
    background: #dcfce7;
    border-color: #22c55e;
    color: #16a34a;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 100px 40px;
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    border-radius: 20px;
    border: 3px dashed #e5e7eb;
    animation: fadeInUp 0.5s ease-out;
}

.empty-state i {
    font-size: 100px;
    color: #d1d5db;
    margin-bottom: 24px;
    display: inline-block;
    animation: pulse 2s ease-in-out infinite;
}

.empty-state h4 {
    color: #374151;
    margin-bottom: 12px;
    font-size: 24px;
    font-weight: 700;
}

.empty-state p {
    color: #9ca3af;
    font-size: 16px;
    max-width: 400px;
    margin: 0 auto;
}

/* Filter Card Enhancement */
.filter-card {
    border: 2px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    animation: fadeInUp 0.5s ease-out 0.3s backwards;
}

.filter-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.filter-card .form-label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.filter-card .form-select {
    border-radius: 10px;
    border: 2px solid #e5e7eb;
    padding: 10px 14px;
    transition: all 0.2s ease;
}

.filter-card .form-select:focus {
    border-color: #17479E;
    box-shadow: 0 0 0 3px rgba(23, 71, 158, 0.1);
}

/* Badge Improvements */
.badge {
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.3px;
}

.badge.bg-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

/* Pagination Styling */
.pagination {
    gap: 8px;
}

.pagination .page-link {
    border-radius: 10px;
    border: 2px solid #e5e7eb;
    color: #17479E;
    font-weight: 600;
    padding: 8px 16px;
    transition: all 0.2s ease;
}

.pagination .page-link:hover {
    background: #17479E;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(23, 71, 158, 0.3);
}

.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #17479E 0%, #87CEEB 100%);
    border-color: #17479E;
}

/* Responsive */
@media (max-width: 768px) {
    .notification-card {
        padding: 16px;
    }

    .notification-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .meta-items {
        flex-direction: column;
        gap: 8px;
    }
}
</style>
@endpush
@endsection