@extends('layouts.app')

@section('title', 'Kirim Pesan Baru')

@push('styles')
<style>
.contacts-scroll-container {
    scrollbar-width: thin;
    scrollbar-color: #6c757d #f8f9fa;
}

.contacts-scroll-container::-webkit-scrollbar {
    width: 8px;
}

.contacts-scroll-container::-webkit-scrollbar-track {
    background: #f8f9fa;
    border-radius: 4px;
}

.contacts-scroll-container::-webkit-scrollbar-thumb {
    background: #6c757d;
    border-radius: 4px;
}

.contacts-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #495057;
}

.contact-item-scroll {
    transition: background-color 0.2s ease;
}

.contact-item-scroll:hover {
    background-color: #e9ecef;
    border-radius: 0.25rem;
    padding: 0.25rem;
    margin: -0.25rem;
}

.contacts-scroll-container {
    position: relative;
}

.contacts-scroll-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 10px;
    background: linear-gradient(transparent, rgba(248, 249, 250, 0.8));
    pointer-events: none;
    border-radius: 0 0 0.375rem 0.375rem;
}

.scroll-indicator {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 0.8rem;
    opacity: 0.7;
    pointer-events: none;
}
</style>
@endpush

@section('content')
<div class="container-fluid px-4">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2 class="h4 mb-1">Kirim Pesan Broadcast</h2>
                    <p class="text-muted mb-0">
                        <i class="fas fa-paper-plane me-2"></i>
                        Buat dan kirim pesan broadcast WhatsApp ke pelanggan
                    </p>
                </div>
                <div>
                    <a href="{{ route('kirim-pesan.index') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-2"></i>
                        Kembali
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Form Section -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-edit me-2"></i>
                        Form Kirim Pesan
                    </h5>
                </div>
                <div class="card-body">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <h6><i class="fas fa-exclamation-triangle me-2"></i>Terjadi Kesalahan:</h6>
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('kirim-pesan.store') }}" method="POST" id="broadcastForm">
                        @csrf
                        
                        <!-- Basic Information -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <label for="title" class="form-label fw-semibold">
                                    <i class="fas fa-heading me-2 text-primary"></i>
                                    Judul Broadcast <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control @error('title') is-invalid @enderror" 
                                       id="title" name="title" value="{{ old('title') }}" 
                                       placeholder="Contoh: Promo Paket Internet Bulan Ini" required>
                                @error('title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Message Content -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <label for="message" class="form-label fw-semibold">
                                    <i class="fas fa-comment-alt me-2 text-primary"></i>
                                    Isi Pesan <span class="text-danger">*</span>
                                </label>
                                
                                <!-- Template Selector -->
                                <div class="mb-2">
                                    <button type="button" class="btn btn-outline-info btn-sm" id="btn-load-template">
                                        <i class="fas fa-file-alt me-2"></i>
                                        Gunakan Template
                                    </button>
                                    <small class="text-muted ms-2">
                                        Gunakan [NAMA] untuk nama pelanggan
                                    </small>
                                </div>
                                
                                <textarea class="form-control @error('message') is-invalid @enderror" 
                                          id="message" name="message" rows="6" required
                                          placeholder="Tulis pesan Anda di sini...&#10;&#10;Contoh:&#10;Halo [NAMA],&#10;&#10;Kami ingin memberitahukan promo spesial paket internet bulan ini dengan diskon hingga 50%!&#10;&#10;Hubungi kami untuk info lebih lanjut.&#10;&#10;Terima kasih.">{{ old('message') }}</textarea>
                                @error('message')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">
                                    <span id="char-count">0</span>/1000 karakter
                                </div>
                            </div>
                        </div>

                        <!-- Send Method -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <label class="form-label fw-semibold">
                                    <i class="fas fa-users me-2 text-primary"></i>
                                    Metode Pengiriman <span class="text-danger">*</span>
                                </label>
                                
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <div class="card border">
                                            <div class="card-body p-3">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="send_method" 
                                                           id="method_individual" value="individual" 
                                                           {{ old('send_method') == 'individual' ? 'checked' : '' }}>
                                                    <label class="form-check-label fw-semibold" for="method_individual">
                                                        <i class="fas fa-user text-info me-2"></i>
                                                        Perorangan
                                                    </label>
                                                </div>
                                                <small class="text-muted">Kirim ke satu nomor tertentu</small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="card border">
                                            <div class="card-body p-3">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="send_method" 
                                                           id="method_all" value="all"
                                                           {{ old('send_method') == 'all' ? 'checked' : '' }}>
                                                    <label class="form-check-label fw-semibold" for="method_all">
                                                        <i class="fas fa-users text-success me-2"></i>
                                                        Semua Kontak
                                                    </label>
                                                </div>
                                                <small class="text-muted">Kirim ke semua pelanggan</small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="card border">
                                            <div class="card-body p-3">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="send_method" 
                                                           id="method_coverage_area" value="coverage_area"
                                                           {{ old('send_method') == 'coverage_area' ? 'checked' : '' }}>
                                                    <label class="form-check-label fw-semibold" for="method_coverage_area">
                                                        <i class="fas fa-map-marked-alt text-warning me-2"></i>
                                                        Coverage Area
                                                    </label>
                                                </div>
                                                <small class="text-muted">Berdasarkan wilayah coverage</small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="card border">
                                            <div class="card-body p-3">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="send_method" 
                                                           id="method_odp" value="odp"
                                                           {{ old('send_method') == 'odp' ? 'checked' : '' }}>
                                                    <label class="form-check-label fw-semibold" for="method_odp">
                                                        <i class="fas fa-network-wired text-primary me-2"></i>
                                                        Berdasarkan ODP
                                                    </label>
                                                </div>
                                                <small class="text-muted">Pelanggan di ODP tertentu</small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="card border">
                                            <div class="card-body p-3">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="send_method" 
                                                           id="method_odc" value="odc"
                                                           {{ old('send_method') == 'odc' ? 'checked' : '' }}>
                                                    <label class="form-check-label fw-semibold" for="method_odc">
                                                        <i class="fas fa-sitemap text-danger me-2"></i>
                                                        Berdasarkan ODC
                                                    </label>
                                                </div>
                                                <small class="text-muted">Pelanggan di ODC tertentu</small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="card border">
                                            <div class="card-body p-3">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="send_method" 
                                                           id="method_selected" value="selected_contacts"
                                                           {{ old('send_method') == 'selected_contacts' ? 'checked' : '' }}>
                                                    <label class="form-check-label fw-semibold" for="method_selected">
                                                        <i class="fas fa-check-square text-purple me-2"></i>
                                                        Kontak Terpilih
                                                    </label>
                                                </div>
                                                <small class="text-muted">Pilih kontak secara manual</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Method Specific Fields -->
                        <!-- Individual Phone -->
                        <div class="row mb-4 method-field" id="field_individual" style="display: none;">
                            <div class="col-md-8">
                                <label for="individual_contact" class="form-label fw-semibold">
                                    <i class="fas fa-phone me-2 text-primary"></i>
                                    Pilih Kontak Pelanggan
                                </label>
                                <div class="input-group">
                                    <select class="form-select" id="individual_contact" name="individual_contact">
                                        <option value="">-- Pilih Kontak Pelanggan --</option>
                                        <!-- Options will be loaded via AJAX -->
                                    </select>
                                    <button type="button" class="btn btn-outline-secondary" id="btn-refresh-contacts" title="Refresh Kontak">
                                        <i class="fas fa-sync-alt"></i>
                                    </button>
                                </div>
                                <div class="form-text">
                                    <i class="fas fa-info-circle me-1"></i>
                                    Pilih dari daftar pelanggan yang memiliki nomor WhatsApp
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">
                                    <i class="fas fa-edit me-2 text-primary"></i>
                                    Input Manual (Opsional)
                                </label>
                                <input type="text" class="form-control" id="individual_phone_manual" name="individual_phone" 
                                       value="{{ old('individual_phone') }}" placeholder="Contoh: 08123456789">
                                <div class="form-text">
                                    Kosongkan jika menggunakan dropdown
                                </div>
                            </div>
                        </div>

                        <!-- Coverage Area -->
                        <div class="row mb-4 method-field" id="field_coverage_area" style="display: none;">
                            <div class="col-md-6">
                                <label for="coverage_area_id" class="form-label fw-semibold">
                                    <i class="fas fa-map-marked-alt me-2 text-primary"></i>
                                    Pilih Coverage Area
                                </label>
                                <select class="form-select" id="coverage_area_id" name="coverage_area_id">
                                    <option value="">-- Pilih Coverage Area --</option>
                                    @foreach($coverageAreas as $area)
                                        <option value="{{ $area->id }}" {{ old('coverage_area_id') == $area->id ? 'selected' : '' }}>
                                            {{ $area->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <!-- ODP -->
                        <div class="row mb-4 method-field" id="field_odp" style="display: none;">
                            <div class="col-md-6">
                                <label for="odp_id" class="form-label fw-semibold">
                                    <i class="fas fa-network-wired me-2 text-primary"></i>
                                    Pilih ODP
                                </label>
                                <select class="form-select" id="odp_id" name="odp_id">
                                    <option value="">-- Pilih ODP --</option>
                                    @foreach($odps as $odp)
                                        <option value="{{ $odp->id }}" {{ old('odp_id') == $odp->id ? 'selected' : '' }}>
                                            {{ $odp->nama_odp }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <!-- ODC -->
                        <div class="row mb-4 method-field" id="field_odc" style="display: none;">
                            <div class="col-md-6">
                                <label for="odc_id" class="form-label fw-semibold">
                                    <i class="fas fa-sitemap me-2 text-primary"></i>
                                    Pilih ODC
                                </label>
                                <select class="form-select" id="odc_id" name="odc_id">
                                    <option value="">-- Pilih ODC --</option>
                                    @foreach($odcs as $odc)
                                        <option value="{{ $odc->id }}" {{ old('odc_id') == $odc->id ? 'selected' : '' }}>
                                            {{ $odc->nama_odc }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <!-- Selected Contacts -->
                        <div class="row mb-4 method-field" id="field_selected" style="display: none;">
                            <div class="col-12">
                                <label class="form-label fw-semibold">
                                    <i class="fas fa-check-square me-2 text-primary"></i>
                                    Pilih Kontak
                                </label>
                                <div class="card border">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                            <div>
                                                <button type="button" class="btn btn-outline-primary btn-sm" id="btn-select-all">
                                                    <i class="fas fa-check-double me-2"></i>Pilih Semua
                                                </button>
                                                <button type="button" class="btn btn-outline-secondary btn-sm" id="btn-deselect-all">
                                                    <i class="fas fa-times me-2"></i>Batal Semua
                                                </button>
                                            </div>
                                            <div class="text-muted small">
                                                <span id="selected-count">0</span> kontak dipilih
                                            </div>
                                        </div>
                                        <div id="contacts-list" class="contacts-scroll-container" style="max-height: 300px; overflow-y: auto; border: 1px solid #e9ecef; border-radius: 0.375rem; padding: 0.75rem; background-color: #f8f9fa;">
                                            <!-- Contacts will be loaded here -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- WhatsApp Gateway -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label for="whatsapp_gateway_id" class="form-label fw-semibold">
                                    <i class="fab fa-whatsapp me-2 text-success"></i>
                                    WhatsApp Gateway <span class="text-danger">*</span>
                                </label>
                                <select class="form-select @error('whatsapp_gateway_id') is-invalid @enderror" 
                                        id="whatsapp_gateway_id" name="whatsapp_gateway_id" required>
                                    <option value="">-- Pilih Gateway --</option>
                                    @foreach($whatsappGateways as $gateway)
                                        <option value="{{ $gateway->id }}" {{ old('whatsapp_gateway_id') == $gateway->id ? 'selected' : '' }}>
                                            {{ $gateway->nama_gateway }} - {{ $gateway->sender_number }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('whatsapp_gateway_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="delay_seconds" class="form-label fw-semibold">
                                    <i class="fas fa-clock me-2 text-primary"></i>
                                    Jeda Antar Pesan (detik) <span class="text-danger">*</span>
                                </label>
                                <select class="form-select @error('delay_seconds') is-invalid @enderror" 
                                        id="delay_seconds" name="delay_seconds" required>
                                    <option value="3" {{ old('delay_seconds', 5) == 3 ? 'selected' : '' }}>3 detik (Cepat)</option>
                                    <option value="5" {{ old('delay_seconds', 5) == 5 ? 'selected' : '' }}>5 detik (Normal)</option>
                                    <option value="10" {{ old('delay_seconds', 5) == 10 ? 'selected' : '' }}>10 detik (Aman)</option>
                                    <option value="15" {{ old('delay_seconds', 5) == 15 ? 'selected' : '' }}>15 detik (Sangat Aman)</option>
                                    <option value="30" {{ old('delay_seconds', 5) == 30 ? 'selected' : '' }}>30 detik (Ultra Aman)</option>
                                </select>
                                @error('delay_seconds')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">
                                    <i class="fas fa-info-circle me-1"></i>
                                    Jeda lebih lama mengurangi risiko spam
                                </div>
                            </div>
                        </div>

                        <!-- Schedule -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label for="scheduled_at" class="form-label fw-semibold">
                                    <i class="fas fa-calendar-alt me-2 text-primary"></i>
                                    Jadwal Pengiriman (Opsional)
                                </label>
                                <input type="datetime-local" class="form-control @error('scheduled_at') is-invalid @enderror" 
                                       id="scheduled_at" name="scheduled_at" value="{{ old('scheduled_at') }}">
                                @error('scheduled_at')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">
                                    Kosongkan untuk kirim sekarang
                                </div>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="row">
                            <div class="col-12">
                                <div class="d-flex justify-content-end gap-3">
                                    <a href="{{ route('kirim-pesan.index') }}" class="btn btn-outline-secondary px-4">
                                        <i class="fas fa-times me-2"></i>
                                        Batal
                                    </a>
                                    <button type="submit" class="btn btn-primary px-4" id="btn-submit">
                                        <i class="fas fa-paper-plane me-2"></i>
                                        Kirim Pesan
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Preview & Info Panel -->
        <div class="col-lg-4">
            <!-- Preview -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-info text-white">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-eye me-2"></i>
                        Preview Pesan
                    </h6>
                </div>
                <div class="card-body">
                    <div class="border rounded p-3 bg-light">
                        <div class="text-muted small mb-2">
                            <i class="fab fa-whatsapp text-success me-1"></i>
                            WhatsApp Preview
                        </div>
                        <div id="message-preview" class="text-dark">
                            <em class="text-muted">Tulis pesan untuk melihat preview...</em>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recipients Info -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-success text-white">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-users me-2"></i>
                        Info Penerima
                    </h6>
                </div>
                <div class="card-body">
                    <div id="recipients-info">
                        <div class="text-center text-muted">
                            <i class="fas fa-info-circle fa-2x mb-2"></i>
                            <p class="mb-0">Pilih metode pengiriman untuk melihat jumlah penerima</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tips -->
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-warning text-dark">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-lightbulb me-2"></i>
                        Tips Anti-Spam
                    </h6>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled mb-0">
                        <li class="mb-2">
                            <i class="fas fa-check text-success me-2"></i>
                            <small>Gunakan jeda minimal 5 detik</small>
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-check text-success me-2"></i>
                            <small>Hindari pesan yang terlalu promosi</small>
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-check text-success me-2"></i>
                            <small>Personalisasi dengan nama pelanggan</small>
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-check text-success me-2"></i>
                            <small>Batasi maksimal 100 pesan per jam</small>
                        </li>
                        <li class="mb-0">
                            <i class="fas fa-check text-success me-2"></i>
                            <small>Gunakan gateway yang berbeda untuk volume besar</small>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Template Modal -->
<div class="modal fade" id="templateModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Pilih Template Pesan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="templates-list">
                    <!-- Templates will be loaded here -->
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.card {
    transition: all 0.3s ease;
}

.form-check-input:checked + .form-check-label {
    color: #0d6efd;
}

.method-field {
    animation: fadeIn 0.3s ease-in-out;
}

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

.contact-item {
    transition: all 0.2s ease;
}

.contact-item:hover {
    background-color: #f8f9fa;
}

#message-preview {
    white-space: pre-wrap;
    word-wrap: break-word;
    min-height: 60px;
}

.text-purple {
    color: #6f42c1 !important;
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const messageTextarea = document.getElementById('message');
    const messagePreview = document.getElementById('message-preview');
    const charCount = document.getElementById('char-count');
    const methodRadios = document.querySelectorAll('input[name="send_method"]');
    const recipientsInfo = document.getElementById('recipients-info');
    
    // Debug: Check if dropdown elements exist and have data
    console.log('Coverage Area dropdown:', document.getElementById('coverage_area_id'));
    console.log('Coverage Area options:', document.getElementById('coverage_area_id')?.options.length);
    console.log('ODP dropdown:', document.getElementById('odp_id'));
    console.log('ODP options:', document.getElementById('odp_id')?.options.length);
    console.log('ODC dropdown:', document.getElementById('odc_id'));
    console.log('ODC options:', document.getElementById('odc_id')?.options.length);

    // Character counter and preview
    messageTextarea.addEventListener('input', function() {
        const text = this.value;
        charCount.textContent = text.length;
        
        if (text.length > 1000) {
            charCount.parentElement.classList.add('text-danger');
        } else {
            charCount.parentElement.classList.remove('text-danger');
        }
        
        // Update preview
        if (text.trim()) {
            messagePreview.innerHTML = text.replace(/\[NAMA\]/g, '<strong>John Doe</strong>');
        } else {
            messagePreview.innerHTML = '<em class="text-muted">Tulis pesan untuk melihat preview...</em>';
        }
    });

    // Method selection
    methodRadios.forEach(radio => {
        radio.addEventListener('change', function() {
            console.log('Method changed to:', this.value);
            
            // Hide all method fields
            document.querySelectorAll('.method-field').forEach(field => {
                field.style.display = 'none';
            });
            
            // Show selected method field
            const selectedField = document.getElementById('field_' + this.value);
            console.log('Selected field element:', selectedField);
            if (selectedField) {
                selectedField.style.display = 'block';
                console.log('Field shown for:', this.value);
            } else {
                console.log('Field not found for:', this.value);
            }
            
            // Load individual contacts if individual method is selected
            if (this.value === 'individual') {
                loadIndividualContacts();
            }
            
            // Update recipients info
            updateRecipientsInfo(this.value);
        });
    });

    // Load templates
    document.getElementById('btn-load-template').addEventListener('click', function() {
        loadTemplates();
    });

    // Contact selection for selected_contacts method
    document.addEventListener('change', function(e) {
        if (e.target.name === 'coverage_area_id' || e.target.name === 'odp_id' || e.target.name === 'odc_id') {
            updateRecipientsInfo(document.querySelector('input[name="send_method"]:checked')?.value);
        }
    });

    // Individual contact selection
    document.getElementById('individual_contact').addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        if (selectedOption.value) {
            // Clear manual input when dropdown is selected
            document.getElementById('individual_phone_manual').value = '';
            // Update recipients info
            updateRecipientsInfo('individual');
        }
    });

    // Manual phone input
    document.getElementById('individual_phone_manual').addEventListener('input', function() {
        if (this.value.trim()) {
            // Clear dropdown when manual input is used
            document.getElementById('individual_contact').value = '';
        }
    });

    // Refresh contacts button
    document.getElementById('btn-refresh-contacts').addEventListener('click', function() {
        loadIndividualContacts();
    });

    // Coverage Area dropdown change
    document.getElementById('coverage_area_id').addEventListener('change', function() {
        const checkedMethod = document.querySelector('input[name="send_method"]:checked');
        if (checkedMethod && checkedMethod.value === 'coverage_area') {
            updateRecipientsInfo('coverage_area');
        }
    });

    // ODP dropdown change
    document.getElementById('odp_id').addEventListener('change', function() {
        const checkedMethod = document.querySelector('input[name="send_method"]:checked');
        if (checkedMethod && checkedMethod.value === 'odp') {
            updateRecipientsInfo('odp');
        }
    });

    // ODC dropdown change
    document.getElementById('odc_id').addEventListener('change', function() {
        const checkedMethod = document.querySelector('input[name="send_method"]:checked');
        if (checkedMethod && checkedMethod.value === 'odc') {
            updateRecipientsInfo('odc');
        }
    });

    // Initialize if there's old input
    const checkedMethod = document.querySelector('input[name="send_method"]:checked');
    if (checkedMethod) {
        checkedMethod.dispatchEvent(new Event('change'));
    }
});

function updateRecipientsInfo(method) {
    const recipientsInfo = document.getElementById('recipients-info');
    
    if (!method) {
        recipientsInfo.innerHTML = `
            <div class="text-center text-muted">
                <i class="fas fa-info-circle fa-2x mb-2"></i>
                <p class="mb-0">Pilih metode pengiriman untuk melihat jumlah penerima</p>
            </div>
        `;
        return;
    }

    // For individual method, check if contact is selected
    if (method === 'individual') {
        const selectedContact = document.getElementById('individual_contact').value;
        const manualPhone = document.getElementById('individual_phone_manual').value.trim();
        
        if (selectedContact || manualPhone) {
            let contactInfo = '';
            
            if (selectedContact) {
                // Get selected contact name from dropdown
                const selectedOption = document.getElementById('individual_contact').selectedOptions[0];
                const contactName = selectedOption ? selectedOption.getAttribute('data-name') : 'Kontak Terpilih';
                contactInfo = `
                    <div class="mt-3">
                        <h6 class="text-muted mb-2">Penerima:</h6>
                        <div class="text-center">
                            <small class="text-muted">
                                <i class="fas fa-user me-1"></i>
                                ${contactName}
                            </small>
                            <br>
                            <small class="text-muted">
                                <i class="fas fa-phone me-1"></i>
                                ${selectedContact}
                            </small>
                        </div>
                    </div>
                `;
            } else if (manualPhone) {
                contactInfo = `
                    <div class="mt-3">
                        <h6 class="text-muted mb-2">Penerima:</h6>
                        <div class="text-center">
                            <small class="text-muted">
                                <i class="fas fa-phone me-1"></i>
                                ${manualPhone}
                            </small>
                        </div>
                    </div>
                `;
            }
            
            recipientsInfo.innerHTML = `
                <div class="text-center">
                    <div class="h4 text-primary mb-2">1</div>
                    <p class="mb-0">Kontak akan menerima pesan</p>
                </div>
                ${contactInfo}
            `;
        } else {
            recipientsInfo.innerHTML = `
                <div class="text-center text-muted">
                    <i class="fas fa-user fa-2x mb-2"></i>
                    <p class="mb-0">Pilih kontak atau masukkan nomor manual</p>
                </div>
            `;
        }
        return;
    }

    // Show loading
    recipientsInfo.innerHTML = `
        <div class="text-center">
            <div class="spinner-border spinner-border-sm text-primary" role="status"></div>
            <p class="mt-2 mb-0">Memuat data penerima...</p>
        </div>
    `;

    // Prepare data for AJAX request
    let requestData = { method: method };
    
    if (method === 'coverage_area') {
        const coverageAreaId = document.getElementById('coverage_area_id').value;
        if (!coverageAreaId) {
            recipientsInfo.innerHTML = `
                <div class="text-center text-warning">
                    <i class="fas fa-info-circle fa-2x mb-2"></i>
                    <p class="mb-0">Pilih Coverage Area terlebih dahulu</p>
                </div>
            `;
            return;
        }
        requestData.coverage_area_id = coverageAreaId;
    } else if (method === 'odp') {
        const odpId = document.getElementById('odp_id').value;
        if (!odpId) {
            recipientsInfo.innerHTML = `
                <div class="text-center text-warning">
                    <i class="fas fa-info-circle fa-2x mb-2"></i>
                    <p class="mb-0">Pilih ODP terlebih dahulu</p>
                </div>
            `;
            return;
        }
        requestData.odp_id = odpId;
    } else if (method === 'odc') {
        const odcId = document.getElementById('odc_id').value;
        if (!odcId) {
            recipientsInfo.innerHTML = `
                <div class="text-center text-warning">
                    <i class="fas fa-info-circle fa-2x mb-2"></i>
                    <p class="mb-0">Pilih ODC terlebih dahulu</p>
                </div>
            `;
            return;
        }
        requestData.odc_id = odcId;
    }

    // Make AJAX request
    fetch('{{ route("api.kirim-pesan.get-contacts") }}?' + new URLSearchParams(requestData), {
        method: 'GET',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        },
        credentials: 'same-origin'
    })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                let contactsListHtml = '';
                
                // Show contact names if there are contacts
                if (data.contacts && data.contacts.length > 0) {
                    contactsListHtml = `
                        <div class="mt-3">
                            <h6 class="text-muted mb-2">Daftar Penerima:</h6>
                            <div class="contacts-scroll-container" style="max-height: 200px; overflow-y: auto; border: 1px solid #e9ecef; border-radius: 0.375rem; padding: 0.75rem; background-color: #f8f9fa;">
                                <div class="row">
                                    ${data.contacts.map(contact => `
                                        <div class="col-md-6 mb-1">
                                            <div class="contact-item-scroll">
                                                <small class="text-muted">
                                                    <i class="fas fa-user me-1 text-primary"></i>
                                                    ${contact.nama_pelanggan}
                                                </small>
                                            </div>
                                        </div>
                                    `).join('')}
                                </div>
                            </div>
                            <div class="mt-2 text-center">
                                <small class="text-muted">
                                    <i class="fas fa-info-circle me-1"></i>
                                    Scroll untuk melihat semua kontak
                                </small>
                            </div>
                        </div>
                    `;
                }
                
                recipientsInfo.innerHTML = `
                    <div class="text-center">
                        <div class="h4 text-primary mb-2">${data.total}</div>
                        <p class="mb-0">Kontak akan menerima pesan</p>
                    </div>
                    ${contactsListHtml}
                `;
                
                // Load contacts for selected_contacts method
                if (method === 'selected_contacts') {
                    loadContactsList(data.contacts);
                }
            } else {
                recipientsInfo.innerHTML = `
                    <div class="text-center text-danger">
                        <i class="fas fa-exclamation-triangle fa-2x mb-2"></i>
                        <p class="mb-0">Gagal memuat data penerima</p>
                    </div>
                `;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            recipientsInfo.innerHTML = `
                <div class="text-center text-danger">
                    <i class="fas fa-exclamation-triangle fa-2x mb-2"></i>
                    <p class="mb-0">Terjadi kesalahan</p>
                </div>
            `;
        });
}

