@extends('website.layout')

@section('title', 'Beranda - ' . ($perusahaan->perusahaan ?? 'ISP Provider'))
@section('description', $perusahaan->moto ?? 'Layanan Internet Terbaik dan Terpercaya')

@section('content')
<!-- Hero Section -->
<section class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 hero-content" data-aos="fade-right">
                <h1 class="display-4 fw-bold mb-4">
                    {{ $perusahaan->moto ?? 'Internet Cepat & Stabil untuk Semua' }}
                </h1>
                <p class="lead mb-4">
                    Nikmati koneksi internet berkualitas tinggi dengan layanan terbaik dari 
                    {{ $perusahaan->perusahaan ?? 'kami' }}. PPPoE dan Hotspot tersedia untuk kebutuhan Anda.
                </p>
                <div class="d-flex gap-3 flex-wrap">
                    <a href="{{ route('website.kontak') }}" class="btn btn-primary btn-lg">
                        <i class="fas fa-phone me-2"></i> Hubungi Kami
                    </a>
                    <a href="#layanan" class="btn btn-outline-light btn-lg">
                        <i class="fas fa-info-circle me-2"></i> Lihat Layanan
                    </a>
                </div>
            </div>
            <div class="col-lg-6 text-center" data-aos="fade-left">
                <div class="hero-image">
                    <i class="fas fa-wifi" style="font-size: 15rem; opacity: 0.8;"></i>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Invoice Search Section -->
<section class="py-5 bg-white">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="text-center mb-4" data-aos="fade-up">
                    <h3 class="mb-3">
                        <i class="fas fa-search me-2 text-primary"></i>
                        Cek Invoice Anda
                    </h3>
                    <p class="text-muted">
                        Masukkan nomor WhatsApp atau nomor layanan untuk melihat invoice Anda
                    </p>
                </div>
                
                <div class="card shadow-sm" data-aos="fade-up" data-aos-delay="100">
                    <div class="card-body p-4">
                        <form id="invoiceSearchForm">
                            <div class="row g-3">
                                <div class="col-md-8">
                                    <div class="form-group">
                                        <label for="searchInput" class="form-label">
                                            <i class="fas fa-phone me-1"></i>
                                            Nomor WhatsApp atau Nomor Layanan
                                        </label>
                                        <input type="text" 
                                               class="form-control form-control-lg" 
                                               id="searchInput" 
                                               name="search"
                                               placeholder="Contoh: 081234567890 atau LAY001"
                                               required>
                                        <div class="form-text">
                                            Masukkan nomor WhatsApp (08xxx) atau nomor layanan pelanggan
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label d-block">&nbsp;</label>
                                    <button type="submit" class="btn btn-primary btn-lg w-100" id="searchBtn">
                                        <i class="fas fa-search me-2"></i>
                                        <span class="btn-text">Cari Invoice</span>
                                        <span class="spinner-border spinner-border-sm d-none" role="status"></span>
                                    </button>
                                </div>
                            </div>
                        </form>
                        
                        <!-- Search Results -->
                        <div id="searchResults" class="mt-4 d-none">
                            <hr>
                            <h5 class="mb-3">
                                <i class="fas fa-file-invoice me-2"></i>
                                Hasil Pencarian
                            </h5>
                            <div id="resultsContainer"></div>
                        </div>
                        
                        <!-- No Results -->
                        <div id="noResults" class="mt-4 d-none">
                            <hr>
                            <div class="text-center py-4">
                                <i class="fas fa-search text-muted" style="font-size: 3rem; opacity: 0.5;"></i>
                                <h5 class="mt-3 text-muted">Invoice Tidak Ditemukan</h5>
                                <p class="text-muted">
                                    Pastikan nomor WhatsApp atau nomor layanan yang Anda masukkan benar.
                                    <br>Atau hubungi customer service untuk bantuan.
                                </p>
                                @if($perusahaan && $perusahaan->wa_owner)
                                <a href="https://wa.me/{{ $perusahaan->wa_owner }}?text=Halo, saya butuh bantuan untuk mengecek invoice saya" 
                                   target="_blank" class="btn btn-outline-primary">
                                    <i class="fab fa-whatsapp me-2"></i>Hubungi CS
                                </a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@if($layananPppoes->count() > 0 || $layananHotspots->count() > 0)
