@extends('layouts.app')

@section('content')
<div class="container-fluid px-3 px-md-4">
    <!-- Modern Header with Actions -->
    <div class="notifications-header mb-4">
        <div class="header-content">
            <div class="header-left">
                <div class="header-icon-wrapper">
                    <i class="bx bx-bell"></i>
                </div>
                <div>
                    <h1 class="header-title">Notifications</h1>
                    <p class="header-subtitle">Stay updated with all system activities</p>
                </div>
            </div>
            <div class="header-actions">
                @if($unreadCount > 0)
                    <span class="unread-count-badge">
                        <i class="bx bx-envelope me-1"></i>
                        {{ $unreadCount }} unread
                    </span>
                @endif
                <button class="btn btn-filter" data-bs-toggle="modal" data-bs-target="#filtersModal">
                    <i class="bx bx-filter-alt"></i>
                    <span class="d-none d-sm-inline">Filters</span>
                </button>
                @if($unreadCount > 0)
                    <a href="{{ route('notifications.mark-all-read') }}" class="btn btn-mark-read">
                        <i class="bx bx-check-double"></i>
                        <span class="d-none d-sm-inline">Mark All Read</span>
                    </a>
                @endif
            </div>
        </div>
    </div>

    <!-- Notifications List -->
    @if($notifications->count() > 0)
        <div class="notifications-container">
            @foreach($notifications as $notification)
                @php
                    $iconMap = [
                        'loan_application' => ['icon' => 'bx-credit-card', 'color' => '#22c55e'],
                        'payment' => ['icon' => 'bx-money', 'color' => '#3b82f6'],
                        'membership' => ['icon' => 'bx-user-plus', 'color' => '#8b5cf6'],
                        'withdrawal' => ['icon' => 'bx-log-out', 'color' => '#ef4444'],
                    ];
                    $enquiryType = $notification->enquiry->type ?? 'default';
                    $icon = $iconMap[$enquiryType] ?? ['icon' => 'bx-bell', 'color' => '#17479E'];

                    $typeColors = [
                        'enquiry_registered' => '#3b82f6',
                        'enquiry_assigned' => '#8b5cf6',
                        'status_changed' => '#f59e0b',
                        'payment_initiated' => '#3b82f6',
                        'payment_approved' => '#22c55e',
                        'loan_processed' => '#3b82f6',
                    ];
                    $typeColor = $typeColors[$notification->type] ?? '#6b7280';
                @endphp

                <div class="notification-item {{ !$notification->is_read ? 'unread' : '' }}">
                    <div class="notification-indicator"></div>

                    <div class="notification-icon" style="background-color: {{ $icon['color'] }}15;">
                        <i class="bx {{ $icon['icon'] }}" style="color: {{ $icon['color'] }};"></i>
                    </div>

                    <div class="notification-content">
                        <div class="notification-header-row">
                            <h6 class="notification-title {{ !$notification->is_read ? 'text-danger' : 'text-primary' }}">
                                @if(!$notification->is_read)
                                    <i class="bx bx-error-circle me-1"></i>
                                @else
                                    <i class="bx bx-check-circle me-1"></i>
                                @endif
                                {{ $notification->title }}
                            </h6>
                            <span class="notification-time">{{ $notification->created_at->diffForHumans() }}</span>
                        </div>

                        <p class="notification-message">{{ Str::limit($notification->message, 120) }}</p>

                        <div class="notification-meta-row">
                            @if($notification->enquiry)
                                <span class="meta-chip">
                                    <i class="bx bx-file"></i>
                                    {{ $notification->enquiry->check_number }}
                                </span>
                                <span class="meta-chip">
                                    <i class="bx bx-user"></i>
                                    {{ Str::limit($notification->enquiry->full_name, 20) }}
                                </span>
                                <span class="meta-chip">
                                    <i class="bx bx-map-pin"></i>
                                    {{ $notification->enquiry->region->name ?? 'N/A' }}
                                </span>
                            @endif
                            <span class="meta-badge" style="background-color: {{ $typeColor }}15; color: {{ $typeColor }};">
                                {{ ucwords(str_replace('_', ' ', $notification->type)) }}
                            </span>
                        </div>
                    </div>

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

        <!-- Pagination -->
        @if($notifications->hasPages())
            <div class="pagination-container">
                {{ $notifications->appends(request()->query())->links('pagination::bootstrap-5') }}
            </div>
        @endif
    @else
        <div class="empty-notifications">
            <div class="empty-icon">
                <i class="bx bx-bell-off"></i>
            </div>
            <h4 class="empty-title">No Notifications</h4>
            <p class="empty-text">You're all caught up! Check back later for updates.</p>
        </div>
    @endif
