@extends('layouts.app')

@section('title', 'Nameplate Requests')

@section('body_class', 'np-req-page')

@section('content')
<div class="np-req">
    <header class="np-req__head">
        <p class="np-req__kicker">Nameplates</p>
        <h1>Nameplate Requests</h1>
        <p class="np-req__nav">
            <a href="{{ route('nameplates.index') }}">← Nameplates</a>
            <a href="{{ route('nameplates.send-link') }}">Send Design Link</a>
        </p>
    </header>

    @if(session('success'))
        <div class="np-req__flash">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="np-req__flash np-req__flash--err">{{ session('error') }}</div>
    @endif

    <div class="np-req__table-wrap">
        <table class="np-req__table">
            <thead>
                <tr>
                    <th>Contact</th>
                    <th>Origin</th>
                    <th>Request status</th>
                    <th>Design</th>
                    <th>SMS</th>
                    <th>Email</th>
                    <th>Expires</th>
                    <th>Activity</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @forelse($requests as $row)
                    <tr>
                        <td data-label="Contact">{{ $row->contactSummary() }}</td>
                        <td data-label="Origin">{{ $row->originLabel() }}</td>
                        <td data-label="Request status">{{ $row->statusLabel() }}{{ $row->isExpired() ? ' · Expired' : '' }}</td>
                        <td data-label="Design">{{ $row->designSummary() }}</td>
                        <td data-label="SMS">{{ $row->smsDeliveryLabel() }}</td>
                        <td data-label="Email">{{ $row->emailDeliveryLabel() }}</td>
                        <td data-label="Expires">{{ optional($row->expires_at)->timezone(config('app.deals_display_timezone', 'America/New_York'))->format('M j, g:i A') ?: '—' }}</td>
                        <td data-label="Activity">{{ optional($row->last_activity_at)->diffForHumans() ?: '—' }}</td>
                        <td data-label="">
                            <a class="np-req__link" href="{{ $row->privateUrl() }}" target="_blank" rel="noopener">Open link</a>
                            <form method="POST" action="{{ route('nameplates.requests.resend', $row) }}" style="display:inline;">
                                @csrf
                                <button type="submit" class="np-req__resend">Resend</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="9">No nameplate requests yet. Send a private design link to create one.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="np-req__pager">{{ $requests->links() }}</div>
</div>
@endsection

@push('styles')
<style>
body.np-req-page { background:#0c0a09; color:#f5f0e8; }
body.np-req-page .main { background:#0c0a09; }
body.np-req-page main.main > .container { max-width: 1100px !important; }
.np-req { padding:1.5rem 0 3rem; }
.np-req__kicker { margin:0 0 .5rem; font-size:.7rem; letter-spacing:.4em; text-transform:uppercase; color:#c9a25c; }
.np-req h1 { margin:0; font-family:Georgia,serif; font-weight:500; }
.np-req__nav { display:flex; gap:1rem; margin:1rem 0 1.5rem; }
.np-req__nav a { color:#c9a25c; text-decoration:none; font-size:.85rem; }
.np-req__table-wrap { overflow-x:auto; border:1px solid rgba(201,162,92,.25); border-radius:8px; }
.np-req__table { width:100%; border-collapse:collapse; font-size:.88rem; }
.np-req__table th, .np-req__table td { padding:.75rem .85rem; text-align:left; border-bottom:1px solid rgba(255,255,255,.06); vertical-align:top; }
.np-req__table th { color:#c9a25c; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }
.np-req__link, .np-req__resend { color:#c9a25c; background:none; border:0; padding:0; margin-right:.75rem; cursor:pointer; font-size:.82rem; text-decoration:underline; }
.np-req__flash { margin-bottom:1rem; padding:.75rem 1rem; border-radius:4px; background:rgba(16,185,129,.15); color:#6ee7b7; }
.np-req__flash--err { background:rgba(239,68,68,.15); color:#fca5a5; }
.np-req__pager { margin-top:1rem; }
@media (max-width:720px) {
  .np-req__table thead { display:none; }
  .np-req__table tr { display:block; padding:1rem; border-bottom:1px solid rgba(255,255,255,.08); }
  .np-req__table td { display:block; border:0; padding:.25rem 0; }
  .np-req__table td:before { content:attr(data-label) ": "; color:#78716c; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; }
}
</style>
@endpush