@extends('layouts.app')

@section('content')
<style>

    /* 2. ONDOA GRADIENT KWENYE TABLE HEADINGS - Tumia #17479E */
    .modern-table thead th, .history-table thead th {
        background: #17479E !important; /* Rangi moja ngumu */
        color: white !important;
    }

    /* 3. METRIC CARDS ZIWE NDOGO SANA NA MODERN */
    .metric-card {
        border: none;
        border-radius: 12px; /* Punguza radius */
        overflow: hidden;
        position: relative;
        height: auto; /* Ondoa height ya kulazimisha */
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .metric-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    }

    .metric-card .card-body {
        padding: 0.75rem 1rem !important; /* Punguza padding sana */
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .metric-content {
        line-height: 1;
    }

    .metric-value {
        font-size: 1.75rem; /* Punguza ukubwa wa thamani */
        margin: 0;
        line-height: 1.2;
        font-weight: 700;
    }

    .metric-label {
        font-size: 0.7rem; /* Punguza ukubwa wa label sana */
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        opacity: 0.9;
        margin-bottom: 0.2rem;
    }
    
    .metric-hint {
        font-size: 0.65rem;
        opacity: 0.7;
    }

    .metric-icon {
        position: static; /* Iwe sehemu ya flow */
        font-size: 1.5rem; /* Make it smaller */
        opacity: 0.5;
        flex-shrink: 0;
        margin-left: 0.5rem;
    }

    /* Styles nyingine zote zilizobaki kama zilivyokuwa */
    .badge-counter {
        border-radius: 50% !important;
        width: 35px;
        height: 35px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 12px !important;
        box-shadow: 0 2px 8px rgba(23, 71, 158, 0.3);
    }

    .modern-card {
        border: none;
        border-radius: 20px;
        box-shadow: var(--ura-shadow);
        overflow: hidden;
        background: var(--glass-bg);
        backdrop-filter: blur(10px);
        margin-bottom: 2rem;
        transition: all 0.3s ease;
    }

    .modern-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--ura-shadow-hover);
    }

    .modern-card-header {
        background: var(--ura-gradient-light);
        padding: 1.5rem 2rem;
        border-bottom: 1px solid rgba(23, 71, 158, 0.1);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .modern-alert {
        border: none;
        border-radius: 12px;
        padding: 1rem 1.5rem;
        margin-bottom: 1.5rem;
        box-shadow: var(--ura-shadow);
    }

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

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

    .modern-alert.alert-warning {
        background: linear-gradient(135deg, rgba(255, 206, 0, 0.1) 0%, rgba(255, 206, 0, 0.05) 100%);
        border-left: 4px solid var(--ura-warning);
        color: #856404;
    }

    .modern-alert.alert-info {
        background: linear-gradient(135deg, rgba(0, 188, 212, 0.1) 0%, rgba(0, 188, 212, 0.05) 100%);
        border-left: 4px solid var(--ura-accent);
        color: #0c5460;
    }

    .file-upload-area {
        border: 3px dashed rgba(23, 71, 158, 0.3);
        border-radius: 16px;
        padding: 3rem 2rem;
        text-align: center;
        background: var(--ura-gradient-light);
        transition: all 0.3s ease;
        cursor: pointer;
        position: relative;
    }

    .file-upload-area:hover {
        border-color: var(--ura-primary);
        background: rgba(23, 71, 158, 0.08);
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(23, 71, 158, 0.2);
    }

    .upload-icon {
        width: 80px;
        height: 80px;
        background: var(--ura-gradient);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.5rem;
        box-shadow: 0 8px 20px rgba(23, 71, 158, 0.3);
    }

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

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

    .modern-btn-primary {
        background: var(--ura-gradient);
        color: white;
        box-shadow: 0 4px 15px rgba(23, 71, 158, 0.3);
    }

    .modern-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: var(--ura-shadow-hover);
        color: white;
    }

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

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

    .modern-btn-warning {
        background: linear-gradient(135deg, var(--ura-warning) 0%, #ffd54f 100%);
        color: #333;
        box-shadow: 0 4px 15px rgba(255, 206, 0, 0.3);
    }

    .modern-btn-warning:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(255, 206, 0, 0.4);
        color: #333;
    }

    .sms-builder {
        background: white;
        border: 2px solid rgba(23, 71, 158, 0.1);
        border-radius: 16px;
        padding: 1.5rem;
        margin-bottom: 1rem;
    }

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

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

    .form-label {
        color: var(--ura-primary);
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .modern-table {
        margin: 0;
    }

    .modern-table thead th {
        color: white !important;
        font-weight: 600;
        border: none !important;
        padding: 1rem 1.5rem;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

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

    .modern-table tbody tr:hover {
        background: linear-gradient(135deg, rgba(23, 71, 158, 0.03) 0%, rgba(135, 206, 235, 0.03) 100%);
        transform: scale(1.001);
        box-shadow: 0 4px 12px rgba(23, 71, 158, 0.08);
    }

    .modern-table tbody td {
        padding: 1rem 1.5rem !important;
        vertical-align: middle;
        border: none !important;
        border-bottom: 1px solid rgba(0,0,0,0.05) !important;
        color: #495057;
    }

    .message-preview {
        background: var(--ura-gradient-light) !important;
        border: 2px solid rgba(23, 71, 158, 0.2) !important;
        border-radius: 12px !important;
        font-family: 'Courier New', monospace;
    }

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

    .step {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        color: white;
        font-size: 1.25rem;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    .step.active {
        background: var(--ura-gradient);
        animation: pulse 2s infinite;
    }

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

    .step.pending {
        background: #ccc;
    }

    @keyframes pulse {
        0%, 100% { box-shadow: 0 4px 15px rgba(23, 71, 158, 0.4); }
        50% { box-shadow: 0 4px 30px rgba(23, 71, 158, 0.8); }
    }

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

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

    .modern-breadcrumb {
        background: var(--glass-bg);
        backdrop-filter: blur(10px);
        border-radius: 16px;
        padding: 1.25rem 2rem;
        margin-bottom: 2rem;
        border: 1px solid rgba(23, 71, 158, 0.1);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    }

    .breadcrumb-title {
        color: var(--ura-primary);
        font-weight: 700;
        font-size: 1.5rem;
        margin: 0;
    }

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

    .breadcrumb-nav a {
        color: var(--ura-primary);
        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(--ura-accent);
        transform: translateX(2px);
    }

    /* History Table Styles */
    .history-table {
        border-collapse: separate;
        border-spacing: 0;
    }

    .history-table thead th {
        font-weight: 700;
        padding: 1.25rem 1.5rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-size: 0.8rem;
        border: none;
        position: sticky;
        top: 0;
        z-index: 10;
    }

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

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

    .history-table tbody tr {
        background: white;
        transition: all 0.3s ease;
    }

    .history-table tbody tr:hover {
        background: linear-gradient(135deg, rgba(23, 71, 158, 0.05) 0%, rgba(0, 188, 212, 0.05) 100%);
        transform: scale(1.005);
        box-shadow: 0 4px 12px rgba(23, 71, 158, 0.15);
    }

    .history-table tbody td {
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        vertical-align: middle;
    }

    .history-badge {
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    .action-btn-group {
        display: flex;
        gap: 0.5rem;
    }

    .action-btn {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 1rem;
    }

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

    .action-btn-success {
        background: linear-gradient(135deg, #10dc60 0%, #00e676 100%);
        color: white;
    }

    .action-btn-info {
        background: linear-gradient(135deg, #00BCD4 0%, #4DD0E1 100%);
        color: white;
    }

    .action-btn-danger {
        background: linear-gradient(135deg, #f04141 0%, #ff5252 100%);
        color: white;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .metric-value {
            font-size: 1.5rem; /* Punguza zaidi kwenye simu */
        }
        
        .step {
            width: 40px;
            height: 40px;
            font-size: 1rem;
        }
        
        .step-line {
            width: 40px;
        }
    }

    /* Smooth scrollbar */
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

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

    ::-webkit-scrollbar-thumb {
        background: var(--ura-gradient);
        border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--ura-primary);
    }
</style>

<div class="container-fluid px-4 py-4">
    
    <div class="card border-0 shadow-sm mb-4" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);">
    <div class="card-body py-3">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
            
            {{-- Title Section: Bulk SMS Campaign Dashboard --}}
            <div class="d-flex align-items-center gap-3">
                <div class="icon-wrapper">
                    <i class="bx bx-message-square-dots text-primary fs-4" style="color: #17479E !important;"></i> 
                </div>
                <h5 class="fw-bold mb-0 text-dark">Bulk SMS Campaign Dashboard</h5>
            </div>
            
            {{-- Breadcrumb Path: Dashboard -> Bulk SMS --}}
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a href="{{ route('dashboard') }}" class="text-decoration-none" style="color: #17479E;">
                            <i class="fas fa-home me-1"></i> Dashboard
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        <span class="badge bg-primary" style="font-size: 90%; font-weight: 500;">
                            Bulk SMS
                        </span>
                    </li>
                </ol>
            </nav>
            
        </div>
    </div>
</div>

    <div class="row g-4 mb-4">
    
    <div class="col-12 col-sm-6 col-md-3">
        <div class="metric-card card shadow-sm" style="background: linear-gradient(135deg, #17479E 0%, #007bff 100%);">
            <div class="card-body text-white p-3"> <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-md-3">
        <div class="metric-card card shadow-sm" style="background: linear-gradient(135deg, #28a745 0%, #20c997 100%);">
            <div class="card-body text-white p-3">
                <div class="metric-content">
                    <div class="metric-label">Valid Numbers</div>
                    <div class="metric-value">{{ !empty($cleanData) ? number_format(count($cleanData)) : '0' }}</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-md-3">
        <div class="metric-card card shadow-sm" style="background: linear-gradient(135deg, #f04141 0%, #ff5252 100%);">
            <div class="card-body text-white p-3">
                <div class="metric-content">
                    <div class="metric-label">Invalid Numbers</div>
                    <div class="metric-value">{{ !empty($problematicData) ? number_format(count($problematicData)) : '0' }}</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-md-3">
        <div class="metric-card card shadow-sm" style="background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);">
            <div class="card-body text-white p-3">
                <div class="metric-content">
                    <div class="metric-label">Success Rate</div>
                    <div class="metric-value">{{ !empty($cleanData) && !empty($problematicData) ? number_format((count($cleanData) / (count($cleanData) + count($problematicData))) * 100, 1) : '0' }}%</div>
                    <div class="metric-hint">Data Quality</div>
                </div>
                <i class="bx bx-trending-up metric-icon"></i>
            </div>
        </div>
    </div>
    
</div>

 

<style>
.metric-card {
    border: none; /* Ondoa border za card */
    border-radius: 0.75rem; /* Kona laini */
    overflow: hidden; /* Muhimu kwa gradient na shadow */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Hover effect ya kisasa */
.metric-card:hover {
    transform: translateY(-5px); /* Inainuka kidogo */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* Shadow ya kuvutia */
}

/* Mwili wa kadi */
.metric-card .card-body {
    display: flex;
    justify-content: space-between; /* Content na icon zikae mbali */
    align-items: center; /* Vitu viwe katikati kwa wima */
    position: relative;
}

/* Sehemu ya content ya metric (Label, Value, Hint) */
.metric-content {
    flex-grow: 1; /* Ruhusu content kutumia nafasi iliyobaki */
}

/* Label ya metric (jina la kipimo) */
.metric-label {
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0.8; /* Ionekane hafifu kidogo */
    margin-bottom: 0.1rem;
    text-transform: uppercase;
}

/* Thamani kuu ya metric */
.metric-value {
    font-size: 1.6rem; /* Punguza ukubwa ili isiwe kubwa sana */
    font-weight: 700;
    line-height: 1.2;
}

/* Hint/Maelezo ya chini */
.metric-hint {
    font-size: 0.7rem;
    opacity: 0.7;
    margin-top: 0.2rem;
}

/* Icon (kama Boxicons inatumika) */
.metric-icon {
    font-size: 2.5rem; /* Punguza ukubwa wa icon */
    opacity: 0.3; /* Icon iwe hafifu kiasi */
    margin-left: 1rem;
}
</style>
    <div class="row g-4 mb-4">
        <div class="col-12">
            <div class="step-indicator">
                <div class="step {{ empty($headers) ? 'active' : 'completed' }}">1</div>
                <div class="step-line {{ empty($headers) ? '' : 'completed' }}"></div>
                <div class="step {{ empty($headers) ? 'pending' : (!empty($cleanData) ? 'completed' : 'active') }}">2</div>
                <div class="step-line {{ !empty($cleanData) ? 'completed' : '' }}"></div>
                <div class="step {{ !empty($cleanData) ? 'active' : 'pending' }}">3</div>
            </div>
        </div>
    </div>

    <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 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 me-2"></i>{{ session('success') }}
                            <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 me-2"></i>{{ session('error') }}
                            <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 me-2"></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

                    {{-- Display Failed Sends Summary --}}
                    @if(session('failedSendsSummary') && count(session('failedSendsSummary')) > 0)
                        <div class="alert modern-alert alert-warning">
                            <div class="d-flex align-items-center mb-3">
                                <i class="bx bx-error-circle me-2"></i>
                                <strong>Warning: Some SMS sending jobs could not be queued</strong>
                            </div>
                            <div style="max-height: 200px; overflow-y: auto; border: 2px solid var(--ura-warning); border-radius: 8px; padding: 1rem; background: rgba(255, 206, 0, 0.05);">
                                <ul class="mb-0">
                                    @foreach(session('failedSendsSummary') as $failed)
                                        <li class="mb-2">
                                            <strong>Phone Number:</strong> {{ $failed['phone'] ?? 'N/A' }} <br>
                                            <strong>Reason:</strong> {{ $failed['reason'] ?? 'Unknown' }} <br>
                                            @if(isset($failed['message']))
                                                <strong>Message:</strong> "{{ Str::limit($failed['message'], 50) }}"
                                            @endif
                                        </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="modern-btn modern-btn-warning btn-sm">
                                    <i class="bx bx-download"></i>
                                    Download Failed SMS Data CSV
                                </button>
                            </form>
                        </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(--ura-primary); 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
                        {{-- Clear Session Button --}}
                        <div class="mb-3 text-end">
                            <form action="{{ route('bulk.sms.clear-session') }}" method="POST" style="display: inline;">
                                @csrf
                                <button type="submit" class="btn btn-outline-danger btn-sm" onclick="return confirm('Are you sure you want to clear the current data and start fresh?')">
                                    <i class="bx bx-refresh"></i> Start Fresh / Upload New File
                                </button>
                            </form>
                        </div>

                        {{-- Step 2: Compose & Send SMS --}}
                        @if(!empty($cleanData) && count($cleanData) > 0)
                            <div class="alert modern-alert alert-info">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div>
                                        <i class="bx bx-check-circle me-2"></i>
                                        <strong>Ready to Send!</strong> You have <span class="badge bg-primary">{{ count($cleanData) }}</span> valid phone numbers ready for SMS sending.
                                    </div>
                                    <button class="modern-btn btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#composeForm"
                                            style="background: var(--ura-gradient); color: white; box-shadow: 0 4px 15px rgba(23, 71, 158, 0.3);">
                                        <i class="bx bx-edit"></i>
                                        Compose Message
                                    </button>
                                </div>
                            </div>

                            <div class="collapse show" id="composeForm">
                                <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 ?? '' }}">

                                    <div class="row g-4 mb-4">
                                        <div class="col-md-6">
                                            <label class="form-label">
                                                <i class="bx bx-heading me-2"></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">Optional - For your reference only</small>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">
                                                <i class="bx bx-bookmark me-2"></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">Optional - For your reference only</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 me-2"></i>
                                                Compose SMS Message
                                            </label>
                                            <div id="sms-builder" class="sms-builder d-flex flex-wrap gap-2 align-items-center">
                                                {{-- Initial text input and field select --}}
                                                <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 this element">
                                                        <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 }}" class="text-uppercase">{{ $h }}</option>
                                                        @endforeach
                                                    </select>
                                                    <button type="button" class="btn btn-outline-danger btn-sm" onclick="removeElement(this)" title="Remove this element">
                                                        <i class="bx bx-x"></i>
                                                    </button>
                                                </div>

                                                <div class="d-flex gap-2 ms-auto">
                                                    <button type="button" onclick="addTextInput()" class="modern-btn btn-sm" style="background: var(--ura-gradient-light); color: var(--ura-primary);">
                                                        <i class="bx bx-plus"></i> Text
                                                    </button>
                                                    <button type="button" onclick="addFieldSelect()" class="modern-btn btn-sm" style="background: var(--ura-gradient-light); color: var(--ura-primary);">
                                                        <i class="bx bx-plus"></i> Field
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- Real-time 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 me-2"></i>
                                                Live Message Preview
                                            </label>
                                            <textarea id="message_preview" class="form-control message-preview" rows="4" readonly placeholder="Your SMS message will appear here as you compose it..."></textarea>
                                            <small class="text-muted mt-1 d-block">
                                                <i class="bx bx-info-circle me-1"></i>
                                                Character count: <span id="charCount">0</span>/160 (Standard SMS)
                                            </small>
                                        </div>
                                    </div>

                                    <div class="row g-4 mb-4">
                                        <div class="col-12">
                                            <label for="phone_field" class="form-label">
                                                <i class="bx bx-phone me-2"></i>
                                                Phone Number Column
                                            </label>
                                            <select name="phone_field" id="phone_field" class="form-select" required onchange="validatePhoneField()">
                                                @foreach($headers as $header)
                                                    <option value="{{ $header }}" @if($loop->last) selected @endif>{{ strtoupper($header) }}</option>
                                                @endforeach
                                            </select>
                                            <div id="phone-field-feedback" class="invalid-feedback d-block"></div>
                                        </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>
                                </form>
                            </div>
                        @endif

                        <hr class="my-4">

                      {{-- Display Clean Data --}}
@if(!empty($cleanData) && count($cleanData) > 0)
    <div class="row g-4 mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex align-items-center">
                    <h6 class="mb-0 text-dark">
                        <i class="bx bx-check-circle text-success me-2"></i>
                        Valid Recipients ({{ count($cleanData) }})
                    </h6>
                </div>

                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    @foreach($headers as $h)
                                        <th class="text-uppercase">{{ $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="card-footer bg-light">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="text-muted small">
                                    Showing {{ $cleanData->firstItem() ?? 0 }} to {{ $cleanData->lastItem() ?? 0 }} of {{ $cleanData->total() }} entries
                                </div>
                                <div>
                                    {{ $cleanData->appends(['problematic_page' => request('problematic_page')])->links('pagination::bootstrap-5') }}
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endif


                        {{-- Display Problematic Data --}}
@if(!empty($problematicData) && count($problematicData) > 0)
    <div class="row g-4 mb-4">
        <div class="col-12">
            <div class="card border-warning">
                <div class="card-header d-flex align-items-center">
                    <h6 class="mb-0 text-dark">
                        <i class="bx bx-error-circle text-warning me-2"></i>
                        Problematic Data ({{ count($problematicData) }})
                    </h6>
                </div>

                <div class="card-body">
                    <div class="alert alert-warning d-flex flex-column">
                        <div>
                            <i class="bx bx-info-circle me-2"></i>
                            <strong>Data Quality Issues:</strong> The following rows contain invalid phone numbers or missing data.
                            You can download this data to correct it and re-upload.
                        </div>

                        <form action="{{ route('bulk.sms.export-problematic') }}" method="POST" class="mt-3">
                            @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 text-dark">
                                <i class="bx bx-download"></i> Download Problematic Data CSV
                            </button>
                        </form>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    @foreach($headers as $h)
                                        <th class="text-uppercase">{{ $h }}</th>
                                    @endforeach
                                    <th class="text-uppercase">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="card-footer bg-light">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="text-muted small">
                                    Showing {{ $problematicData->firstItem() ?? 0 }} to {{ $problematicData->lastItem() ?? 0 }} of {{ $problematicData->total() }} entries
                                </div>
                                <div>
                                    {{ $problematicData->appends(['clean_page' => request('clean_page')])->links('pagination::bootstrap-5') }}
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endif
@endif

                </div>
            </div>
        </div>
    </div>
    
@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">
                <h5 class="mb-0">
                    <i class="bx bx-history"></i> Recent Campaigns
                </h5>
                <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-striped table-bordered mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Campaign</th>
                                <th>Message</th>
                                <th>Recipients</th>
                                <th>Date</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($recentHistory->take(5) as $history)
                            <tr>
                                <td>{{ $history->title ?? 'Untitled Campaign' }}</td>
                                <td>{{ Str::limit($history->message, 50) }}</td>
                                <td>{{ $history->number_of_recipients }}</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>
                                    </a>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endif


 
</div>

{{-- JavaScript for dynamic SMS builder (Logic Haukuguswa) --}}
<script>
    // Clean data from server, used for client-side phone field validation
    const cleanCsvData = @json($cleanData ?? []);
    const headers = @json($headers ?? []);

    /**
     * Adds a new text input field to the SMS builder.
     */
    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();
    }

    /**
     * Adds a new field select dropdown to the SMS builder.
     */
    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();
    }

    /**
     * Removes an element (text input or field select) from the SMS builder.
     */
    function removeElement(button) {
        button.closest('.input-group').remove();
        buildTemplate();
    }

    /**
     * Builds the SMS message template from all text inputs and selected fields
     */
    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 = 'var(--ura-danger)';
                charCountElement.style.fontWeight = 'bold';
            } else if (finalMessage.length > 140) {
                charCountElement.style.color = 'var(--ura-warning)';
                charCountElement.style.fontWeight = '600';
            } else {
                charCountElement.style.color = 'var(--ura-success)';
                charCountElement.style.fontWeight = '500';
            }
        }
    }

    /**
     * Validates the selected phone number column
     */
    function validatePhoneField() {
        const phoneFieldSelect = document.getElementById('phone_field');
        const feedbackDiv = document.getElementById('phone-field-feedback');
        const selectedColumnName = phoneFieldSelect.value;

        phoneFieldSelect.classList.remove('is-invalid');
        feedbackDiv.classList.remove('text-success');
        feedbackDiv.classList.add('invalid-feedback');

        if (!selectedColumnName) {
            feedbackDiv.textContent = 'Please select a phone number column.';
            phoneFieldSelect.classList.add('is-invalid');
            return false;
        }

        const columnIndex = headers.indexOf(selectedColumnName);
        if (columnIndex === -1) {
            feedbackDiv.textContent = 'Selected column not found.';
            phoneFieldSelect.classList.add('is-invalid');
            return false;
        }

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

        if (!cleanCsvData || cleanCsvData.length === 0) {
             feedbackDiv.textContent = 'No valid CSV data loaded for phone number validation.';
             phoneFieldSelect.classList.add('is-invalid');
             return false;
        }

        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.textContent = `Column '${selectedColumnName.toUpperCase()}' has ${invalidCount} invalid phone numbers (out of ${totalRows} rows). Ensure all numbers start with '255' and are 12 digits long.`;
            phoneFieldSelect.classList.add('is-invalid');
            return false;
        } else {
            feedbackDiv.textContent = '✓ Phone number column appears valid.';
            feedbackDiv.classList.remove('invalid-feedback');
            feedbackDiv.classList.add('text-success');
            phoneFieldSelect.classList.remove('is-invalid');
            return true;
        }
    }

    /**
     * Prepares the form for submission
     */
    function prepareAndSendSms() {
        buildTemplate();
        const messageTemplate = document.getElementById('message_template').value;
        const sendButton = document.getElementById('sendSmsButton');
        const smsForm = document.getElementById('sendSmsForm');

        if (!messageTemplate.trim()) {
            alert("Please compose a message before sending.");
            return false;
        }

        if (!validatePhoneField()) {
            alert("Please correct the phone number column before sending SMS.");
            return false;
        }

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

        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 functionality
    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(0, 188, 212, 0.1)';
                fileUploadArea.style.borderColor = 'var(--ura-accent)';
                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 = 'var(--ura-success)';
                description.innerHTML = `<strong>File size:</strong> ${sizeInMB} MB<br><strong>Type:</strong> ${file.type || 'Unknown'}`;

                if (file.size > 5 * 1024 * 1024) {
                    title.style.color = 'var(--ura-danger)';
                    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: var(--ura-danger);">⚠️ File too large (max 5MB)</span>';
                }
            }
        }
    });
</script>

@endsection