@extends('layouts.auth.app')

@section('title', 'Direct Assessment')

@section('content')
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
    <!-- Header -->
    <div class="px-6 py-4 border-b border-gray-200">
        <div class="flex items-center justify-between">
            <div>
                <h3 class="text-lg font-semibold text-gray-900">Direct Assessment</h3>
                <p class="text-sm text-gray-500 mt-1">Select a Direct Assessment profile type to view</p>
            </div>
            <div class="flex items-center space-x-4">
                <div class="text-center px-4 py-2 bg-gray-50 rounded-lg">
                    <p class="text-2xl font-bold text-gray-600" id="totalProfiles">3</p>
                    <p class="text-xs text-gray-500">Total Profiles</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Search Bar -->
    <div class="px-6 py-4 border-b border-gray-200">
        <div class="relative">
            <input type="text" id="searchInput" placeholder="Search by code, profile name, description..." class="w-full px-4 py-2 pl-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
            <svg class="absolute left-3 top-2.5 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="11" cy="11" r="8"></circle>
                <path d="m21 21-4.35-4.35"></path>
            </svg>
        </div>
    </div>

    <!-- Table -->
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-16"></th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable(1)">
                        Code
                        <span class="sort-icon ml-1"></span>
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable(2)">
                        Profile Name
                        <span class="sort-icon ml-1"></span>
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable(3)">
                        Description
                        <span class="sort-icon ml-1"></span>
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
                </tr>
            </thead>
            <tbody id="tableBody" class="divide-y divide-gray-200">
                <!-- DA -->
                <tr class="hover:bg-gray-50 transition-colors profile-row" data-code="DA" data-name="Direct Assessment" data-description="General direct assessment profiles">
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex-shrink-0 h-10 w-10 bg-emerald-100 rounded-lg flex items-center justify-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                <polyline points="14 2 14 8 20 8"></polyline>
                                <line x1="16" y1="13" x2="8" y2="13"></line>
                                <line x1="16" y1="17" x2="8" y2="17"></line>
                                <polyline points="10 9 9 9 8 9"></polyline>
                            </svg>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-100 text-emerald-800">DA</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Direct Assessment</td>
                    <td class="px-6 py-4 text-sm text-gray-500">General direct assessment profiles</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <a href="{{ route('profile.da') }}" class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-emerald-700 bg-emerald-50 rounded-lg hover:bg-emerald-100 transition-colors">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                <circle cx="12" cy="12" r="3"></circle>
                            </svg>
                            View Profile
                        </a>
                    </td>
                </tr>
                <!-- DAFBSE -->
                <tr class="hover:bg-gray-50 transition-colors profile-row" data-code="DAFBSE" data-name="DA - Formal Business - Self Employed" data-description="Self-employed formal business assessment">
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-lg flex items-center justify-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
                                <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
                            </svg>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">DAFBSE</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DA - Formal Business - Self Employed</td>
                    <td class="px-6 py-4 text-sm text-gray-500">Self-employed formal business assessment</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <a href="{{ route('profile.dafbse') }}" class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-blue-700 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                <circle cx="12" cy="12" r="3"></circle>
                            </svg>
                            View Profile
                        </a>
                    </td>
                </tr>
                <!-- DAMEBO -->
                <tr class="hover:bg-gray-50 transition-colors profile-row" data-code="DAMEBO" data-name="DA for Multi Employees Business Owners" data-description="Multi-employee business owners assessment">
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex-shrink-0 h-10 w-10 bg-purple-100 rounded-lg flex items-center justify-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                <circle cx="9" cy="7" r="4"></circle>
                                <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                                <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                            </svg>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">DAMEBO</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DA for Multi Employees Business Owners</td>
                    <td class="px-6 py-4 text-sm text-gray-500">Multi-employee business owners assessment</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <a href="{{ route('profile.damebo') }}" class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-purple-700 bg-purple-50 rounded-lg hover:bg-purple-100 transition-colors">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                <circle cx="12" cy="12" r="3"></circle>
                            </svg>
                            View Profile
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- No Results Message -->
    <div id="noResults" class="hidden px-6 py-8 text-center text-gray-500">
        No profiles found matching your search.
    </div>

    <!-- Pagination -->
    <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
        <div class="flex items-center justify-between">
            <p class="text-sm text-gray-700">
                Showing <span id="showingFrom" class="font-medium">1</span> to <span id="showingTo" class="font-medium">3</span> of <span id="totalRecords" class="font-medium">3</span> results
            </p>

            <div class="flex items-center space-x-4">
                <div class="flex items-center space-x-2">
                    <span class="text-sm text-gray-700">Show:</span>
                    <select id="itemsPerPage" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                </div>

                <div id="paginationControls" class="flex items-center space-x-1">
                    <button disabled class="px-3 py-1 text-sm bg-white border border-gray-300 rounded-md disabled:opacity-50 disabled:cursor-not-allowed">
                        Previous
                    </button>
                    <button class="px-3 py-1 text-sm bg-emerald-600 text-white border border-emerald-600 rounded-md">
                        1
                    </button>
                    <button disabled class="px-3 py-1 text-sm bg-white border border-gray-300 rounded-md disabled:opacity-50 disabled:cursor-not-allowed">
                        Next
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    let currentPage = 1;
    let itemsPerPage = 10;
    let sortColumn = -1;
    let sortDirection = 'asc';
    let allRows = [];

    document.addEventListener('DOMContentLoaded', function() {
        // Store all rows
        allRows = Array.from(document.querySelectorAll('.profile-row'));

        // Search functionality
        let searchTimeout;
        document.getElementById('searchInput').addEventListener('input', function(e) {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(function() {
                currentPage = 1;
                filterAndDisplay();
            }, 300);
        });

        // Items per page
        document.getElementById('itemsPerPage').addEventListener('change', function(e) {
            itemsPerPage = parseInt(e.target.value);
            currentPage = 1;
            filterAndDisplay();
        });

        // Initial display
        filterAndDisplay();
    });

    function filterAndDisplay() {
        const searchQuery = document.getElementById('searchInput').value.toLowerCase();

        // Filter rows
        let filteredRows = allRows.filter(row => {
            const code = row.dataset.code.toLowerCase();
            const name = row.dataset.name.toLowerCase();
            const description = row.dataset.description.toLowerCase();
            return code.includes(searchQuery) || name.includes(searchQuery) || description.includes(searchQuery);
        });

        // Sort if needed
        if (sortColumn >= 0) {
            filteredRows.sort((a, b) => {
                let aVal, bVal;
                switch(sortColumn) {
                    case 1: aVal = a.dataset.code; bVal = b.dataset.code; break;
                    case 2: aVal = a.dataset.name; bVal = b.dataset.name; break;
                    case 3: aVal = a.dataset.description; bVal = b.dataset.description; break;
                    default: return 0;
                }
                const comparison = aVal.localeCompare(bVal);
                return sortDirection === 'asc' ? comparison : -comparison;
            });
        }

        // Pagination
        const totalRecords = filteredRows.length;
        const totalPages = Math.ceil(totalRecords / itemsPerPage);
        const start = (currentPage - 1) * itemsPerPage;
        const end = Math.min(start + itemsPerPage, totalRecords);
        const paginatedRows = filteredRows.slice(start, end);

        // Hide all rows first
        allRows.forEach(row => row.style.display = 'none');

        // Show filtered and paginated rows
        paginatedRows.forEach(row => row.style.display = '');

        // Show/hide no results message
        const noResults = document.getElementById('noResults');
        const tableBody = document.getElementById('tableBody');
        if (totalRecords === 0) {
            noResults.classList.remove('hidden');
            tableBody.parentElement.classList.add('hidden');
        } else {
            noResults.classList.add('hidden');
            tableBody.parentElement.classList.remove('hidden');
        }

        // Update pagination info
        document.getElementById('showingFrom').textContent = totalRecords > 0 ? start + 1 : 0;
        document.getElementById('showingTo').textContent = end;
        document.getElementById('totalRecords').textContent = totalRecords;

        // Render pagination controls
        renderPagination(totalPages);
    }

    function sortTable(column) {
        if (sortColumn === column) {
            sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
        } else {
            sortColumn = column;
            sortDirection = 'asc';
        }

        // Update sort indicators
        document.querySelectorAll('thead th .sort-icon').forEach(icon => icon.textContent = '');
        const headers = document.querySelectorAll('thead th');
        if (headers[column]) {
            const icon = headers[column].querySelector('.sort-icon');
            if (icon) icon.textContent = sortDirection === 'asc' ? '▲' : '▼';
        }

        filterAndDisplay();
    }

    function renderPagination(totalPages) {
        const paginationControls = document.getElementById('paginationControls');

        if (totalPages === 0) {
            paginationControls.innerHTML = '';
            return;
        }

        let html = `
            <button onclick="changePage(${currentPage - 1})" ${currentPage === 1 ? 'disabled' : ''}
                class="px-3 py-1 text-sm bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                Previous
            </button>
        `;

        for (let i = 1; i <= totalPages; i++) {
            html += `
                <button onclick="changePage(${i})"
                    class="px-3 py-1 text-sm border rounded-md transition-colors ${
                        i === currentPage
                            ? 'bg-emerald-600 text-white border-emerald-600'
                            : 'bg-white border-gray-300 hover:bg-gray-50'
                    }">
                    ${i}
                </button>
            `;
        }

        html += `
            <button onclick="changePage(${currentPage + 1})" ${currentPage === totalPages ? 'disabled' : ''}
                class="px-3 py-1 text-sm bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                Next
            </button>
        `;

        paginationControls.innerHTML = html;
    }

    function changePage(page) {
        const totalRecords = document.querySelectorAll('.profile-row:not([style*="display: none"])').length ||
                            Array.from(document.querySelectorAll('.profile-row')).filter(r => {
                                const searchQuery = document.getElementById('searchInput').value.toLowerCase();
                                const code = r.dataset.code.toLowerCase();
                                const name = r.dataset.name.toLowerCase();
                                const description = r.dataset.description.toLowerCase();
                                return code.includes(searchQuery) || name.includes(searchQuery) || description.includes(searchQuery);
                            }).length;
        const totalPages = Math.ceil(totalRecords / itemsPerPage);

        if (page >= 1 && page <= totalPages) {
            currentPage = page;
            filterAndDisplay();
        }
    }
</script>
@endpush