function loadIndividualContacts() {
    const contactSelect = document.getElementById('individual_contact');
    const refreshBtn = document.getElementById('btn-refresh-contacts');
    
    // Show loading state
    refreshBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
    refreshBtn.disabled = true;
    
    // Clear existing options except the first one
    contactSelect.innerHTML = '<option value="">-- Memuat kontak... --</option>';
    
    // Make AJAX request to get individual contacts
    fetch('{{ route("api.kirim-pesan.get-contacts") }}?method=individual_dropdown', {
        method: 'GET',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        credentials: 'same-origin'
    })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                // Clear and rebuild options
                contactSelect.innerHTML = '<option value="">-- Pilih Kontak Pelanggan --</option>';
                
                data.contacts.forEach(contact => {
                    const option = document.createElement('option');
                    option.value = contact.whatsapp_number;
                    option.textContent = `${contact.nama_pelanggan} - ${contact.whatsapp_number}`;
                    option.setAttribute('data-name', contact.nama_pelanggan);
                    contactSelect.appendChild(option);
                });
                
                if (data.contacts.length === 0) {
                    contactSelect.innerHTML = '<option value="">-- Tidak ada kontak dengan WhatsApp --</option>';
                }
            } else {
                contactSelect.innerHTML = '<option value="">-- Gagal memuat kontak --</option>';
                console.error('Server error:', data.message || 'Unknown error');
            }
        })
        .catch(error => {
            console.error('Error loading contacts:', error);
            contactSelect.innerHTML = '<option value="">-- Error memuat kontak --</option>';
        })
        .finally(() => {
            // Reset button state
            refreshBtn.innerHTML = '<i class="fas fa-sync-alt"></i>';
            refreshBtn.disabled = false;
        });
}

