@extends('layouts.app')

@section('content')
<style>
    :root {
        --primary-blue: #17479E;
        --sky-blue: #87CEEB;
        --success-green: #10dc60;
        --warning-orange: #ffc107;
        --danger-red: #f04141;
    }

    /* METRIC CARDS - SMALLER AND MODERN */
    .metric-card {
        border: none;
        border-radius: 10px;
        overflow: hidden;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        height: 90px;
    }

    .metric-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    }

    .metric-card .card-body {
        padding: 1rem !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        height: 100%;
    }

    .metric-content {
        flex: 1;
    }

    .metric-label {
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        opacity: 0.85;
        margin-bottom: 0.25rem;
    }

    .metric-value {
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1;
        margin: 0;
    }

    .metric-hint {
        font-size: 0.65rem;
        opacity: 0.75;
        margin-top: 0.2rem;
    }

    .metric-icon {
        font-size: 2rem;
        opacity: 0.4;
        flex-shrink: 0;
    }

    /* TABLE STYLING WITH PRIMARY COLORS - Enhanced */
    .modern-table,
    .history-table,
    .table {
        border-collapse: separate;
        border-spacing: 0;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        background: white;
    }

    .modern-table thead th,
    .history-table thead th,
    .table thead th {
        background: linear-gradient(135deg, var(--primary-blue) 0%, #1a5fb4 100%) !important;
        color: white !important;
        font-weight: 600;
        border: none !important;
        padding: 1rem 1.25rem;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        position: sticky;
        top: 0;
        z-index: 10;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        white-space: nowrap;
    }

    .table thead th i {
        margin-right: 0.5rem;
        font-size: 1rem;
        opacity: 0.9;
    }

    .modern-table thead th:first-child,
    .table thead th:first-child {
        border-top-left-radius: 12px;
    }

    .modern-table thead th:last-child,
    .table thead th:last-child {
        border-top-right-radius: 12px;
    }

    .modern-table tbody tr,
    .table tbody tr {
        transition: all 0.3s ease;
        border-bottom: 1px solid rgba(23, 71, 158, 0.08);
        background: white;
    }

    /* Zebra striping for better readability */
    .modern-table tbody tr:nth-child(even),
    .table tbody tr:nth-child(even) {
        background: rgba(23, 71, 158, 0.02);
    }

    .modern-table tbody tr:hover,
    .table tbody tr:hover {
        background: linear-gradient(135deg, rgba(23, 71, 158, 0.08) 0%, rgba(135, 206, 235, 0.08) 100%) !important;
        transform: translateX(4px);
        box-shadow: -4px 0 0 0 var(--primary-blue);
        cursor: pointer;
    }

    .modern-table tbody tr:last-child,
    .table tbody tr:last-child {
        border-bottom: none;
    }

    .modern-table tbody td,
    .table tbody td {
        padding: 1rem 1.25rem !important;
        vertical-align: middle;
        border-bottom: 1px solid rgba(23, 71, 158, 0.08);
        transition: all 0.3s ease;
    }

    .modern-table tbody tr:last-child td:first-child,
    .table tbody tr:last-child td:first-child {
        border-bottom-left-radius: 12px;
    }

    .modern-table tbody tr:last-child td:last-child,
    .table tbody tr:last-child td:last-child {
        border-bottom-right-radius: 12px;
    }

    /* Table Container Styling */
    .table-responsive {
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        margin-bottom: 1.5rem;
        background: white;
    }

    /* PHONE FIELD VALIDATION FEEDBACK */
    .phone-validation-success {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem;
        background: linear-gradient(135deg, rgba(16, 220, 96, 0.1) 0%, rgba(16, 220, 96, 0.05) 100%);
        border-left: 3px solid var(--success-green);
        border-radius: 8px;
        color: #0d5e2d;
        font-weight: 500;
        margin-top: 0.5rem;
    }

    .phone-validation-error {
        display: flex;
        align-items-start;
        gap: 0.5rem;
        padding: 0.75rem;
        background: linear-gradient(135deg, rgba(240, 65, 65, 0.1) 0%, rgba(240, 65, 65, 0.05) 100%);
        border-left: 3px solid var(--danger-red);
        border-radius: 8px;
        color: #721c24;
        font-weight: 500;
        margin-top: 0.5rem;
    }

    /* MODERN CARD STYLING */
    .modern-card {
        border: none;
        border-radius: 16px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        margin-bottom: 2rem;
        transition: all 0.3s ease;
    }

    .modern-card:hover {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    }

    .modern-card-header {
        background: linear-gradient(135deg, var(--primary-blue) 0%, var(--sky-blue) 100%);
        padding: 1.25rem 1.75rem;
        border-bottom: none;
    }

    .modern-card-title {
        color: white;
        font-weight: 600;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* ALERT STYLING */
    .modern-alert {
        border: none;
        border-radius: 10px;
        padding: 1rem 1.25rem;
        margin-bottom: 1.25rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .modern-alert.alert-success {
        background: linear-gradient(135deg, rgba(16, 220, 96, 0.12) 0%, rgba(16, 220, 96, 0.06) 100%);
        border-left: 4px solid var(--success-green);
        color: #0d5e2d;
    }

    .modern-alert.alert-danger {
        background: linear-gradient(135deg, rgba(240, 65, 65, 0.12) 0%, rgba(240, 65, 65, 0.06) 100%);
        border-left: 4px solid var(--danger-red);
        color: #721c24;
    }

    .modern-alert.alert-warning {
        background: linear-gradient(135deg, rgba(255, 193, 7, 0.12) 0%, rgba(255, 193, 7, 0.06) 100%);
        border-left: 4px solid var(--warning-orange);
        color: #856404;
    }

    .modern-alert.alert-info {
        background: linear-gradient(135deg, rgba(135, 206, 235, 0.12) 0%, rgba(135, 206, 235, 0.06) 100%);
        border-left: 4px solid var(--sky-blue);
        color: #004085;
    }

    /* FILE UPLOAD AREA */
    .file-upload-area {
        border: 3px dashed rgba(23, 71, 158, 0.3);
        border-radius: 12px;
        padding: 2.5rem 2rem;
        text-align: center;
        background: linear-gradient(135deg, rgba(23, 71, 158, 0.03) 0%, rgba(135, 206, 235, 0.03) 100%);
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .file-upload-area:hover {
        border-color: var(--primary-blue);
        background: rgba(135, 206, 235, 0.08);
        transform: translateY(-3px);
        box-shadow: 0 6px 16px rgba(23, 71, 158, 0.15);
    }

    .upload-icon {
        width: 70px;
        height: 70px;
        background: linear-gradient(135deg, var(--primary-blue) 0%, var(--sky-blue) 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.25rem;
        box-shadow: 0 6px 16px rgba(23, 71, 158, 0.25);
    }

    .upload-icon i {
        font-size: 2rem;
        color: white;
    }

    /* BUTTONS */
    .modern-btn {
        border: none;
        border-radius: 8px;
        padding: 0.65rem 1.5rem;
        font-weight: 600;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-size: 0.85rem;
        text-decoration: none;
    }

    .modern-btn-primary {
        background: linear-gradient(135deg, var(--primary-blue) 0%, var(--sky-blue) 100%);
        color: white;
        box-shadow: 0 4px 12px rgba(23, 71, 158, 0.3);
    }

    .modern-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(23, 71, 158, 0.4);
        color: white;
    }

    .modern-btn-success {
        background: linear-gradient(135deg, var(--success-green) 0%, #00e676 100%);
        color: white;
        box-shadow: 0 4px 12px rgba(16, 220, 96, 0.3);
    }

    .modern-btn-success:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(16, 220, 96, 0.4);
        color: white;
    }

    /* SMS BUILDER */
    .sms-builder {
        background: white;
        border: 2px solid rgba(23, 71, 158, 0.1);
        border-radius: 12px;
        padding: 1.25rem;
        margin-bottom: 1rem;
    }

    .form-control, .form-select {
        border: 2px solid rgba(23, 71, 158, 0.1);
        border-radius: 8px;
        padding: 0.65rem 1rem;
        transition: all 0.3s ease;
    }

    .form-control:focus, .form-select:focus {
        border-color: var(--primary-blue);
        box-shadow: 0 0 0 0.2rem rgba(23, 71, 158, 0.15);
        transform: translateY(-1px);
    }

    .form-label {
        color: var(--primary-blue);
        font-weight: 600;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* MESSAGE PREVIEW */
    .message-preview {
        background: linear-gradient(135deg, rgba(23, 71, 158, 0.05) 0%, rgba(135, 206, 235, 0.05) 100%) !important;
        border: 2px solid rgba(23, 71, 158, 0.2) !important;
        border-radius: 10px !important;
        font-family: 'Courier New', monospace;
    }

    /* Phone Validation Styles */
    #phone-field-feedback .alert {
        padding: 1rem 1.25rem;
        border-radius: 10px;
        font-size: 0.95rem;
        animation: slideDown 0.3s ease-out;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    #phone_field.is-valid {
        border-color: #10dc60 !important;
        box-shadow: 0 0 0 0.2rem rgba(16, 220, 96, 0.25) !important;
    }

    #phone_field.is-invalid {
        border-color: #f04141 !important;
        box-shadow: 0 0 0 0.2rem rgba(240, 65, 65, 0.25) !important;
    }

    /* Form Container Transitions */
    #sms-form-container {
        transition: all 0.5s ease-in-out;
    }

    /* STEP INDICATOR */
    .step-indicator {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .step {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        color: white;
        font-size: 1.1rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease;
    }

    .step.active {
        background: linear-gradient(135deg, var(--primary-blue) 0%, var(--sky-blue) 100%);
        animation: pulse 2s infinite;
    }

    .step.completed {
        background: var(--success-green);
    }

    .step.pending {
        background: #ccc;
    }

    @keyframes pulse {
        0%, 100% { box-shadow: 0 4px 12px rgba(23, 71, 158, 0.3); }
        50% { box-shadow: 0 4px 24px rgba(23, 71, 158, 0.6); }
    }

    .step-line {
        width: 70px;
        height: 3px;
        background: #ccc;
        border-radius: 2px;
    }

    .step-line.completed {
        background: var(--success-green);
    }

    /* BREADCRUMB */
    .modern-breadcrumb {
        background: white;
        border-radius: 12px;
        padding: 1.25rem 1.75rem;
        margin-bottom: 2rem;
        border: 1px solid rgba(23, 71, 158, 0.1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .breadcrumb-title {
        color: var(--primary-blue);
        font-weight: 700;
        font-size: 1.4rem;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .breadcrumb-nav {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .breadcrumb-nav a {
        color: var(--primary-blue);
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 0.25rem;
        transition: all 0.3s ease;
        font-weight: 500;
    }

    .breadcrumb-nav a:hover {
        color: var(--sky-blue);
        transform: translateX(2px);
    }

    /* CARD STYLING */
    .card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        overflow: hidden;
    }

    .card-header {
        background: linear-gradient(135deg, rgba(23, 71, 158, 0.05) 0%, rgba(135, 206, 235, 0.05) 100%);
        border-bottom: 2px solid rgba(23, 71, 158, 0.1);
        padding: 1rem 1.5rem;
    }

    /* BADGES - Enhanced */
    .badge {
        padding: 0.4rem 0.85rem;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.75rem;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease;
    }

    .badge:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    .badge.bg-primary {
        background: linear-gradient(135deg, var(--primary-blue) 0%, var(--sky-blue) 100%) !important;
    }

    .badge.bg-success {
        background: linear-gradient(135deg, var(--success-green) 0%, #00e676 100%) !important;
    }

    .badge.bg-warning {
        background: linear-gradient(135deg, var(--warning-orange) 0%, #ffd54f 100%) !important;
    }

    .badge.bg-danger {
        background: linear-gradient(135deg, var(--danger-red) 0%, #ff5252 100%) !important;
    }

    /* Table action buttons */
    .table .btn-sm {
        padding: 0.4rem 0.9rem;
        font-size: 0.8rem;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    }

    .table .btn-sm:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    .table .btn-success {
        background: linear-gradient(135deg, var(--success-green) 0%, #00e676 100%);
        border: none;
    }

    .table .btn-warning {
        background: linear-gradient(135deg, var(--warning-orange) 0%, #ffd54f 100%);
        border: none;
        color: #333;
    }

    .table .btn-danger {
        background: linear-gradient(135deg, var(--danger-red) 0%, #ff5252 100%);
        border: none;
    }

    /* RESPONSIVE */
    @media (max-width: 768px) {
        .metric-card {
            height: auto;
        }

        .metric-value {
            font-size: 1.25rem;
        }

        .step {
            width: 38px;
            height: 38px;
            font-size: 0.95rem;
        }

        .step-line {
            width: 40px;
        }

        .table-responsive {
            border-radius: 8px;
        }

        .table thead th {
            font-size: 0.7rem;
            padding: 0.75rem 0.85rem;
        }

        .table tbody td {
            font-size: 0.85rem;
            padding: 0.75rem 0.85rem !important;
        }

        .badge {
            font-size: 0.7rem;
            padding: 0.3rem 0.65rem;
        }
    }

    /* Loading state for table */
    .table-loading {
        position: relative;
        opacity: 0.6;
        pointer-events: none;
    }

    .table-loading::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        border: 4px solid rgba(23, 71, 158, 0.2);
        border-top-color: var(--primary-blue);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
        to { transform: translate(-50%, -50%) rotate(360deg); }
    }

    /* SCROLLBAR */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: rgba(23, 71, 158, 0.05);
        border-radius: 8px;
    }

    ::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, var(--primary-blue) 0%, var(--sky-blue) 100%);
        border-radius: 8px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--primary-blue);
    }

    /* MULTI-STEP FORM ANIMATIONS */
    .step-content {
        animation: fadeInUp 0.5s ease-in-out;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Table Slide Animation */
    @keyframes slideDown {
        from {
            opacity: 0;
            max-height: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            max-height: 1000px;
            transform: translateY(0);
        }
    }

    @keyframes slideUp {
        from {
            opacity: 1;
            max-height: 1000px;
            transform: translateY(0);
        }
        to {
            opacity: 0;
            max-height: 0;
            transform: translateY(-10px);
        }
    }

    #recentCampaignsTableContainer {
        overflow: hidden;
        transition: all 0.4s ease-in-out;
    }

    #recentCampaignsTableContainer.show {
        animation: slideDown 0.4s ease-in-out;
    }

    #recentCampaignsTableContainer.hide {
        animation: slideUp 0.4s ease-in-out;
    }

    /* SMOOTH TRANSITIONS */
    .step, .step-line {
        transition: all 0.4s ease-in-out;
    }

    /* PAGINATION STYLING */
    .pagination {
        display: flex;
        gap: 0.5rem;
        justify-content: center;
        margin-top: 1.5rem;
    }

    .pagination .page-link {
        border: 2px solid rgba(23, 71, 158, 0.2);
        border-radius: 8px;
        padding: 0.5rem 1rem;
        color: var(--primary-blue);
        font-weight: 600;
        transition: all 0.3s ease;
        background: white;
        margin: 0 0.15rem;
    }

    .pagination .page-link:hover {
        background: linear-gradient(135deg, var(--primary-blue) 0%, var(--sky-blue) 100%);
        color: white;
        border-color: var(--primary-blue);
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(23, 71, 158, 0.3);
    }

    .pagination .page-item.active .page-link {
        background: linear-gradient(135deg, var(--primary-blue) 0%, var(--sky-blue) 100%);
        border-color: var(--primary-blue);
        color: white;
        box-shadow: 0 4px 10px rgba(23, 71, 158, 0.3);
    }

    .pagination .page-item.disabled .page-link {
        opacity: 0.5;
        cursor: not-allowed;
        background: #f8f9fa;
    }

    /* Empty State for Tables */
    .table-empty-state {
        text-align: center;
        padding: 3rem 2rem;
        color: #6c757d;
    }

    .table-empty-state i {
        font-size: 4rem;
        color: var(--primary-blue);
        opacity: 0.3;
        margin-bottom: 1rem;
    }

    .table-empty-state h5 {
        color: var(--primary-blue);
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
</style>

<div class="container-fluid px-4 py-4">
    
    <!-- Breadcrumb -->
    <div class="row g-4 mb-4">
        <div class="col-12">
            <div class="modern-breadcrumb d-flex flex-wrap align-items-center justify-content-between">
                <h2 class="breadcrumb-title">
                    <i class="bx bx-message-square-dots"></i>
                    Bulk SMS Campaign Dashboard
                </h2>
                <ul class="breadcrumb-nav">
                    <li>
                        <a href="{{ route('dashboard') }}">
                            <i class="bx bx-home-alt"></i>
                            Dashboard
                        </a>
                    </li>
                    <li><span class="text-muted">•</span></li>
                    <li class="text-muted">Bulk SMS</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Metric Cards -->
    <div class="row g-3 mb-4">
        <div class="col-12 col-sm-6 col-lg-3">
            <div class="metric-card card" style="background: linear-gradient(135deg, #17479E 0%, #87CEEB 100%);">
                <div class="card-body text-white">
                    <div class="metric-content">
                        <div class="metric-label">Upload Format</div>
                        <div class="metric-value">CSV</div>
                        <div class="metric-hint">Excel/CSV Supported</div>
                    </div>
                    <i class="bx bx-file-plus metric-icon"></i>
                </div>
            </div>
        </div>
        
        <div class="col-12 col-sm-6 col-lg-3">
            <div class="metric-card card" style="background: linear-gradient(135deg, #10dc60 0%, #00e676 100%);">
                <div class="card-body text-white">
                    <div class="metric-content">
                        <div class="metric-label">Valid Numbers</div>
                        <div class="metric-value">
                            @if(!empty($cleanData))
                                @if(is_object($cleanData) && method_exists($cleanData, 'total'))
                                    {{ number_format($cleanData->total()) }}
                                @else
                                    {{ number_format(count($cleanData)) }}
                                @endif
                            @else
                                0
                            @endif
                        </div>
                        <div class="metric-hint">Ready to Send</div>
                    </div>
                    <i class="bx bx-check-shield metric-icon"></i>
                </div>
            </div>
        </div>
        
        <div class="col-12 col-sm-6 col-lg-3">
            <div class="metric-card card" style="background: linear-gradient(135deg, #f04141 0%, #ff5252 100%);">
                <div class="card-body text-white">
                    <div class="metric-content">
                        <div class="metric-label">Invalid Numbers</div>
                        <div class="metric-value">
                            @if(!empty($problematicData))
                                @if(is_object($problematicData) && method_exists($problematicData, 'total'))
                                    {{ number_format($problematicData->total()) }}
                                @else
                                    {{ number_format(count($problematicData)) }}
                                @endif
                            @else
                                0
                            @endif
                        </div>
                        <div class="metric-hint">Needs Correction</div>
                    </div>
                    <i class="bx bx-error-circle metric-icon"></i>
                </div>
            </div>
        </div>

        <div class="col-12 col-sm-6 col-lg-3">
            <div class="metric-card card" style="background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);">
                <div class="card-body text-white">
                    <div class="metric-content">
                        <div class="metric-label">Success Rate</div>
                        <div class="metric-value">
                            @php
                                $cleanTotal = 0;
                                $problematicTotal = 0;

                                if(!empty($cleanData)) {
                                    $cleanTotal = is_object($cleanData) && method_exists($cleanData, 'total')
                                        ? $cleanData->total()
                                        : count($cleanData);
                                }

                                if(!empty($problematicData)) {
                                    $problematicTotal = is_object($problematicData) && method_exists($problematicData, 'total')
                                        ? $problematicData->total()
                                        : count($problematicData);
                                }

                                $totalRecords = $cleanTotal + $problematicTotal;
                                $successRate = $totalRecords > 0 ? ($cleanTotal / $totalRecords) * 100 : 0;
                            @endphp
                            {{ number_format($successRate, 1) }}%
                        </div>
                        <div class="metric-hint">Data Quality</div>
                    </div>
                    <i class="bx bx-trending-up metric-icon"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Step Indicator -->
    <div class="row g-4 mb-4">
        <div class="col-12">
            <div class="step-indicator">
                <div class="step" id="step-indicator-1">
                    <i class="bx bx-upload"></i>
                </div>
                <div class="step-line" id="step-line-1"></div>
                <div class="step" id="step-indicator-2">
                    <i class="bx bx-table"></i>
                </div>
                <div class="step-line" id="step-line-2"></div>
                <div class="step" id="step-indicator-3">
                    <i class="bx bx-phone"></i>
                </div>
                <div class="step-line" id="step-line-3"></div>
                <div class="step" id="step-indicator-4">
                    <i class="bx bx-edit"></i>
                </div>
                <div class="step-line" id="step-line-4"></div>
                <div class="step" id="step-indicator-5">
                    <i class="bx bx-send"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Multi-Step Form Container -->
    <div class="row g-4 mb-4">
        <div class="col-12">
            <div class="modern-card">
                <div class="modern-card-header">
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                        <h5 class="modern-card-title mb-0" id="step-title">
                            <i class="bx bx-cloud-upload"></i>
                            <span id="step-title-text">Step 1: Upload File or Select Campaign</span>
                        </h5>
                        <div class="d-flex gap-2">
                            <a href="{{ route('bulk.sms.history') }}" class="btn btn-outline-light btn-sm" title="View campaign history" style="border-radius: 8px; font-weight: 600;">
                                <i class="bx bx-history"></i> History
                            </a>
                            @if(!empty($headers))
                            <form action="{{ route('bulk.sms.clear-session') }}" method="POST" style="margin: 0;">
                                @csrf
                                <button type="submit" class="btn btn-outline-light btn-sm" title="Clear current upload and start fresh" style="border-radius: 8px; font-weight: 600;">
                                    <i class="bx bx-refresh"></i> Start Fresh
                                </button>
                            </form>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="card-body p-4">

                    {{-- Status Messages --}}
                    @if(session('success'))
                        <div class="alert modern-alert alert-success alert-dismissible fade show" role="alert">
                            <i class="bx bx-check-circle" style="font-size: 1.5rem;"></i>
                            <div>
                                <strong>Success!</strong><br>
                                {{ session('success') }}
                                @if(str_contains(session('success'), 'queued'))
                                    <br><small><i class="bx bx-info-circle"></i> Messages are being processed in the background and will be sent shortly.</small>
                                @endif
                            </div>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="alert modern-alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="bx bx-error-circle" style="font-size: 1.5rem;"></i>
                            <div>{{ session('error') }}</div>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    @if($errors->any())
                        <div class="alert modern-alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="bx bx-error-circle" style="font-size: 1.5rem;"></i>
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    {{-- Failed Sends Summary --}}
                    @if(session('failedSendsSummary') && count(session('failedSendsSummary')) > 0)
                        <div class="alert modern-alert alert-warning">
                            <i class="bx bx-error-circle" style="font-size: 1.5rem;"></i>
                            <div class="flex-grow-1">
                                <strong>Warning: Some SMS could not be queued</strong>
                                <div style="max-height: 200px; overflow-y: auto; margin-top: 0.75rem; padding: 0.75rem; background: rgba(255, 193, 7, 0.1); border-radius: 8px;">
                                    <ul class="mb-0" style="font-size: 0.9rem;">
                                        @foreach(session('failedSendsSummary') as $failed)
                                            <li class="mb-2">
                                                <strong>Phone:</strong> {{ $failed['phone'] ?? 'N/A' }}<br>
                                                <strong>Reason:</strong> {{ $failed['reason'] ?? 'Unknown' }}
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                                <form action="{{ route('bulk.sms.export-failed') }}" method="POST" class="mt-3">
                                    @csrf
                                    <input type="hidden" name="failed_sms_data" value="{{ base64_encode(json_encode(session('failedSendsSummary'))) }}">
                                    <button type="submit" class="btn btn-warning btn-sm">
                                        <i class="bx bx-download"></i> Download Failed SMS Data
                                    </button>
                                </form>
                            </div>
                        </div>
                    @endif

                    {{-- STEP 1: Upload File or Select Recent Campaign --}}
                    <div id="step-1" class="step-content" style="display: {{ empty($headers) ? 'block' : 'none' }};">
                        <form action="{{ route('bulk.sms.parse') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="file-upload-area" onclick="document.getElementById('csv_file').click()">
                                <div class="upload-icon">
                                    <i class="bx bx-cloud-upload"></i>
                                </div>
                                <h5 class="mb-2" style="color: var(--primary-blue); font-weight: 700;">Upload Data File</h5>
                                <p class="mb-3" style="color: #6c757d;">Click to browse or drag & drop your Excel/CSV file</p>
                                <input type="file" name="csv_file" id="csv_file" class="form-control"
                                       style="position: absolute; opacity: 0; pointer-events: none;"
                                       accept=".csv,.xlsx,.xls" required>
                                <small class="text-muted d-block mt-2">
                                    <i class="bx bx-info-circle me-1"></i>
                                    Supported formats: .xlsx, .xls, .csv (Max 5MB)
                                </small>
                            </div>
                            <div class="text-center mt-4">
                                <button type="submit" class="modern-btn modern-btn-primary px-5">
                                    <i class="bx bx-upload"></i>
                                    Upload & Continue to Step 2
                                </button>
                            </div>
                        </form>

                        @if(!empty($recentHistory) && count($recentHistory) > 0)
                        <hr class="my-4" style="border-color: rgba(23, 71, 158, 0.2);">
                        <div class="text-center mb-3">
                            <p class="text-muted mb-3" style="font-size: 0.95rem;">
                                <i class="bx bx-info-circle"></i> Already have a campaign file? Load it from your recent uploads
                            </p>
                            <button type="button" class="modern-btn modern-btn-primary" id="toggleRecentCampaigns" onclick="toggleRecentCampaignsTable()" style="box-shadow: 0 4px 12px rgba(23, 71, 158, 0.25);">
                                <i class="bx bx-history"></i>
                                <span id="toggleButtonText">View Recent Campaigns</span>
                            </button>
                        </div>
                        <div id="recentCampaignsTableContainer" style="display: none;">
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th><i class="bx bx-book"></i> Campaign</th>
                                            <th><i class="bx bx-message"></i> Message</th>
                                            <th><i class="bx bx-group"></i> Recipients</th>
                                            <th><i class="bx bx-calendar"></i> Date</th>
                                            <th class="text-center"><i class="bx bx-cog"></i> Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($recentHistory->take(5) as $history)
                                        <tr>
                                            <td><strong>{{ $history->title ?? 'Untitled Campaign' }}</strong></td>
                                            <td>{{ Str::limit($history->message, 50) }}</td>
                                            <td><span class="badge bg-primary">{{ $history->number_of_recipients }}</span></td>
                                            <td>{{ $history->sent_at ? $history->sent_at->format('M d, Y') : 'N/A' }}</td>
                                            <td class="text-center">
                                                <a href="{{ route('bulk.sms.load-file', $history->id) }}"
                                                   class="btn btn-success btn-sm"
                                                   title="Load Campaign">
                                                    <i class="bx bx-file"></i> Load File
                                                </a>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        @endif
                    </div>

                    {{-- STEP 2: Review Data (Clean & Problematic) --}}
                    <div id="step-2" class="step-content" style="display: {{ !empty($headers) && empty(request('phone_column_selected')) ? 'block' : 'none' }};">
                        {{-- Valid Recipients Table --}}
                        @if(!empty($cleanData) && count($cleanData) > 0)
                            <div class="mb-4">
                                <h6 class="mb-3" style="color: var(--primary-blue); font-weight: 600;">
                                    <i class="bx bx-check-circle text-success"></i>
                                    Valid Recipients ({{ is_object($cleanData) && method_exists($cleanData, 'total') ? $cleanData->total() : count($cleanData) }})
                                </h6>
                                <div class="table-responsive">
                                    <table class="table table-hover mb-0">
                                        <thead>
                                            <tr>
                                                @foreach($headers as $h)
                                                    <th><i class="bx bx-data"></i> {{ strtoupper($h) }}</th>
                                                @endforeach
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @if(is_object($cleanData) && method_exists($cleanData, 'items'))
                                                @foreach($cleanData->items() as $row)
                                                    <tr>
                                                        @foreach($row as $cell)
                                                            <td>{{ $cell }}</td>
                                                        @endforeach
                                                    </tr>
                                                @endforeach
                                            @else
                                                @foreach($cleanData as $row)
                                                    <tr>
                                                        @foreach($row as $cell)
                                                            <td>{{ $cell }}</td>
                                                        @endforeach
                                                    </tr>
                                                @endforeach
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                                @if(is_object($cleanData) && method_exists($cleanData, 'links'))
                                    <div class="mt-3">
                                        {{ $cleanData->appends(['problematic_page' => request('problematic_page')])->links('pagination::bootstrap-5') }}
                                    </div>
                                @endif
                            </div>
                        @endif

                        {{-- Problematic Data Table --}}
                        @if(!empty($problematicData) && count($problematicData) > 0)
                            <div class="mb-4">
                                <h6 class="mb-3" style="color: var(--warning-orange); font-weight: 600;">
                                    <i class="bx bx-error-circle"></i>
                                    Problematic Data ({{ is_object($problematicData) && method_exists($problematicData, 'total') ? $problematicData->total() : count($problematicData) }})
                                </h6>
                                <div class="modern-alert alert-warning d-flex align-items-start gap-3 mb-3" style="background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 193, 7, 0.08) 100%); border-left: 4px solid var(--warning-orange); border-radius: 12px; padding: 1.25rem;">
                                    <i class="bx bx-error-circle" style="font-size: 2rem; color: var(--warning-orange);"></i>
                                    <div class="flex-grow-1">
                                        <h6 style="color: #856404; font-weight: 700; margin-bottom: 0.5rem;">
                                            <i class="bx bx-shield-x"></i> Data Quality Issues Detected
                                        </h6>
                                        <p style="color: #856404; margin-bottom: 1rem;">Invalid phone numbers or missing data found in your upload. Download the problematic records to fix and re-upload.</p>
                                        <form action="{{ route('bulk.sms.export-problematic') }}" method="POST" class="mt-2">
                                            @csrf
                                            <input type="hidden" name="problematic_csv_data"
                                                   value="{{ base64_encode(json_encode(['headers' => $headers, 'data' => $problematicData])) }}">
                                            <button type="submit" class="btn btn-warning btn-sm" style="background: linear-gradient(135deg, var(--warning-orange) 0%, #ffd54f 100%); border: none; font-weight: 600; padding: 0.5rem 1.25rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);">
                                                <i class="bx bx-download"></i> Download Problematic Data
                                            </button>
                                        </form>
                                    </div>
                                </div>
                                <div class="table-responsive">
                                    <table class="table table-hover mb-0">
                                        <thead>
                                            <tr>
                                                @foreach($headers as $h)
                                                    <th><i class="bx bx-data"></i> {{ strtoupper($h) }}</th>
                                                @endforeach
                                                <th><i class="bx bx-error"></i> ISSUE</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @if(is_object($problematicData) && method_exists($problematicData, 'items'))
                                                @foreach($problematicData->items() as $row)
                                                    <tr>
                                                        @foreach($row['data'] as $cell)
                                                            <td>{{ $cell }}</td>
                                                        @endforeach
                                                        <td><span class="badge bg-warning text-dark">{{ $row['reason'] }}</span></td>
                                                    </tr>
                                                @endforeach
                                            @else
                                                @foreach($problematicData as $row)
                                                    <tr>
                                                        @foreach($row['data'] as $cell)
                                                            <td>{{ $cell }}</td>
                                                        @endforeach
                                                        <td><span class="badge bg-warning text-dark">{{ $row['reason'] }}</span></td>
                                                    </tr>
                                                @endforeach
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                                @if(is_object($problematicData) && method_exists($problematicData, 'links'))
                                    <div class="mt-3">
                                        {{ $problematicData->appends(['clean_page' => request('clean_page')])->links('pagination::bootstrap-5') }}
                                    </div>
                                @endif
                            </div>
                        @endif

                        <div class="text-center mt-4">
                            <button type="button" class="modern-btn modern-btn-primary px-5" onclick="goToStep(3)">
                                <i class="bx bx-right-arrow-alt"></i>
                                Continue to Phone Column Selection
                            </button>
                        </div>
                    </div>

                    {{-- STEP 3: Select Phone Number Column --}}
                    <div id="step-3" class="step-content" style="display: none;">
                        <div class="alert alert-info border-0 shadow-sm mb-4">
                            <div class="d-flex align-items-start">
                                <i class="bx bx-info-circle" style="font-size: 24px; margin-right: 12px;"></i>
                                <div>
                                    <strong>Select Phone Column:</strong> Choose which column contains the phone numbers for SMS delivery.
                                    <br><small class="text-muted">The system will validate all phone numbers before proceeding.</small>
                                </div>
                            </div>
                        </div>

                        <div class="card border-primary mb-4" style="border-width: 3px !important; box-shadow: 0 4px 15px rgba(23, 71, 158, 0.2);">
                            <div class="card-header" style="background: linear-gradient(135deg, #17479E 0%, #00BCD4 100%);">
                                <h5 class="mb-0 text-white">
                                    <i class="bx bx-phone me-2"></i>
                                    Phone Number Column Selection
                                </h5>
                            </div>
                            <div class="card-body p-4">
                                <label for="phone_field" class="form-label fw-bold" style="font-size: 1.1rem;">
                                    <i class="bx bx-table me-2" style="color: #17479E;"></i>
                                    Which column contains the phone numbers?
                                </label>
                                <select id="phone_field" class="form-select form-select-lg" required onchange="validatePhoneFieldMandatory()" style="font-size: 1.1rem; padding: 12px;">
                                    <option value="">-- Please Select Phone Number Column --</option>
                                    @if(!empty($headers))
                                        @foreach($headers as $header)
                                            <option value="{{ $header }}">{{ strtoupper($header) }}</option>
                                        @endforeach
                                    @endif
                                </select>
                                <div id="phone-field-feedback" class="mt-3" style="font-size: 1rem; font-weight: 600;"></div>
                            </div>
                        </div>

                        <div class="text-center mt-4">
                            <button type="button" class="btn btn-outline-secondary me-2" onclick="goToStep(2)">
                                <i class="bx bx-left-arrow-alt"></i> Back to Data Review
                            </button>
                            <button type="button" class="modern-btn modern-btn-primary px-5" id="continue-to-step-4" disabled onclick="goToStep(4)">
                                <i class="bx bx-right-arrow-alt"></i>
                                Continue to Compose Message
                            </button>
                        </div>
                    </div>

                    {{-- STEP 4: Compose SMS Message --}}
                    <div id="step-4" class="step-content" style="display: none;">
                        <form action="{{ route('bulk.sms.send') }}" method="POST" id="sendSmsForm">
                            @csrf
                            <input type="hidden" name="csv_data" value="{{ $cleanRawCsv ?? '' }}">
                            <input type="hidden" name="message_template" id="message_template">
                            <input type="hidden" name="saved_file_path" value="{{ $savedFilePath ?? '' }}">
                            <input type="hidden" name="phone_field" id="phone_field_hidden">

                            <div class="row g-4 mb-4">
                                <div class="col-md-6">
                                    <label class="form-label">
                                        <i class="bx bx-heading"></i>
                                        Campaign Heading
                                    </label>
                                    <input type="text" name="heading" id="heading" class="form-control"
                                           placeholder="e.g., Monthly Newsletter" maxlength="255"
                                           value="{{ $loadedHistory['heading'] ?? '' }}">
                                    <small class="text-muted"><i class="bx bx-info-circle"></i> Optional - For reference</small>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">
                                        <i class="bx bx-bookmark"></i>
                                        Campaign Title
                                    </label>
                                    <input type="text" name="title" id="title" class="form-control"
                                           placeholder="e.g., November 2024 Update" maxlength="255"
                                           value="{{ $loadedHistory['title'] ?? '' }}">
                                    <small class="text-muted"><i class="bx bx-info-circle"></i> Optional - For reference</small>
                                </div>
                            </div>

                            <div class="row g-4 mb-4">
                                <div class="col-12">
                                    <label class="form-label">
                                        <i class="bx bx-message-square-edit"></i>
                                        Compose SMS Message
                                    </label>
                                    <div id="sms-builder" class="sms-builder d-flex flex-wrap gap-2 align-items-center">
                                        <div class="input-group flex-grow-1" data-type="text-group">
                                            <input type="text" class="form-control" placeholder="Type your text here..." oninput="buildTemplate()" data-type="text" maxlength="100">
                                            <button type="button" class="btn btn-outline-danger btn-sm" onclick="removeElement(this)" title="Remove">
                                                <i class="bx bx-x"></i>
                                            </button>
                                        </div>
                                        <div class="input-group flex-grow-1" data-type="field-group">
                                            <select class="form-select" onchange="buildTemplate()" data-type="field">
                                                <option value="">-- Choose field --</option>
                                                @if(!empty($headers))
                                                    @foreach($headers as $h)
                                                        <option value="{{ $h }}">{{ strtoupper($h) }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                            <button type="button" class="btn btn-outline-danger btn-sm" onclick="removeElement(this)" title="Remove">
                                                <i class="bx bx-x"></i>
                                            </button>
                                        </div>
                                        <div class="d-flex gap-2 ms-auto">
                                            <button type="button" onclick="addTextInput()" class="btn btn-sm btn-outline-primary">
                                                <i class="bx bx-plus"></i> Text
                                            </button>
                                            <button type="button" onclick="addFieldSelect()" class="btn btn-sm btn-outline-primary">
                                                <i class="bx bx-plus"></i> Field
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row g-4 mb-4">
                                <div class="col-12">
                                    <label for="message_preview" class="form-label">
                                        <i class="bx bx-show"></i>
                                        Live Message Preview
                                    </label>
                                    <textarea id="message_preview" class="form-control message-preview" rows="4" readonly placeholder="Your SMS message will appear here..."></textarea>
                                    <small class="text-muted mt-1 d-block">
                                        <i class="bx bx-info-circle"></i>
                                        Character count: <span id="charCount" style="font-weight: 600;">0</span>/160 (Standard SMS)
                                    </small>
                                </div>
                            </div>

                            <div class="text-center mt-4">
                                <button type="button" class="btn btn-outline-secondary me-2" onclick="goToStep(3)">
                                    <i class="bx bx-left-arrow-alt"></i> Back to Phone Selection
                                </button>
                                <button type="button" class="modern-btn modern-btn-primary px-5" onclick="goToStep(5)">
                                    <i class="bx bx-right-arrow-alt"></i>
                                    Review & Send
                                </button>
                            </div>
                        </form>
                    </div>

                    {{-- STEP 5: Review & Send --}}
                    <div id="step-5" class="step-content" style="display: none;">
                        <div class="alert modern-alert alert-info mb-4">
                            <i class="bx bx-info-circle" style="font-size: 1.5rem;"></i>
                            <div>
                                <strong>Review Your Campaign:</strong> Please verify all details before sending.
                            </div>
                        </div>

                        <div class="card mb-4">
                            <div class="card-header">
                                <h6 class="mb-0"><i class="bx bx-detail"></i> Campaign Summary</h6>
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <strong><i class="bx bx-heading"></i> Heading:</strong>
                                        <span id="review-heading">-</span>
                                    </div>
                                    <div class="col-md-6">
                                        <strong><i class="bx bx-bookmark"></i> Title:</strong>
                                        <span id="review-title">-</span>
                                    </div>
                                    <div class="col-md-6">
                                        <strong><i class="bx bx-phone"></i> Phone Column:</strong>
                                        <span id="review-phone-column">-</span>
                                    </div>
                                    <div class="col-md-6">
                                        <strong><i class="bx bx-group"></i> Recipients:</strong>
                                        <span class="badge bg-primary">{{ is_object($cleanData ?? []) && method_exists($cleanData, 'total') ? $cleanData->total() : count($cleanData ?? []) }}</span>
                                    </div>
                                    <div class="col-12">
                                        <strong><i class="bx bx-message"></i> Message:</strong>
                                        <div class="mt-2 p-3 bg-light rounded" id="review-message">-</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="text-center mt-4">
                            <button type="button" class="btn btn-outline-secondary me-2" onclick="goToStep(4)">
                                <i class="bx bx-left-arrow-alt"></i> Back to Edit Message
                            </button>
                            <button type="button" class="modern-btn modern-btn-success px-5" id="sendSmsButton" onclick="return prepareAndSendSms()">
                                <i class="bx bx-send"></i>
                                Send SMS Campaign
                            </button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    

</div>

{{-- JavaScript --}}
<script>
    // Use raw session data for validation (not paginated)
    const cleanCsvData = @json(session('bulk_sms_clean_data', []));
    const headers = @json($headers ?? []);
    let currentStep = {{ empty($headers) ? 1 : 2 }};

    // Multi-Step Navigation
    function goToStep(stepNumber) {
        // Validation before moving forward
        if (stepNumber > currentStep) {
            if (currentStep === 3 && !validatePhoneField()) {
                alert('❌ Please select and validate a phone number column before proceeding.');
                return false;
            }
            if (stepNumber === 5) {
                buildTemplate();
                const messageTemplate = document.getElementById('message_template').value;
                if (!messageTemplate.trim()) {
                    alert('❌ Please compose a message before reviewing.');
                    return false;
                }
            }
        }

        // Hide all steps
        for (let i = 1; i <= 5; i++) {
            const stepDiv = document.getElementById('step-' + i);
            if (stepDiv) {
                stepDiv.style.display = 'none';
            }
        }

        // Show target step
        const targetStep = document.getElementById('step-' + stepNumber);
        if (targetStep) {
            targetStep.style.display = 'block';
            currentStep = stepNumber;
            updateStepIndicator(stepNumber);
            updateStepTitle(stepNumber);

            // Update review page if going to step 5
            if (stepNumber === 5) {
                updateReviewSummary();
            }

            // Scroll to top
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }
    }

    function updateStepIndicator(activeStep) {
        // Update step indicators
        for (let i = 1; i <= 5; i++) {
            const stepIndicator = document.getElementById('step-indicator-' + i);
            const stepLine = document.getElementById('step-line-' + i);

            if (stepIndicator) {
                stepIndicator.className = 'step';
                if (i < activeStep) {
                    stepIndicator.classList.add('completed');
                } else if (i === activeStep) {
                    stepIndicator.classList.add('active');
                } else {
                    stepIndicator.classList.add('pending');
                }
            }

            if (stepLine) {
                stepLine.className = 'step-line';
                if (i < activeStep) {
                    stepLine.classList.add('completed');
                }
            }
        }
    }

    function updateStepTitle(stepNumber) {
        const titles = {
            1: { icon: 'bx-cloud-upload', text: 'Step 1: Upload File or Select Campaign' },
            2: { icon: 'bx-table', text: 'Step 2: Review Data' },
            3: { icon: 'bx-phone', text: 'Step 3: Select Phone Number Column' },
            4: { icon: 'bx-edit', text: 'Step 4: Compose Message' },
            5: { icon: 'bx-send', text: 'Step 5: Review & Send' }
        };

        const titleElement = document.getElementById('step-title');
        const titleTextElement = document.getElementById('step-title-text');

        if (titleElement && titles[stepNumber]) {
            const iconElement = titleElement.querySelector('i');
            if (iconElement) {
                iconElement.className = 'bx ' + titles[stepNumber].icon;
            }
            if (titleTextElement) {
                titleTextElement.textContent = titles[stepNumber].text;
            }
        }
    }

    function updateReviewSummary() {
        const heading = document.getElementById('heading')?.value || 'Not specified';
        const title = document.getElementById('title')?.value || 'Not specified';
        const phoneColumn = document.getElementById('phone_field')?.value || 'Not selected';
        const message = document.getElementById('message_preview')?.value || 'No message composed';

        document.getElementById('review-heading').textContent = heading;
        document.getElementById('review-title').textContent = title;
        document.getElementById('review-phone-column').textContent = phoneColumn.toUpperCase();
        document.getElementById('review-message').textContent = message;
    }

    function addTextInput() {
        const builder = document.getElementById('sms-builder');
        const wrapper = document.createElement('div');
        wrapper.className = 'input-group flex-grow-1';
        wrapper.setAttribute('data-type', 'text-group');

        const input = document.createElement('input');
        input.type = 'text';
        input.className = 'form-control';
        input.placeholder = 'Type text here...';
        input.setAttribute('data-type', 'text');
        input.setAttribute('maxlength', '100');
        input.oninput = buildTemplate;

        const removeBtn = document.createElement('button');
        removeBtn.type = 'button';
        removeBtn.className = 'btn btn-outline-danger btn-sm';
        removeBtn.innerHTML = '<i class="bx bx-x"></i>';
        removeBtn.onclick = function() { removeElement(this); };

        wrapper.appendChild(input);
        wrapper.appendChild(removeBtn);
        builder.insertBefore(wrapper, builder.querySelector('.d-flex.gap-2.ms-auto'));
        buildTemplate();
    }

    function addFieldSelect() {
        const builder = document.getElementById('sms-builder');
        const wrapper = document.createElement('div');
        wrapper.className = 'input-group flex-grow-1';
        wrapper.setAttribute('data-type', 'field-group');

        const select = document.createElement('select');
        select.className = 'form-select';
        select.setAttribute('data-type', 'field');
        select.onchange = buildTemplate;

        const defaultOption = new Option('-- Choose field --', '');
        select.add(defaultOption);

        if (headers.length > 0) {
            headers.forEach(h => {
                select.add(new Option(h.toUpperCase(), h));
            });
        }

        const removeBtn = document.createElement('button');
        removeBtn.type = 'button';
        removeBtn.className = 'btn btn-outline-danger btn-sm';
        removeBtn.innerHTML = '<i class="bx bx-x"></i>';
        removeBtn.onclick = function() { removeElement(this); };

        wrapper.appendChild(select);
        wrapper.appendChild(removeBtn);
        builder.insertBefore(wrapper, builder.querySelector('.d-flex.gap-2.ms-auto'));
        buildTemplate();
    }

    function removeElement(button) {
        button.closest('.input-group').remove();
        buildTemplate();
    }

    function buildTemplate() {
        const builder = document.getElementById('sms-builder');
        const elements = Array.from(builder.querySelectorAll('[data-type="text"], [data-type="field"]'));
        let message = '';

        elements.forEach(element => {
            if (element.dataset.type === 'text') {
                message += element.value + ' ';
            } else if (element.dataset.type === 'field' && element.value) {
                message += '{' + element.value + '} ';
            }
        });

        const finalMessage = message.trim();
        document.getElementById('message_template').value = finalMessage;
        document.getElementById('message_preview').value = finalMessage;

        const charCountElement = document.getElementById('charCount');
        if (charCountElement) {
            charCountElement.textContent = finalMessage.length;

            if (finalMessage.length > 160) {
                charCountElement.style.color = '#f04141';
                charCountElement.style.fontWeight = 'bold';
            } else if (finalMessage.length > 140) {
                charCountElement.style.color = '#ffc107';
                charCountElement.style.fontWeight = '600';
            } else {
                charCountElement.style.color = '#10dc60';
                charCountElement.style.fontWeight = '500';
            }
        }
    }

    /**
     * MANDATORY validation - Unlocks button to continue to step 4
     */
    function validatePhoneFieldMandatory() {
        const phoneFieldSelect = document.getElementById('phone_field');
        const feedbackDiv = document.getElementById('phone-field-feedback');
        const selectedColumnName = phoneFieldSelect.value;
        const continueButton = document.getElementById('continue-to-step-4');
        const phoneFieldHidden = document.getElementById('phone_field_hidden');

        // Show loading state
        feedbackDiv.innerHTML = '<div class="text-info"><i class="bx bx-loader-alt bx-spin"></i> Validating phone numbers...</div>';
        phoneFieldSelect.classList.remove('is-invalid', 'is-valid');

        // Small delay to show loading animation
        setTimeout(() => {
            if (!selectedColumnName) {
                feedbackDiv.innerHTML = `
                    <div class="alert alert-danger mb-0">
                        <i class="bx bx-error-circle"></i>
                        <strong>Error:</strong> Please select a phone number column.
                    </div>
                `;
                phoneFieldSelect.classList.add('is-invalid');
                if (continueButton) continueButton.disabled = true;
                return false;
            }

            const columnIndex = headers.indexOf(selectedColumnName);
            if (columnIndex === -1) {
                feedbackDiv.innerHTML = `
                    <div class="alert alert-danger mb-0">
                        <i class="bx bx-error-circle"></i>
                        <strong>Error:</strong> Selected column not found in the data.
                    </div>
                `;
                phoneFieldSelect.classList.add('is-invalid');
                if (continueButton) continueButton.disabled = true;
                return false;
            }

            // Check if cleanCsvData is actually an array
            if (!cleanCsvData || !Array.isArray(cleanCsvData) || cleanCsvData.length === 0) {
                feedbackDiv.innerHTML = `
                    <div class="alert alert-danger mb-0">
                        <i class="bx bx-error-circle"></i>
                        <strong>Error:</strong> No valid CSV data loaded for validation.
                    </div>
                `;
                phoneFieldSelect.classList.add('is-invalid');
                if (continueButton) continueButton.disabled = true;
                return false;
            }

            let hasInvalidNumbers = false;
            let invalidCount = 0;
            const totalRows = cleanCsvData.length;

            console.log('Validating', totalRows, 'rows in column index', columnIndex);
            console.log('Sample row:', cleanCsvData[0]);

            for (const row of cleanCsvData) {
                if (row[columnIndex] !== undefined && row[columnIndex] !== null) {
                    const phoneNumber = String(row[columnIndex]).trim();
                    if (!/^255\d{9}$/.test(phoneNumber)) {
                        hasInvalidNumbers = true;
                        invalidCount++;
                    }
                } else {
                    hasInvalidNumbers = true;
                    invalidCount++;
                }
            }

            console.log('Validation complete:', hasInvalidNumbers ? 'FAILED' : 'SUCCESS', '- Invalid count:', invalidCount);

            if (hasInvalidNumbers) {
                feedbackDiv.innerHTML = `
                    <div class="alert alert-danger mb-0">
                        <i class="bx bx-error-circle me-2"></i>
                        <div>
                            <strong>❌ Validation Failed!</strong><br>
                            Column '<strong>${selectedColumnName.toUpperCase()}</strong>' has <strong class="text-danger">${invalidCount}</strong> invalid phone numbers out of <strong>${totalRows}</strong> rows.<br>
                            <small class="mt-2 d-block">📋 Requirements: All phone numbers must start with '255' and be exactly 12 digits long.</small>
                            <small class="mt-1 d-block text-danger fw-bold">⚠️ Please select a different column or correct your data file.</small>
                        </div>
                    </div>
                `;
                phoneFieldSelect.classList.add('is-invalid');
                if (continueButton) continueButton.disabled = true;
                return false;
            } else {
                feedbackDiv.innerHTML = `
                    <div class="alert alert-success mb-0" style="background: linear-gradient(135deg, rgba(16, 220, 96, 0.1) 0%, rgba(56, 239, 125, 0.1) 100%); border-left: 4px solid #10dc60;">
                        <i class="bx bx-check-circle me-2" style="font-size: 24px; color: #10dc60;"></i>
                        <div>
                            <strong>✅ Validation Successful!</strong><br>
                            Column '<strong>${selectedColumnName.toUpperCase()}</strong>' contains <strong class="text-success">${totalRows}</strong> valid phone numbers.<br>
                            <small class="mt-2 d-block text-success fw-bold">🎉 Click the button below to continue to message composition.</small>
                        </div>
                    </div>
                `;
                phoneFieldSelect.classList.add('is-valid');
                phoneFieldHidden.value = selectedColumnName;

                // Enable continue button
                if (continueButton) {
                    continueButton.disabled = false;
                }

                // Show success notification
                const successNotif = document.createElement('div');
                successNotif.className = 'alert alert-success position-fixed';
                successNotif.style.cssText = 'top: 20px; right: 20px; z-index: 9999; box-shadow: 0 4px 12px rgba(0,0,0,0.15);';
                successNotif.innerHTML = '<i class="bx bx-check-circle me-2"></i><strong>Phone Column Validated!</strong> You can now continue.';
                document.body.appendChild(successNotif);
                setTimeout(() => successNotif.remove(), 3000);

                return true;
            }
        }, 500); // 500ms delay for loading animation
    }

    function validatePhoneField() {
        const phoneFieldSelect = document.getElementById('phone_field');
        const feedbackDiv = document.getElementById('phone-field-feedback');
        const selectedColumnName = phoneFieldSelect.value;

        // Clear previous styling
        phoneFieldSelect.classList.remove('is-invalid', 'is-valid');
        feedbackDiv.innerHTML = '';
        feedbackDiv.className = '';

        if (!selectedColumnName) {
            feedbackDiv.className = 'phone-validation-error';
            feedbackDiv.innerHTML = '<i class="bx bx-error-circle"></i><div>Please select a phone number column.</div>';
            phoneFieldSelect.classList.add('is-invalid');
            return false;
        }

        const columnIndex = headers.indexOf(selectedColumnName);
        if (columnIndex === -1) {
            feedbackDiv.className = 'phone-validation-error';
            feedbackDiv.innerHTML = '<i class="bx bx-error-circle"></i><div>Selected column not found in the data.</div>';
            phoneFieldSelect.classList.add('is-invalid');
            return false;
        }

        if (!cleanCsvData || cleanCsvData.length === 0) {
            feedbackDiv.className = 'phone-validation-error';
            feedbackDiv.innerHTML = '<i class="bx bx-error-circle"></i><div>No valid CSV data loaded for phone number validation.</div>';
            phoneFieldSelect.classList.add('is-invalid');
            return false;
        }

        let hasInvalidNumbers = false;
        let invalidCount = 0;
        const totalRows = cleanCsvData.length;

        for (const row of cleanCsvData) {
            if (row[columnIndex] !== undefined && row[columnIndex] !== null) {
                const phoneNumber = String(row[columnIndex]).trim();
                if (!/^255\d{9}$/.test(phoneNumber)) {
                    hasInvalidNumbers = true;
                    invalidCount++;
                }
            } else {
                hasInvalidNumbers = true;
                invalidCount++;
            }
        }

        if (hasInvalidNumbers) {
            feedbackDiv.className = 'phone-validation-error';
            feedbackDiv.innerHTML = `
                <i class="bx bx-error-circle"></i>
                <div>
                    <strong>Invalid phone numbers detected!</strong><br>
                    Column '<strong>${selectedColumnName.toUpperCase()}</strong>' has <strong>${invalidCount}</strong> invalid phone numbers out of <strong>${totalRows}</strong> rows.<br>
                    <small>All phone numbers must start with '255' and be exactly 12 digits long.</small><br>
                    <small style="color: #721c24; font-weight: 600;">Please correct the phone number column before sending SMS.</small>
                </div>
            `;
            phoneFieldSelect.classList.add('is-invalid');
            return false;
        } else {
            feedbackDiv.className = 'phone-validation-success';
            feedbackDiv.innerHTML = `
                <i class="bx bx-check-circle"></i>
                <div>
                    <strong>Perfect!</strong> Column '<strong>${selectedColumnName.toUpperCase()}</strong>' contains all valid phone numbers (${totalRows} valid numbers).
                </div>
            `;
            phoneFieldSelect.classList.add('is-valid');
            return true;
        }
    }

    function prepareAndSendSms() {
        buildTemplate();
        const messageTemplate = document.getElementById('message_template').value;
        const phoneFieldHidden = document.getElementById('phone_field_hidden');
        const phoneField = document.getElementById('phone_field');
        const sendButton = document.getElementById('sendSmsButton');
        const smsForm = document.getElementById('sendSmsForm');

        // Check if phone field has been validated
        if (!phoneFieldHidden.value || !phoneField.classList.contains('is-valid')) {
            alert("❌ ERROR: You must select and validate the phone number column first!\n\nPlease scroll up and select a valid phone number column.");
            return false;
        }

        if (!messageTemplate.trim()) {
            alert("❌ ERROR: Please compose a message before sending.\n\nUse the message composer to create your SMS message.");
            return false;
        }

        // Double check phone field validation
        if (!validatePhoneField()) {
            alert("❌ ERROR: Phone number column validation failed.\n\nPlease ensure all phone numbers are valid (255XXXXXXXXX format).");
            return false;
        }

        // Show loading state
        sendButton.disabled = true;
        sendButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Sending SMS...';

        // Submit form
        smsForm.submit();
        return false;
    }

    // Toggle Recent Campaigns Table with smooth animation
    function toggleRecentCampaignsTable() {
        const tableContainer = document.getElementById('recentCampaignsTableContainer');
        const buttonText = document.getElementById('toggleButtonText');
        const button = document.getElementById('toggleRecentCampaigns');

        if (tableContainer.style.display === 'none' || tableContainer.style.display === '') {
            // Show table
            tableContainer.style.display = 'block';
            tableContainer.classList.remove('hide');
            tableContainer.classList.add('show');
            buttonText.textContent = 'Hide Campaigns';
            button.querySelector('i').className = 'bx bx-chevron-up';

            // Smooth scroll to table
            setTimeout(() => {
                tableContainer.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            }, 100);
        } else {
            // Hide table
            tableContainer.classList.remove('show');
            tableContainer.classList.add('hide');
            buttonText.textContent = 'View Recent Campaigns';
            button.querySelector('i').className = 'bx bx-history';

            // Hide after animation completes
            setTimeout(() => {
                tableContainer.style.display = 'none';
            }, 400);
        }
    }

    // Initialize on page load
    document.addEventListener('DOMContentLoaded', () => {
        buildTemplate();
        updateStepIndicator(currentStep);
        updateStepTitle(currentStep);
    });

    // File upload drag and drop
    document.addEventListener('DOMContentLoaded', function() {
        const fileUploadArea = document.querySelector('.file-upload-area');
        const fileInput = document.getElementById('csv_file');

        if (fileUploadArea && fileInput) {
            fileUploadArea.addEventListener('dragover', function(e) {
                e.preventDefault();
                fileUploadArea.style.backgroundColor = 'rgba(135, 206, 235, 0.1)';
                fileUploadArea.style.borderColor = '#17479E';
                fileUploadArea.style.transform = 'scale(1.02)';
            });

            fileUploadArea.addEventListener('dragleave', function(e) {
                e.preventDefault();
                resetUploadAreaStyle();
            });

            fileUploadArea.addEventListener('drop', function(e) {
                e.preventDefault();
                resetUploadAreaStyle();

                const files = e.dataTransfer.files;
                if (files.length > 0) {
                    fileInput.files = files;
                    displayFileInfo(files[0]);
                }
            });

            fileInput.addEventListener('change', function(e) {
                if (e.target.files.length > 0) {
                    displayFileInfo(e.target.files[0]);
                }
            });

            function resetUploadAreaStyle() {
                fileUploadArea.style.backgroundColor = '';
                fileUploadArea.style.borderColor = '';
                fileUploadArea.style.transform = '';
            }

            function displayFileInfo(file) {
                const sizeInMB = (file.size / (1024 * 1024)).toFixed(2);
                const uploadIcon = fileUploadArea.querySelector('.upload-icon');
                const title = fileUploadArea.querySelector('h5');
                const description = fileUploadArea.querySelector('p');

                uploadIcon.innerHTML = '<i class="bx bx-check-circle"></i>';
                uploadIcon.style.background = 'linear-gradient(135deg, #10dc60 0%, #00e676 100%)';
                title.textContent = file.name;
                title.style.color = '#10dc60';
                description.innerHTML = `<strong>Size:</strong> ${sizeInMB} MB | <strong>Type:</strong> ${file.type || 'Unknown'}`;

                if (file.size > 5 * 1024 * 1024) {
                    title.style.color = '#f04141';
                    uploadIcon.style.background = 'linear-gradient(135deg, #f04141 0%, #ff5252 100%)';
                    uploadIcon.innerHTML = '<i class="bx bx-error-circle"></i>';
                    description.innerHTML += '<br><span style="color: #f04141; font-weight: 600;">⚠️ File too large (max 5MB)</span>';
                }
            }
        }
    });
</script>

@endsection