<% currentPage='number-checker' %>

    <!-- Page Header - Modern Dashboard Style -->
    <div class="number-checker-page-header mb-4">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h2 class="mb-1 fw-bold"><i class="fab fa-whatsapp me-2"></i>Number Checker</h2>
                <p class="text-muted mb-0">Verify WhatsApp numbers before sending messages</p>
            </div>
            <div class="col-md-6 text-md-end mt-3 mt-md-0">
                <button class="btn btn-success btn-lg shadow-sm w-100 w-md-auto" data-bs-toggle="modal"
                    data-bs-target="#createCheckerModal">
                    <i class="fas fa-plus me-2"></i>New Checker
                </button>
            </div>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="row g-3 mb-4">
        <div class="col-6 col-lg-3">
            <div class="card stats-card border-0 shadow-sm h-100">
                <div class="card-body p-3 p-lg-4">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <div class="stats-label text-muted mb-1">Total Scanned</div>
                            <div class="stats-value fw-bold text-primary">
                                <%= stats.total_numbers_checked || 0 %>
                            </div>
                        </div>
                        <div class="stats-icon-bg bg-primary-subtle text-primary rounded-3 p-2">
                            <i class="fas fa-hashtag fa-lg"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="card stats-card border-0 shadow-sm h-100">
                <div class="card-body p-3 p-lg-4">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <div class="stats-label text-muted mb-1">Valid Numbers</div>
                            <div class="stats-value fw-bold text-success">
                                <%= stats.total_valid || 0 %>
                            </div>
                        </div>
                        <div class="stats-icon-bg bg-success-subtle text-success rounded-3 p-2">
                            <i class="fas fa-check-circle fa-lg"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="card stats-card border-0 shadow-sm h-100">
                <div class="card-body p-3 p-lg-4">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <div class="stats-label text-muted mb-1">Invalid Numbers</div>
                            <div class="stats-value fw-bold text-danger">
                                <%= stats.total_invalid || 0 %>
                            </div>
                        </div>
                        <div class="stats-icon-bg bg-danger-subtle text-danger rounded-3 p-2">
                            <i class="fas fa-times-circle fa-lg"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="card stats-card border-0 shadow-sm h-100">
                <div class="card-body p-3 p-lg-4">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <div class="stats-label text-muted mb-1">Running</div>
                            <div class="stats-value fw-bold text-warning">
                                <%= stats.running_checkers || 0 %>
                            </div>
                        </div>
                        <div class="stats-icon-bg bg-warning-subtle text-warning rounded-3 p-2">
                            <i class="fas fa-spinner fa-lg"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Checkers List -->
    <% if (checkers.length===0) { %>
        <div class="card shadow-sm">
            <div class="card-body p-5 text-center">
                <div class="empty-state-modern">
                    <div class="empty-icon-modern">
                        <i class="fab fa-whatsapp"></i>
                    </div>
                    <h3 class="mt-4 mb-2">No checkers yet</h3>
                    <p class="text-muted mb-4">Create your first checker to verify WhatsApp numbers</p>
                    <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#createCheckerModal">
                        <i class="fas fa-plus me-2"></i>Create First Checker
                    </button>
                </div>
            </div>
        </div>
        <% } else { %>
            <!-- Desktop Table View -->
            <div class="card shadow-sm d-none d-lg-block">
                <div class="card-header bg-white">
                    <h5 class="mb-0"><i class="fas fa-list me-2"></i>All Checkers</h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table mb-0">
                            <thead>
                                <tr>
                                    <th>Checker Name</th>
                                    <th>Session</th>
                                    <th>Interval</th>
                                    <th>Numbers</th>
                                    <th>Status</th>
                                    <th>Progress</th>
                                    <th>Created</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <% checkers.forEach(checker=> {
                                    const progress = checker.total_contacts > 0 ? (checker.checked_contacts /
                                    checker.total_contacts * 100) : 0;
                                    const validWidth = checker.total_contacts > 0 ? (checker.valid_contacts /
                                    checker.total_contacts * 100) : 0;
                                    const invalidWidth = checker.total_contacts > 0 ? (checker.invalid_contacts /
                                    checker.total_contacts * 100) : 0;
                                    %>
                                    <tr class="fade-in-up">
                                        <td><strong>
                                                <%= checker.name %>
                                            </strong></td>
                                        <td>
                                            <div class="d-flex align-items-center gap-2">
                                                <i class="fab fa-whatsapp text-success"></i>
                                                <span>
                                                    <%= checker.session_name || 'Session' %>
                                                </span>
                                            </div>
                                        </td>
                                        <td><span class="badge bg-info">
                                                <% const interval = checker.check_interval || 300; %>
                                                <%= interval >= 1000 ? (interval / 1000) + 's' : interval + 'ms' %>
                                            </span></td>
                                        <td><i class="fas fa-phone me-1"></i>
                                            <%= checker.total_contacts %>
                                        </td>
                                        <td>
                                            <% if (checker.status==='completed' ) { %>
                                                <span class="badge bg-success">Completed</span>
                                                <% } else if (checker.status==='running' ) { %>
                                                    <span class="badge bg-warning">Running</span>
                                                    <% } else if (checker.status==='pending' ) { %>
                                                        <span class="badge bg-info">Pending</span>
                                                        <% } else if (checker.status==='paused' ) { %>
                                                            <span class="badge bg-secondary">Paused</span>
                                                            <% } else if (checker.status==='failed' ) { %>
                                                                <span class="badge bg-danger">Failed</span>
                                                                <% } %>
                                        </td>
                                        <td style="min-width: 180px;">
                                            <div class="progress mb-1" style="height: 8px;">
                                                <div class="progress-bar bg-success"
                                                    data-width="<%= validWidth.toFixed(1) %>"
                                                    title="<%= checker.valid_contacts %> valid"></div>
                                                <div class="progress-bar bg-danger"
                                                    data-width="<%= invalidWidth.toFixed(1) %>"
                                                    title="<%= checker.invalid_contacts %> invalid"></div>
                                            </div>
                                            <small class="text-muted">
                                                <%= checker.checked_contacts %>/<%= checker.total_contacts %> (<%=
                                                            progress.toFixed(0) %>%)
                                            </small>
                                        </td>
                                        <td><small class="text-muted">
                                                <%= new Date(checker.created_at).toLocaleDateString() %>
                                            </small></td>
                                        <td>
                                            <div class="btn-group">
                                                <% if (checker.status==='pending' ) { %>
                                                    <button class="btn btn-sm btn-success btn-start-checker"
                                                        data-checker-id="<%= checker.id %>" title="Start"><i
                                                            class="fas fa-play"></i></button>
                                                    <% } else if (checker.status==='running' ) { %>
                                                        <button class="btn btn-sm btn-warning btn-pause-checker"
                                                            data-checker-id="<%= checker.id %>" title="Pause"><i
                                                                class="fas fa-pause"></i></button>
                                                        <button class="btn btn-sm btn-danger btn-stop-checker"
                                                            data-checker-id="<%= checker.id %>" title="Stop"><i
                                                                class="fas fa-stop"></i></button>
                                                        <% } else if (checker.status==='paused' ) { %>
                                                            <button class="btn btn-sm btn-success btn-resume-checker"
                                                                data-checker-id="<%= checker.id %>" title="Resume"><i
                                                                    class="fas fa-play"></i></button>
                                                            <button class="btn btn-sm btn-danger btn-stop-checker"
                                                                data-checker-id="<%= checker.id %>" title="Stop"><i
                                                                    class="fas fa-stop"></i></button>
                                                            <% } %>
                                                                <a href="/number-checker/<%= checker.id %>"
                                                                    class="btn btn-sm btn-info" title="View"><i
                                                                        class="fas fa-eye"></i></a>
                                                                <button class="btn btn-sm btn-danger btn-delete-checker"
                                                                    data-checker-id="<%= checker.id %>"
                                                                    data-checker-name="<%= checker.name %>"
                                                                    title="Delete"><i class="fas fa-trash"></i></button>
                                            </div>
                                        </td>
                                    </tr>
                                    <% }); %>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Mobile Card View -->
            <div class="d-lg-none">
                <% checkers.forEach(checker=> {
                    const progress = checker.total_contacts > 0 ? (checker.checked_contacts / checker.total_contacts * 100)
                    : 0;
                    const validWidth = checker.total_contacts > 0 ? (checker.valid_contacts / checker.total_contacts * 100)
                    : 0;
                    const invalidWidth = checker.total_contacts > 0 ? (checker.invalid_contacts / checker.total_contacts *
                    100) : 0;
                    %>
                    <div class="checker-card-mobile mb-3 fade-in-up">
                        <div class="checker-card-header-mobile">
                            <div class="checker-info-mobile">
                                <h6 class="checker-name-mobile mb-1">
                                    <%= checker.name %>
                                </h6>
                                <div class="checker-meta-mobile">
                                    <span><i class="fab fa-whatsapp text-success"></i>
                                        <%= checker.session_name || 'Session' %>
                                    </span>
                                    <span><i class="fas fa-phone"></i>
                                        <%= checker.total_contacts %>
                                    </span>
                                    <span class="badge bg-info">
                                        <% const interval = checker.check_interval || 300; %>
                                        <%= interval >= 1000 ? (interval / 1000) + 's' : interval + 'ms' %>
                                    </span>
                                </div>
                            </div>
                            <% if (checker.status==='completed' ) { %>
                                <span class="badge bg-success">Completed</span>
                                <% } else if (checker.status==='running' ) { %>
                                    <span class="badge bg-warning">Running</span>
                                    <% } else if (checker.status==='pending' ) { %>
                                        <span class="badge bg-info">Pending</span>
                                        <% } else if (checker.status==='paused' ) { %>
                                            <span class="badge bg-secondary">Paused</span>
                                            <% } else if (checker.status==='failed' ) { %>
                                                <span class="badge bg-danger">Failed</span>
                                                <% } %>
                        </div>

                        <div class="checker-progress-mobile">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <small class="text-muted">Progress</small>
                                <small class="fw-bold">
                                    <%= progress.toFixed(0) %>%
                                </small>
                            </div>
                            <div class="progress mb-2" style="height: 8px;">
                                <div class="progress-bar bg-success" data-width="<%= validWidth.toFixed(1) %>"
                                    title="<%= checker.valid_contacts %> valid"></div>
                                <div class="progress-bar bg-danger" data-width="<%= invalidWidth.toFixed(1) %>"
                                    title="<%= checker.invalid_contacts %> invalid"></div>
                            </div>
                            <div class="d-flex justify-content-between">
                                <small class="text-success"><i class="fas fa-check"></i>
                                    <%= checker.valid_contacts %> valid
                                </small>
                                <small class="text-danger"><i class="fas fa-times"></i>
                                    <%= checker.invalid_contacts %> invalid
                                </small>
                            </div>
                        </div>

                        <div class="checker-footer-mobile">
                            <small class="text-muted"><i class="fas fa-calendar"></i>
                                <%= new Date(checker.created_at).toLocaleDateString() %>
                            </small>
                            <div class="checker-actions-mobile">
                                <% if (checker.status==='pending' ) { %>
                                    <button class="btn btn-sm btn-success btn-start-checker"
                                        data-checker-id="<%= checker.id %>"><i class="fas fa-play"></i></button>
                                    <% } else if (checker.status==='running' ) { %>
                                        <button class="btn btn-sm btn-warning btn-pause-checker"
                                            data-checker-id="<%= checker.id %>"><i class="fas fa-pause"></i></button>
                                        <button class="btn btn-sm btn-danger btn-stop-checker"
                                            data-checker-id="<%= checker.id %>"><i class="fas fa-stop"></i></button>
                                        <% } else if (checker.status==='paused' ) { %>
                                            <button class="btn btn-sm btn-success btn-resume-checker"
                                                data-checker-id="<%= checker.id %>"><i class="fas fa-play"></i></button>
                                            <button class="btn btn-sm btn-danger btn-stop-checker"
                                                data-checker-id="<%= checker.id %>"><i class="fas fa-stop"></i></button>
                                            <% } %>
                                                <a href="/number-checker/<%= checker.id %>"
                                                    class="btn btn-sm btn-info"><i class="fas fa-eye"></i></a>
                                                <button class="btn btn-sm btn-danger btn-delete-checker"
                                                    data-checker-id="<%= checker.id %>"
                                                    data-checker-name="<%= checker.name %>"><i
                                                        class="fas fa-trash"></i></button>
                            </div>
                        </div>
                    </div>
                    <% }); %>
            </div>
            <% } %>

                <!-- Pagination -->
                <% if (pagination.totalPages> 1) { %>
                    <div class="pagination-wrapper mt-4">
                        <div class="d-flex flex-column flex-sm-row justify-content-between align-items-center gap-3">
                            <div class="pagination-info text-muted small">
                                Showing <%= checkers.length %> of <%= pagination.totalCheckers %> checkers
                            </div>
                            <nav>
                                <ul class="pagination pagination-sm mb-0">
                                    <% if (pagination.hasPrev) { %>
                                        <li class="page-item">
                                            <a class="page-link" href="?page=<%= pagination.page - 1 %>"><i
                                                    class="fas fa-chevron-left"></i></a>
                                        </li>
                                        <% } %>

                                            <% let startPage=Math.max(1, pagination.page - 2); let
                                                endPage=Math.min(pagination.totalPages, pagination.page + 2); if
                                                (endPage - startPage < 4) { if (startPage===1) endPage=Math.min(5,
                                                pagination.totalPages); else startPage=Math.max(1, endPage - 4); } %>

                                                <% if (startPage> 1) { %>
                                                    <li class="page-item">
                                                        <a class="page-link" href="?page=1">1</a>
                                                    </li>
                                                    <% if (startPage> 2) { %>
                                                        <li class="page-item disabled"><span
                                                                class="page-link">...</span></li>
                                                        <% } %>
                                                            <% } %>

                                                                <% for (let i=startPage; i <=endPage; i++) { %>
                                                                    <li
                                                                        class="page-item <%= pagination.page === i ? 'active' : '' %>">
                                                                        <a class="page-link" href="?page=<%= i %>">
                                                                            <%= i %>
                                                                        </a>
                                                                    </li>
                                                                    <% } %>

                                                                        <% if (endPage < pagination.totalPages) { %>
                                                                            <% if (endPage < pagination.totalPages - 1)
                                                                                { %>
                                                                                <li class="page-item disabled"><span
                                                                                        class="page-link">...</span>
                                                                                </li>
                                                                                <% } %>
                                                                                    <li class="page-item">
                                                                                        <a class="page-link"
                                                                                            href="?page=<%= pagination.totalPages %>">
                                                                                            <%= pagination.totalPages %>
                                                                                        </a>
                                                                                    </li>
                                                                                    <% } %>

                                                                                        <% if (pagination.hasNext) { %>
                                                                                            <li class="page-item">
                                                                                                <a class="page-link"
                                                                                                    href="?page=<%= pagination.page + 1 %>"><i
                                                                                                        class="fas fa-chevron-right"></i></a>
                                                                                            </li>
                                                                                            <% } %>
                                </ul>
                            </nav>
                        </div>
                    </div>
                    <% } %>

                        <!-- Create Checker Modal - Compact Mobile-Friendly Design -->
                        <div class="modal fade" id="createCheckerModal" tabindex="-1">
                            <div class="modal-dialog modal-dialog-centered modal-import-compact">
                                <div class="modal-content modal-import-content">
                                    <!-- Compact Header -->
                                    <div class="modal-import-header-compact">
                                        <div class="d-flex align-items-center gap-3">
                                            <div class="import-icon-compact" style="background: linear-gradient(135deg, #00a884, #008069);">
                                                <i class="fab fa-whatsapp"></i>
                                            </div>
                                            <div>
                                                <h5 class="mb-0 fw-bold">Number Checker</h5>
                                                <small class="text-muted">Verify WhatsApp numbers</small>
                                            </div>
                                        </div>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                    </div>

                                    <form id="createCheckerForm">
                                        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                                        <div class="modal-import-body-compact">
                                            <!-- Checker Name -->
                                            <div class="mb-3">
                                                <label class="form-label-compact">
                                                    <i class="fas fa-signature"></i> Checker Name
                                                </label>
                                                <input type="text" class="form-control-compact" id="checkerName" name="name"
                                                    placeholder="e.g., Customer List Check" required autofocus>
                                            </div>

                                            <!-- Session Selection -->
                                            <div class="mb-3">
                                                <label class="form-label-compact">
                                                    <i class="fab fa-whatsapp"></i> Session
                                                </label>
                                                <select class="form-control-compact" id="sessionSelect" name="session_id" required>
                                                    <option value="">Select session...</option>
                                                </select>
                                            </div>

                                            <!-- Interval Selection -->
                                            <div class="mb-3">
                                                <label class="form-label-compact">
                                                    <i class="fas fa-clock"></i> Check Interval
                                                </label>
                                                <select class="form-control-compact" name="check_interval" required>
                                                    <option value="100">100ms - Ultra Fast</option>
                                                    <option value="200">200ms - Very Fast</option>
                                                    <option value="300">300ms - Fast</option>
                                                    <option value="500">500ms - Quick</option>
                                                    <option value="1000" selected>1s - Normal</option>
                                                    <option value="2000">2s - Safe</option>
                                                    <option value="3000">3s - Safer</option>
                                                    <option value="5000">5s - Slowest</option>
                                                </select>
                                            </div>

                                            <!-- Groups Section - Collapsible -->
                                            <div class="mb-3">
                                                <label class="form-label-compact">
                                                    <i class="fas fa-layer-group"></i> Contact Groups
                                                </label>
                                                <div class="format-info-compact">
                                                    <div class="format-toggle" data-bs-toggle="collapse" data-bs-target="#groupsHelp">
                                                        <span id="selectedGroupsCount">Select groups...</span>
                                                        <i class="fas fa-chevron-down ms-auto"></i>
                                                    </div>
                                                    <div class="collapse" id="groupsHelp">
                                                        <div class="format-details">
                                                            <div class="checker-groups-container" id="groupsList">
                                                                <div class="checker-groups-loading">
                                                                    <div class="spinner-border spinner-border-sm text-success"></div>
                                                                    <span>Loading groups...</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="modal-import-footer-compact">
                                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                                                <i class="fas fa-times me-1"></i>Cancel
                                            </button>
                                            <button type="submit" class="btn btn-success" id="btnCreateChecker">
                                                <i class="fas fa-rocket me-1"></i>Create & Start
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <script>
                            // Apply progress bar widths from data attributes
                            document.addEventListener('DOMContentLoaded', function () {
                                document.querySelectorAll('.progress-bar[data-width]').forEach(function (bar) {
                                    const width = bar.getAttribute('data-width');
                                    bar.style.width = width + '%';
                                });
                            });
                        </script>
                        <script src="/js/number-checker.js"></script>