@extends('backEnd.layouts.master')
@section('title', 'Support Moderators')

@section('content')
<div class="container-fluid py-3">
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <div>
            <h4 class="mb-0 fw-bold">Support Moderators</h4>
            <small class="text-muted">Link staff users as support moderators</small>
        </div>
        <a href="{{ route('admin.support.shifts') }}" class="btn btn-outline-primary btn-sm">Manage Shifts</a>
    </div>

    <div class="card shadow-sm border-0 mb-3">
        <div class="card-body">
            <form action="{{ route('admin.support.moderators.store') }}" method="POST" class="row g-2 align-items-end">
                @csrf
                <div class="col-md-8">
                    <label class="form-label small">Staff User</label>
                    <select name="user_id" class="form-select form-select-sm" required>
                        <option value="">Select user</option>
                        @foreach($users as $user)
                        <option value="{{ $user->id }}">{{ $user->name }} ({{ $user->email }})</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <button type="submit" class="btn btn-success btn-sm w-100"><i class="fas fa-plus me-1"></i> Add Moderator</button>
                </div>
            </form>
        </div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Shifts</th>
                        <th>Online</th>
                        <th>Status</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($moderators as $mod)
                    <tr>
                        <td class="fw-semibold">{{ $mod->name }}</td>
                        <td>{{ $mod->user?->email }}</td>
                        <td>{{ $mod->shifts->count() }}</td>
                        <td>
                            @if($mod->is_online && $mod->last_seen_at && $mod->last_seen_at->gte(now()->subMinutes(2)))
                            <span class="badge bg-success">Online</span>
                            @if($mod->current_conversation_id)<span class="badge bg-info text-dark ms-1">In chat</span>@endif
                            @else
                            <span class="badge bg-light text-dark border">Offline</span>
                            @endif
                        </td>
                        <td>
                            <span class="badge bg-{{ $mod->is_active ? 'success' : 'secondary' }}">{{ $mod->is_active ? 'Active' : 'Inactive' }}</span>
                            @if($mod->isOnShiftNow())<span class="badge bg-info text-dark ms-1">On Shift</span>@endif
                        </td>
                        <td class="text-end">
                            <form action="{{ route('admin.support.moderators.toggle', $mod->id) }}" method="POST" class="d-inline">@csrf @method('PATCH')
                                <button class="btn btn-sm btn-outline-warning">Toggle</button>
                            </form>
                            <form action="{{ route('admin.support.moderators.destroy', $mod->id) }}" method="POST" class="d-inline" id="del-mod-{{ $mod->id }}">@csrf @method('DELETE')
                                <button type="button" class="btn btn-sm btn-outline-danger delete-confirm" data-form="#del-mod-{{ $mod->id }}"><i class="fas fa-trash"></i></button>
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="6" class="text-center py-4 text-muted">No moderators yet.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection