@extends('admin.layouts.app')

@section('title', __('admin.admin_notes.show_title') . ' — ' . __('admin.brand.name'))
@section('page_title', __('admin.admin_notes.show_title'))

@php
    $status = $note->statusKey();
    $isAssignee = (int) $note->assigned_to_admin_id === $currentAdminId;
@endphp

@push('styles')
<style>
    .nt-show-card {
        background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
        padding: 0; overflow: hidden;
    }
    /* Hero band: the NOTE TEXT itself headlines this card now (no
       redundant "Note details" wordmark — the page header above the
       card already carries that label). The priority chip stays in
       the same top-right slot. */
    .nt-show-head {
        padding: 22px 24px;
        background: var(--head-bg, #f8fafc);
        color: var(--head-fg, #0f172a);
        border-bottom: 1px solid var(--head-line, #e2e8f0);
        display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
    }
    .nt-show-head--high   { --head-bg:#fef2f2; --head-fg:#7f1d1d; --head-line:#fecaca; }
    .nt-show-head--medium { --head-bg:#fef3c7; --head-fg:#92400e; --head-line:#fde68a; }
    .nt-show-head--low    { --head-bg:#eff6ff; --head-fg:#1e40af; --head-line:#bfdbfe; }
    .nt-show-head__text { flex: 1 1 auto; min-width: 0; }
    .nt-show-head__eyebrow {
        margin: 0 0 6px;
        font-size: 11px; font-weight: 800; letter-spacing: .08em;
        text-transform: uppercase;
        opacity: .65;
    }
    .nt-show-head__note {
        margin: 0;
        font-size: 17px; font-weight: 700; line-height: 1.7;
        color: inherit;
        white-space: pre-wrap; word-break: break-word;
    }
    .nt-show-head .pr {
        flex-shrink: 0;
        display: inline-flex; align-items: center; gap: 6px;
        padding: 3px 10px; border-radius: 999px;
        background: rgba(255,255,255,.5); color: inherit;
        font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    }

    .nt-show-body { padding: 22px 24px; }

    .nt-grid {
        margin-top: 20px;
        display: grid; gap: 14px;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
    .nt-kvp { background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 10px; padding: 12px 14px; }
    .nt-kvp dt { font-size: 11.5px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 4px; }
    .nt-kvp dd { margin: 0; color: #0f172a; font-size: 14px; font-weight: 700; }

    .nt-show-actions {
        margin-top: 22px; padding-top: 18px;
        border-top: 1px solid #f1f5f9;
        display: flex; gap: 10px; flex-wrap: wrap;
    }
    .nt-status-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
    .nt-status-chip--pending   { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
    .nt-status-chip--seen      { background: #ecfeff; color: #0e7490; border: 1px solid #a5f3fc; }
    .nt-status-chip--confirmed { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
    .nt-status-chip--dismissed { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }

    /* The action row at the bottom of the show card stacks the two
       buttons side-by-side. Done is the primary CTA (green); Dismiss
       is secondary (neutral). Both prompt before posting. */
    .nt-show-actions .btn-confirm {
        background: #16a34a; color: #fff; border: 0;
        padding: 10px 18px; border-radius: 10px;
        font-weight: 800; font-size: 14px; cursor: pointer;
        transition: background-color .12s;
    }
    .nt-show-actions .btn-confirm:hover { background: #15803d; }
    .nt-show-actions .btn-dismiss {
        background: #fff; color: #475569; border: 1px solid #cbd5e1;
        padding: 10px 18px; border-radius: 10px;
        font-weight: 700; font-size: 14px; cursor: pointer;
        transition: background-color .12s;
    }
    .nt-show-actions .btn-dismiss:hover { background: #f1f5f9; }
</style>
@endpush

@section('content')
    <x-admin.page-header :title="__('admin.admin_notes.show_title')">
        <x-slot:actions>
            <a href="{{ route('admin.admin-notes.index') }}" class="btn-secondary">{{ __('admin.actions.back_to_list') }}</a>
        </x-slot:actions>
    </x-admin.page-header>

    @include('admin.partials.flash')

    <div class="nt-show-card">
        <div class="nt-show-head nt-show-head--{{ $note->priority }}">
            <div class="nt-show-head__text">
                <p class="nt-show-head__eyebrow">{{ __('admin.admin_notes.fields.note') }}</p>
                <p class="nt-show-head__note">{{ $note->note }}</p>
            </div>
            <span class="pr">{{ __('admin.admin_notes.priorities.' . $note->priority) }}</span>
        </div>
        <div class="nt-show-body">
            <dl class="nt-grid">
                <div class="nt-kvp">
                    <dt>{{ __('admin.admin_notes.fields.created_by') }}</dt>
                    <dd>{{ $note->creator?->name }}<br><small style="font-weight:500;color:#64748b">{{ $note->creator?->email }}</small></dd>
                </div>
                <div class="nt-kvp">
                    <dt>{{ __('admin.admin_notes.fields.assigned_to') }}</dt>
                    <dd>{{ $note->assignee?->name }}<br><small style="font-weight:500;color:#64748b">{{ $note->assignee?->email }}</small></dd>
                </div>
                <div class="nt-kvp">
                    <dt>{{ __('admin.fields.status') }}</dt>
                    <dd>
                        <span class="nt-status-chip nt-status-chip--{{ $status }}">
                            {{ __('admin.admin_notes.status.' . $status) }}
                        </span>
                    </dd>
                </div>
                <div class="nt-kvp">
                    <dt>{{ __('admin.admin_notes.fields.created_at') }}</dt>
                    <dd>{{ optional($note->created_at)->format('Y-m-d H:i') ?? '—' }}</dd>
                </div>
                <div class="nt-kvp">
                    <dt>{{ __('admin.admin_notes.fields.first_seen_at') }}</dt>
                    <dd>{{ optional($note->first_seen_at)->format('Y-m-d H:i') ?? '—' }}</dd>
                </div>
                <div class="nt-kvp">
                    <dt>{{ __('admin.admin_notes.fields.confirmed_at') }}</dt>
                    <dd>{{ optional($note->confirmed_at)->format('Y-m-d H:i') ?? '—' }}</dd>
                </div>
                <div class="nt-kvp">
                    <dt>{{ __('admin.admin_notes.fields.dismissed_at') }}</dt>
                    <dd>{{ optional($note->dismissed_at)->format('Y-m-d H:i') ?? '—' }}</dd>
                </div>
            </dl>

            @if ($isAssignee && $note->dismissed_at === null && $note->confirmed_at === null)
                <div class="nt-show-actions">
                    {{-- Two distinct intents: "Done" records confirmed_at
                         (the task in the note was actually completed),
                         "Dismiss" records dismissed_at (acknowledged
                         without action). Both remove the alert from
                         the dashboard. --}}
                    <form method="POST" action="{{ route('admin.admin-notes.confirm', $note) }}"
                          onsubmit="return confirm({{ Js::from(__('admin.admin_notes.confirm_done')) }});"
                          style="margin:0;">
                        @csrf
                        <button type="submit" class="btn-confirm">{{ __('admin.admin_notes.actions.mark_done') }}</button>
                    </form>
                    <form method="POST" action="{{ route('admin.admin-notes.dismiss', $note) }}"
                          onsubmit="return confirm({{ Js::from(__('admin.admin_notes.confirm_dismiss')) }});"
                          style="margin:0;">
                        @csrf
                        <button type="submit" class="btn-dismiss">{{ __('admin.admin_notes.actions.dismiss') }}</button>
                    </form>
                </div>
            @endif
        </div>
    </div>
@endsection