<!-- Paket Internet Section -->
<section id="layanan" class="py-5 bg-light-custom">
    <div class="container">
        <div class="section-title" data-aos="fade-up">
            <h2>Paket Internet</h2>
            <p>Pilih paket internet yang sesuai dengan kebutuhan Anda</p>
        </div>
        
        @if($layananPppoes->count() > 0)
        <!-- PPPoE Packages -->
        <div class="mb-5">
            <div class="service-header" data-aos="fade-up">
                <div class="d-flex align-items-center">
                    <div class="service-icon me-3" style="width: 60px; height: 60px; font-size: 1.5rem;">
                        <i class="fas fa-ethernet"></i>
                    </div>
                    <div>
                        <h3 class="mb-1">Internet PPPoE</h3>
                        <p class="mb-0">Koneksi internet stabil dengan teknologi PPPoE untuk rumah dan kantor</p>
                    </div>
                </div>
            </div>
            
            <div class="row">
                @foreach($layananPppoes as $paket)
                <div class="col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="{{ $loop->iteration * 100 }}">
                    <div class="package-card {{ $paket->is_featured ? 'featured' : '' }}">
                        @if($paket->is_featured)
                            <div class="featured-badge">
                                <i class="fas fa-star"></i> Terpopuler
                            </div>
                        @endif
                        
                        <div class="package-content">
                            <h4 class="package-name">{{ $paket->nama_layanan }}</h4>
                            <div class="package-speed">
                                {{ $paket->kecepatan_download }}
                                @if($paket->kecepatan_upload != $paket->kecepatan_download)
                                    /{{ $paket->kecepatan_upload }}
                                @endif
                                Mbps
                            </div>
                            <div class="package-price">
                                <span class="price">Rp {{ number_format($paket->harga_bulan, 0, ',', '.') }}</span>
                                <span class="period">/bulan</span>
                            </div>
                            
                            @if($paket->fitur_tambahan && count($paket->fitur_tambahan) > 0)
                                <ul class="package-features">
                                    @foreach($paket->fitur_tambahan as $fitur)
                                        <li><i class="fas fa-check text-success me-2"></i>{{ $fitur }}</li>
                                    @endforeach
                                </ul>
                            @else
                                <ul class="package-features">
                                    <li><i class="fas fa-check me-2"></i>Unlimited Quota</li>
                                    <li><i class="fas fa-check me-2"></i>24/7 Support</li>
                                    <li><i class="fas fa-check me-2"></i>Free Installation</li>
                                    <li><i class="fas fa-check me-2"></i>Static IP Available</li>
                                    <li><i class="fas fa-check me-2"></i>No Fair Usage Policy</li>
                                </ul>
                            @endif
                            
                            @if($paket->keterangan)
                                <p class="package-description">{{ Str::limit($paket->keterangan, 100) }}</p>
                            @endif
                            
                            <div class="package-actions">
                                @if($perusahaan && $perusahaan->wa_owner)
                                    <a href="https://wa.me/{{ $perusahaan->wa_owner }}?text=Halo, saya tertarik dengan paket {{ $paket->nama_layanan }} ({{ $paket->kecepatan_download }} Mbps - Rp {{ number_format($paket->harga_bulan, 0, ',', '.') }}/bulan). Mohon info lebih lanjut." 
                                       target="_blank" class="btn btn-primary w-100">
                                        <i class="fab fa-whatsapp me-2"></i>Berlangganan Sekarang
                                    </a>
                                @else
                                    <a href="{{ route('website.kontak') }}" class="btn btn-primary w-100">
                                        <i class="fas fa-phone me-2"></i>Hubungi Kami
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endif
        
        @if($layananHotspots->count() > 0)
        <!-- Hotspot Packages -->
        <div class="mb-5">
            <div class="service-header" data-aos="fade-up">
                <div class="d-flex align-items-center">
                    <div class="service-icon me-3" style="width: 60px; height: 60px; font-size: 1.5rem;">
                        <i class="fas fa-wifi"></i>
                    </div>
                    <div>
                        <h3 class="mb-1">Internet Hotspot</h3>
                        <p class="mb-0">Akses internet praktis dengan sistem voucher untuk berbagai kebutuhan</p>
                    </div>
                </div>
            </div>
            
            <div class="row">
                @foreach($layananHotspots as $paket)
                <div class="col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="{{ $loop->iteration * 100 }}">
                    <div class="package-card {{ $paket->is_featured ? 'featured' : '' }}">
                        @if($paket->is_featured)
                            <div class="featured-badge">
                                <i class="fas fa-star"></i> Terpopuler
                            </div>
                        @endif
                        
                        <div class="package-content">
                            <h4 class="package-name">{{ $paket->nama_paket }}</h4>
                            <div class="package-speed">
                                {{ $paket->bandwidth_download }} Mbps
                            </div>
                            <div class="package-price">
                                <span class="price">Rp {{ number_format($paket->harga_bulanan, 0, ',', '.') }}</span>
                                <span class="period">/{{ $paket->tipe_billing }}</span>
                            </div>
                            
                            <ul class="package-features">
                                <li><i class="fas fa-check me-2"></i>{{ $paket->kuota_formatted }}</li>
                                <li><i class="fas fa-check me-2"></i>Masa Aktif {{ $paket->masa_aktif }} Hari</li>
                                <li><i class="fas fa-check me-2"></i>Max {{ $paket->max_device }} Device</li>
                                <li><i class="fas fa-check me-2"></i>Sistem Voucher</li>
                                @if($paket->fair_usage_policy)
                                    <li><i class="fas fa-info-circle me-2"></i>FUP {{ $paket->fup_threshold }}GB</li>
                                @else
                                    <li><i class="fas fa-check me-2"></i>No Fair Usage Policy</li>
                                @endif
                            </ul>
                            
                            @if($paket->deskripsi)
                                <p class="package-description">{{ Str::limit($paket->deskripsi, 100) }}</p>
                            @endif
                            
                            <div class="package-actions">
                                @if($perusahaan && $perusahaan->wa_owner)
                                    <a href="https://wa.me/{{ $perusahaan->wa_owner }}?text=Halo, saya tertarik dengan paket {{ $paket->nama_paket }} ({{ $paket->bandwidth_download }} Mbps - Rp {{ number_format($paket->harga_bulanan, 0, ',', '.') }}/{{ $paket->tipe_billing }}). Mohon info lebih lanjut." 
                                       target="_blank" class="btn btn-primary w-100">
                                        <i class="fab fa-whatsapp me-2"></i>Berlangganan Sekarang
                                    </a>
                                @else
                                    <a href="{{ route('website.kontak') }}" class="btn btn-primary w-100">
                                        <i class="fas fa-phone me-2"></i>Hubungi Kami
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endif
    </div>
