<div
    x-data
    x-on:esign-open-offcanvas.window="
        const el = $el.querySelector('#esign-offcanvas');
        if (el) bootstrap.Offcanvas.getOrCreateInstance(el).show();
    "
>
    {{-- ── Request list ─────────────────────────────────────────────────────── --}}
    @if($requests->isEmpty())
        <div class="text-center py-5 text-muted">
            <i class="mdi mdi-file-sign d-block mb-2" style="font-size:2rem; opacity:.4;"></i>
            <h6 class="text-dark mb-1">No Contract Requests Found</h6>
            <p class="small mb-0">Use “Create New Request” above to send contracts for e-signature.</p>
        </div>
    @else
        <div class="list-group">
            @foreach($requests as $request)
                <div class="list-group-item px-2 py-2" wire:key="cr-{{ $request->id }}">
                    <div class="d-flex align-items-center gap-2">
                        <div class="flex-grow-1 overflow-hidden">
                            <div class="d-flex align-items-center gap-2 mb-1">
                                <span class="fw-semibold" style="font-size:.85rem;">Request #{{ $request->id }}</span>
                                @if($request->status)
                                    <span class="badge bg-{{ $request->status->color() }}" style="font-size:.7rem;">
                                        {{ $request->status->label() }}
                                    </span>
                                @endif
                            </div>
                            <div class="text-muted" style="font-size:.75rem;">
                                {{ $request->created_at?->format('M d, Y H:i') }}
                                · {{ $request->esign_documents_count }} {{ Str::plural('document', $request->esign_documents_count) }}
                            </div>
                        </div>
                        <div class="flex-shrink-0">
                            <button type="button"
                                    wire:click="openRequest({{ $request->id }})"
                                    class="btn btn-sm btn-outline-secondary">
                                <i class="mdi mdi-timeline-text-outline me-1"></i>Timeline
                            </button>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif

    {{-- ── Offcanvas: documents + events for one request ────────────────────── --}}
    <div class="offcanvas offcanvas-end"
         id="esign-offcanvas"
         tabindex="-1"
         aria-labelledby="esign-offcanvas-label"
         style="width: min(600px, 95vw);"
         x-on:hidden.bs.offcanvas="$wire.closeRequest()">

        @if($openRequest)
            <div class="offcanvas-header border-bottom">
                <div class="d-flex align-items-center gap-2">
                    <h5 class="offcanvas-title mb-0" id="esign-offcanvas-label" style="font-size:.95rem;">
                        Request #{{ $openRequest->id }}
                    </h5>
                    @if($openRequest->status)
                        <span class="badge bg-{{ $openRequest->status->color() }}" style="font-size:.72rem;">
                            {{ $openRequest->status->label() }}
                        </span>
                    @endif
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>

            <div class="offcanvas-body p-3 d-flex flex-column gap-3" style="overflow-y:auto;">
                {{-- One signing link for the whole request (covers every contract below). --}}
                @if($openRequest->link)
                    <div class="border rounded p-2 bg-light">
                        <div class="fw-semibold mb-1" style="font-size:.8rem;">
                            <i class="mdi mdi-link-variant me-1 text-primary"></i>Signing link
                            <span class="text-muted fw-normal">— all contracts in this request</span>
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            <a href="{{ $openRequest->link }}" target="_blank" rel="noopener"
                               class="btn btn-sm btn-link text-decoration-none p-0 me-1">Open signing link</a>
                            <button type="button"
                                    class="btn btn-sm btn-outline-secondary py-0"
                                    x-data="{ copied: false }"
                                    @click="navigator.clipboard.writeText(@js($openRequest->link)); copied = true; setTimeout(() => copied = false, 2000)">
                                <span x-show="!copied">Copy</span>
                                <span x-show="copied" x-cloak>Copied!</span>
                            </button>
                        </div>
                    </div>
                @endif

                @forelse($openRequest->esignDocuments as $doc)
                    <div class="border rounded p-2" wire:key="doc-{{ $doc->id }}">
                        {{-- Document header --}}
                        <div class="d-flex align-items-center justify-content-between gap-2 mb-2">
                            <span class="fw-semibold" style="font-size:.85rem;">
                                <i class="mdi mdi-file-document-outline me-1 text-muted"></i>{{ $doc->contract?->name ?? 'Document' }}
                            </span>
                            @if($doc->status)
                                <span class="badge bg-{{ $doc->status->color() }}" style="font-size:.7rem;">
                                    {{ $doc->status->label() }}
                                </span>
                            @endif
                        </div>

                        {{-- The signing link is shown once at the request level above
                             (every contract shares the one request link). --}}

                        @if($doc->draft_url)
                            <div class="mb-2">
                                <a href="{{ $doc->draft_url }}" target="_blank" rel="noopener"
                                   class="btn btn-sm btn-link text-decoration-none p-0">
                                    <i class="mdi mdi-file-eye-outline me-1"></i>View draft (filled, unsigned)
                                </a>
                            </div>
                        @endif

                        {{-- Event timeline --}}
                        @if($doc->esignEvents->isEmpty())
                            <div class="text-muted" style="font-size:.75rem;">
                                <i class="mdi mdi-timer-sand me-1"></i>No events received yet.
                            </div>
                        @else
                            <div class="d-flex flex-column gap-1">
                                @foreach($doc->esignEvents as $event)
                                    @php $reason = $event->payload['reason'] ?? $event->payload['message'] ?? null; @endphp
                                    <div class="d-flex align-items-start gap-2" style="font-size:.78rem;">
                                        <span class="badge bg-{{ $event->event_type->color() }}-subtle text-{{ $event->event_type->color() }} border flex-shrink-0"
                                              style="font-size:.66rem; min-width:96px; text-align:center;">
                                            {{ $event->event_type->label() }}
                                        </span>
                                        <div class="flex-grow-1">
                                            <span class="text-muted">{{ $event->occurred_at?->format('d M Y, H:i') }}</span>
                                            @if($reason)
                                                <div class="text-danger" style="font-size:.72rem;">{{ Str::limit($reason, 120) }}</div>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                @empty
                    {{-- Legacy request (created before the document model) --}}
                    <div class="text-muted text-center py-4">
                        <i class="mdi mdi-information-outline d-block mb-2" style="font-size:1.6rem; opacity:.5;"></i>
                        No documents on this request.
                        @if($openRequest->link)
                            <div class="mt-2">
                                <a href="{{ $openRequest->link }}" target="_blank" rel="noopener" class="btn btn-sm btn-link">Legacy signing link</a>
                            </div>
                        @endif
                    </div>
                @endforelse
            </div>
        @else
            <div class="offcanvas-header border-bottom">
                <h5 class="offcanvas-title text-muted">Loading…</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
            </div>
            <div class="offcanvas-body d-flex align-items-center justify-content-center text-muted">
                <div class="spinner-border spinner-border-sm me-2"></div> Loading…
            </div>
        @endif
    </div>{{-- /offcanvas --}}
</div>
