@extends('layouts.auth.app')

@section('title', 'Dashboard - Tax Revenue Management')

@push('styles')
<style>
:root { color-scheme: light; }
/* Semicircle gauge */
.gauge {
    width: 200px;
    height: 100px;
    position: relative;
    overflow: hidden;
}
.gauge .slice {
    position: absolute;
    inset: 0;
    border-radius: 999px 999px 0 0;
    background:
        conic-gradient(from 180deg,
        #10b981 0deg,
        #10b981 var(--value),
        #e5e7eb var(--value)
        );
    mask: radial-gradient(100px 100px at 50% 100%, transparent 60px, #000 60px);
}
.gauge .center {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    text-align: center;
    padding-bottom: 8px;
}
/* Prevent button text wrapping */
.btn-nowrap {
    white-space: nowrap;
    flex-shrink: 0;
}
</style>
@endpush

@section('content')
<div id="dashboard-content">
    <!-- Content -->
    <section class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-6 space-y-5">
        <!-- Greeting + Search + Filter -->
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
                <div class="flex items-center gap-2 text-slate-500">
                    <i data-lucide="sun" class="h-4 w-4 text-amber-500"></i>
                    <p class="text-xs" id="current-datetime">{{ $currentDateTime ?? '' }}</p>
                </div>
                <h2 class="mt-1 text-xl md:text-2xl font-semibold tracking-tight text-slate-800" id="greeting-text">{{ $greeting ?? 'Good morning' }}, {{ $userName ?? 'User' }}</h2>
            </div>
            <!-- Filter and Search controls -->
            <div class="flex flex-col sm:flex-row gap-3 w-full md:w-auto">
                <!-- Dynamic Filter Dropdown -->
                <div class="w-full sm:w-44">
                    <select id="dataPeriodFilter" class="w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500/30 focus:border-emerald-500">
                        <option value="month" selected>This Month</option>
                        <option value="quarter">Last 3 Months</option>
                        <option value="half">Last 6 Months</option>
                    </select>
                </div>

                <!-- Global RIN Search Bar -->
                <div class="w-full sm:w-64 md:w-80">
                    <form id="globalSearchForm" onsubmit="return searchRIN(event)">
                        <div class="relative">
                            <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400 cursor-pointer" onclick="searchRIN(event)"></i>
                            <input type="text" id="txtSearch" name="RIN"
                                class="w-full rounded-lg border border-slate-200 bg-white pl-9 pr-10 py-2 text-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-emerald-500/30 focus:border-emerald-500"
                                placeholder="Search by RIN..."
                                autocomplete="off" />
                            <button type="submit" class="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-emerald-600 hover:text-emerald-700" title="Search">
                                <i data-lucide="arrow-right" class="h-4 w-4"></i>
                            </button>
                        </div>
                    </form>
                    <!-- Search status message -->
                    <div id="searchMessage" class="hidden mt-1 text-xs text-red-600"></div>
                </div>
            </div>
        </div>

        <!-- KPI Cards -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
            <!-- Revenue target -->
            <div class="rounded-xl border border-slate-200 bg-white p-4">
                <div class="flex items-start justify-between">
                    <div>
                        <h3 class="text-sm font-semibold tracking-tight text-slate-800">Revenue target</h3>
                        <p class="text-xs text-slate-500 mt-0.5" id="kpi-revenue-desc">{{ $dashboardData['period'] === 'month' ? 'Total revenue this month' : ($dashboardData['period'] === 'quarter' ? 'Total revenue last 3 months' : 'Total revenue last 6 months') }}</p>
                    </div>
                </div>
                <div class="mt-5 flex items-center justify-center">
                    @php
                        $percentage = $dashboardData['revenueTarget']['percentage'] ?? 0;
                        $arcDegrees = ($percentage / 100) * 180;
                    @endphp
                    <div class="gauge" style="--value: {{ $arcDegrees }}deg;">
                        <div class="slice"></div>
                        <div class="center">
                            <p class="text-2xl font-bold tracking-tight text-slate-800" id="kpi-percent">{{ $percentage }}%</p>
                            <p class="text-xs text-slate-500" id="kpi-desc-center">of target</p>
                        </div>
                    </div>
                </div>
                <div class="mt-5 grid grid-cols-3 gap-3 text-xs">
                    <div>
                        <p class="text-slate-500">Target</p>
                        <p class="font-semibold text-slate-700 mt-0.5" id="kpi-target">₦{{ number_format($dashboardData['revenueTarget']['target'] ?? 0) }}</p>
                    </div>
                    <div>
                        <p class="text-slate-500">Revenue</p>
                        <p class="font-semibold mt-0.5 flex items-center gap-1 {{ ($dashboardData['revenueTarget']['revenueOnTrack'] ?? false) ? 'text-emerald-600' : 'text-rose-600' }}" id="kpi-revenue">
                            ₦{{ number_format($dashboardData['revenueTarget']['revenue'] ?? 0) }}
                            <i data-lucide="{{ ($dashboardData['revenueTarget']['revenueOnTrack'] ?? false) ? 'arrow-up-right' : 'arrow-down-right' }}" class="h-3 w-3"></i>
                        </p>
                    </div>
                    <div>
                        <p class="text-slate-500">Today</p>
                        <p class="font-semibold mt-0.5 flex items-center gap-1 {{ ($dashboardData['revenueTarget']['todayOnTrack'] ?? false) ? 'text-emerald-600' : 'text-rose-600' }}" id="kpi-today">
                            ₦{{ number_format($dashboardData['revenueTarget']['today'] ?? 0) }}
                            <i data-lucide="{{ ($dashboardData['revenueTarget']['todayOnTrack'] ?? false) ? 'arrow-up-right' : 'arrow-down-right' }}" class="h-3 w-3"></i>
                        </p>
                    </div>
                </div>
                <p class="mt-3 text-xs text-slate-600" id="kpi-summary">
                    You've earned <span class="text-emerald-600 font-medium">₦{{ number_format($dashboardData['revenueTarget']['revenue'] ?? 0) }}</span> this period.
                    You're {{ ($dashboardData['revenueTarget']['percentage'] ?? 0) >= 90 ? 'exceeding' : 'on track to reach' }} your goal.
                </p>
            </div>

            <!-- Taxpayers -->
            <div class="rounded-xl border border-slate-200 bg-white p-4">
                <div class="flex items-center justify-between gap-2">
                    <div class="min-w-0">
                        <h3 class="text-sm font-semibold tracking-tight text-slate-800">Taxpayers</h3>
                        <p class="text-xs text-slate-500 mt-0.5">Total registered taxpayers</p>
                    </div>
                    <!-- Add New Taxpayer Dropdown -->
                    <div class="relative" x-data="{ open: false }">
                        <button @click="open = !open" @click.away="open = false"
                            class="btn-nowrap inline-flex items-center gap-1 rounded-md bg-emerald-600 text-white text-xs font-medium px-2.5 py-1.5 hover:bg-emerald-700 transition-colors">
                            <i data-lucide="plus" class="h-3 w-3"></i> Add New
                            <i data-lucide="chevron-down" class="h-3 w-3 ml-0.5"></i>
                        </button>
                        <div x-show="open" x-transition:enter="transition ease-out duration-100"
                            x-transition:enter-start="transform opacity-0 scale-95"
                            x-transition:enter-end="transform opacity-100 scale-100"
                            x-transition:leave="transition ease-in duration-75"
                            x-transition:leave-start="transform opacity-100 scale-100"
                            x-transition:leave-end="transform opacity-0 scale-95"
                            class="absolute right-0 mt-1 w-44 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 z-50">
                            <div class="py-1">
                                <a href="{{ route('capture.individual.list') }}?openModal=1"
                                    class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-emerald-50 hover:text-emerald-700">
                                    <span class="h-2 w-2 rounded-full bg-sky-500"></span>
                                    Individual
                                </a>
                                <a href="{{ route('capture.corporate.list') }}?openModal=1"
                                    class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-emerald-50 hover:text-emerald-700">
                                    <span class="h-2 w-2 rounded-full bg-emerald-500"></span>
                                    Corporate
                                </a>
                                <a href="{{ route('capture.government.list') }}?openModal=1"
                                    class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-emerald-50 hover:text-emerald-700">
                                    <span class="h-2 w-2 rounded-full bg-violet-500"></span>
                                    Government
                                </a>
                                <a href="{{ route('capture.special.list') }}?openModal=1"
                                    class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-emerald-50 hover:text-emerald-700">
                                    <span class="h-2 w-2 rounded-full bg-amber-500"></span>
                                    Special
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-3 grid grid-cols-2 gap-2" id="taxpayer-cards">
                    <div class="rounded-lg border border-slate-200 bg-gradient-to-br from-sky-50 to-white p-2.5">
                        <div class="flex items-center justify-between">
                            <p class="text-xs font-medium text-slate-600">Individual</p>
                            <span class="h-1.5 w-1.5 rounded-full bg-sky-500"></span>
                        </div>
                        <p class="mt-1 text-lg font-bold tracking-tight text-slate-800" id="taxpayer-individual-total">{{ number_format($dashboardData['taxpayers']['individual']['total'] ?? 0) }}</p>
                        <p class="text-[10px] {{ ($dashboardData['taxpayers']['individual']['percentage'] ?? 0) > 0 ? 'text-sky-600' : 'text-slate-500' }}" id="taxpayer-individual-pct">
                            {{ ($dashboardData['taxpayers']['individual']['percentage'] ?? 0) > 0 ? '+' : '' }}{{ $dashboardData['taxpayers']['individual']['percentage'] ?? 0 }}% this period
                        </p>
                    </div>
                    <div class="rounded-lg border border-slate-200 bg-gradient-to-br from-emerald-50 to-white p-2.5">
                        <div class="flex items-center justify-between">
                            <p class="text-xs font-medium text-slate-600">Corporate</p>
                            <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
                        </div>
                        <p class="mt-1 text-lg font-bold tracking-tight text-slate-800" id="taxpayer-corporate-total">{{ number_format($dashboardData['taxpayers']['corporate']['total'] ?? 0) }}</p>
                        <p class="text-[10px] {{ ($dashboardData['taxpayers']['corporate']['percentage'] ?? 0) > 0 ? 'text-emerald-600' : 'text-slate-500' }}" id="taxpayer-corporate-pct">
                            {{ ($dashboardData['taxpayers']['corporate']['percentage'] ?? 0) > 0 ? '+' : '' }}{{ $dashboardData['taxpayers']['corporate']['percentage'] ?? 0 }}% this period
                        </p>
                    </div>
                    <div class="rounded-lg border border-slate-200 bg-gradient-to-br from-violet-50 to-white p-2.5">
                        <div class="flex items-center justify-between">
                            <p class="text-xs font-medium text-slate-600">Government</p>
                            <span class="h-1.5 w-1.5 rounded-full bg-violet-500"></span>
                        </div>
                        <p class="mt-1 text-lg font-bold tracking-tight text-slate-800" id="taxpayer-government-total">{{ number_format($dashboardData['taxpayers']['government']['total'] ?? 0) }}</p>
                        <p class="text-[10px] {{ ($dashboardData['taxpayers']['government']['percentage'] ?? 0) > 0 ? 'text-violet-600' : 'text-slate-500' }}" id="taxpayer-government-pct">
                            {{ ($dashboardData['taxpayers']['government']['percentage'] ?? 0) > 0 ? '+' : '' }}{{ $dashboardData['taxpayers']['government']['percentage'] ?? 0 }}% this period
                        </p>
                    </div>
                    <div class="rounded-lg border border-slate-200 bg-gradient-to-br from-amber-50 to-white p-2.5">
                        <div class="flex items-center justify-between">
                            <p class="text-xs font-medium text-slate-600">Special</p>
                            <span class="h-1.5 w-1.5 rounded-full bg-amber-500"></span>
                        </div>
                        <p class="mt-1 text-lg font-bold tracking-tight text-slate-800" id="taxpayer-special-total">{{ number_format($dashboardData['taxpayers']['special']['total'] ?? 0) }}</p>
                        <p class="text-[10px] {{ ($dashboardData['taxpayers']['special']['percentage'] ?? 0) > 0 ? 'text-amber-600' : 'text-slate-500' }}" id="taxpayer-special-pct">
                            {{ ($dashboardData['taxpayers']['special']['percentage'] ?? 0) > 0 ? '+' : '' }}{{ $dashboardData['taxpayers']['special']['percentage'] ?? 0 }}% this period
                        </p>
                    </div>
                </div>

                <div class="mt-3 flex items-center justify-between text-xs">
                    <p class="text-slate-500">Total Taxpayers</p>
                    <p class="font-semibold text-slate-700" id="taxpayer-total">{{ number_format($dashboardData['taxpayers']['total'] ?? 0) }}</p>
                </div>
            </div>

            <!-- Assets -->
            <div class="rounded-xl border border-slate-200 bg-white p-4">
                <div class="flex items-center justify-between gap-2">
                    <div class="min-w-0">
                        <h3 class="text-sm font-semibold tracking-tight text-slate-800">Assets</h3>
                        <p class="text-xs text-slate-500 mt-0.5">Total registered assets</p>
                    </div>
                    <button class="btn-nowrap inline-flex items-center gap-1 rounded-md bg-emerald-600 text-white text-xs font-medium px-2.5 py-1.5 hover:bg-emerald-700 transition-colors">
                        <i data-lucide="plus" class="h-3 w-3"></i> Add New
                    </button>
                </div>

                <div class="mt-3 grid grid-cols-2 gap-2" id="asset-cards">
                    <div class="rounded-lg border border-slate-200 bg-gradient-to-br from-sky-50 to-white p-2.5">
                        <div class="flex items-center justify-between">
                            <p class="text-xs font-medium text-slate-600">Business</p>
                            <span class="h-1.5 w-1.5 rounded-full bg-sky-500"></span>
                        </div>
                        <p class="mt-1 text-lg font-bold tracking-tight text-slate-800" id="asset-business-total">{{ number_format($dashboardData['assets']['business']['total'] ?? 0) }}</p>
                        <p class="text-[10px] {{ ($dashboardData['assets']['business']['percentage'] ?? 0) > 0 ? 'text-sky-600' : 'text-slate-500' }}" id="asset-business-pct">
                            {{ ($dashboardData['assets']['business']['percentage'] ?? 0) > 0 ? '+' : '' }}{{ $dashboardData['assets']['business']['percentage'] ?? 0 }}% this period
                        </p>
                    </div>
                    <div class="rounded-lg border border-slate-200 bg-gradient-to-br from-emerald-50 to-white p-2.5">
                        <div class="flex items-center justify-between">
                            <p class="text-xs font-medium text-slate-600">Lands</p>
                            <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
                        </div>
                        <p class="mt-1 text-lg font-bold tracking-tight text-slate-800" id="asset-land-total">{{ number_format($dashboardData['assets']['land']['total'] ?? 0) }}</p>
                        <p class="text-[10px] {{ ($dashboardData['assets']['land']['percentage'] ?? 0) > 0 ? 'text-emerald-600' : 'text-slate-500' }}" id="asset-land-pct">
                            {{ ($dashboardData['assets']['land']['percentage'] ?? 0) > 0 ? '+' : '' }}{{ $dashboardData['assets']['land']['percentage'] ?? 0 }}% this period
                        </p>
                    </div>
                    <div class="rounded-lg border border-slate-200 bg-gradient-to-br from-violet-50 to-white p-2.5">
                        <div class="flex items-center justify-between">
                            <p class="text-xs font-medium text-slate-600">Buildings</p>
                            <span class="h-1.5 w-1.5 rounded-full bg-violet-500"></span>
                        </div>
                        <p class="mt-1 text-lg font-bold tracking-tight text-slate-800" id="asset-building-total">{{ number_format($dashboardData['assets']['building']['total'] ?? 0) }}</p>
                        <p class="text-[10px] {{ ($dashboardData['assets']['building']['percentage'] ?? 0) > 0 ? 'text-violet-600' : 'text-slate-500' }}" id="asset-building-pct">
                            {{ ($dashboardData['assets']['building']['percentage'] ?? 0) > 0 ? '+' : '' }}{{ $dashboardData['assets']['building']['percentage'] ?? 0 }}% this period
                        </p>
                    </div>
                    <div class="rounded-lg border border-slate-200 bg-gradient-to-br from-amber-50 to-white p-2.5">
                        <div class="flex items-center justify-between">
                            <p class="text-xs font-medium text-slate-600">Vehicles</p>
                            <span class="h-1.5 w-1.5 rounded-full bg-amber-500"></span>
                        </div>
                        <p class="mt-1 text-lg font-bold tracking-tight text-slate-800" id="asset-vehicle-total">{{ number_format($dashboardData['assets']['vehicle']['total'] ?? 0) }}</p>
                        <p class="text-[10px] {{ ($dashboardData['assets']['vehicle']['percentage'] ?? 0) > 0 ? 'text-amber-600' : 'text-slate-500' }}" id="asset-vehicle-pct">
                            {{ ($dashboardData['assets']['vehicle']['percentage'] ?? 0) > 0 ? '+' : '' }}{{ $dashboardData['assets']['vehicle']['percentage'] ?? 0 }}% this period
                        </p>
                    </div>
                </div>

                <div class="mt-3 flex items-center justify-between text-xs">
                    <p class="text-slate-500">Total Assets</p>
                    <p class="font-semibold text-slate-700" id="asset-total">{{ number_format($dashboardData['assets']['total'] ?? 0) }}</p>
                </div>
            </div>
        </div>

        <!-- Mid section - Charts -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
            <!-- Top Performing Revenue Stream -->
            <div class="rounded-xl border border-slate-200 bg-white p-4">
                <h3 class="text-sm font-semibold tracking-tight text-slate-800">Top Performing Revenue Streams</h3>
                <p class="text-xs text-slate-500 mt-0.5" id="stream-period-desc">This month</p>
                <div class="mt-3">
                    <div class="h-48">
                        <canvas id="barStreams" class="!h-48"></canvas>
                    </div>
                </div>
                <div class="mt-3 grid grid-cols-3 gap-2 text-xs" id="stream-kpis">
                    <!-- Content generated by JS -->
                </div>
            </div>

            <!-- Top Revenue Office -->
            <div class="rounded-xl border border-slate-200 bg-white p-4">
                <h3 class="text-sm font-semibold tracking-tight text-slate-800">Top Performing Revenue Office</h3>
                <p class="text-xs text-slate-500 mt-0.5" id="office-period-desc">This month</p>
                <div class="mt-3">
                    <div class="h-48">
                        <canvas id="lineOffices" class="!h-48"></canvas>
                    </div>
                </div>
                <div class="mt-3 grid grid-cols-3 gap-2 text-xs" id="office-kpis">
                    <!-- Content generated by JS -->
                </div>
            </div>

            <!-- Top Asset Contribution -->
            <div class="rounded-xl border border-slate-200 bg-white p-4">
                <h3 class="text-sm font-semibold tracking-tight text-slate-800">Top Asset Contribution</h3>
                <p class="text-xs text-slate-500 mt-0.5" id="asset-period-desc">This month</p>
                <div class="mt-3">
                    <div class="h-48">
                        <canvas id="doughnutAssets" class="!h-48"></canvas>
                    </div>
                </div>
                <div class="mt-3 grid grid-cols-3 gap-2 text-xs" id="asset-kpis">
                    <!-- Content generated by JS -->
                </div>
            </div>
        </div>

        <!-- Monthly Recurring Revenue (MRR) Chart -->
        <div class="rounded-xl border border-slate-200 bg-white p-4">
            <h3 class="text-sm font-semibold tracking-tight text-slate-800">Monthly recurring revenue</h3>
            <p class="text-xs text-slate-500 mt-0.5">MRR for the year {{ $dashboardData['mrr']['year'] ?? date('Y') }}</p>
            <div class="mt-3 h-[320px]">
                <canvas id="mrrChart"></canvas>
            </div>
        </div>
    </section>
</div>

<!-- Pass initial data to JavaScript -->
<script>
    window.dashboardData = @json($dashboardData);
    window.dashboardApiUrl = "{{ route('dashboard.data') }}";
</script>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script src="{{ asset('js/dashboard.js') }}"></script>

<!-- Global RIN Search Script (mirrors .NET jsCommon.js SearchRIN functionality) -->
<script>
/**
 * Global RIN Search Function
 * Mirrors the .NET implementation in jsCommon.js
 *
 * Searches for a taxpayer by RIN and redirects to their details page.
 */
function searchRIN(event) {
    if (event) {
        event.preventDefault();
    }

    const searchInput = document.getElementById('txtSearch');
    const searchMessage = document.getElementById('searchMessage');
    const rin = searchInput ? searchInput.value.trim() : '';

    // Hide any previous message
    if (searchMessage) {
        searchMessage.classList.add('hidden');
        searchMessage.textContent = '';
    }

    // Validate input
    if (!rin) {
        showSearchMessage('Please enter RIN before clicking search', 'error');
        if (searchInput) searchInput.focus();
        return false;
    }

    // Show loading state
    const submitBtn = document.querySelector('#globalSearchForm button[type="submit"]');
    const originalBtnHtml = submitBtn ? submitBtn.innerHTML : '';
    if (submitBtn) {
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<svg class="animate-spin h-4 w-4 text-emerald-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
    }

    // Get CSRF token
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

    // Make AJAX request
    fetch('{{ route("search.rin") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': csrfToken || ''
        },
        body: JSON.stringify({ RIN: rin })
    })
    .then(response => response.json())
    .then(data => {
        // Reset button state
        if (submitBtn) {
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalBtnHtml;
            // Re-initialize lucide icons for the button
            if (window.lucide) {
                window.lucide.createIcons();
            }
        }

        if (data.success && data.RedirectUrl) {
            // Redirect to taxpayer details page
            window.location.href = data.RedirectUrl;
        } else {
            // Show error message
            showSearchMessage(data.Message || 'Invalid Tax Payer RIN', 'error');
            if (searchInput) searchInput.focus();
        }
    })
    .catch(error => {
        console.error('Search error:', error);

        // Reset button state
        if (submitBtn) {
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalBtnHtml;
            if (window.lucide) {
                window.lucide.createIcons();
            }
        }

        showSearchMessage('An error occurred while searching. Please try again.', 'error');
    });

    return false;
}

/**
 * Display search message to user
 */
function showSearchMessage(message, type) {
    const searchMessage = document.getElementById('searchMessage');
    if (searchMessage) {
        searchMessage.textContent = message;
        searchMessage.classList.remove('hidden', 'text-red-600', 'text-green-600');

        if (type === 'error') {
            searchMessage.classList.add('text-red-600');
        } else {
            searchMessage.classList.add('text-green-600');
        }
    }
}

// Allow search on Enter key press
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('txtSearch');
    if (searchInput) {
        searchInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                searchRIN(e);
            }
        });
    }
});
</script>
@endpush