@extends('layouts.app', [
    'title' => 'Callback Requests | VejalNai',
    'topbarTitle' => 'Callback Requests',
    'topbarSubtitle' => $organization?->name ?? 'No organization assigned',
])

@section('content')
    <section class="page">
        <div class="section-header">
            <div>
                <h1>Callback requests</h1>
                <p class="muted" style="margin: 0;">Track customers waiting for phone follow-up.</p>
            </div>
        </div>

        @if (session('status'))
            <div class="flash">{{ session('status') }}</div>
        @endif

        <section class="panel">
            <div class="panel-header">
                <div>
                    <h2>Follow-up queue</h2>
                    <span class="muted">{{ $callbackRequests->whereIn('status', ['needs_phone', 'requested'])->count() }} open items</span>
                </div>
                <a class="button secondary" href="{{ route('conversations.index') }}">Open inbox</a>
            </div>
            <div class="panel-body">
                @if ($callbackRequests->isEmpty())
                    <div class="empty-state">No callback requests yet.</div>
                @else
                    <div class="table-wrap">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Contact</th>
                                    <th>Phone</th>
                                    <th>Status</th>
                                    <th>Requested</th>
                                    <th>Complete</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($callbackRequests as $callbackRequest)
                                    <tr>
                                        <td>
                                            <a href="{{ route('conversations.show', $callbackRequest->conversation) }}">
                                                <strong>{{ $callbackRequest->contact->name ?? 'Unknown contact' }}</strong>
                                            </a>
                                        </td>
                                        <td>{{ $callbackRequest->phone ?? $callbackRequest->contact->phone ?? 'Phone needed' }}</td>
                                        <td>
                                            <span @class(['badge', 'warning' => in_array($callbackRequest->status, ['needs_phone', 'requested'], true)])>
                                                {{ str_replace('_', ' ', ucfirst($callbackRequest->status)) }}
                                            </span>
                                        </td>
                                        <td class="muted">{{ $callbackRequest->requested_at->diffForHumans() }}</td>
                                        <td>
                                            @if (in_array($callbackRequest->status, ['needs_phone', 'requested'], true))
                                                <form method="POST" action="{{ route('callback-requests.complete', $callbackRequest) }}" class="stack" style="max-width: 280px;">
                                                    @csrf
                                                    <textarea class="form-control" name="notes" placeholder="Notes">{{ old('notes') }}</textarea>
                                                    <button class="button secondary" type="submit">Complete</button>
                                                </form>
                                            @else
                                                <span class="muted">{{ $callbackRequest->completed_at?->diffForHumans() }}</span>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </section>
    </section>
@endsection
