@extends('layouts.app')

@section('content')
<div class="space-y-6">
    <!-- Breadcrumb & Header -->
    <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 flex items-center gap-1">
                    <i data-lucide="home" class="w-4 h-4"></i>
                    <span>Trang chủ</span>
                </a>
                <i data-lucide="chevron-right" class="w-3.5 h-3.5 text-slate-400"></i>
                <span class="text-slate-700 font-medium">Công cụ hệ thống</span>
            </div>
            <h1 class="text-2xl font-bold text-slate-900 tracking-tight flex items-center gap-2.5">
                <i data-lucide="wrench" class="w-7 h-7 text-indigo-600"></i>
                <span>Công cụ quản trị & Hệ thống</span>
            </h1>
            <p class="text-sm text-slate-500 mt-1">
                Tập hợp các tiện ích nâng cao hỗ trợ quản trị viên xử lý, đồng bộ và thao tác dữ liệu tự động.
            </p>
        </div>
    </div>

    <!-- Tool Cards Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Card 1: assignCampaignByRole -->
        <div class="bg-white rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-all duration-200 flex flex-col justify-between overflow-hidden group">
            <div class="p-6">
                <div class="flex items-start justify-between gap-4 mb-4">
                    <div class="w-12 h-12 rounded-xl bg-indigo-50 border border-indigo-100 flex items-center justify-center text-indigo-600 group-hover:scale-105 transition-transform">
                        <i data-lucide="layers" class="w-6 h-6"></i>
                    </div>
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-indigo-50 text-indigo-700 border border-indigo-200">
                        Chiến dịch & Vai trò
                    </span>
                </div>
                <h3 class="text-lg font-bold text-slate-800 mb-2 group-hover:text-indigo-600 transition-colors">
                    Gán Campaign theo Vai trò (Role)
                </h3>
                <p class="text-sm text-slate-600 leading-relaxed">
                    Tự động lọc toàn bộ người dùng thuộc các Vai trò (Role) được chọn và gán hàng loạt vào các Chiến dịch (Campaign). Tự động bỏ qua các bản ghi đã tồn tại.
                </p>
            </div>
            <div class="px-6 py-4 bg-slate-50/80 border-t border-slate-100 flex items-center justify-between">
                <span class="text-xs text-slate-500 flex items-center gap-1.5">
                    <i data-lucide="zap" class="w-3.5 h-3.5 text-amber-500"></i>
                    Xử lý nhanh hàng nghìn user
                </span>
                <button type="button"
                    onclick="openAssignRoleModal()"
                    class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold text-white bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 rounded-xl transition-all shadow-sm shadow-indigo-200 hover:shadow">
                    <span>Mở công cụ</span>
                    <i data-lucide="arrow-right" class="w-4 h-4"></i>
                </button>
            </div>
        </div>

        <!-- Card: Placement Leads Mail -->
        <div class="bg-white rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-all duration-200 flex flex-col justify-between overflow-hidden group">
            <div class="p-6">
                <div class="flex items-start justify-between gap-4 mb-4">
                    <div class="w-12 h-12 rounded-xl bg-emerald-50 border border-emerald-100 flex items-center justify-center text-emerald-600 group-hover:scale-105 transition-transform">
                        <i data-lucide="mail" class="w-6 h-6"></i>
                    </div>
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-emerald-50 text-emerald-700 border border-emerald-200">
                        Placement / Speaking
                    </span>
                </div>
                <h3 class="text-lg font-bold text-slate-800 mb-2 group-hover:text-emerald-600 transition-colors">
                    Placement Leads Mail
                </h3>
                <p class="text-sm text-slate-600 leading-relaxed">
                    Kiểm tra trạng thái mail Sale/ĐS trong <code>placement_leads</code> (pending/failed/sent) và gửi lại nhanh qua SendGrid (sync).
                </p>
            </div>
            <div class="px-6 py-4 bg-slate-50/80 border-t border-slate-100 flex items-center justify-between">
                <span class="text-xs text-slate-500 flex items-center gap-1.5">
                    <i data-lucide="link" class="w-3.5 h-3.5 text-slate-400"></i>
                    Không nằm trong sidebar
                </span>
                <a href="{{ route('tools.placement-leads') }}"
                    class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold text-white bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 rounded-xl transition-all shadow-sm shadow-emerald-200 hover:shadow">
                    <span>Mở công cụ</span>
                    <i data-lucide="arrow-right" class="w-4 h-4"></i>
                </a>
            </div>
        </div>

        <!-- Card Sắp ra mắt (Upcoming Placeholder) -->
        <div class="bg-white/60 rounded-2xl border border-dashed border-slate-300 p-6 flex flex-col items-center justify-center text-center">
            <div class="w-12 h-12 rounded-xl bg-slate-100 flex items-center justify-center text-slate-400 mb-3">
                <i data-lucide="plus-circle" class="w-6 h-6"></i>
            </div>
            <h4 class="text-base font-semibold text-slate-700 mb-1">Công cụ tiếp theo</h4>
            <p class="text-xs text-slate-500 max-w-xs">Các công cụ tiện ích khác sẽ được bổ sung vào đây khi cần tích hợp thêm.</p>
        </div>
    </div>
</div>

<!-- ================= MODALS ================= -->
@include('tools.modal.assign-campaign-by-role')

<script>
    window.routes = {
        assignCampaignByRole: "{{ route('api.tools.assign-campaign-by-role') }}"
    };
</script>
<script src="{{ asset('js/tools/tools.js') }}"></script>
@endsection