@extends('layouts.app')
@section('title', 'Appointment '.$appointment->reference)

@php
    $a = $appointment;
    $user = auth()->user();
    $canManage = $user->can('manage-appointment', $a);
    $desk = $user->hasRole('admin', 'security');
@endphp

@section('content')
<div class="d-flex flex-wrap justify-content-between align-items-start gap-2 mb-3">
    <div>
        <h1 class="h4 mb-1">{{ $a->reference }} <x-status-badge :appointment="$a" /></h1>
        <div class="text-muted small">
            <span class="badge {{ $a->type === 'walk_in' ? 'text-bg-warning' : 'text-bg-light' }}">{{ $a->type_label }}</span>
            Created {{ $a->created_at->format('d M Y, h:i A') }} by {{ $a->creator?->name ?? 'system' }}
        </div>
    </div>
    <div class="d-flex flex-wrap gap-2">
        @if ($desk && $a->canCheckIn())
            <a href="{{ route('security.checkin.form', $a) }}" class="btn btn-success"><i class="bi bi-box-arrow-in-right"></i> Check in</a>
        @endif
        @if ($desk && $a->canCheckOut())
            <form method="POST" action="{{ route('security.checkout', $a) }}">@csrf
                <button class="btn btn-danger" data-confirm="Check out {{ $a->visitor->name }}?"><i class="bi bi-box-arrow-right"></i> Check out</button>
            </form>
        @endif
        @if ($canManage && $a->canResendOtp())
            <form method="POST" action="{{ route('appointments.resendOtp', $a) }}">@csrf
                <button class="btn btn-outline-primary" data-confirm="Generate a new OTP and send it to the visitor? The old OTP will stop working."><i class="bi bi-arrow-repeat"></i> Resend OTP</button>
            </form>
        @endif
        @if ($canManage && $a->isEditable() && $a->type === 'scheduled')
            <a href="{{ route('appointments.edit', $a) }}" class="btn btn-outline-secondary"><i class="bi bi-pencil"></i> Edit</a>
        @endif
        @if ($canManage && $a->canBeCancelled())
            <form method="POST" action="{{ route('appointments.cancel', $a) }}">@csrf
                <button class="btn btn-outline-danger" data-confirm="Cancel this appointment? The visitor will be notified."><i class="bi bi-x-circle"></i> Cancel</button>
            </form>
        @endif
        <a href="{{ url()->previous() !== url()->current() ? url()->previous() : route('appointments.index') }}" class="btn btn-light"><i class="bi bi-arrow-left"></i> Back</a>
    </div>
</div>

@if ($user->can('decide-walkin', $a))
    <div class="card border-warning border-2 mb-3">
        <div class="card-header bg-warning-subtle fw-semibold">This walk-in visitor is waiting for your decision</div>
        <div class="list-group list-group-flush">@include('walkins._decision', ['a' => $a])</div>
    </div>
@elseif ($a->status === 'pending')
    <div class="alert alert-warning"><i class="bi bi-hourglass-split"></i> Waiting for {{ $a->host->name }} to approve this walk-in.
        @if ($desk)<script nonce="{{ Vite::cspNonce() }}">vmsAutoReload(20000);</script><span class="small">(This page refreshes automatically.)</span>@endif
    </div>
@endif

@if ($a->status === 'rejected')
    <div class="alert alert-danger"><i class="bi bi-x-octagon"></i> Rejected by {{ $a->approver?->name }}.@if($a->rejection_reason) Reason: {{ $a->rejection_reason }}@endif</div>
@endif

<div class="row g-3">
    <div class="col-lg-4">
        <div class="card mb-3">
            <div class="card-header bg-white fw-semibold"><i class="bi bi-person"></i> Visitor</div>
            <div class="card-body">
                <h2 class="h5 mb-1"><a href="{{ route('visitors.show', $a->visitor) }}" class="text-decoration-none">{{ $a->visitor->name }}</a></h2>
                <div class="text-muted mb-2">{{ $a->visitor->company ?: 'Individual' }}</div>
                <dl class="row small mb-0">
                    <dt class="col-4">Phone</dt><dd class="col-8">{{ $a->visitor->phone }}</dd>
                    <dt class="col-4">Email</dt><dd class="col-8">{{ $a->visitor->email ?: '—' }}</dd>
                    <dt class="col-4">ID</dt><dd class="col-8">{{ $a->visitor->id_type ? $a->visitor->id_type.' · '.$a->visitor->id_number : '—' }}</dd>
                    <dt class="col-4">Address</dt><dd class="col-8">{{ $a->visitor->address ?: '—' }}</dd>
                </dl>
            </div>
        </div>
        <div class="card">
            <div class="card-header bg-white fw-semibold"><i class="bi bi-person-badge"></i> Host</div>
            <div class="card-body">
                <h2 class="h6 mb-1">{{ $a->host->name }}</h2>
                <div class="text-muted small mb-2">{{ $a->host->designation }}@if($a->host->department) · {{ $a->host->department }}@endif</div>
                <dl class="row small mb-0">
                    <dt class="col-4">Phone</dt><dd class="col-8">{{ $a->host->phone ?: '—' }}</dd>
                    <dt class="col-4">Email</dt><dd class="col-8">{{ $a->host->email }}</dd>
                </dl>
            </div>
        </div>
    </div>

    <div class="col-lg-8">
        <div class="card mb-3">
            <div class="card-header bg-white fw-semibold"><i class="bi bi-calendar-event"></i> Visit</div>
            <div class="card-body">
                <div class="row g-3 small">
                    <div class="col-sm-6"><div class="text-muted">Purpose</div><div class="fw-semibold">{{ $a->purpose }}</div></div>
                    <div class="col-sm-6"><div class="text-muted">Scheduled</div><div class="fw-semibold">{{ $a->scheduled_at->format('l, d M Y · h:i A') }}</div></div>
                    <div class="col-sm-3"><div class="text-muted">Duration</div><div>{{ $a->duration_minutes ? $a->duration_minutes.' min' : '—' }}</div></div>
                    <div class="col-sm-3"><div class="text-muted">Vehicle</div><div>{{ $a->vehicle_number ?: '—' }}</div></div>
                    <div class="col-sm-3"><div class="text-muted">Badge</div><div>{{ $a->badge_number ?: '—' }}</div></div>
                    <div class="col-sm-3"><div class="text-muted">Time inside</div><div>{{ $a->checked_in_at ? $a->checked_in_at->diffForHumans($a->checked_out_at ?? now(), true) : '—' }}</div></div>
                    @if ($a->notes)<div class="col-12"><div class="text-muted">Notes</div><div>{{ $a->notes }}</div></div>@endif
                </div>
                <hr>
                {{-- The OTP is shown only to the staff member who created the appointment (see 'view-otp' gate). --}}
                @can('view-otp', $a)
                    @if ($a->isOtpActive() && $a->otp_code)
                        <div class="d-flex flex-wrap align-items-center gap-3 bg-primary-subtle border border-primary-subtle rounded p-3 mb-3">
                            <div>
                                <div class="small text-muted">Visitor OTP (sent to {{ $a->visitor->phone }}{{ $a->visitor->email ? ' / '.$a->visitor->email : '' }})</div>
                                <div class="fs-2 fw-bold font-monospace" id="otpCode" style="letter-spacing: .4rem;">{{ $a->otp_code }}</div>
                            </div>
                            <button type="button" class="btn btn-outline-primary btn-sm ms-auto" id="copyOtp"><i class="bi bi-clipboard"></i> Copy</button>
                        </div>
                        @push('scripts')
                        <script nonce="{{ Vite::cspNonce() }}">
                            document.getElementById('copyOtp').addEventListener('click', function () {
                                navigator.clipboard.writeText(document.getElementById('otpCode').textContent.trim());
                                this.innerHTML = '<i class="bi bi-check2"></i> Copied';
                            });
                        </script>
                        @endpush
                    @elseif ($a->isOtpActive())
                        <div class="alert alert-light border small mb-3"><i class="bi bi-info-circle"></i> This OTP was issued before OTP display was enabled. Click <strong>Resend OTP</strong> to generate one you can see here.</div>
                    @elseif ($a->otp_used_at)
                        <div class="alert alert-success small mb-3"><i class="bi bi-patch-check"></i> OTP was used at check-in and is no longer valid.</div>
                    @elseif ($a->canResendOtp())
                        <div class="alert alert-warning small mb-3"><i class="bi bi-exclamation-triangle"></i> OTP has expired. Click <strong>Resend OTP</strong> to send a new one.</div>
                    @endif
                @endcan
                <div class="row g-3 small">
                    <div class="col-sm-4"><div class="text-muted">OTP sent</div><div>{{ $a->otp_sent_at?->format('d M, h:i A') ?? 'Not issued' }}</div></div>
                    <div class="col-sm-4"><div class="text-muted">OTP valid till</div><div class="{{ $a->otp_expires_at?->isPast() && ! $a->otp_used_at ? 'text-danger' : '' }}">{{ $a->otp_expires_at?->format('d M, h:i A') ?? '—' }}</div></div>
                    <div class="col-sm-4"><div class="text-muted">OTP used</div><div>{{ $a->otp_used_at?->format('d M, h:i A') ?? 'Not used' }}</div></div>
                </div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header bg-white fw-semibold"><i class="bi bi-clock-history"></i> Timeline</div>
            <ul class="list-group list-group-flush small">
                <li class="list-group-item"><i class="bi bi-plus-circle text-primary"></i> Created by {{ $a->creator?->name ?? 'system' }} — {{ $a->created_at->format('d M Y, h:i A') }}</li>
                @if ($a->approved_at)<li class="list-group-item"><i class="bi bi-check-circle text-success"></i> Approved by {{ $a->approver?->name }} — {{ $a->approved_at->format('d M Y, h:i A') }}</li>@endif
                @if ($a->otp_used_at)<li class="list-group-item"><i class="bi bi-patch-check text-info"></i> OTP verified — {{ $a->otp_used_at->format('d M Y, h:i A') }}</li>@endif
                @if ($a->checked_in_at)<li class="list-group-item"><i class="bi bi-box-arrow-in-right text-success"></i> Checked in by {{ $a->checkedInBy?->name }} — {{ $a->checked_in_at->format('d M Y, h:i A') }}</li>@endif
                @if ($a->checked_out_at)<li class="list-group-item"><i class="bi bi-box-arrow-right text-secondary"></i> Checked out by {{ $a->checkedOutBy?->name }} — {{ $a->checked_out_at->format('d M Y, h:i A') }}</li>@endif
                @if ($a->cancelled_at)<li class="list-group-item"><i class="bi bi-x-circle text-dark"></i> Cancelled — {{ $a->cancelled_at->format('d M Y, h:i A') }}</li>@endif
            </ul>
        </div>

        {{-- Message logs may contain the OTP, so the front desk does not see them. --}}
        @if (! $user->isSecurity() && $a->notificationLogs->isNotEmpty())
            <div class="card mb-3">
                <div class="card-header bg-white fw-semibold"><i class="bi bi-envelope-paper"></i> Messages sent</div>
                <div class="table-responsive">
                    <table class="table table-sm mb-0 small">
                        <thead class="table-light"><tr><th>When</th><th>Channel</th><th>To</th><th>Status</th>@if($user->isAdmin())<th>Message</th>@endif</tr></thead>
                        <tbody>
                        @foreach ($a->notificationLogs as $log)
                            <tr>
                                <td class="text-nowrap">{{ $log->created_at->format('d M, h:i A') }}</td>
                                <td>{{ strtoupper($log->channel) }}</td>
                                <td>{{ $log->recipient }}</td>
                                <td><span class="badge text-bg-{{ \App\Models\NotificationLog::STATUS_COLORS[$log->status] }}">{{ ucfirst($log->status) }}</span></td>
                                @if ($user->isAdmin())<td>{{ $user->can('view-otp', $a) ? $log->message : $log->masked_message }}</td>@endif
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        @endif

        @if ($history->isNotEmpty())
            <div class="card">
                <div class="card-header bg-white d-flex justify-content-between">
                    <span class="fw-semibold"><i class="bi bi-journal-text"></i> Previous visits</span>
                    <a href="{{ route('visitors.show', $a->visitor) }}" class="small">Full history</a>
                </div>
                <ul class="list-group list-group-flush small">
                    @foreach ($history as $h)
                        <a href="{{ route('appointments.show', $h) }}" class="list-group-item list-group-item-action d-flex justify-content-between">
                            <span>{{ $h->scheduled_at->format('d M Y') }} · {{ $h->purpose }} · {{ $h->host->name }}</span>
                            <x-status-badge :appointment="$h" />
                        </a>
                    @endforeach
                </ul>
            </div>
        @endif
    </div>
</div>
@endsection