</div>

<!-- Filters Modal -->
<div class="modal fade" id="filtersModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content modern-filter-modal">
            <!-- Header -->
            <div class="modal-header">
                <div>
                    <h5 class="modal-title">
                        <i class="bx bx-filter me-2"></i>Filter Notifications
                    </h5>
                    <p class="modal-subtitle">Refine your notification results</p>
                </div>
                <button type="button" class="btn-close-modern" data-bs-dismiss="modal">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <!-- Body -->
            <div class="modal-body">
                <form action="{{ route('notifications.index') }}" method="GET" id="filtersForm">
                    <div class="row g-3">
                        <!-- Enquiry Status -->
                        <div class="col-md-6">
                            <div class="filter-group">
                                <label class="filter-label">
                                    <i class="bx bx-info-circle"></i>
                                    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>

                        <!-- Notification Type -->
                        <div class="col-md-6">
                            <div class="filter-group">
                                <label class="filter-label">
                                    <i class="bx bx-bell"></i>
                                    Type
                                </label>
                                <select name="type" class="form-select">
                                    <option value="">All Types</option>
                                    <option value="enquiry_registered" {{ request('type') == 'enquiry_registered' ? 'selected' : '' }}>Enquiry Registered</option>
                                    <option value="enquiry_assigned" {{ request('type') == 'enquiry_assigned' ? 'selected' : '' }}>Enquiry Assigned</option>
                                    <option value="status_changed" {{ request('type') == 'status_changed' ? 'selected' : '' }}>Status Changed</option>
                                    <option value="payment_initiated" {{ request('type') == 'payment_initiated' ? 'selected' : '' }}>Payment Initiated</option>
                                    <option value="payment_approved" {{ request('type') == 'payment_approved' ? 'selected' : '' }}>Payment Approved</option>
                                    <option value="loan_processed" {{ request('type') == 'loan_processed' ? 'selected' : '' }}>Loan Processed</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <!-- Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="bx bx-x me-1"></i>
                    Cancel
                </button>
                <a href="{{ route('notifications.index') }}" class="btn btn-outline-warning">
                    <i class="bx bx-refresh me-1"></i>
                    Reset
                </a>
                <button type="submit" form="filtersForm" class="btn btn-primary">
                    <i class="bx bx-search me-1"></i>
                    Apply Filters
                </button>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
/* Modern Notification Center Styles */
:root {
    --notif-primary: #17479E;
    --notif-bg: #f8f9fa;
    --notif-border: #e5e7eb;
    --notif-hover: #f3f4f6;
    --notif-unread-bg: #eff6ff;
    --notif-unread-border: #3b82f6;
}

