@extends('admin.layout')

@section('title', 'Call Session Logs')

@section('content')
<div class="space-y-6">
    <!-- Header & Filters -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h1 class="font-heading text-2xl font-bold text-white">Call Session Records</h1>
            <p class="text-slate-400 text-xs sm:text-sm">Audit trail of all peer-to-peer and group voice rooms.</p>
        </div>

        <!-- Filter & Search Bar -->
        <form action="{{ route('admin.calls') }}" method="GET" class="flex flex-wrap gap-2">
            <select
                name="status"
                onchange="this.form.submit()"
                class="px-3 py-2 rounded-xl bg-slate-900 border border-slate-700 text-xs sm:text-sm text-white focus:outline-none focus:border-indigo-500 transition"
            >
                <option value="all" {{ $status === 'all' || !$status ? 'selected' : '' }}>All Statuses</option>
                <option value="completed" {{ $status === 'completed' ? 'selected' : '' }}>Completed</option>
                <option value="initiated" {{ $status === 'initiated' ? 'selected' : '' }}>Initiated</option>
                <option value="missed" {{ $status === 'missed' ? 'selected' : '' }}>Missed</option>
                <option value="rejected" {{ $status === 'rejected' ? 'selected' : '' }}>Rejected</option>
            </select>

            <input
                type="text"
                name="search"
                value="{{ $search }}"
                placeholder="Search channel or user..."
                class="px-4 py-2 rounded-xl bg-slate-900 border border-slate-700 text-xs sm:text-sm text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 transition w-48 sm:w-56"
            />
            <button
                type="submit"
                class="px-4 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white text-xs sm:text-sm font-semibold transition"
            >
                Filter
            </button>
            @if($search || ($status && $status !== 'all'))
                <a
                    href="{{ route('admin.calls') }}"
                    class="px-3 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-400 text-xs sm:text-sm transition flex items-center"
                    title="Clear Filters"
                >
                    ✕
                </a>
            @endif
        </form>
    </div>

    <!-- Calls Table Card -->
    <div class="rounded-2xl bg-slate-900/80 border border-slate-800 overflow-hidden shadow-xl">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs sm:text-sm">
                <thead class="bg-slate-950/60 border-b border-slate-800 text-slate-400 uppercase text-[11px] font-semibold">
                    <tr>
                        <th class="px-6 py-4">Channel Name</th>
                        <th class="px-6 py-4">Caller</th>
                        <th class="px-6 py-4">Receiver / Room</th>
                        <th class="px-6 py-4">Status</th>
                        <th class="px-6 py-4">Duration</th>
                        <th class="px-6 py-4">Timestamp</th>
                        <th class="px-6 py-4 text-right">Action</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-800/80">
                    @forelse($calls as $call)
                        <tr class="hover:bg-slate-800/30 transition">
                            <td class="px-6 py-4">
                                <span class="font-mono text-xs font-medium text-indigo-300 bg-indigo-500/10 px-2 py-1 rounded-md border border-indigo-500/20">
                                    {{ $call->channel_name }}
                                </span>
                            </td>
                            <td class="px-6 py-4 font-medium text-slate-200">
                                {{ $call->caller->name ?? 'Deleted User' }}
                            </td>
                            <td class="px-6 py-4 text-slate-300">
                                {{ $call->receiver->name ?? 'Public Room' }}
                            </td>
                            <td class="px-6 py-4">
                                <span class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase {{ $call->status === 'completed' ? 'bg-emerald-500/15 text-emerald-400 border border-emerald-500/30' : ($call->status === 'initiated' ? 'bg-indigo-500/15 text-indigo-400 border border-indigo-500/30' : 'bg-rose-500/15 text-rose-400 border border-rose-500/30') }}">
                                    {{ $call->status }}
                                </span>
                            </td>
                            <td class="px-6 py-4 font-mono text-xs text-slate-300">
                                {{ $call->duration_seconds }}s
                            </td>
                            <td class="px-6 py-4 text-slate-400 text-xs">
                                {{ $call->created_at->format('M d, Y H:i:s') }}
                            </td>
                            <td class="px-6 py-4 text-right">
                                <form action="{{ route('admin.calls.delete', $call) }}" method="POST" class="inline">
                                    @csrf
                                    @method('DELETE')
                                    <button
                                        type="submit"
                                        onclick="return confirm('Delete this call log permanently?')"
                                        class="p-1.5 rounded-lg bg-slate-800 hover:bg-rose-600 text-slate-400 hover:text-white text-xs transition"
                                        title="Delete Call Log"
                                    >
                                        🗑️
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-6 py-12 text-center text-slate-500">
                                No call session logs found.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($calls->hasPages())
            <div class="p-4 border-t border-slate-800">
                {{ $calls->links() }}
            </div>
        @endif
    </div>
</div>
@endsection