</section>
@else
<!-- Default Layanan Section (jika belum ada data) -->
<section id="layanan" class="py-5 bg-light-custom">
    <div class="container">
        <div class="section-title" data-aos="fade-up">
            <h2>Layanan Kami</h2>
            <p>Kami menyediakan berbagai layanan internet berkualitas untuk memenuhi kebutuhan Anda</p>
        </div>
        
        <div class="row">
            <div class="col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="100">
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-ethernet"></i>
                    </div>
                    <h4 class="mb-3">Internet PPPoE</h4>
                    <p class="text-muted">
                        Koneksi internet stabil dengan teknologi PPPoE. Cocok untuk rumah dan kantor 
                        yang membutuhkan bandwidth dedicated.
                    </p>
                    <ul class="list-unstyled text-start">
                        <li><i class="fas fa-check text-success me-2"></i> Speed hingga 100 Mbps</li>
                        <li><i class="fas fa-check text-success me-2"></i> Unlimited Quota</li>
                        <li><i class="fas fa-check text-success me-2"></i> 24/7 Support</li>
                    </ul>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="200">
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-wifi"></i>
                    </div>
                    <h4 class="mb-3">Internet Hotspot</h4>
                    <p class="text-muted">
                        Akses internet praktis dengan sistem voucher. Ideal untuk cafe, hotel, 
                        dan tempat umum lainnya.
                    </p>
                    <ul class="list-unstyled text-start">
                        <li><i class="fas fa-check text-success me-2"></i> Sistem Voucher</li>
                        <li><i class="fas fa-check text-success me-2"></i> Easy Management</li>
                        <li><i class="fas fa-check text-success me-2"></i> Multiple Device</li>
                    </ul>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="300">
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-tools"></i>
                    </div>
                    <h4 class="mb-3">Instalasi & Maintenance</h4>
                    <p class="text-muted">
                        Layanan instalasi profesional dan maintenance berkala untuk menjaga 
                        kualitas koneksi internet Anda.
                    </p>
                    <ul class="list-unstyled text-start">
                        <li><i class="fas fa-check text-success me-2"></i> Instalasi Gratis</li>
                        <li><i class="fas fa-check text-success me-2"></i> Maintenance Rutin</li>
                        <li><i class="fas fa-check text-success me-2"></i> Teknisi Berpengalaman</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