.notifications-header {
    background: linear-gradient(135deg, var(--notif-primary) 0%, #2563eb 100%);
    border-radius: 6px;
    padding: 24px 28px;
    color: white;
    box-shadow: 0 4px 12px rgba(23, 71, 158, 0.15);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-icon-wrapper {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.header-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: white;
}

.header-subtitle {
    font-size: 14px;
    margin: 4px 0 0 0;
    opacity: 0.9;
    color: white;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.unread-count-badge {
    background: rgba(255, 255, 255, 0.25);
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-filter,
.btn-mark-read {
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-filter:hover,
.btn-mark-read:hover {
    background: rgba(255, 255, 255, 0.25);
    color: white;
    transform: translateY(-1px);
}

/* Notifications Container - Clean List Style */
.notifications-container {
    background: white;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--notif-border);
    overflow: hidden;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--notif-border);
    transition: all 0.2s;
    position: relative;
    background: white;
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item:hover {
    background: var(--notif-hover);
}

.notification-item.unread {
    background: var(--notif-unread-bg);
}

.notification-item.unread .notification-indicator {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #ef4444;
}

.notification-item.unread::after {
    content: 'UNREAD';
    position: absolute;
    top: 20px;
    left: 10px;
    font-size: 9px;
    font-weight: 700;
    color: #ef4444;
    background: #fee2e2;
    padding: 3px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.notification-icon {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 6px;
}

.notification-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    flex: 1;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.notification-title.text-primary {
    color: #17479E !important;
}

.notification-title.text-danger {
    color: #dc2626 !important;
}

.notification-time {
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap;
}

.notification-message {
    font-size: 14px;
    color: #4b5563;
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.notification-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f3f4f6;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

.meta-chip i {
    font-size: 14px;
}

.meta-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.notification-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.btn-action {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--notif-border);
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 18px;
    cursor: pointer;
}

.btn-action:hover {
    background: var(--notif-primary);
    color: white;
    border-color: var(--notif-primary);
    transform: scale(1.05);
}

/* Empty State */
.empty-notifications {
    text-align: center;
    padding: 80px 40px;
    background: white;
    border-radius: 12px;
    border: 2px dashed var(--notif-border);
}

.empty-icon {
    font-size: 80px;
    color: #d1d5db;
    margin-bottom: 20px;
}

.empty-title {
    font-size: 20px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 8px;
}

.empty-text {
    font-size: 15px;
    color: #9ca3af;
    margin: 0;
}

/* Pagination */
.pagination-container {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}

.pagination {
    gap: 6px;
}

.pagination .page-link {
    border-radius: 8px;
    border: 1px solid var(--notif-border);
    color: var(--notif-primary);
    font-weight: 600;
    padding: 8px 14px;
}

.pagination .page-link:hover {
    background: var(--notif-primary);
    color: white;
    border-color: var(--notif-primary);
}

.pagination .page-item.active .page-link {
    background: var(--notif-primary);
    border-color: var(--notif-primary);
}

/* Modal Styles */
.modern-filter-modal {
    border-radius: 16px;
    overflow: hidden;
    border: none;
}

.modern-filter-modal .modal-header {
    background: linear-gradient(135deg, var(--notif-primary) 0%, #2563eb 100%);
    color: white;
    padding: 24px 28px;
    border-bottom: none;
}

.modern-filter-modal .modal-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: white;
}

.modern-filter-modal .modal-subtitle {
    font-size: 13px;
    margin: 4px 0 0 0;
    opacity: 0.9;
    color: white;
}

.btn-close-modern {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: white;
}

.btn-close-modern:hover {
    background: rgba(255, 255, 255, 0.3);
}

.btn-close-modern i {
    font-size: 18px;
}

.filter-group {
    margin-bottom: 0;
}

.filter-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    font-size: 14px;
}

.filter-label i {
    font-size: 18px;
    color: var(--notif-primary);
}

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

.filter-group .form-select:focus {
    border-color: var(--notif-primary);
    box-shadow: 0 0 0 3px rgba(23, 71, 158, 0.1);
}

.modern-filter-modal .modal-footer {
    padding: 20px 28px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.modern-filter-modal .modal-footer .btn {
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 600;
    transition: all 0.2s;
}

/* Responsive */
@media (max-width: 768px) {
    .notifications-header {
        padding: 20px 16px;
    }

    .header-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-left {
        gap: 12px;
    }

    .header-icon-wrapper {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }

    .header-title {
        font-size: 20px;
    }

    .header-subtitle {
        font-size: 13px;
    }

    .header-actions {
        width: 100%;
        justify-content: space-between;
    }

    .notification-item {
        padding: 16px;
        gap: 12px;
    }

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

    .notification-header-row {
        flex-direction: column;
        gap: 6px;
    }

    .notification-time {
        align-self: flex-start;
    }

    .notification-actions {
        flex-direction: column;
    }

    .meta-chip {
        font-size: 11px;
        padding: 3px 8px;
    }
}

@media (max-width: 576px) {
    .btn-filter span,
    .btn-mark-read span {
        display: none !important;
    }

    .btn-filter,
    .btn-mark-read {
        padding: 8px 12px;
    }

    .notification-item.unread::after {
        left: 6px;
        top: 16px;
        font-size: 8px;
        padding: 2px 4px;
    }
}
</style>
@endpush
@endsection