@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 */
    .modern-table thead th,
    .history-table thead th,
    .table thead th {
        background: var(--primary-blue) !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;
    }

    .modern-table tbody tr:hover,
    .table tbody tr:hover {
        background: linear-gradient(135deg, rgba(23, 71, 158, 0.04) 0%, rgba(135, 206, 235, 0.04) 100%);
        transform: scale(1.001);
    }

    .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) !important;
    }

    /* 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 */
    .badge {
        padding: 0.4rem 0.75rem;
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.75rem;
    }

    /* 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;
        }
    }

    /* 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);
    }
</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 {{ empty($headers) ? 'active' : 'completed' }}">
                    <i class="bx bx-upload"></i>
                </div>
                <div class="step-line {{ empty($headers) ? '' : 'completed' }}"></div>
                <div class="step {{ empty($headers) ? 'pending' : (!empty($cleanData) ? 'completed' : 'active') }}">
                    <i class="bx bx-edit"></i>
                </div>
                <div class="step-line {{ !empty($cleanData) ? 'completed' : '' }}"></div>
                <div class="step {{ !empty($cleanData) ? 'active' : 'pending' }}">
                    <i class="bx bx-send"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content Card -->
    <div class="row g-4 mb-4">
        <div class="col-12">
            <div class="modern-card">
                <div class="modern-card-header">
                    <h5 class="modern-card-title">
                        <i class="bx {{ empty($headers) ? 'bx-cloud-upload' : 'bx-message-square-edit' }}"></i>
                        {{ empty($headers) ? 'Upload CSV File' : 'SMS Campaign Composer' }}
                    </h5>
                </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 CSV File --}}
                    @if(empty($headers))
                        <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>
                                    Load Composer Header
                                </button>
                            </div>
                        </form>
                    @else
                        {{-- Step 2: Compose & Send SMS --}}
                        @if(!empty($cleanData) && count($cleanData) > 0)
                            <div class="alert modern-alert alert-info">
                                <i class="bx bx-check-circle" style="font-size: 1.5rem;"></i>
                                <div class="flex-grow-1">
                                    <strong>Ready to Send!</strong> You have <span class="badge bg-primary">{{ count($cleanData) }}</span> valid phone numbers.
                                </div>
                                <button class="modern-btn modern-btn-primary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#composeForm">
                                    <i class="bx bx-edit"></i> Compose Message
                                </button>
                            </div>

                            <div class="collapse show" id="composeForm">
                                {{-- PHONE NUMBER COLUMN SELECTION - MUST BE FIRST --}}
                                <div class="alert alert-warning 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; color: #856404;"></i>
                                        <div>
                                            <strong>⚠️ Important:</strong> You must select and validate the phone number column first before proceeding.
                                            <br><small class="text-muted">The form will unlock only after successful validation.</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>
                                            <strong>STEP 1:</strong> Select Phone Number Column
                                        </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 First --</option>
                                            @foreach($headers as $header)
                                                <option value="{{ $header }}">{{ strtoupper($header) }}</option>
                                            @endforeach
                                        </select>
                                        <div id="phone-field-feedback" class="mt-3" style="font-size: 1rem; font-weight: 600;"></div>
                                    </div>
                                </div>

                                <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">

                                    {{-- Form Container - Initially Disabled --}}
                                    <div id="sms-form-container" style="opacity: 0.4; pointer-events: none; filter: blur(1px); transition: all 0.3s;">
                                        <div class="alert alert-info border-0 mb-4" id="form-locked-alert">
                                            <i class="bx bx-lock-alt me-2"></i>
                                            <strong>Form Locked:</strong> Select and validate the phone number column above to unlock this form.
                                        </div>

                                    <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>
                                                        @foreach($headers as $h)
                                                            <option value="{{ $h }}">{{ strtoupper($h) }}</option>
                                                        @endforeach
                                                    </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>

                                    {{-- Message Preview --}}
                                    <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="row g-4">
                                        <div class="col-12 text-center">
                                            <button type="submit" 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>{{-- Close sms-form-container --}}
                                </form>
                            </div>
                        @endif

                        <hr class="my-4" style="border-color: rgba(23, 71, 158, 0.1);">

                        {{-- 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 ({{ 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 ({{ count($problematicData) }})
                                </h6>
                                <div class="alert alert-warning d-flex align-items-center gap-3 mb-3">
                                    <i class="bx bx-info-circle" style="font-size: 1.5rem;"></i>
                                    <div class="flex-grow-1">
                                        <strong>Data Quality Issues:</strong> Invalid phone numbers or missing data detected.
                                        <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">
                                                <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
                    @endif

                </div>
            </div>
        </div>
    </div>
    
    {{-- Recent Campaigns --}}
    @if(!empty($recentHistory) && count($recentHistory) > 0)
    <div class="row g-4 mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="mb-0" style="color: var(--primary-blue); font-weight: 600;">
                        <i class="bx bx-history"></i> Recent Campaigns
                    </h6>
                    <a href="{{ route('bulk.sms.history') }}" class="btn btn-sm btn-primary">
                        <i class="bx bx-list-ul"></i> View All
                    </a>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <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
                                        </a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

</div>

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

    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 form only when phone field is valid
     */
    function validatePhoneFieldMandatory() {
        const phoneFieldSelect = document.getElementById('phone_field');
        const feedbackDiv = document.getElementById('phone-field-feedback');
        const selectedColumnName = phoneFieldSelect.value;
        const formContainer = document.getElementById('sms-form-container');
        const formLockedAlert = document.getElementById('form-locked-alert');
        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');
                // Keep form locked
                formContainer.style.opacity = '0.4';
                formContainer.style.pointerEvents = 'none';
                formContainer.style.filter = 'blur(1px)';
                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');
                // Keep form locked
                formContainer.style.opacity = '0.4';
                formContainer.style.pointerEvents = 'none';
                formContainer.style.filter = 'blur(1px)';
                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');
                // Keep form locked
                formContainer.style.opacity = '0.4';
                formContainer.style.pointerEvents = 'none';
                formContainer.style.filter = 'blur(1px)';
                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');
                // Keep form LOCKED
                formContainer.style.opacity = '0.4';
                formContainer.style.pointerEvents = 'none';
                formContainer.style.filter = 'blur(1px)';
                if (formLockedAlert) {
                    formLockedAlert.classList.remove('d-none');
                }
                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">🎉 Form unlocked! You can now proceed to compose your SMS campaign.</small>
                        </div>
                    </div>
                `;
                phoneFieldSelect.classList.add('is-valid');
                phoneFieldHidden.value = selectedColumnName;

                // UNLOCK THE FORM with animation
                formContainer.style.opacity = '1';
                formContainer.style.pointerEvents = 'auto';
                formContainer.style.filter = 'blur(0px)';
                if (formLockedAlert) {
                    formLockedAlert.classList.add('d-none');
                }

                // 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>Form Unlocked!</strong> You can now compose your message.';
                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;
    }

    // Initialize on page load
    document.addEventListener('DOMContentLoaded', () => {
        buildTemplate();
        @if(!empty($cleanData) && count($cleanData) > 0)
            validatePhoneField();
        @endif
    });

    // 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