@endif

<!-- Statistics Section -->
<section class="py-5">
    <div class="container">
        <div class="row text-center">
            <div class="col-lg-3 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="100">
                <div class="stat-item">
                    <h2 class="display-4 fw-bold text-primary mb-2">500+</h2>
                    <p class="text-muted">Pelanggan Aktif</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="200">
                <div class="stat-item">
                    <h2 class="display-4 fw-bold text-primary mb-2">99.9%</h2>
                    <p class="text-muted">Uptime Network</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="300">
                <div class="stat-item">
                    <h2 class="display-4 fw-bold text-primary mb-2">24/7</h2>
                    <p class="text-muted">Customer Support</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="400">
                <div class="stat-item">
                    <h2 class="display-4 fw-bold text-primary mb-2">5+</h2>
                    <p class="text-muted">Tahun Pengalaman</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Why Choose Us Section -->
<section class="py-5 bg-light-custom">
    <div class="container">
        <div class="section-title" data-aos="fade-up">
            <h2>Mengapa Memilih Kami?</h2>
            <p>Beberapa alasan mengapa kami menjadi pilihan terbaik untuk kebutuhan internet Anda</p>
        </div>
        
        <div class="row">
            <div class="col-lg-6 mb-4" data-aos="fade-right">
                <div class="d-flex align-items-start">
                    <div class="service-icon me-4" style="width: 60px; height: 60px; font-size: 1.5rem;">
                        <i class="fas fa-rocket"></i>
                    </div>
                    <div>
                        <h5>Kecepatan Tinggi</h5>
                        <p class="text-muted">
                            Nikmati browsing, streaming, dan download dengan kecepatan maksimal 
                            yang stabil sepanjang hari.
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-6 mb-4" data-aos="fade-left">
                <div class="d-flex align-items-start">
                    <div class="service-icon me-4" style="width: 60px; height: 60px; font-size: 1.5rem;">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <div>
                        <h5>Keamanan Terjamin</h5>
                        <p class="text-muted">
                            Sistem keamanan berlapis dengan firewall dan monitoring 24/7 
                            untuk melindungi data Anda.
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-6 mb-4" data-aos="fade-right">
                <div class="d-flex align-items-start">
                    <div class="service-icon me-4" style="width: 60px; height: 60px; font-size: 1.5rem;">
                        <i class="fas fa-headset"></i>
                    </div>
                    <div>
                        <h5>Support 24/7</h5>
                        <p class="text-muted">
                            Tim support yang siap membantu Anda kapan saja dengan respon 
                            cepat dan solusi tepat.
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-6 mb-4" data-aos="fade-left">
                <div class="d-flex align-items-start">
                    <div class="service-icon me-4" style="width: 60px; height: 60px; font-size: 1.5rem;">
                        <i class="fas fa-dollar-sign"></i>
                    </div>
                    <div>
                        <h5>Harga Terjangkau</h5>
                        <p class="text-muted">
                            Paket berlangganan dengan harga kompetitif dan tidak ada biaya 
                            tersembunyi.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@if($galeri && $galeri->count() > 0)
