@extends('layouts.app')

@section('content')
<div class="container-fluid px-4">
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h2 class="mb-0">
                    <i class="bx bx-bell me-2"></i>Notifications
                    @if($unreadCount > 0)
                        <span class="badge bg-danger">{{ $unreadCount }}</span>
                    @endif
                </h2>
                <div>
                    @if($unreadCount > 0)
                        <a href="{{ route('notifications.mark-all-read') }}" class="btn btn-primary">
                            <i class="bx bx-check-double"></i> Mark All as Read
                        </a>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="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">Status</label>
                    <select name="status" class="form-select">
                        <option value="">All</option>
                        <option value="unread" {{ request('status') == 'unread' ? 'selected' : '' }}>Unread</option>
                        <option value="read" {{ request('status') == 'read' ? 'selected' : '' }}>Read</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">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="payment_rejected">Payment Rejected</option>
                        <option value="payment_paid">Payment Paid</option>
                        <option value="loan_processed">Loan Processed</option>
                        <option value="loan_approved">Loan Approved</option>
                        <option value="loan_rejected">Loan Rejected</option>
                    </select>
                </div>
                <div class="col-md-4 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary me-2">
                        <i class="bx bx-search"></i> Filter
                    </button>
                    <a href="{{ route('notifications.index') }}" class="btn btn-secondary">
                        <i class="bx bx-reset"></i> Reset
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Notifications List -->
    <div class="card">
        <div class="card-body">
            @if($notifications->count() > 0)
                <div class="list-group list-group-flush">
                    @foreach($notifications as $notification)
                        <div class="list-group-item {{ $notification->is_read ? '' : 'list-group-item-primary' }}">
                            <div class="d-flex w-100 justify-content-between align-items-start">
                                <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
                                        <h6 class="mb-0">{{ $notification->title }}</h6>
                                    </div>
                                    <p class="mb-2">{{ Str::limit($notification->message, 120) }}</p>
                                    <div class="d-flex align-items-center flex-wrap gap-2 small">
                                        <span class="badge bg-light text-dark">
                                            <i class="bx bx-time me-1"></i>
                                            {{ $notification->created_at->diffForHumans() }}
                                        </span>
                                        <span class="badge bg-light text-dark">
                                            <i class="bx bx-file me-1"></i>
                                            {{ $notification->enquiry->check_number ?? 'N/A' }}
                                        </span>
                                        @if($notification->enquiry)
                                            <span class="badge bg-light text-dark">
                                                <i class="bx bx-user me-1"></i>
                                                {{ Str::limit($notification->enquiry->full_name, 25) }}
                                            </span>
                                            <span class="badge bg-info text-white">
                                                <i class="bx bx-map me-1"></i>
                                                {{ $notification->enquiry->region->name ?? 'N/A' }},
                                                {{ $notification->enquiry->district->name ?? 'N/A' }}
                                            </span>
                                        @endif
                                    </div>
                                </div>
                                <div class="ms-3">
                                    @php
                                        $typeColors = [
                                            'enquiry_registered' => 'info',
                                            'enquiry_assigned' => 'primary',
                                            'status_changed' => 'warning',
                                            'payment_initiated' => 'info',
                                            'payment_approved' => 'success',
                                            'payment_rejected' => 'danger',
                                            'payment_paid' => 'success',
                                            'loan_processed' => 'info',
                                            'loan_approved' => 'success',
                                            'loan_rejected' => 'danger',
                                        ];
                                        $color = $typeColors[$notification->type] ?? 'secondary';
                                    @endphp
                                    <span class="badge bg-{{ $color }}">
                                        {{ ucwords(str_replace('_', ' ', $notification->type)) }}
                                    </span>
                                </div>
                            </div>
                            <div class="mt-3 d-flex gap-2">
                                @if($notification->enquiry)
                                    <a href="{{ route('enquiries.show', $notification->enquiry_id) }}" class="btn btn-sm btn-primary">
                                        <i class="bx bx-file me-1"></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 me-1"></i> Full 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 me-1"></i> Mark Read
                                        </button>
                                    </form>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="mt-4">
                    {{ $notifications->links() }}
                </div>
            @else
                <div class="text-center py-5">
                    <i class="bx bx-bell-off" style="font-size: 64px; color: #ccc;"></i>
                    <h5 class="mt-3 text-muted">No notifications found</h5>
                    <p class="text-muted">You're all caught up!</p>
                </div>
            @endif
        </div>
    </div>
</div>

@push('styles')
<style>
    .list-group-item-primary {
        background-color: #e3f2fd !important;
        border-left: 4px solid #2196F3;
    }

    .list-group-item:hover {
        background-color: #f5f5f5;
    }

    .list-group-item-action {
        transition: all 0.2s;
    }
</style>
@endpush
@endsection