function loadContactsList(contacts) {
    const contactsList = document.getElementById('contacts-list');
    const selectedCount = document.getElementById('selected-count');
    
    if (contacts.length === 0) {
        contactsList.innerHTML = '<p class="text-muted text-center">Tidak ada kontak ditemukan</p>';
        return;
    }
    
    let html = '';
    contacts.forEach(contact => {
        html += `
            <div class="contact-item contact-item-scroll border-bottom py-2">
                <div class="form-check">
                    <input class="form-check-input contact-checkbox" type="checkbox" 
                           name="selected_contacts[]" value="${contact.id}" id="contact_${contact.id}">
                    <label class="form-check-label w-100" for="contact_${contact.id}">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <div class="fw-semibold">
                                    <i class="fas fa-user me-1 text-primary"></i>
                                    ${contact.nama_pelanggan}
                                </div>
                                <div class="text-muted small">
                                    <i class="fas fa-phone me-1"></i>
                                    ${contact.no_telp}
                                </div>
                            </div>
                            <div class="text-muted small">${contact.alamat || ''}</div>
                        </div>
                    </label>
                </div>
            </div>
        `;
    });
    
    contactsList.innerHTML = html;
    
    // Update selected count
    function updateSelectedCount() {
        const checked = document.querySelectorAll('.contact-checkbox:checked').length;
        selectedCount.textContent = checked;
    }
    
    // Add event listeners
    document.querySelectorAll('.contact-checkbox').forEach(checkbox => {
        checkbox.addEventListener('change', updateSelectedCount);
    });
    
    // Select all / Deselect all
    document.getElementById('btn-select-all').addEventListener('click', function() {
        document.querySelectorAll('.contact-checkbox').forEach(checkbox => {
            checkbox.checked = true;
        });
        updateSelectedCount();
    });
    
    document.getElementById('btn-deselect-all').addEventListener('click', function() {
        document.querySelectorAll('.contact-checkbox').forEach(checkbox => {
            checkbox.checked = false;
        });
        updateSelectedCount();
    });
}

function loadTemplates() {
    fetch('{{ route("api.kirim-pesan.get-templates") }}')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showTemplatesModal(data.templates);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Gagal memuat template');
        });
}

function showTemplatesModal(templates) {
    const templatesList = document.getElementById('templates-list');
    
    if (templates.length === 0) {
        templatesList.innerHTML = '<p class="text-muted text-center">Tidak ada template tersedia</p>';
    } else {
        let html = '';
        templates.forEach(template => {
            html += `
                <div class="card mb-3">
                    <div class="card-body">
                        <h6 class="card-title">${template.nama_template}</h6>
                        <p class="card-text">${template.isi_pesan}</p>
                        <button type="button" class="btn btn-primary btn-sm" 
                                onclick="useTemplate('${template.isi_pesan.replace(/'/g, "\\'")}')">
                            Gunakan Template
                        </button>
                    </div>
                </div>
            `;
        });
        templatesList.innerHTML = html;
    }
    
    new bootstrap.Modal(document.getElementById('templateModal')).show();
}

function useTemplate(message) {
    document.getElementById('message').value = message;
    document.getElementById('message').dispatchEvent(new Event('input'));
    bootstrap.Modal.getInstance(document.getElementById('templateModal')).hide();
}
</script>
@endpush