<!-- Gallery Preview Section -->
<section class="py-5">
    <div class="container">
        <div class="section-title" data-aos="fade-up">
            <h2>Galeri Kami</h2>
            <p>Dokumentasi layanan dan aktivitas kami</p>
        </div>
        
        <div class="row">
            @foreach($galeri as $item)
                <div class="col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="{{ $loop->iteration * 100 }}">
                    <div class="gallery-item">
                        <img src="{{ $item->gambar_url }}" alt="{{ $item->judul }}">
                        <div class="gallery-overlay">
                            <i class="fas fa-search-plus"></i>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        
        <div class="text-center" data-aos="fade-up">
            <a href="{{ route('website.galeri') }}" class="btn btn-outline-primary btn-lg">
                <i class="fas fa-images me-2"></i> Lihat Semua Galeri
            </a>
        </div>
    </div>
</section>
@endif

<!-- Widgets Section -->
@if($widgets && $widgets->count() > 0)
<section class="py-5 bg-light-custom">
    <div class="container">
        <div class="row">
            @foreach($widgets as $widget)
                @if($widget->posisi === 'homepage')
                    <div class="col-lg-{{ 12 / min($widgets->count(), 3) }} mb-4" data-aos="fade-up" data-aos-delay="{{ $loop->iteration * 100 }}">
                        <div class="card h-100 border-0 shadow-sm">
                            <div class="card-body">
                                <h5 class="card-title text-primary">{{ $widget->judul }}</h5>
                                <div class="card-text">
                                    {!! $widget->konten !!}
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            @endforeach
        </div>
    </div>
</section>
@endif

