@extends('layouts.app')

@section('content')
<div class="space-y-6" id="placement-leads-tool">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 pb-4 border-b border-slate-200">
        <div>
            <div class="flex items-center gap-2 text-slate-500 text-sm mb-1.5">
                <a href="{{ route('dashboard') }}" class="hover:text-blue-600 transition-colors">Trang chủ</a>
                <span>/</span>
                <a href="{{ route('tools.index') }}" class="hover:text-blue-600 transition-colors">Công cụ hệ thống</a>
                <span>/</span>
                <span class="text-slate-700 font-medium">Placement Leads Mail</span>
            </div>
            <h1 class="text-2xl font-bold text-slate-900 tracking-tight flex items-center gap-2.5">
                <i data-lucide="mail" class="w-7 h-7 text-emerald-600"></i>
                <span>Placement Leads — kiểm tra & gửi lại mail</span>
            </h1>
            <p class="text-sm text-slate-500 mt-1">
                Xem trạng thái mail Sale/ĐS (Speaking schedule / Trial Class) và chạy lại các bản ghi <code>pending</code>/<code>failed</code>.
                Tenant hiện tại: <strong id="pl-tenant">—</strong>
            </p>
        </div>
        <button type="button" id="pl-refresh"
            class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold text-slate-700 bg-white border border-slate-200 hover:bg-slate-50 rounded-xl">
            <i data-lucide="refresh-cw" class="w-4 h-4"></i> Tải lại
        </button>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-4 gap-3" id="pl-stats"></div>

    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-4">
        <div class="flex flex-col lg:flex-row gap-3 lg:items-end">
            <div class="flex-1">
                <label class="block text-xs font-semibold text-slate-500 mb-1">Tìm kiếm</label>
                <input id="pl-q" type="text" placeholder="email / tên / SĐT / exam_ref / id"
                    class="w-full rounded-xl border-slate-200 text-sm px-3 py-2 border focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
            </div>
            <div>
                <label class="block text-xs font-semibold text-slate-500 mb-1">mail_status</label>
                <select id="pl-status" class="rounded-xl border-slate-200 text-sm px-3 py-2 border min-w-[140px]">
                    <option value="all">Tất cả</option>
                    <option value="pending" selected>pending</option>
                    <option value="failed">failed</option>
                    <option value="sent">sent</option>
                    <option value="partial">partial</option>
                </select>
            </div>
            <div>
                <label class="block text-xs font-semibold text-slate-500 mb-1">exam_type</label>
                <select id="pl-exam-type" class="rounded-xl border-slate-200 text-sm px-3 py-2 border min-w-[220px]">
                    <option value="all">Tất cả</option>
                </select>
            </div>
            <div>
                <label class="block text-xs font-semibold text-slate-500 mb-1">Limit</label>
                <select id="pl-limit" class="rounded-xl border-slate-200 text-sm px-3 py-2 border">
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="200">200</option>
                </select>
            </div>
            <button type="button" id="pl-filter"
                class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold text-white bg-emerald-600 hover:bg-emerald-700 rounded-xl">
                Lọc
            </button>
        </div>

        <div class="mt-4 flex flex-wrap gap-2 items-center">
            <button type="button" id="pl-retry-selected"
                class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold text-white bg-indigo-600 hover:bg-indigo-700 rounded-xl disabled:opacity-50"
                disabled>
                <i data-lucide="send" class="w-4 h-4"></i> Gửi lại đã chọn (sync)
            </button>
            <button type="button" id="pl-retry-pending"
                class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold text-indigo-700 bg-indigo-50 hover:bg-indigo-100 border border-indigo-200 rounded-xl">
                Gửi lại toàn bộ pending đang hiện
            </button>
            <button type="button" id="pl-retry-failed"
                class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold text-rose-700 bg-rose-50 hover:bg-rose-100 border border-rose-200 rounded-xl">
                Gửi lại toàn bộ failed đang hiện
            </button>
            <span class="text-xs text-slate-500" id="pl-selected-count">0 đã chọn</span>
        </div>
    </div>

    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
                <thead class="bg-slate-50 text-slate-600 text-left">
                    <tr>
                        <th class="px-3 py-3 w-10"><input type="checkbox" id="pl-check-all"></th>
                        <th class="px-3 py-3">ID</th>
                        <th class="px-3 py-3">HV</th>
                        <th class="px-3 py-3">exam_type</th>
                        <th class="px-3 py-3">exam_ref</th>
                        <th class="px-3 py-3">ĐS (tracking)</th>
                        <th class="px-3 py-3">status</th>
                        <th class="px-3 py-3">recipients</th>
                        <th class="px-3 py-3">error</th>
                        <th class="px-3 py-3">created</th>
                        <th class="px-3 py-3"></th>
                    </tr>
                </thead>
                <tbody id="pl-tbody" class="divide-y divide-slate-100"></tbody>
            </table>
        </div>
        <div id="pl-empty" class="hidden p-8 text-center text-slate-500 text-sm">Không có bản ghi.</div>
    </div>
</div>

<script>
window.placementLeadRoutes = {
    list: @json(route('tools.placement-leads.list')),
    retry: @json(route('tools.placement-leads.retry')),
};
</script>
<script src="{{ asset('js/tools/placement-leads.js') }}?v={{ filemtime(public_path('js/tools/placement-leads.js')) }}"></script>
@endsection