@extends('layouts.app')
@section('title', 'OTP Delivery Status')

@push('stylesheets')
    @include('admin-controls.partials.settings-styles')
    <style>
        .otp-status-filters {
            border: 1px solid #e2e8f0;
            border-radius: 0.5rem;
            background: #fff;
            padding: 0.85rem 1rem;
            margin-bottom: 1rem;
        }
        .dark-mode .otp-status-filters {
            background: rgba(0,0,0,.15);
            border-color: rgba(255,255,255,.08);
        }
        .otp-status-filters label {
            font-size: 0.72rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .03em;
            color: #64748b;
            margin-bottom: .3rem;
        }
        .otp-sent-yes {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            color: #166534;
            font-weight: 700;
        }
        .otp-sent-no {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            color: #b91c1c;
            font-weight: 700;
        }
        .otp-code-mono {
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            letter-spacing: .08em;
            font-weight: 700;
        }
        .otp-reason {
            color: #64748b;
            font-size: .85rem;
            max-width: 22rem;
        }
        .dark-mode .otp-reason { color: #94a3b8; }
        .otp-status-table td, .otp-status-table th {
            vertical-align: middle;
            font-size: .875rem;
        }
    </style>
@endpush

@section('contents')
<x-layouts.page-wrapper
    title="OTP Delivery Status"
    :breadcrumbs="[
        'Admin Controls' => null,
        'OTP Delivery Status' => null,
    ]"
>
    <div class="col-12">
        <div class="otp-status-filters">
            <form method="get" action="{{ route('admin-controls.otp-delivery-status.index') }}" class="row align-items-end">
                <div class="col-md-6 mb-2 mb-md-0">
                    <label for="otpStatusSearch">Search user name / email</label>
                    <input type="text" id="otpStatusSearch" name="q" value="{{ $q }}" class="form-control" placeholder="Name or email" autocomplete="off">
                </div>
                <div class="col-md-3 mb-2 mb-md-0">
                    <label for="otpStatusFilter">Sent status</label>
                    <select id="otpStatusFilter" name="status" class="form-control">
                        <option value="" @selected($status === '')>All</option>
                        <option value="sent" @selected($status === 'sent')>Sent (Yes)</option>
                        <option value="failed" @selected($status === 'failed')>Failed (No)</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <button type="submit" class="btn btn-primary btn-block"><i class="fas fa-search mr-1"></i> Search</button>
                </div>
            </form>
        </div>

        <div class="card shadow-sm border-0">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <strong>OTP send attempts</strong>
                <span class="text-muted small">
                    @if ($logs->total() > 0)
                        Showing {{ $logs->firstItem() }}–{{ $logs->lastItem() }} of {{ number_format($logs->total()) }}
                    @else
                        No records
                    @endif
                </span>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-striped mb-0 otp-status-table">
                        <thead>
                            <tr>
                                <th style="width: 11rem;">Date Time</th>
                                <th>User</th>
                                <th>Email</th>
                                <th style="width: 7rem;">OTP</th>
                                <th style="width: 6rem;">Sent</th>
                                <th>Reason</th>
                                <th style="width: 8rem;">Context</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($logs as $log)
                                <tr>
                                    <td class="text-nowrap">{{ optional($log->created_at)->format('d M Y h:i A') ?? '—' }}</td>
                                    <td>{{ $log->user_name ?: '—' }}</td>
                                    <td>{{ $log->email ?: '—' }}</td>
                                    <td><span class="otp-code-mono">{{ $log->otp_code }}</span></td>
                                    <td>
                                        @if ($log->sent)
                                            <span class="otp-sent-yes"><i class="fas fa-check-circle"></i> Yes</span>
                                        @else
                                            <span class="otp-sent-no"><i class="fas fa-times-circle"></i> No</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if ($log->sent)
                                            <span class="text-muted">—</span>
                                        @else
                                            <div class="otp-reason">{{ $log->failure_reason ?: 'Email send failed.' }}</div>
                                        @endif
                                    </td>
                                    <td class="text-muted small text-nowrap">{{ str_replace('_', ' ', (string) $log->context) }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center text-muted py-4">No OTP delivery records found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            @if ($logs->hasPages())
                <div class="card-footer bg-white">
                    {{ $logs->links('vendor.pagination.bootstrap-4') }}
                </div>
            @endif
        </div>
    </div>
</x-layouts.page-wrapper>
@endsection