<!-- CTA Section -->
<section class="py-5 text-white" style="background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);">
    <div class="container text-center">
        <div class="row justify-content-center">
            <div class="col-lg-8" data-aos="fade-up">
                <h2 class="mb-4">Siap Berlangganan?</h2>
                <p class="lead mb-4">
                    Dapatkan koneksi internet terbaik sekarang juga! Hubungi kami untuk informasi 
                    paket dan promo menarik.
                </p>
                <div class="d-flex gap-3 justify-content-center flex-wrap">
                    @if($perusahaan && $perusahaan->wa_owner)
                        <a href="https://wa.me/{{ $perusahaan->wa_owner }}" class="btn btn-light btn-lg">
                            <i class="fab fa-whatsapp me-2"></i> WhatsApp
                        </a>
                    @endif
                    <a href="{{ route('website.kontak') }}" class="btn btn-outline-light btn-lg">
                        <i class="fas fa-envelope me-2"></i> Kontak Kami
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
// Ensure jQuery is loaded, if not use vanilla JS
function initInvoiceSearch() {
    if (typeof $ === 'undefined') {
        console.error('jQuery not loaded, using vanilla JavaScript fallback');
        initInvoiceSearchVanilla();
        return;
    }
    
$(document).ready(function() {
    // Handle invoice search form submission
    $('#invoiceSearchForm').on('submit', function(e) {
        e.preventDefault();
        
        const searchInput = $('#searchInput');
        const searchBtn = $('#searchBtn');
        const btnText = searchBtn.find('.btn-text');
        const spinner = searchBtn.find('.spinner-border');
        const searchResults = $('#searchResults');
        const noResults = $('#noResults');
        const resultsContainer = $('#resultsContainer');
        
        // Validate input
        const searchValue = searchInput.val().trim();
        if (searchValue.length < 3) {
            alert('Masukkan minimal 3 karakter untuk pencarian');
            return;
        }
        
        // Show loading state
        searchBtn.prop('disabled', true);
        btnText.text('Mencari...');
        spinner.removeClass('d-none');
        searchResults.addClass('d-none');
        noResults.addClass('d-none');
        
        // Make AJAX request
        $.ajax({
            url: '{{ route("website.cari-invoice") }}',
            method: 'POST',
            data: {
                search: searchValue,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.success && response.data.length > 0) {
                    displaySearchResults(response.data);
                    searchResults.removeClass('d-none');
                } else {
                    noResults.removeClass('d-none');
                }
            },
            error: function(xhr) {
                let errorMessage = 'Terjadi kesalahan saat mencari invoice';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                alert(errorMessage);
            },
            complete: function() {
                // Reset button state
                searchBtn.prop('disabled', false);
                btnText.text('Cari Invoice');
                spinner.addClass('d-none');
            }
        });
    });
    
    // Function to display search results
    function displaySearchResults(invoices) {
        const resultsContainer = $('#resultsContainer');
        let html = '';
        
        invoices.forEach(function(invoice, index) {
            const statusClass = getStatusClass(invoice.status_pembayaran);
            const statusText = getStatusText(invoice.status_pembayaran);
            
            html += `
                <div class="card mb-3 invoice-card" data-aos="fade-up" data-aos-delay="${index * 100}">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <div class="d-flex align-items-start">
                                    <div class="me-3">
                                        <i class="fas fa-file-invoice text-primary" style="font-size: 2rem;"></i>
                                    </div>
                                    <div>
                                        <h6 class="mb-1 fw-bold">${invoice.nomor_invoice}</h6>
                                        <p class="mb-1 text-muted">
                                            <i class="fas fa-user me-1"></i>
                                            ${invoice.pelanggan.nama}
                                        </p>
                                        <p class="mb-1 text-muted">
                                            <i class="fas fa-id-card me-1"></i>
                                            ${invoice.pelanggan.nomor_layanan}
                                        </p>
                                        <small class="text-muted">
                                            <i class="fas fa-calendar me-1"></i>
                                            ${formatDate(invoice.tanggal_invoice)} - 
                                            Jatuh Tempo: ${formatDate(invoice.tanggal_jatuh_tempo)}
                                        </small>
                                    </div>
                                </div>
                            </div>
                                                         <div class="col-md-4 text-md-end">
                                 <div class="mb-2">
                                     <span class="badge ${statusClass} fs-6">${statusText}</span>
                                 </div>
                                 <div class="mb-3">
                                     <strong class="text-primary fs-5">Rp ${formatNumber(invoice.total)}</strong>
                                 </div>
                                 <div class="d-flex gap-2 justify-content-md-end">
                                     <button class="btn btn-outline-primary btn-sm" onclick="viewInvoiceDetail(${invoice.id})">
                                         <i class="fas fa-eye me-1"></i> Detail
                                     </button>
                                     <a href="${getDownloadUrl(invoice.id)}" target="_blank" class="btn btn-primary btn-sm">
                                         <i class="fas fa-download me-1"></i> Download
                                     </a>
                                 </div>
                             </div>
                        </div>
                    </div>
                </div>
            `;
        });
        
        resultsContainer.html(html);
    }
    
    // Helper functions
         function getStatusClass(status) {
         switch(status) {
             case 'paid': return 'bg-success';
             case 'sent': return 'bg-warning text-dark';
             case 'pending': return 'bg-warning text-dark';
             case 'overdue': return 'bg-danger';
             case 'cancelled': return 'bg-secondary';
             case 'draft': return 'bg-info';
             default: return 'bg-warning text-dark';
         }
     }
    
         function getStatusText(status) {
         switch(status) {
             case 'paid': return 'Lunas';
             case 'sent': return 'Belum Bayar';
             case 'pending': return 'Belum Bayar';
             case 'overdue': return 'Terlambat';
             case 'cancelled': return 'Dibatalkan';
             case 'draft': return 'Draft';
             default: return 'Belum Bayar';
         }
     }
    
    function formatDate(dateString) {
        const date = new Date(dateString);
        return date.toLocaleDateString('id-ID');
    }
    
    function formatNumber(number) {
        return new Intl.NumberFormat('id-ID').format(number);
    }
    
    function getDownloadUrl(invoiceId) {
        return '{{ url("/invoices") }}/' + invoiceId + '/download';
    }
    
    // View invoice detail function
    window.viewInvoiceDetail = function(invoiceId) {
        // Show loading modal or similar
        const modal = `
            <div class="modal fade" id="invoiceDetailModal" tabindex="-1">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">
                                <i class="fas fa-file-invoice me-2"></i>
                                Detail Invoice
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body" id="invoiceDetailContent">
                            <div class="text-center py-4">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                                <p class="mt-2">Memuat detail invoice...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        // Remove existing modal if any
        $('#invoiceDetailModal').remove();
        
        // Add modal to body
        $('body').append(modal);
        
        // Show modal
        const modalElement = new bootstrap.Modal(document.getElementById('invoiceDetailModal'));
        modalElement.show();
        
        // Load invoice detail
        $.ajax({
            url: '{{ url("/invoice-detail") }}/' + invoiceId,
            method: 'GET',
            success: function(response) {
                if (response.success) {
                    displayInvoiceDetail(response.data);
                } else {
                    $('#invoiceDetailContent').html(`
                        <div class="alert alert-danger">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            ${response.message}
                        </div>
                    `);
                }
            },
            error: function(xhr) {
                $('#invoiceDetailContent').html(`
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        Gagal memuat detail invoice
                    </div>
                `);
            }
        });
    };
    
    // Display invoice detail in modal
    function displayInvoiceDetail(invoice) {
        const statusClass = getStatusClass(invoice.status_pembayaran);
        const statusText = getStatusText(invoice.status_pembayaran);
        
        const html = `
            <div class="row">
                <div class="col-md-6">
                    <h6 class="text-muted mb-2">Informasi Invoice</h6>
                    <table class="table table-borderless table-sm">
                        <tr>
                            <td width="40%">Nomor Invoice:</td>
                            <td><strong>${invoice.nomor_invoice}</strong></td>
                        </tr>
                        <tr>
                            <td>Tanggal Invoice:</td>
                            <td>${invoice.tanggal_invoice}</td>
                        </tr>
                        <tr>
                            <td>Jatuh Tempo:</td>
                            <td>${invoice.tanggal_jatuh_tempo}</td>
                        </tr>
                        <tr>
                            <td>Status:</td>
                            <td><span class="badge ${statusClass}">${statusText}</span></td>
                        </tr>
                        <tr>
                            <td>Total:</td>
                            <td><strong class="text-primary fs-5">${invoice.total_formatted}</strong></td>
                        </tr>
                    </table>
                </div>
                <div class="col-md-6">
                    <h6 class="text-muted mb-2">Informasi Pelanggan</h6>
                    <table class="table table-borderless table-sm">
                        <tr>
                            <td width="40%">Nama:</td>
                            <td><strong>${invoice.pelanggan.nama}</strong></td>
                        </tr>
                        <tr>
                            <td>Nomor Layanan:</td>
                            <td>${invoice.pelanggan.nomor_layanan}</td>
                        </tr>
                        <tr>
                            <td>Alamat:</td>
                            <td>${invoice.pelanggan.alamat}</td>
                        </tr>
                        ${invoice.layanan ? `
                        <tr>
                            <td>Layanan:</td>
                            <td>${invoice.layanan.nama}</td>
                        </tr>
                        ` : ''}
                    </table>
                </div>
            </div>
            <hr>
            <div class="text-center">
                <a href="${invoice.download_url}" target="_blank" class="btn btn-primary">
                    <i class="fas fa-download me-2"></i>
                    Download Invoice PDF
                </a>
            </div>
        `;
        
                 $('#invoiceDetailContent').html(html);
     }
});
}

// Vanilla JavaScript fallback
function initInvoiceSearchVanilla() {
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('invoiceSearchForm');
        if (!form) return;
        
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const searchInput = document.getElementById('searchInput');
            const searchBtn = document.getElementById('searchBtn');
            const btnText = searchBtn.querySelector('.btn-text');
            const spinner = searchBtn.querySelector('.spinner-border');
            const searchResults = document.getElementById('searchResults');
            const noResults = document.getElementById('noResults');
            
            const searchValue = searchInput.value.trim();
            if (searchValue.length < 3) {
                alert('Masukkan minimal 3 karakter untuk pencarian');
                return;
            }
            
            // Show loading state
            searchBtn.disabled = true;
            btnText.textContent = 'Mencari...';
            spinner.classList.remove('d-none');
            searchResults.classList.add('d-none');
            noResults.classList.add('d-none');
            
            // Make fetch request
            const formData = new FormData();
            formData.append('search', searchValue);
            formData.append('_token', '{{ csrf_token() }}');
            
            fetch('{{ route("website.cari-invoice") }}', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success && data.data.length > 0) {
                    displaySearchResultsVanilla(data.data);
                    searchResults.classList.remove('d-none');
                } else {
                    noResults.classList.remove('d-none');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Terjadi kesalahan saat mencari invoice');
            })
            .finally(() => {
                // Reset button state
                searchBtn.disabled = false;
                btnText.textContent = 'Cari Invoice';
                spinner.classList.add('d-none');
            });
        });
    });
}

function displaySearchResultsVanilla(invoices) {
    const resultsContainer = document.getElementById('resultsContainer');
    let html = '';
    
    invoices.forEach(function(invoice, index) {
        const statusClass = getStatusClassVanilla(invoice.status_pembayaran);
        const statusText = getStatusTextVanilla(invoice.status_pembayaran);
        
        html += `
            <div class="card mb-3 invoice-card">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <div class="d-flex align-items-start">
                                <div class="me-3">
                                    <i class="fas fa-file-invoice text-primary" style="font-size: 2rem;"></i>
                                </div>
                                <div>
                                    <h6 class="mb-1 fw-bold">${invoice.nomor_invoice}</h6>
                                    <p class="mb-1 text-muted">
                                        <i class="fas fa-user me-1"></i>
                                        ${invoice.pelanggan.nama}
                                    </p>
                                    <p class="mb-1 text-muted">
                                        <i class="fas fa-id-card me-1"></i>
                                        ${invoice.pelanggan.nomor_layanan}
                                    </p>
                                    <small class="text-muted">
                                        <i class="fas fa-calendar me-1"></i>
                                        ${formatDateVanilla(invoice.tanggal_invoice)} - 
                                        Jatuh Tempo: ${formatDateVanilla(invoice.tanggal_jatuh_tempo)}
                                    </small>
                                </div>
                            </div>
                        </div>
                                                 <div class="col-md-4 text-md-end">
                             <div class="mb-2">
                                 <span class="badge ${statusClass} fs-6">${statusText}</span>
                             </div>
                             <div class="mb-3">
                                 <strong class="text-primary fs-5">Rp ${formatNumberVanilla(invoice.total)}</strong>
                             </div>
                             <div class="d-flex gap-2 justify-content-md-end">
                                 <button class="btn btn-outline-primary btn-sm" onclick="alert('Detail invoice: ${invoice.nomor_invoice}')">
                                     <i class="fas fa-eye me-1"></i> Detail
                                 </button>
                                 <a href="{{ url('/invoices') }}/${invoice.id}/download" target="_blank" class="btn btn-primary btn-sm">
                                     <i class="fas fa-download me-1"></i> Download
                                 </a>
                             </div>
                         </div>
                    </div>
                </div>
            </div>
        `;
    });
    
    resultsContainer.innerHTML = html;
}

 function getStatusClassVanilla(status) {
     switch(status) {
         case 'paid': return 'bg-success';
         case 'sent': return 'bg-warning text-dark';
         case 'pending': return 'bg-warning text-dark';
         case 'overdue': return 'bg-danger';
         case 'cancelled': return 'bg-secondary';
         case 'draft': return 'bg-info';
         default: return 'bg-warning text-dark';
     }
 }
 
 function getStatusTextVanilla(status) {
     switch(status) {
         case 'paid': return 'Lunas';
         case 'sent': return 'Belum Bayar';
         case 'pending': return 'Belum Bayar';
         case 'overdue': return 'Terlambat';
         case 'cancelled': return 'Dibatalkan';
         case 'draft': return 'Draft';
         default: return 'Belum Bayar';
     }
 }

function formatDateVanilla(dateString) {
    const date = new Date(dateString);
    return date.toLocaleDateString('id-ID');
}

function formatNumberVanilla(number) {
    return new Intl.NumberFormat('id-ID').format(number);
}

// Initialize the search functionality
if (typeof $ !== 'undefined') {
    initInvoiceSearch();
} else {
    // Wait for jQuery to load or use vanilla JS
    setTimeout(function() {
        if (typeof $ !== 'undefined') {
            initInvoiceSearch();
        } else {
            initInvoiceSearchVanilla();
        }
    }, 100);
}
</script>
@endpush