@extends('layouts.app')

@section('title', 'Notifications')

@section('content')

<style>
    .notifications-page{
        width:100%;
        min-height:calc(100vh - 70px);
        background:#f5f8fc;
        padding:22px;
    }

    .notifications-wrap{
        width:100%;
        max-width:760px;
        margin:0 auto;
    }

    .notifications-head{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:14px;
        margin-bottom:16px;
    }

    .notifications-title{
        min-width:0;
    }

    .notifications-title h1{
        margin:0;
        color:#203750;
        font-size:20px;
        font-weight:900;
    }

    .notifications-title p{
        margin:5px 0 0;
        color:#8a98a9;
        font-size:9px;
        font-weight:600;
    }

    .mark-all-btn{
        flex:none;
        min-height:34px;
        padding:0 11px;
        border:1px solid #dfe6ee;
        border-radius:9px;
        background:#fff;
        color:#53667d;
        font-size:8px;
        font-weight:800;
        cursor:pointer;
        white-space:nowrap;
    }

    .mark-all-btn:hover{
        background:#f1f6ff;
        color:#1769e0;
    }

    .notification-list{
        display:flex;
        flex-direction:column;
        gap:8px;
    }

    .notification-card{
        width:100%;
        display:flex;
        align-items:flex-start;
        gap:10px;
        padding:13px;
        background:#fff;
        border:1px solid #e2e9f1;
        border-radius:13px;
        text-decoration:none;
        box-shadow:0 2px 8px rgba(31,41,55,.025);
    }

    .notification-card.unread{
        border-color:#cfe0fa;
        background:#fafdff;
    }

    .notification-dot{
        width:8px;
        height:8px;
        margin-top:5px;
        border-radius:50%;
        background:#1769e0;
        flex:none;
    }

    .notification-card.read .notification-dot{
        background:#d6dee8;
    }

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

    .notification-title-row{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:8px;
    }

    .notification-title{
        min-width:0;
        color:#263d58;
        font-size:10px;
        line-height:1.35;
        font-weight:900;
        overflow-wrap:anywhere;
    }

    .notification-level{
        flex:none;
        padding:3px 6px;
        border-radius:20px;
        font-size:6px;
        line-height:1;
        font-weight:900;
        text-transform:uppercase;
    }

    .level-success{background:#eaf8f0;color:#198754}
    .level-warning{background:#fff7e8;color:#b36b00}
    .level-error{background:#fff0f1;color:#be123c}
    .level-info{background:#eaf2ff;color:#1769e0}

    .notification-message{
        margin-top:4px;
        color:#687b90;
        font-size:9px;
        line-height:1.5;
        overflow-wrap:anywhere;
    }

    .notification-meta{
        margin-top:6px;
        color:#9aa7b6;
        font-size:7px;
        line-height:1.4;
        overflow-wrap:anywhere;
    }

    .notification-action{
        flex:none;
    }

    .notification-action button{
        min-width:48px;
        min-height:29px;
        padding:0 7px;
        border:0;
        border-radius:7px;
        background:#edf5ff;
        color:#1769e0;
        font-size:7px;
        font-weight:800;
        cursor:pointer;
    }

    .notification-card.read .notification-action button{
        border:1px solid #e1e8f1;
        background:#fff;
        color:#66798f;
    }

    .empty-notifications{
        padding:45px 20px;
        text-align:center;
        background:#fff;
        border:1px solid #e2e9f1;
        border-radius:14px;
        color:#8998a9;
        font-size:9px;
    }

    .empty-notifications strong{
        display:block;
        margin-bottom:5px;
        color:#40566e;
        font-size:13px;
    }

    .pagination{
        margin-top:15px;
        overflow-x:auto;
        width:100%;
    }

    .pagination > *{
        max-width:100%;
    }

    /* Mobile */
    @media(max-width:700px){
        .notifications-page{
            min-height:calc(100vh - 62px);
            padding:14px 10px 78px;
        }

        .notifications-wrap{
            max-width:100%;
        }

        .notifications-head{
            margin-bottom:12px;
            gap:8px;
        }

        .notifications-title h1{
            font-size:18px;
        }

        .notifications-title p{
            font-size:8px;
        }

        .mark-all-btn{
            min-height:32px;
            padding:0 9px;
            font-size:7px;
        }

        .notification-list{
            gap:7px;
        }

        .notification-card{
            padding:11px;
            border-radius:11px;
            gap:8px;
        }

        .notification-title-row{
            display:block;
        }

        .notification-title{
            font-size:9px;
            padding-right:0;
        }

        .notification-level{
            display:inline-flex;
            margin-top:5px;
        }

        .notification-message{
            font-size:8px;
            line-height:1.45;
        }

        .notification-meta{
            font-size:6.5px;
        }

        .notification-action button{
            min-width:43px;
            min-height:27px;
            font-size:6.5px;
        }
    }

    /* Small phones */
    @media(max-width:380px){
        .notifications-page{
            padding-left:8px;
            padding-right:8px;
        }

        .notifications-head{
            align-items:flex-start;
        }

        .notifications-title h1{
            font-size:17px;
        }

        .mark-all-btn{
            max-width:92px;
            white-space:normal;
            line-height:1.2;
            padding:5px 7px;
        }

        .notification-card{
            display:grid;
            grid-template-columns:7px minmax(0,1fr);
            gap:8px;
        }

        .notification-action{
            grid-column:2;
            justify-self:start;
            margin-top:1px;
        }

        .notification-dot{
            width:7px;
            height:7px;
        }
    }
</style>

<div class="notifications-page">
    <div class="notifications-wrap">

        <div class="notifications-head">
            <div class="notifications-title">
                <h1>Notifications</h1>

                <p>
                    @if($unreadCount > 0)
                        {{ $unreadCount }}
                        unread notification{{ $unreadCount > 1 ? 's' : '' }}
                    @else
                        You're all caught up
                    @endif
                </p>
            </div>

            @if($unreadCount > 0)
                <form method="POST" action="{{ route('notifications.read-all') }}">
                    @csrf

                    <button type="submit" class="mark-all-btn">
                        ✓ Mark all as read
                    </button>
                </form>
            @endif
        </div>

        @if(session('success'))
            <div style="
                padding:9px 11px;
                margin-bottom:10px;
                border-radius:9px;
                background:#eaf8f0;
                border:1px solid #ccebd9;
                color:#287646;
                font-size:8px;
                font-weight:700;
            ">
                {{ session('success') }}
            </div>
        @endif

        <div class="notification-list">

            @forelse($notifications as $notification)

                @php
                    $data = $notification->data ?? [];

                    $level = data_get($data, 'level', 'info');

                    if (!in_array(
                        $level,
                        ['success', 'warning', 'error', 'info'],
                        true
                    )) {
                        $level = 'info';
                    }

                    $title = data_get(
                        $data,
                        'title',
                        'Notification'
                    );

                    $message = data_get(
                        $data,
                        'message',
                        ''
                    );

                    $loanId = data_get(
                        $data,
                        'loan_id'
                    );

                    $loanNumber = data_get(
                        $data,
                        'loan_number'
                    );
                @endphp

                <div class="notification-card {{ $notification->read_at ? 'read' : 'unread' }}">

                    <div class="notification-dot"></div>

                    <div class="notification-content">

                        <div class="notification-title-row">

                            <div class="notification-title">
                                {{ $title }}
                            </div>

                            <span class="notification-level level-{{ $level }}">
                                {{ $level }}
                            </span>

                        </div>

                        <div class="notification-message">
                            {{ $message }}
                        </div>

                        <div class="notification-meta">
                            {{ $notification->created_at?->format('d M Y, h:i A') ?? '' }}

                            @if($loanNumber)
                                · {{ $loanNumber }}
                            @endif
                        </div>

                    </div>

                    @if(!$notification->read_at || $loanId)

                        <div class="notification-action">

                            <form
                                method="POST"
                                action="{{ route('notifications.read', $notification->id) }}"
                            >
                                @csrf

                                <button type="submit">
                                    {{ $notification->read_at ? 'View' : 'Open' }}
                                </button>
                            </form>

                        </div>

                    @endif

                </div>

            @empty

                <div class="empty-notifications">
                    <strong>🔔 No notifications</strong>
                    New loan and payment updates will appear here.
                </div>

            @endforelse

        </div>

        @if($notifications->hasPages())
            <div class="pagination">
                {{ $notifications->onEachSide(1)->links() }}
            </div>
        @endif

    </div>
</div>

@endsection